Skip to content

[Tabs][BottomNavigation] Font icon does not update to active state for selected tabstripitem #7506

@manoldonev

Description

@manoldonev

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://&#xF10B;" class="special font-awesome font-size color"></TabStripItem>
        <!-- default font + valid char code -->
        <TabStripItem title="Second" iconSource="font://&#xF10B;"></TabStripItem>
        <!-- font family + invalid char code -->
        <TabStripItem title="Third" iconSource="font://&#xF556;" 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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions