IgniteUI
Refactor Tab component
Relevant for all themes:
- The right scroll button should go in disabled state, when you reach the end of the tabs (as the left one is disabled when you are in the beginning). Currently the right button stays enabled.
https://github.com/user-attachments/assets/2367eab1-b5b9-40a5-a706-aefd2061826f
Fluent - Light & Dark Mode
The height of the tall tab item should be 72 px, top and bottom paddings should be 10 px.
Fluent - Light Mode
-
Tab Item - Inactive, Idle - Icon color should be grays.800 (not grays.700)
.
-
Tab Item - Active, Hover: text color and icon color should be grays.900 (not grays.800)
.
-
Disabled Scroll Button - background color should be surface light (as far as I see, it’s transparent)
Fluent - Dark Mode:
-
Tab Item - Inactive, Idle - Icon color should be grays.800 (not grays.700)
-
Tab Item - Inactive/Active - Hover: background color should be grays.50 (not grays.100 0,5)
.
-
Tab Item - Active, Hover: text color and icon color should be grays.900 (not grays.800)
-
Disabled Button - background color should be surface dark (as far as I see it’s transparent) and icon color should be grays.200 (not grays.400)
vs. design:
Bootstrap - Light & Dark Mode
Tall Tab Item (Tab item with icon and text) should have top and bottom paddings of 8px (not 12px). That applies also for the short (only text) tab item, which has a 3rem min-height already implemented.
Indigo Light & Dark Mode
-
Scroll Button width should be 40px (not 48px)
-
Currently the Active Indicator appears below the tabs bottom border line. If possible, the Active Indicator should be over the bottom border.
Fluent - Light & Dark Mode The height of the tall tab item should be 72 px, top and bottom paddings should be 10 px.
@yradoeva In the UI kit when there is only text there is a 12px padding, top and bottom, when there is a text + icon or just icon the padding is 10px. I can't make it work that way here, please, pick one for all.
Fluent - Light & Dark Mode The height of the tall tab item should be 72 px, top and bottom paddings should be 10 px.
@yradoeva In the UI kit when there is only text there is a 12px padding, top and bottom, when there is a text + icon or just icon the padding is 10px. I can't make it work that way here, please, pick one for all.
@desig9stein Let's take the padding from the tall tab item (icon+text), top and bottom padding to be 10px. As far as I see, the tab item has a min-height of 2.75 rem and that way the short one (only text) will correspond to the design.
2. Currently the Active Indicator appears below the tabs bottom border line. If possible, the Active Indicator should be over the bottom border.
@yradoeva Can you confirm this one? Asking, since for me the indicator is on top of the line.
- Currently the Active Indicator appears below the tabs bottom border line. If possible, the Active Indicator should be over the bottom border.
@yradoeva Can you confirm this one? Asking, since for me the indicator is on top of the line.
Well, yes, I see it below the line, it's more visible in dark mode, and when you zoom in. I've set the line to "red" to be more clear. Not to be misunderstood, both lines should overlap with 1px, just the active indicator should be the top layer, should have higher z-index then the border line. For comparison, in Angular it looks as it should be.
https://github.com/user-attachments/assets/a01b1b6e-09bb-40d9-a0c2-a72685d2001d
Fluent - previous comments are resolved, the one thing left to check if possible, is for the Active Tab items to have different text/icon colors when in idle and in hover state. Values by design:
Fluent - Dark mode
The color of the indicator line for the Active Tab item should be primary.300.
This requires patching the breaking changes so that users can still use the component the old way but get deprecation warnings for one release.
@desig9stein Could you please take a look at the implementation once again with the latest theming package and see if there's anything outstanding? There may be some outdated designs bug-fixes that will need to be retrofitted in this PR so that we don't introduce regressions.
