feat: Bottom navigation

packages/material-components-web/index.ts

@@ -24,6 +24,7 @@
 import autoInit from '@material/auto-init/index';
 import * as banner from '@material/banner/index';
 import * as base from '@material/base/index';
+import * as bottomNavigation from '@material/bottom-navigation/index';
 import * as checkbox from '@material/checkbox/index';
 import * as chips from '@material/chips/deprecated/index';
 import * as circularProgress from '@material/circular-progress/index';
@@ -57,6 +58,7 @@ import * as topAppBar from '@material/top-app-bar/index';
 
 // Register all components
 autoInit.register('MDCBanner', banner.MDCBanner);
+autoInit.register('MDCBottomNavigation', bottomNavigation.MDCBottomNavigation);
 autoInit.register('MDCCheckbox', checkbox.MDCCheckbox);
 autoInit.register('MDCChip', chips.MDCChip);
 autoInit.register('MDCChipSet', chips.MDCChipSet);
@@ -90,6 +92,7 @@ export {
   autoInit,
   banner,
   base,
+  bottomNavigation,
   checkbox,
   chips,
   circularProgress,

packages/material-components-web/material-components-web.scss

@@ -22,6 +22,7 @@
 
 @use '@material/banner/styles' as banner-styles;
 @use '@material/button/mdc-button';
+@use '@material/bottom-navigation/mdc-bottom-navigation';
 @use '@material/card/mdc-card';
 @use '@material/checkbox/mdc-checkbox';
 @use '@material/chips/deprecated/mdc-chips';

packages/material-components-web/package.json

@@ -22,6 +22,7 @@
     "@material/banner": "^13.0.0",
     "@material/base": "^13.0.0",
     "@material/button": "^13.0.0",
+    "@material/bottom-navigation": "^13.0.0",
     "@material/card": "^13.0.0",
     "@material/checkbox": "^13.0.0",
     "@material/chips": "^13.0.0",

packages/mdc-bottom-navigation/README.md

@@ -0,0 +1,34 @@
+# Bottom Navigation
+
+The [Bottom Navigation component](https://material.io/go/design-bottom-navigation) is yet to be completed, please follow the [tracking issue](https://github.com/material-components/material-components-web/issues/59) for more information.
+
+## `MDCBottomNavigation` Properties and Methods
+
+Method Signature | Description
+--- | ---
+`setScrollTarget(target: element) => void` | Sets scroll target to different DOM node (default is window).
+
+## Usage within Web Frameworks
+
+If you are using a JavaScript framework, such as React or Angular, you can create a Bottom Navigation 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).
+
+### `MDCBottomNavigationAdapter`
+
+Method Signature | Description
+--- | ---
+`addClass(className: string) => void` | Adds a class to the root element of the component.
+`removeClass(className: string) => void` | Removes a class from the root element of the component.
+`hasClass(className: string) => boolean` | Checks if the root element of the component has the given className.
+`setStyle(property: string, value: string) => void` | Sets the specified CSS property to the given value on the root element.
+`getHeight() => number` | Gets the height in px of the root element.
+`getViewportScrollY() => number` | Gets the number of pixels that the content of body is scrolled from the top of the page.
+
+### Foundations
+
+#### `MDCBottomNavigationFoundation`
+
+All foundations provide the following methods:
+
+Method Signature | Description
+--- | ---
+`handleTargetScroll() => void` | Handles `scroll` event on specified scrollTarget (defaults to `window`).

packages/mdc-bottom-navigation/_mixins.scss

@@ -0,0 +1,54 @@
+//
+// Copyright 2019 Google Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+//
+
+@import '@material/feature-targeting/functions';
+@import '@material/feature-targeting/mixins';
+@import '@material/ripple/mixins';
+@import '@material/theme/variables';
+@import '@material/theme/mixins';
+@import './variables';
+
+//
+// Public
+//
+
+@mixin mdc-bottom-navigation-fill-color($color) {
+  @include mdc-theme-prop(background-color, $color);
+}
+
+@mixin mdc-bottom-navigation-menu-ripple($query: mdc-feature-all()) {
+  @include mdc-ripple-common($query);
+
+  .mdc-bottom-navigation__menu {
+    @include mdc-ripple-surface($query);
+    @include mdc-ripple-radius-bounded($query: $query);
+    @include mdc-states(on-primary, false, $query);
+  }
+}
+
+@mixin mdc-bottom-navigation-menu-icon-color($color) {
+  @include mdc-theme-prop(color, $color);
+}
+
+@mixin mdc-bottom-navigation-menu-label-color($color) {
+  @include mdc-theme-prop(color, $color);
+}

packages/mdc-bottom-navigation/_variables.scss

@@ -0,0 +1,31 @@
+//
+// Copyright 2019 Google Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+//
+
+// Default styles
+$mdc-bottom-navigation-menu-height: 56px !default;
+$mdc-bottom-navigation-menu-min-width: 80px !default;
+$mdc-bottom-navigation-menu-max-width: 168px !default;
+$mdc-bottom-navigation-menu-vertical-padding: 12px !default;
+$mdc-bottom-navigation-menu-horizontal-padding: 8px !default;
+$mdc-bottom-navigation-label-font-size: 12px !default;
+$mdc-bottom-navigation-icon-width-height: 24px !default;
+$mdc-bottom-navigation-inactive-icon-opacity: 0.7 !default;

packages/mdc-bottom-navigation/adapter.ts

@@ -0,0 +1,61 @@
+/**
+ * @license
+ * Copyright 2019 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+/**
+ * Defines the shape of the adapter expected by the foundation.
+ * Implement this adapter for your framework of choice to delegate updates to
+ * the component in your framework of choice. See architecture documentation
+ * for more details.
+ * https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md
+ */
+export interface MDCBottomNavigationAdapter {
+  /**
+   * Adds a class to the root Element.
+   */
+  addClass(className: string): void;
+
+  /**
+   * Removes a class from the root Element.
+   */
+  removeClass(className: string): void;
+
+  /**
+   * Returns true if the root Element contains the given class.
+   */
+  hasClass(className: string): boolean;
+
+  /**
+   * Sets the specified inline style property on the root Element to the given value.
+   */
+  setStyle(property: string, value: string): void;
+
+  /**
+   * Gets the height of the root Element.
+   */
+  getHeight(): number;
+
+  /**
+   * Gets the scroll height of the viewport.
+   */
+  getViewportScrollY(): number;
+}

packages/mdc-bottom-navigation/component.ts

@@ -0,0 +1,87 @@
+/**
+ * @license
+ * Copyright 2019 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+import {MDCComponent} from '@material/base/component';
+import {SpecificEventListener} from '@material/base/types';
+import {MDCRipple, MDCRippleFactory} from '@material/ripple/component';
+import {MDCBottomNavigationAdapter} from './adapter';
+import {strings} from './constants';
+import {MDCBottomNavigationFoundation} from './foundation';
+
+export class MDCBottomNavigation extends MDCComponent<MDCBottomNavigationFoundation> {
+  static attachTo(root: Element): MDCBottomNavigation {
+    return new MDCBottomNavigation(root);
+  }
+
+  private handleTargetScroll_!: SpecificEventListener<'scroll'>;
+  private ripples_!: MDCRipple[];
+  private scrollTarget_!: EventTarget;
+
+  initialize(rippleFactory: MDCRippleFactory = (el) => MDCRipple.attachTo(el)) {
+    this.ripples_ = Array.prototype.slice
+      .call(this.root.querySelectorAll(strings.MENU_SELECTOR))
+      .map((icon) => {
+        const ripple = rippleFactory(icon);
+        ripple.unbounded = true;
+        return ripple;
+      });
+
+    this.scrollTarget_ = window;
+  }
+
+  initialSyncWithDOM() {
+    this.handleTargetScroll_ = this.foundation.handleTargetScroll.bind(this.foundation);
+    this.scrollTarget_.addEventListener('scroll', this.handleTargetScroll_ as EventListener);
+  }
+
+  destroy() {
+    this.ripples_.forEach((iconRipple) => iconRipple.destroy());
+    this.scrollTarget_.removeEventListener('scroll', this.handleTargetScroll_ as EventListener);
+    super.destroy();
+  }
+
+  setScrollTarget(target: EventTarget) {
+    this.scrollTarget_.removeEventListener('scroll', this.handleTargetScroll_ as EventListener);
+    this.scrollTarget_ = target;
+    this.handleTargetScroll_ = this.foundation.handleTargetScroll.bind(this.foundation);
+    this.scrollTarget_.addEventListener('scroll', this.handleTargetScroll_ as EventListener);
+  }
+
+  getDefaultFoundation() {
+    // DO NOT INLINE this variable. For backward compatibility, foundations take a Partial<MDCFooAdapter>.
+    // To ensure we don't accidentally omit any methods, we need a separate, strongly typed adapter variable.
+    // tslint:disable:object-literal-sort-keys Methods should be in the same order as the adapter interface.
+    const adapter: MDCBottomNavigationAdapter = {
+      hasClass: (className) => this.root.classList.contains(className),
+      addClass: (className) => this.root.classList.add(className),
+      removeClass: (className) => this.root.classList.remove(className),
+      setStyle: (property, value) => (this.root as HTMLElement).style.setProperty(property, value),
+      getHeight: () => this.root.clientHeight,
+      getViewportScrollY: () => this.scrollTarget_ === window ? (this.scrollTarget_ as Window).scrollY :
+          (this.scrollTarget_ as Element).scrollTop,
+    };
+    // tslint:enable:object-literal-sort-keys
+
+    return new MDCBottomNavigationFoundation(adapter);
+  }
+}

packages/mdc-bottom-navigation/constants.ts

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2019 Google Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+const cssClasses = {
+  ICON: 'mdc-bottom-navigation__icon',
+  LABEL: 'mdc-bottom-navigation__label',
+  LABEL_INLINE: 'mdc-bottom-navigation__label--inline',
+  MENU: 'mdc-bottom-navigation__menu',
+  MENU_ACTIVE: 'mdc-bottom-navigation__menu--active',
+  ROOT: 'mdc-bottom-navigation',
+};
+
+const strings = {
+  ICON_SELECTOR: `.${cssClasses.ICON}`,
+  LABEL_INLINE_SELECTOR: `.${cssClasses.LABEL_INLINE}`,
+  LABEL_SELECTOR: `.${cssClasses.LABEL}`,
+  MENU_ACTIVE_SELECTOR: `.${cssClasses.MENU_ACTIVE}`,
+  MENU_SELECTOR: `.${cssClasses.MENU}`,
+  ROOT_SELECTOR: `.${cssClasses.ROOT}`,
+};
+
+export {cssClasses, strings};