mi6
[ic-top-navigation] - Slotted badge on navigation item icon overlaps with label text and focus state
Summary of the bug
When an ic-navigation-item within an ic-top-navigation has both a slotted icon and slotted badge, the badge on the icon overlaps with the text of the navigation item label. Also, when the navigation item has focus, the badge overlaps with the focus state when the menu is open in mobile mode.
🪜 How to reproduce
- View an ic-top-navigation that has an ic-navigation-item with a slotted icon and slotted badge.
- View both with and without focus on the navigation item.
📸 Screenshots or code
With focus:
Additional info
The issue is not seen on ic-navigation-items within ic-side-navigation:
I have looked at Figma and the "Badges - Component Contribution" file contains some designs for how badges behave on the top nav and side nav components, but I could not see designs for how the behaviour changes between expanded / collapsed states and on different screen sizes. Taking the available designs, and the designs for badges on other components like tabs and popover menus, into consideration, I believe the changes below should be implemented.
There are a couple of things which need sorting as part of this ticket.
1. The gap between the slotted icon and the text on top navigation On nav items in the top navigation component, the gap needs increasing to be 8px, to match nav items on the side navigation component.
2. Badges on top navigation a) Badges aren't displayed at all on top navigation items when there is not a slotted icon so this will need resolving.
b) The position of badges - they get displayed in relation to the icon rather than the nav item as a whole. The three options for the position prop should work like they do on tabs when the top navigation is on a large / desktop screen:
c) Badges when on small screens - when on nav items in the flyout menu on a top navigation on a small screen, the badges should go to the "inline" position (overriding the position chosen by the developer, as they will otherwise be cut off at the side of the screen if set to "near" or "far" positions).
Badges on the side navigation component should be displayed inline too when expanded (like point 2c above). #3079 has been created for this. #3098 has been created for a similar issue with navigation buttons on top navigation components.
