feat(tab): Update layout; Add fixed-width mixin; Add min-width class #3220
Conversation
packages/mdc-tab/README.md
Outdated
| @@ -104,6 +105,7 @@ Mixin | Description | |||
| `mdc-tab-text-label-color($color)` | Customizes the color of the tab text label. | |||
| `mdc-tab-icon-color($color)` | Customizes the color of the tab icon. | |||
| `mdc-tab-parent-positioning` | Sets the positioning of the MDCTab's parent element so that `MDCTab.computeDimensions()` reports the same values in all browsers. | |||
| `mdc-tab-fixed-width($width)` | Sets the fixed width of the tab. The tab will never be smaller than the given width, although it may be larger if the content of the tab is larger than the given width. | |||
There was a problem hiding this comment.
Should this be named mdc-tab-min-width instead?
There was a problem hiding this comment.
It does set the tab to a fixed width from which it won't grow or shrink. I think min-width isn't quite as accurate.
packages/mdc-tab/mdc-tab.scss
Outdated
| justify-content: center; | ||
| height: inherit; | ||
| pointer-events: none; | ||
| z-index: 2; | ||
| } | ||
|
|
||
| .mdc-tab__text-label, | ||
| .mdc-tab__icon { | ||
| z-index: 2; |
Codecov Report
@@ Coverage Diff @@
## feat/tabs/tabs #3220 +/- ##
===============================================
Coverage 98.27% 98.27%
===============================================
Files 114 114
Lines 4818 4818
Branches 602 602
===============================================
Hits 4735 4735
Misses 83 83Continue to review full report at Codecov.
|
|
The z-index on the text label and icon that you originally asked about was to fix layering issues when an icon tab indicator was placed inside the tab content. In those cases, the icon tab indicator would appear "on top" of the text label and the icon. By removing the z-index from the tab content and instead applying it directly to the text label and the icon, we can get the original intention and solve the layering problem I originally set out to solve, and with no additional z-index properties. Yay! |
…al-components/material-components-web into feat/tabs/tabs-tab-layout-updates
|
All 128 screenshot tests passed for commit 284fe41 vs. |
WIP fixed bg coloring of icons fix(tab-indicator): Use absolute positioning (#2547) WIP start of tab scroller WIP fixed transition duration WIP progress on scroller WIP added demos back chore(tabs): Removed tab scroller feat(tabs): Add tab indicator inside tab (#2565) feat(tab-scroller): Add tab scroller (#2577) Merge master into feat/tabs/tabs (#3096) feat(tab): Update tab color and typography (#3108) docs(tabs): Update metadata and synopses (#3117) feat(tab): Add MDCTabDimensions computation (#3122) feat(tab): Emit selection and activation events (#3139) docs(tabs): Update new READMEs to match standard (#3142) feat(tab): Give focus to tab when activated (#3164) feat(tab): Add mixin for parent positioning; Use mixin in tab scroller (#3179) fix(tabs): Suppress area occupied by scrollbar on platforms that show it (#3149) fix(tab): Remove extraneous padding from the stacked text label in LTR (#3193) feat(tabs): Add missing docs and create helper util API (#3194) Merge master into feat/tabs/tabs (#3227) feat(tab): Update layout; Add fixed-width mixin; Add min-width class (#3220) fix(tab-scroller): Fix incorrect animation stopping scroll value in RTL (#3237) feat(tab-scroller): Add scroll content width method for use in tab bar (#3222) feat(tab): Remove activation event emitting (#3242) feat(tab-bar): Add tab bar (#3229)
Update the layout to rely more directly on flexbox positioning instead of padding. Add a mixin for setting a tab to a fixed width. Add a class to make a tab shrink to the narrowest possible width.