material-components · patrickrodee · Jul 27, 2018 · Apr 16, 2018 · Apr 16, 2018 · Apr 16, 2018
diff --git a/demos/tab-bar.html b/demos/tab-bar.html
diff --git a/demos/tab-bar.scss b/demos/tab-bar.scss
@@ -0,0 +1,68 @@
+//
+// 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/mdc-tab";
+@import "../packages/mdc-tab/mixins";
+@import "../packages/mdc-tab-indicator/mdc-tab-indicator";
+@import "../packages/mdc-tab-indicator/mixins";
+@import "../packages/mdc-tab-scroller/mdc-tab-scroller";
+@import "../packages/mdc-tab-bar/mdc-tab-bar";
+@import "../packages/mdc-tab-bar/mixins";
+@import "../packages/mdc-elevation/mixins";
+@import "../packages/mdc-ripple/mixins";
+@import "../packages/mdc-theme/color-palette";
+
+.demo {
+  display: flex;
+  align-items: center;
+}
+
+.hero-demo-tab-bar {
+  @include mdc-tab-bar-width(420px);
+}
+
+.custom-demo-tab-bar {
+  .mdc-tab {
+    @include mdc-typography(subtitle1);
+    @include mdc-tab-fixed-width(120px);
+    @include mdc-tab-text-label-color($material-color-blue-600);
+    @include mdc-tab-icon-color($material-color-blue-600);
+  }
+
+  .mdc-tab__ripple {
+    @include mdc-states($material-color-yellow-700);
+  }
+
+  .mdc-tab--active {
+    @include mdc-tab-text-label-color($material-color-blue-900);
+    @include mdc-tab-icon-color($material-color-blue-900);
+  }
+
+  .mdc-tab-indicator {
+    @include mdc-tab-indicator-underline-height(5px);
+    @include mdc-tab-indicator-underline-color($material-color-yellow-700);
+  }
+}
+
+.demo-controls {
+  padding: 0 16px;
+}
+
+.rtl-container {
+  margin: 24px;
+  padding: 24px;
+}
diff --git a/package.json b/package.json
@@ -192,6 +192,7 @@
           "switch",
           "tabs",
           "tab",
+          "tab-bar",
           "tab-indicator",
           "tab-scroller",
           "text-field",
@@ -230,6 +231,7 @@
     "mdc-tab",
     "mdc-tab-indicator",
     "mdc-tab-scroller",
+    "mdc-tab-bar",
     "mdc-textfield",
     "mdc-top-app-bar"
   ]

diff --git a/packages/material-components-web/index.js b/packages/material-components-web/index.js
@@ -37,9 +37,9 @@ 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 tabBar from '@material/tab-bar/index';
 import * as tabIndicator from '@material/tab-indicator/index';
 import * as tabScroller from '@material/tab-scroller/index';
-import * as tabs from '@material/tabs/index';
 import * as textField from '@material/textfield/index';
 import * as toolbar from '@material/toolbar/index';
 import * as topAppBar from '@material/top-app-bar/index';
@@ -63,11 +63,7 @@ autoInit.register('MDCList', list.MDCList);
 autoInit.register('MDCNotchedOutline', notchedOutline.MDCNotchedOutline);
 autoInit.register('MDCRadio', radio.MDCRadio);
 autoInit.register('MDCSnackbar', snackbar.MDCSnackbar);
-autoInit.register('MDCTab_', tab.MDCTab);
-autoInit.register('MDCTabIndicator', tabIndicator.MDCTabIndicator);
-autoInit.register('MDCTabScroller', tabScroller.MDCTabScroller);
-autoInit.register('MDCTab', tabs.MDCTab);
-autoInit.register('MDCTabBar', tabs.MDCTabBar);
+autoInit.register('MDCTabBar', tabBar.MDCTabBar);
 autoInit.register('MDCTextField', textField.MDCTextField);
 autoInit.register('MDCMenu', menu.MDCMenu);
 autoInit.register('MDCSelect', select.MDCSelect);
