Merge branch 'feat/tabs/tabs' into feat/tabs/tab-scroller-updates

packages/mdc-tab/README.md

@@ -99,6 +99,7 @@ CSS Class | Description
 `mdc-tab__ripple` | Mandatory. Denotes the ripple surface for the tab.
 `mdc-tab--active` | Optional. Indicates that the tab is active.
 `mdc-tab--stacked` | Optional. Indicates that the tab icon and label should flow vertically instead of horizontally.
+`mdc-tab--min-width` | Optional. Indicates that the tab should shrink in size to be as narrow as possible without causing text to wrap.
 `mdc-tab__text-label` | Optional. Indicates an icon in the tab.
 `mdc-tab__icon` | Optional. Indicates a leading icon in the tab.
 
@@ -111,6 +112,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.
 
 ## `MDCTab` Properties and Methods
 

packages/mdc-tab/_mixins.scss

@@ -33,3 +33,7 @@
 @mixin mdc-tab-parent-positioning {
   position: relative;
 }
+
+@mixin mdc-tab-fixed-width($width) {
+  flex: 0 1 $width;
+}

packages/mdc-tab/mdc-tab.scss

@@ -46,6 +46,10 @@
   z-index: 1;
 }
 
+.mdc-tab--min-width {
+  flex: 0 1 auto;
+}
+
 .mdc-tab__ripple {
   @include mdc-ripple-surface;
   @include mdc-ripple-radius-bounded;
@@ -63,15 +67,19 @@
   @include mdc-tab-indicator-surface;
 
   display: flex;
+  align-items: center;
   justify-content: center;
   height: inherit;
   pointer-events: none;
+}
+
+.mdc-tab__text-label,
+.mdc-tab__icon {
   z-index: 2;
 }
 
 .mdc-tab__text-label {
   display: inline-block;
-  padding: 16px 0 20px;
   opacity: $mdc-tab-text-label-opacity;
   // Setting line-height here overrides the line-height from the typography
   // mixin above. The line-height needs to be overridden so that the spacing
@@ -83,7 +91,6 @@
 .mdc-tab__icon {
   width: $mdc-tab-icon-size;
   height: $mdc-tab-icon-size;
-  padding: 12px 0;
   opacity: $mdc-tab-icon-opacity;
 }
 
@@ -94,14 +101,15 @@
 .mdc-tab--stacked .mdc-tab__content {
   flex-direction: column;
   align-items: center;
+  justify-content: space-between;
 }
 
 .mdc-tab--stacked .mdc-tab__icon {
-  padding: 12px 0 8px;
+  padding-top: 12px;
 }
 
 .mdc-tab--stacked .mdc-tab__text-label {
-  padding: 0 0 16px;
+  padding-bottom: 16px;
 }
 
 // The [de]activation animation affects color for text label and icon