feat(tab): Add MDCTab component (#2421)

Adds a new `MDCTab` component but doesn't publish it on NPM
material-components · Mar 20, 2018 · a8b3193 · a8b3193
1 parent 87ececa
commit a8b3193
Show file tree

Hide file tree

Showing 22 changed files with 1,063 additions and 0 deletions.
diff --git a/demos/tab.html b/demos/tab.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<!--
+  Copyright 2018 Google Inc. All rights reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Tab - Material Components Catalog</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
+    <link rel="stylesheet" href="/assets/tab.css">
+    <script src="/ready.js"></script>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  </head>
+
+  <body class="mdc-typography">
+    <header class="mdc-toolbar mdc-toolbar--fixed">
+      <div class="mdc-toolbar__row">
+        <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
+          <span class="catalog-back">
+            <a href="/" class="mdc-toolbar__menu-icon"><i class="material-icons">&#xE5C4;</i></a>
+          </span>
+          <span class="mdc-toolbar__title catalog-title">Tab</span>
+        </section>
+      </div>
+    </header>
+
+    <main class="mdc-toolbar-fixed-adjust">
+      <section class="hero">
+        <button class="mdc-tab demo-tab" role="tab" data-demo="demoTabFavorite">
+          <span class="mdc-tab__content">
+            <span class="material-icons mdc-tab__icon">favorite</span>
+            <span class="mdc-tab__text-label">Favorites</span>
+          </span>
+        </button>
+        <button class="mdc-tab mdc-tab--active demo-tab" role="tab" data-demo="demoRecentsTabRecents">
+          <span class="mdc-tab__content">
+            <span class="material-icons mdc-tab__icon">phone</span>
+            <span class="mdc-tab__text-label">Recents</span>
+          </span>
+        </button>
+      </section>
+
+      <div class="rtl-container">
+        <h3>RTL</h3>
+        <div>
+          <input type="checkbox" id="rtl-checkbox"/>
+          <label for="rtl-checkbox">Enabled</label>
+        </div>
+      </div>
+
+      <section class="example">
+        <h2>Basic Tabs</h2>
+        <div class="demo">
+          <button class="mdc-tab demo-tab" role="tab" data-demo="basicTab">
+            <span class="mdc-tab__content">
+              <span class="mdc-tab__text-label">Nearby</span>
+            </span>
+          </button>
+          <div class="demo-controls">
+            <input type="checkbox" id="id0" data-controls="basicTab"/>
+            <label for="id0">Active</label>
+          </div>
+        </div>
+        <div class="demo">
+          <button class="mdc-tab demo-tab" role="tab" data-demo="basicTabWithIcon">
+            <span class="mdc-tab__content">
+              <span class="material-icons mdc-tab__icon">directions_transit</span>
+              <span class="mdc-tab__text-label">Transit</span>
+            </span>
+          </button>
+          <div class="demo-controls">
+            <input type="checkbox" id="id1" data-controls="basicTabWithIcon"/>
+            <label for="id1">Active</label>
+          </div>
+        </div>
+      </section>
+
+      <section class="example">
+        <h2>Basic Tabs with Custom Colors</h2>
+        <div class="demo">
+          <button class="mdc-tab demo-tab custom-tab1" role="tab" data-demo="customColorsTab1">
+            <span class="mdc-tab__content">
+              <span class="mdc-tab__text-label">Showtimes</span>
+            </span>
+          </button>
+          <div class="demo-controls">
+            <input type="checkbox" id="id2" data-controls="customColorsTab1"/>
+            <label for="id2">Active</label>
+          </div>
+        </div>
+        <div class="demo">
+          <button class="mdc-tab demo-tab custom-tab2" role="tab" data-demo="customColorsTab2">
+            <span class="mdc-tab__content">
+              <span class="material-icons mdc-tab__icon">directions_car</span>
+              <span class="mdc-tab__text-label">Directions</span>
+            </span>
+          </button>
+          <div class="demo-controls">
+            <input type="checkbox" id="id3" data-controls="customColorsTab2"/>
+            <label for="id3">Active</label>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <script src="/assets/material-components-web.js" async></script>
+    <script src="/assets/common.js" async></script>
+    <script>
+      demoReady(function() {
+        var demos = document.querySelectorAll('[data-demo]');
+        for (var i = 0; i < demos.length; i++) {
+          var demoName = demos[i].dataset.demo;
+          window[demoName] = new mdc.tab.MDCTab(demos[i]);
+        }
+
+        var controls = document.querySelectorAll('[data-controls]');
+        for (var i = 0; i < controls.length; i++) {
+          controls[i].addEventListener('change', function(event) {
+            var controlTarget = event.currentTarget.dataset.controls;
+            if (window[controlTarget]) {
+              window[controlTarget].active = event.currentTarget.checked;
+            }
+          });
+        }
+
+        var rtlControls = document.getElementById('rtl-checkbox');
+        rtlControls.addEventListener('change', function(event) {
+          document.body.setAttribute('dir', event.currentTarget.checked ? 'rtl': 'ltr');
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/demos/tab.scss b/demos/tab.scss
@@ -0,0 +1,60 @@
+//
+// Copyright 2018 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+@import "./common";
+@import "../packages/mdc-tab/mixins";
+@import "../packages/mdc-tab/mdc-tab";
+@import "../packages/mdc-elevation/mixins";
+@import "../packages/mdc-ripple/mixins";
+@import "../packages/mdc-theme/color-palette";
+
+.demo {
+  display: flex;
+  align-items: center;
+}
+
+.demo-tab {
+  flex: 0 1 auto;
+}
+
+.demo-controls {
+  padding: 0 16px;
+}
+
+.rtl-container {
+  margin: 24px;
+  padding: 24px;
+}
+
+.custom-tab1 {
+  @include mdc-states($material-color-yellow-a700);
+  @include mdc-tab-text-label-color($material-color-pink-600);
+
+  &.mdc-tab--active {
+    @include mdc-tab-text-label-color($material-color-cyan-600);
+  }
+}
+
+.custom-tab2 {
+  @include mdc-states($material-color-amber-a700);
+  @include mdc-tab-text-label-color($material-color-red-300);
+  @include mdc-tab-icon-color($material-color-orange-300);
+
+  &.mdc-tab--active {
+    @include mdc-tab-text-label-color($material-color-red-900);
+    @include mdc-tab-icon-color($material-color-orange-900);
+  }
+}
diff --git a/package.json b/package.json
@@ -151,6 +151,7 @@
           "snackbar",
           "switch",
           "tabs",
+          "tab",
           "text-field",
           "theme",
           "toolbar",
@@ -182,6 +183,7 @@
     "mdc-ripple",
     "mdc-selection-control",
     "mdc-slider",
+    "mdc-tab",
     "mdc-textfield",
     "mdc-top-app-bar"
   ]

diff --git a/packages/material-components-web/index.js b/packages/material-components-web/index.js
@@ -34,6 +34,7 @@ import * as select from '@material/select/index';
 import * as selectionControl from '@material/selection-control/index';
 import * as slider from '@material/slider/index';
 import * as snackbar from '@material/snackbar/index';
+import * as tab from '@material/tab/index';
 import * as tabs from '@material/tabs/index';
 import * as textField from '@material/textfield/index';
 import * as toolbar from '@material/toolbar/index';
@@ -56,6 +57,7 @@ autoInit.register('MDCLinearProgress', linearProgress.MDCLinearProgress);
 autoInit.register('MDCNotchedOutline', notchedOutline.MDCNotchedOutline);
 autoInit.register('MDCRadio', radio.MDCRadio);
 autoInit.register('MDCSnackbar', snackbar.MDCSnackbar);
+autoInit.register('MDCTab_', tab.MDCTab);
 autoInit.register('MDCTab', tabs.MDCTab);
 autoInit.register('MDCTabBar', tabs.MDCTabBar);
 autoInit.register('MDCTextField', textField.MDCTextField);
@@ -87,6 +89,7 @@ export {
   selectionControl,
   slider,
   snackbar,
+  tab,
   tabs,
   textField,
   toolbar,

diff --git a/packages/material-components-web/material-components-web.scss b/packages/material-components-web/material-components-web.scss
@@ -39,6 +39,7 @@
 @import "@material/slider/mdc-slider";
 @import "@material/snackbar/mdc-snackbar";
 @import "@material/switch/mdc-switch";
+@import "@material/tab/mdc-tab";
 @import "@material/tabs/mdc-tabs";
 @import "@material/textfield/mdc-text-field";
 @import "@material/theme/mdc-theme";

diff --git a/packages/material-components-web/package.json b/packages/material-components-web/package.json
@@ -43,6 +43,7 @@
     "@material/slider": "^0.33.0",
     "@material/snackbar": "^0.33.0",
     "@material/switch": "^0.33.0",
+    "@material/tab": "^0.0.0",
     "@material/tabs": "^0.33.0",
     "@material/textfield": "^0.33.0",
     "@material/theme": "^0.33.0",

diff --git a/packages/mdc-tab/README.md b/packages/mdc-tab/README.md
@@ -0,0 +1,96 @@
+<!--docs:
+title: "Tab"
+layout: detail
+section: components
+excerpt: "Tab is a selectable element with an active state"
+iconId: tab
+path: /catalog/tab/
+-->
+
+# Tab
+
+<!--<div class="article__asset">
+  <a class="article__asset-link"
+     href="https://material-components-web.appspot.com/tab.html">
+    <img src="{{ site.rootpath }}/images/mdc_web_screenshots/tab.png" width="363" alt="Tab screenshot">
+  </a>
+</div>-->
+
+Tab is a selectable element with an active state
+
+## Design & API Documentation
+
+<!--
+<ul class="icon-list">
+  <li class="icon-list-item icon-list-item--spec">
+    <a href="https://material.io/guidelines/components/chips.html">Material Design guidelines: Chips</a>
+  </li>
+  <li class="icon-list-item icon-list-item--link">
+    <a href="https://material-components-web.appspot.com/chips.html">Demo</a>
+  </li>
+</ul>
+-->
+
+## Installation
+```
+npm install --save @material/tab
+```
+
+## Usage
+
+### HTML Structure
+
+```html
+<button class="mdc-tab" role="tab" aria-selected="false">
+  <div class="mdc-tab__content">
+    <span class="mdc-tab__icon">heart</div>
+    <span class="mdc-tab__text-label">Favorites</div>
+  </div>
+</button>
+```
+
+### CSS Classes
+
+CSS Class | Description
+--- | ---
+`mdc-tab` | Mandatory.
+`mdc-tab--active` | Optional. Indicates that the tab is active.
+`mdc-tab__content` | Mandatory. Indicates the text label of the tab
+`mdc-tab__text-label` | Optional. Indicates an icon in the tab
+`mdc-tab__icon` | Optional. Indicates a leading icon in the tab
+
+### Sass Mixins
+
+To customize the colors of any part of the tab, use the following mixins. 
+
+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
+
+### `MDCTab`
+
+Property | Value Type | Description
+--- | --- | ---
+`active` | `boolean` | Allows getting/setting the active state of the tab
+`ripple` | `MDCRipple` | The `MDCRipple` instance for the root element that `MDCChip` initializes
+
+### `MDCTabAdapter`
+
+Method Signature | Description
+--- | ---
+`addClass(className: string) => void` | Adds a class to the root element
+`removeClass(className: string) => void` | Removes a class from the root element
+`hasClass(className: string) => boolean` | Returns true if the root element contains the given class
+`registerEventHandler(evtType: string, handler: EventListener) => void` | Registers an event listener on the root element
+`deregisterEventHandler(evtType: string, handler: EventListener) => void` | Deregisters an event listener on the root element
+`setAttr(attr: string, value: string) => void` | Sets the given attribute on the root element to the given value
+
+### `MDCTabFoundation`
+
+Method Signature | Description
+--- | ---
+`handleTransitionEnd(evt: Event) => void` | Handles the logic for the `"transitionend"` event
+`isActive() => boolean` | Returns whether the tab is active
+`activate() => void` | Activates the tab
+`deactivate() => void` | Deactivates the tab
diff --git a/packages/mdc-tab/_mixins.scss b/packages/mdc-tab/_mixins.scss
@@ -0,0 +1,31 @@
+//
+// Copyright 2018 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+@import "@material/theme/mixins";
+
+// Public mixins
+
+@mixin mdc-tab-text-label-color($color) {
+  .mdc-tab__text-label {
+    @include mdc-theme-prop(color, $color);
+  }
+}
+
+@mixin mdc-tab-icon-color($color) {
+  .mdc-tab__icon {
+    @include mdc-theme-prop(color, $color);
+  }
+}