@@ -100,9 +96,9 @@ export {
   slider,
   snackbar,
   tab,
+  tabBar,
   tabIndicator,
   tabScroller,
-  tabs,
   textField,
   toolbar,
   topAppBar,

diff --git a/packages/material-components-web/material-components-web.scss b/packages/material-components-web/material-components-web.scss
@@ -42,9 +42,9 @@
 @import "@material/snackbar/mdc-snackbar";
 @import "@material/switch/mdc-switch";
 @import "@material/tab/mdc-tab";
+@import "@material/tab-bar/mdc-tab-bar";
 @import "@material/tab-indicator/mdc-tab-indicator";
 @import "@material/tab-scroller/mdc-tab-scroller";
-@import "@material/tabs/mdc-tabs";
 @import "@material/textfield/mdc-text-field";
 @import "@material/theme/mdc-theme";
 @import "@material/toolbar/mdc-toolbar";

diff --git a/packages/material-components-web/package.json b/packages/material-components-web/package.json
@@ -46,8 +46,8 @@
     "@material/snackbar": "^0.37.1",
     "@material/switch": "^0.36.1",
     "@material/tab": "^0.37.0",
+    "@material/tab-bar": "^0.0.0",
     "@material/tab-indicator": "^0.0.0",
-    "@material/tabs": "^0.37.1",
     "@material/tab-scroller": "^0.0.0",
     "@material/textfield": "^0.37.1",
     "@material/theme": "^0.35.0",

diff --git a/packages/mdc-tab-bar/README.md b/packages/mdc-tab-bar/README.md
@@ -0,0 +1,133 @@
+<!--docs:
+title: "Tab Bar"
+layout: detail
+section: components
+excerpt: "Manages a set of Tabs."
+iconId: tabs
+path: /catalog/tabs/tab-bar/
+-->
+
+# Tab Bar
+
+Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
+The Tab Bar contains the Tab Scroller and Tab components.
+
+## Design & API Documentation
+
+<ul class="icon-list">
+  <li class="icon-list-item icon-list-item--spec">
+    <a href="https://material.io/go/design-tabs">Material Design guidelines: Tabs</a>
+  </li>
+  <li class="icon-list-item icon-list-item--link">
+    <a href="https://material-components.github.io/material-components-web-catalog/#/component/tabs">Demo</a>
+  </li>
+</ul>
+
+## Installation
+
+```
+npm install @material/tab-bar
+```
+
+## Basic Usage
+
+### HTML Structure
+
+```html
+<div class="mdc-tab-bar" role="tablist">
+  <div class="mdc-tab-scroller">
+    <div class="mdc-tab-scroller__scroll-area">
+      <div class="mdc-tab-scroller__scroll-content">
+        <button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
+          <div class="mdc-tab__content">
+            <span class="mdc-tab__icon">heart</div>
+            <span class="mdc-tab__text-label">Favorites</div>
+          </div>
+          <span class="mdc-tab-indicator mdc-tab-indicator--active">
+            <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
+          </span>
+          <div class="mdc-tab__ripple"></div>
+        </button>
+      </div>
+    </div>
+  </div>
+</button>
+```
+
+### Styles
+
+```scss
+@import "@material/tab-bar/mdc-tab-bar";
+@import "@material/tab-scroller/mdc-tab-scroller";
+@import "@material/tab-indicator/mdc-tab-indicator";
+@import "@material/tab/mdc-tab";
+```
+
+### JavaScript Instantiation
+
+```js
+import {MDCTabBar} from '@material/tab-bar';
+
+const tabBar = new MDCTabBar(document.querySelector('.mdc-tab-bar'));
+```
+
+> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.
+
+## Style Customization
+
+### CSS Classes
+
+CSS Class | Description
+--- | ---
+`mdc-tab-bar` | Mandatory.
+
+### Sass Mixins
+
+To customize the width of the tab bar, use the following mixin.
+
+Mixin | Description
+--- | ---
+`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.
+
+## `MDCTabBar` Properties and Methods
+
+Method Signature | Description
+--- | ---
+`activateTab(index: number) => void` | Activates the tab at the given index.
+`scrollIntoView(index: number) => void` | Scrolls the tab at the given index into view.
+
+Event Name | Event Data Structure | Description
+--- | --- | ---
+`MDCTabBar:activated` | `{"detail": {"index": number}}` | Emitted when a Tab is activated with the index of the activated Tab. Listen for this to update content when a Tab becomes active.
+
+## Usage within Web Frameworks
+
+If you are using a JavaScript framework, such as React or Angular, you can create a Tab Bar for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).
+
+### `MDCTabBarAdapter`
+
+Method Signature | Description
+--- | ---
+`scrollTo(scrollX: number) => void` | Scrolls the Tab Scroller to the given position.
+`incrementScroll(scrollXIncrement: number) => void` | Increments the Tab Scroller by the given value.
+`getScrollPosition() => number` | Returns the scroll position of the Tab Scroller.
+`getScrollContentWidth() => number` | Returns the width of the Tab Scroller's scroll content element.
+`getOffsetWidth() => number` | Returns the offsetWidth of the root element.
+`isRTL() => boolean` | Returns if the text direction is RTL.
+`activateTabAtIndex(index: number, clientRect: ClientRect) => void` | Activates the Tab at the given index with the given clientRect.
+`deactivateTabAtIndex(index) => void` | Deactivates the Tab at the given index.
+`getTabIndicatorClientRectAtIndex(index: number) => ClientRect` | Returns the client rect of the Tab at the given index.
+`getTabDimensionsAtIndex(index) => MDCTabDimensions` | Returns the dimensions of the Tab at the given index.
+`getTabListLength() => number` | Returns the number of child Tab components.
+`getActiveTabIndex() => number` | Returns the index of the active Tab.
+`getIndexOfTab(tab: MDCTab) => number` | Returns the index of the given Tab instance.
+`notifyTabActivated(index: number) => void` | Emits the `MDCTabBar:activated` event.
+
+### `MDCTabBarFoundation`
+
+Method Signature | Description
+--- | ---
+`activateTab(index: number) => void` | Activates the Tab at the given index.
+`handleKeyDown(evt: Event) => void` | Handles the logic for the `"keydown"` event.
+`handleTabInteraction(evt: Event) => void` | Handles the logic for the `"MDCTab:interacted"` event.
+`scrollIntoView(index: number) => void` | Scrolls the Tab at the given index into view.
diff --git a/packages/mdc-tab-bar/_mixins.scss b/packages/mdc-tab-bar/_mixins.scss
@@ -0,0 +1,20 @@
+/**
+  * @license
+  * 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.
+*/
+
+@mixin mdc-tab-bar-width($width) {
+  width: $width;
+}