Repository navigation
[Tabs][BottomNavigation] Font icon does not update to active state for selected tabstripitem #7506
Description
Environment
- CLI: 6.0.0
- Cross-platform modules: 6.0.1
- Android Runtime: 6.0.0
- iOS Runtime: 6.0.0
Describe the bug
Font icon does not update to active state for selected tabstripitem when "active" pseudoselector is specified.
To Reproduce
Use the following code snippet based on e2e/ui-tests-app -> bottom-navigation -> font-icons example):
<Tabs class="font-awesome"> <!-- TODO: The font-awesome class here should be removed -->
<TabStrip>
<!-- font family + font size + color -->
<TabStripItem title="First" iconSource="font://" class="special font-awesome font-size color"></TabStripItem>
<!-- default font + valid char code -->
<TabStripItem title="Second" iconSource="font://"></TabStripItem>
<!-- font family + invalid char code -->
<TabStripItem title="Third" iconSource="font://" class="font-awesome font-size"></TabStripItem>
</TabStrip>
<TabContentItem class="special">
<GridLayout>
<Label text="First View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Second View" />
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Third View" />
</GridLayout>
</TabContentItem>
</Tabs>.font-awesome {
font-family: "FontAwesome";
}
.font-size {
font-size: 36;
}
.color {
color: blue;
}
TabStripItem:active { color: red;
}Expected behavior
Font icon should respect "active" pseudoselector applied to tabstripitem.
Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.
Activity
etabakov commentedon Jul 29, 2019
Something that might be related (or not):
When I set the color property on the TabStripItem in the markup - both the icon and the text use this color. If I later change the color via code - only the title respects the set color. Repro. Mind that the 3rd TabStripItem is entirely blue in the beginning and when clicking - only the text changes its color.
PeterStaev commentedon Jul 30, 2019
Having both
background-colorandcolorset to different colors for normal and active states overcomes this issue. For example the following CSS works as expected: