feat(tab): sass color mixins (#1851)

material-components · Jan 6, 2018 · 9bb3be5 · 9bb3be5
1 parent da56619
commit 9bb3be5
Show file tree

Hide file tree

Showing 5 changed files with 181 additions and 3 deletions.
diff --git a/demos/tabs.html b/demos/tabs.html
@@ -185,6 +185,18 @@
         </fieldset>
       </section>
 
+      <section>
+        <fieldset>
+          <legend class="mdc-typography--title">Basic Tab Bar w/ Custom Label Color</legend>
+          <nav id="basic-tab-bar-custom-label-color" class="custom-label-color-tab mdc-tab-bar">
+            <a class="mdc-tab mdc-tab--active" href="#one">Item One</a>
+            <a class="mdc-tab" href="#two">Item Two</a>
+            <a class="mdc-tab" href="#three">Three</a>
+            <span class="mdc-tab-bar__indicator"></span>
+          </nav>
+        </fieldset>
+      </section>
+
       <section>
         <fieldset>
           <legend class="mdc-typography--title">CSS-Only Tab Bar</legend>
@@ -197,6 +209,18 @@
         </fieldset>
       </section>
 
+      <section>
+        <fieldset>
+          <legend class="mdc-typography--title">CSS-Only Tab Bar w/ Custom Label Color</legend>
+          <nav class="custom-label-color-tab mdc-tab-bar">
+            <a class="mdc-tab mdc-tab--active" href="#one">Item One</a>
+            <a class="mdc-tab" href="#two">Item Two</a>
+            <a class="mdc-tab" href="#three">Three</a>
+            <span class="mdc-tab-bar__indicator"></span>
+          </nav>
+        </fieldset>
+      </section>
+
       <section>
         <div class="demo-tabs__scroller">
           <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
@@ -247,6 +271,24 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
         </fieldset>
       </section>
 
+      <section>
+        <fieldset>
+          <legend class="mdc-typography--title">Icon Tab Labels w/ Custom Icon Color</legend>
+          <nav id="icon-tab-bar-custom-icon-color" class="custom-icon-color-tab mdc-tab-bar mdc-tab-bar--icon-tabs">
+            <a class="mdc-tab mdc-tab--active" href="#recents">
+              <i class="material-icons mdc-tab__icon" aria-label="Recents">phone</i>
+            </a>
+            <a class="mdc-tab" href="#favorites">
+              <i class="material-icons mdc-tab__icon" aria-label="Favorites">favorite</i>
+            </a>
+            <a class="mdc-tab" href="#nearby">
+              <i class="material-icons mdc-tab__icon" aria-label="nearby">person_pin</i>
+            </a>
+            <span class="mdc-tab-bar__indicator"></span>
+          </nav>
+        </fieldset>
+      </section>
+
       <section>
         <fieldset>
           <legend class="mdc-typography--title">CSS-Only Icon Tab Labels</legend>
@@ -265,6 +307,24 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
         </fieldset>
       </section>
 
+      <section>
+        <fieldset>
+          <legend class="mdc-typography--title">CSS-Only Icon Tab Labels w/ Custom Icon Color</legend>
+          <nav class="custom-icon-color-tab mdc-tab-bar mdc-tab-bar--icon-tabs">
+            <a class="mdc-tab mdc-tab--active" href="#recents">
+              <i class="material-icons mdc-tab__icon" aria-label="Recents">phone</i>
+            </a>
+            <a class="mdc-tab" href="#favorites">
+              <i class="material-icons mdc-tab__icon" aria-label="Favorites">favorite</i>
+            </a>
+            <a class="mdc-tab" href="#nearby">
+              <i class="material-icons mdc-tab__icon" aria-label="nearby">person_pin</i>
+            </a>
+            <span class="mdc-tab-bar__indicator"></span>
+          </nav>
+        </fieldset>
+      </section>
+
       <section>
         <fieldset>
           <legend class="mdc-typography--title">Icon &amp; Text Labels</legend>
@@ -286,6 +346,27 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
         </fieldset>
       </section>
 
+      <section>
+        <fieldset>
+          <legend class="mdc-typography--title">Icon &amp; Text Labels w/ Custom Colors</legend>
+          <nav id="icon-text-tab-bar-custom-colors" class="custom-ink-color-tab mdc-tab-bar mdc-tab-bar--icons-with-text">
+            <a class="mdc-tab mdc-tab--with-icon-and-text mdc-tab--active" href="#recents">
+              <i class="material-icons mdc-tab__icon" aria-hidden="true">phone</i>
+              <span class="mdc-tab__icon-text">Recents</span>
+            </a>
+            <a class="mdc-tab mdc-tab--with-icon-and-text" href="#favorites">
+              <i class="material-icons mdc-tab__icon" aria-hidden="true">favorite</i>
+              <span class="mdc-tab__icon-text">Favorites</span>
+            </a>
+            <a class="mdc-tab mdc-tab--with-icon-and-text" href="#nearby">
+              <i class="material-icons mdc-tab__icon" aria-hidden="true">person_pin</i>
+              <span class="mdc-tab__icon-text">Nearby</span>
+            </a>
+            <span class="mdc-tab-bar__indicator"></span>
+          </nav>
+        </fieldset>
+      </section>
+
       <section>
         <fieldset>
           <legend class="mdc-typography--title">CSS-Only Icon &amp; Text Labels</legend>
@@ -307,6 +388,27 @@ <h2 class="mdc-typography--title demo-title">Tab Bar with Scroller</h2>
           <fieldset>
       </section>
 
+      <section>
+        <fieldset>
+          <legend class="mdc-typography--title">CSS-Only Icon &amp; Text Labels w/ Custom Colors</legend>
+          <nav class="custom-ink-color-tab mdc-tab-bar mdc-tab-bar--icons-with-text">
+            <a class="mdc-tab mdc-tab--with-icon-and-text mdc-tab--active" href="#recents">
+              <i class="material-icons mdc-tab__icon" aria-hidden="true">phone</i>
+              <span class="mdc-tab__icon-text">Recents</span>
+            </a>
+            <a class="mdc-tab mdc-tab--with-icon-and-text" href="#favorites">
+              <i class="material-icons mdc-tab__icon" aria-hidden="true">favorite</i>
+              <span class="mdc-tab__icon-text">Favorites</span>
+            </a>
+            <a class="mdc-tab mdc-tab--with-icon-and-text" href="#nearby">
+              <i class="material-icons mdc-tab__icon" aria-hidden="true">person_pin</i>
+              <span class="mdc-tab__icon-text">Nearby</span>
+            </a>
+            <span class="mdc-tab-bar__indicator"></span>
+          </nav>
+          <fieldset>
+      </section>
+
       <section>
         <fieldset>
           <legend class="mdc-typography--title">Primary Color Indicator</legend>
@@ -578,9 +680,12 @@ <h1 class="mdc-toolbar__title">Title</h1>
 
           window.demoTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#demo-tab-bar'));
           window.basicTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#basic-tab-bar'));
+          window.basicTabBarCustomLabel = new mdc.tabs.MDCTabBar(document.querySelector('#basic-tab-bar-custom-label-color'));
           window.tabBarScroller = new mdc.tabs.MDCTabBarScroller(document.querySelector('#tab-bar-scroller'));
           window.iconTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#icon-tab-bar'));
+          window.iconTabBarCustomIcon = new mdc.tabs.MDCTabBar(document.querySelector('#icon-tab-bar-custom-icon-color'));
           window.iconTextTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#icon-text-tab-bar'));
+          window.iconTextTabBarLabel = new mdc.tabs.MDCTabBar(document.querySelector('#icon-text-tab-bar-custom-colors'));
           window.toolbarTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#toolbar-tab-bar'));
           window.toolbarTabBarModified = new mdc.tabs.MDCTabBar(document.querySelector('#toolbar-tab-bar-modified'));
           window.primaryIndicatorTabBar = new mdc.tabs.MDCTabBar(document.querySelector('#primary-indicator-tab-bar'));
@@ -651,10 +756,13 @@ <h1 class="mdc-toolbar__title">Title</h1>
 
             window.demoTabBar.layout();
             window.basicTabBar.layout();
+            window.basicTabBarCustomLabel.layout();
             window.tabBarScroller.layout();
             window.tabBarScroller.tabBar.layout();
+            window.iconTabBarCustomIcon.layout();
             window.iconTabBar.layout();
             window.iconTextTabBar.layout();
+            window.iconTextTabBarLabel.layout();
             window.toolbarTabBar.layout();
             window.primaryIndicatorTabBar.layout();
             window.secondaryIndicatorTabBar.layout();

diff --git a/demos/tabs.scss b/demos/tabs.scss
@@ -15,5 +15,45 @@
 //
 
 @import "./common";
+@import "../packages/mdc-tabs/tab/mixins";
 @import "../packages/mdc-button/mdc-button";
 @import "../packages/mdc-tabs/mdc-tabs";
+
+.custom-label-color-tab {
+  .mdc-tab:not(.mdc-tab--active) {
+    @include mdc-tab-label-ink-color($material-color-deep-purple-200);
+  }
+}
+
+.custom-label-color-tab {
+  .mdc-tab--active,
+  .mdc-tab:hover {
+    @include mdc-tab-label-ink-color($material-color-indigo-500);
+  }
+}
+
+.custom-icon-color-tab {
+  .mdc-tab:not(.mdc-tab--active) {
+    @include mdc-tab-icon-ink-color($material-color-deep-purple-200);
+  }
+}
+
+.custom-icon-color-tab {
+  .mdc-tab--active,
+  .mdc-tab:hover {
+    @include mdc-tab-icon-ink-color($material-color-indigo-500);
+  }
+}
+
+.custom-ink-color-tab{
+  .mdc-tab:not(.mdc-tab--active) {
+    @include mdc-tab-ink-color($material-color-deep-purple-200);
+  }
+}
+
+.custom-ink-color-tab {
+  .mdc-tab--active,
+  .mdc-tab:hover {
+    @include mdc-tab-ink-color($material-color-indigo-500);
+  }
+}
diff --git a/packages/mdc-tabs/README.md b/packages/mdc-tabs/README.md
@@ -211,6 +211,19 @@ dots.addEventListener('click', function (evt) {
 })
 ```
 
+### Sass Mixins
+
+To customize the ink color of any part of the tab, use the following mixins. We recommend you apply these mixins within CSS selectors like `.foo-tab:not(.mdc-tab--active)` to select your inactive tabs, `foo-tab:hover` to select the hover state of your tabs, and `.foo-tab.mdc-tab--active` to select your active tabs.
+
+#### `mdc-tab-ink-color`
+Use this mixin to set the color of all ink on the tab.
+
+#### `mdc-tab-icon-ink-color`
+This mixin customizes the icon ink color.
+
+#### `mdc-tab-label-ink-color`
+This mixin customizes the label ink color.
+
 ### Using the CSS-Only Component
 
 `mdc-tab-bar` ships with css for styling a tab layout according to the Material

diff --git a/packages/mdc-tabs/tab/_mixins.scss b/packages/mdc-tabs/tab/_mixins.scss
@@ -0,0 +1,16 @@
+@import "@material/theme/mixins";
+
+@mixin mdc-tab-ink-color($color) {
+  @include mdc-tab-label-ink-color($color);
+  @include mdc-tab-icon-ink-color($color);
+}
+
+@mixin mdc-tab-label-ink-color($color) {
+  @include mdc-theme-prop(color, $color);
+}
+
+@mixin mdc-tab-icon-ink-color($color) {
+  .mdc-tab__icon {
+    @include mdc-theme-prop(color, $color);
+  }
+}
diff --git a/packages/mdc-tabs/tab/mdc-tab.scss b/packages/mdc-tabs/tab/mdc-tab.scss
@@ -20,6 +20,7 @@
 @import "@material/ripple/common";
 @import "@material/ripple/mixins";
 @import "@material/rtl/mixins";
+@import "./mixins";
 
 $mdc-tab-with-text-height: 48px;
 $mdc-tab-with-icon-and-text-height: 72px;
@@ -32,6 +33,7 @@ $mdc-tab-with-icon-and-text-height: 72px;
 // postcss-bem-linter: define tab
 .mdc-tab {
   @include mdc-typography(body2);
+  @include mdc-tab-ink-color(text-secondary-on-light);
 
   display: table-cell;
   position: relative;
@@ -46,10 +48,9 @@ $mdc-tab-with-icon-and-text-height: 72px;
   overflow: hidden;
   vertical-align: middle;
 
-  @include mdc-theme-prop(color, text-secondary-on-light);
 
   &:hover {
-    @include mdc-theme-prop(color, text-primary-on-light);
+    @include mdc-tab-ink-color(text-primary-on-light);
   }
 
   &:focus {
@@ -97,7 +98,7 @@ $mdc-tab-with-icon-and-text-height: 72px;
 }
 
 .mdc-tab--active {
-  @include mdc-theme-prop(color, text-primary-on-light);
+  @include mdc-tab-ink-color(text-primary-on-light);
 
   @include mdc-theme-dark(".mdc-tab-bar") {
     @include mdc-theme-prop(color, text-primary-on-dark);