feat(top-app-bar): add default scroll behavior

demos/top-app-bar.html

@@ -80,7 +80,7 @@
     </aside>
 
     <main class="demo-main">
-      <div>
+      <div id="content-main" class="mdc-top-app-bar-fixed-adjust">
         <p class="demo-paragraph">
           Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
         </p>
@@ -200,6 +200,7 @@ <h4 class="mdc-typography--subheading2 mdc-typography--adjust-margin">Short Top
         var rightItemEl = document.getElementById('right-item');
         var rightSection = document.getElementById('iconSection');
         var drawerEl = document.querySelector('.mdc-drawer');
+        var contentMainEl = document.getElementById('content-main');
 
         var drawer = new mdc.drawer.MDCTemporaryDrawer(drawerEl);
         var appBar = mdc.topAppBar.MDCTopAppBar.attachTo(appBarEl);
@@ -235,6 +236,7 @@ <h4 class="mdc-typography--subheading2 mdc-typography--adjust-margin">Short Top
         shortCheckbox.addEventListener('change', function() {
           appBarEl.classList[this.checked ? 'add' : 'remove']('mdc-top-app-bar--short');
           appBarEl.classList.remove('mdc-top-app-bar--short-has-action-item');
+          contentMainEl.classList[this.checked ? 'add' : 'remove']('mdc-top-app-bar--short-fixed-adjust');
 
           appBar.destroy();
           appBar = mdc.topAppBar.MDCTopAppBar.attachTo(appBarEl);
@@ -258,8 +260,13 @@ <h4 class="mdc-typography--subheading2 mdc-typography--adjust-margin">Short Top
 
         prominentCheckbox.addEventListener('change', function()  {
           appBarEl.classList[this.checked ? 'add' : 'remove']('mdc-top-app-bar--prominent');
+          contentMainEl.classList[this.checked ? 'add' : 'remove']('mdc-top-app-bar--prominent-fixed-adjust');
 
           shortCheckbox.disabled = this.checked;
+
+          // Needs to reset the toolbar height for the default scroll behavior
+          appBar.destroy();
+          appBar = mdc.topAppBar.MDCTopAppBar.attachTo(appBarEl);
         });
       });
   </script>

packages/mdc-top-app-bar/_mixins.scss

@@ -76,6 +76,10 @@
         padding-bottom: $mdc-top-app-bar-prominent-mobile-title-bottom-padding;
       }
     }
+
+    .mdc-top-app-bar-fixed-adjust {
+      margin-top: $mdc-top-app-bar-mobile-row-height;
+    }
   }
 }
 

packages/mdc-top-app-bar/adapter.js

@@ -47,6 +47,19 @@ class MDCTopAppBarAdapter {
    */
   hasClass(className) {}
 
+  /**
+   * Adds the specified attribute and value to the root Element.
+   * @param {string} attribute
+   * @param {string} value
+   */
+  setStyle(attribute, value) {}
+
+  /**
+   * Gets the height of the top app bar.
+   * @return {number}
+   */
+  getTopAppBarHeight() {}
+
   /**
    * Registers an event handler on the navigation icon element for a given event.
    * @param {string} type
@@ -72,6 +85,12 @@ class MDCTopAppBarAdapter {
   /** @param {function(!Event)} handler */
   deregisterScrollHandler(handler) {}
 
+  /** @param {function(!Event)} handler */
+  registerResizeHandler(handler) {}
+
+  /** @param {function(!Event)} handler */
+  deregisterResizeHandler(handler) {}
+
   /** @return {number} */
   getViewportScrollY() {}
 

packages/mdc-top-app-bar/constants.js

@@ -31,4 +31,10 @@ const cssClasses = {
   SHORT_COLLAPSED_CLASS: 'mdc-top-app-bar--short-collapsed',
 };
 
-export {strings, cssClasses};
+/** @enum {number} */
+const numbers = {
+  MAX_TOP_APP_BAR_HEIGHT: 128,
+  DEBOUNCE_THROTTLE_RESIZE_TIME: 100,
+};
+
+export {strings, cssClasses, numbers};

packages/mdc-top-app-bar/foundation.js

@@ -15,14 +15,14 @@
  * limitations under the License.
  */
 
-import {strings, cssClasses} from './constants';
+import {strings, cssClasses, numbers} from './constants';
 import MDCTopAppBarAdapter from './adapter';
 import MDCFoundation from '@material/base/foundation';
 
 /**
  * @extends {MDCFoundation<!MDCTopAppBarAdapter>}
  */
-class MDCTopAppBarFoundation extends MDCFoundation {
+class MDCTopAppBarBaseFoundation extends MDCFoundation {
   /** @return enum {string} */
   static get strings() {
     return strings;
@@ -33,6 +33,11 @@ class MDCTopAppBarFoundation extends MDCFoundation {
     return cssClasses;
   }
 
+  /** @return enum {number} */
+  static get numbers() {
+    return numbers;
+  }
+
   /**
    * {@see MDCTopAppBarAdapter} for typing information on parameters and return
    * types.
@@ -43,11 +48,15 @@ class MDCTopAppBarFoundation extends MDCFoundation {
       hasClass: (/* className: string */) => {},
       addClass: (/* className: string */) => {},
       removeClass: (/* className: string */) => {},
+      setStyle: (/* attribute: string, value: string */) => {},
+      getTopAppBarHeight: () => {},
       registerNavigationIconInteractionHandler: (/* type: string, handler: EventListener */) => {},
       deregisterNavigationIconInteractionHandler: (/* type: string, handler: EventListener */) => {},
       notifyNavigationIconClicked: () => {},
       registerScrollHandler: (/* handler: EventListener */) => {},
       deregisterScrollHandler: (/* handler: EventListener */) => {},
+      registerResizeHandler: (/* handler: EventListener */) => {},
+      deregisterResizeHandler: (/* handler: EventListener */) => {},
       getViewportScrollY: () => /* number */ 0,
       getTotalActionItems: () => /* number */ 0,
     });
@@ -56,8 +65,8 @@ class MDCTopAppBarFoundation extends MDCFoundation {
   /**
    * @param {!MDCTopAppBarAdapter} adapter
    */
-  constructor(adapter) {
-    super(Object.assign(MDCTopAppBarFoundation.defaultAdapter, adapter));
+  constructor(/** @type {!MDCTopAppBarAdapter} */ adapter) {
+    super(Object.assign(MDCTopAppBarBaseFoundation.defaultAdapter, adapter));
 
     this.navClickHandler_ = () => this.adapter_.notifyNavigationIconClicked();
   }
@@ -71,4 +80,4 @@ class MDCTopAppBarFoundation extends MDCFoundation {
   }
 }
 
-export default MDCTopAppBarFoundation;
+export default MDCTopAppBarBaseFoundation;

packages/mdc-top-app-bar/index.js

@@ -16,15 +16,16 @@
  */
 
 import MDCTopAppBarAdapter from './adapter';
-import MDCTopAppBarFoundation from './foundation';
+import MDCTopAppBarBaseFoundation from './foundation';
 import MDCComponent from '@material/base/component';
 import {MDCRipple} from '@material/ripple/index';
 import {cssClasses, strings} from './constants';
 import * as util from './util';
 import MDCShortTopAppBarFoundation from './short/foundation';
+import MDCTopAppBarFoundation from './standard/foundation';
 
 /**
- * @extends {MDCComponent<!MDCTopAppBarFoundation>}
+ * @extends {MDCComponent<!MDCTopAppBarBaseFoundation>}
  * @final
  */
 class MDCTopAppBar extends MDCComponent {
@@ -68,14 +69,16 @@ class MDCTopAppBar extends MDCComponent {
   }
 
   /**
-   * @return {!MDCTopAppBarFoundation}
+   * @return {!MDCTopAppBarBaseFoundation}
    */
   getDefaultFoundation() {
     /** @type {!MDCTopAppBarAdapter} */
     const adapter = /** @type {!MDCTopAppBarAdapter} */ (Object.assign({
       hasClass: (className) => this.root_.classList.contains(className),
       addClass: (className) => this.root_.classList.add(className),
       removeClass: (className) => this.root_.classList.remove(className),
+      setStyle: (attribute, value) => this.root_.style.setProperty(attribute, value),
+      getTopAppBarHeight: () => this.root_.clientHeight,
       registerNavigationIconInteractionHandler: (evtType, handler) => {
         if (this.navIcon_) {
           this.navIcon_.addEventListener(evtType, handler);
@@ -91,12 +94,15 @@ class MDCTopAppBar extends MDCComponent {
       },
       registerScrollHandler: (handler) => window.addEventListener('scroll', handler, util.applyPassive()),
       deregisterScrollHandler: (handler) => window.removeEventListener('scroll', handler),
+      registerResizeHandler: (handler) => window.addEventListener('resize', handler, util.applyPassive()),
+      deregisterResizeHandler: (handler) => window.removeEventListener('resize', handler),
       getViewportScrollY: () => window.pageYOffset,
       getTotalActionItems: () =>
         this.root_.querySelectorAll(strings.ACTION_ITEM_SELECTOR).length,
     })
     );
 
+    /** @type {!MDCTopAppBarBaseFoundation} */
     let foundation;
     if (this.root_.classList.contains(cssClasses.SHORT_CLASS)) {
       foundation = new MDCShortTopAppBarFoundation(adapter);
@@ -108,4 +114,4 @@ class MDCTopAppBar extends MDCComponent {
   }
 }
 
-export {MDCTopAppBar, MDCTopAppBarFoundation, MDCShortTopAppBarFoundation, util};
+export {MDCTopAppBar, MDCTopAppBarBaseFoundation, MDCTopAppBarFoundation, MDCShortTopAppBarFoundation, util};

packages/mdc-top-app-bar/mdc-top-app-bar.scss

@@ -27,7 +27,7 @@
   @include mdc-top-app-bar-icon-ink-color(text-primary-on-primary);
 
   display: flex;
-  position: relative;
+  position: fixed;
   flex-direction: column;
   justify-content: space-between;
   box-sizing: border-box;
@@ -145,5 +145,18 @@
   }
 }
 
+// stylelint-disable-next-line plugin/selector-bem-pattern
+.mdc-top-app-bar-fixed-adjust {
+  margin-top: $mdc-top-app-bar-row-height;
+}
+
+.mdc-top-app-bar--short-fixed-adjust {
+  margin-top: $mdc-top-app-bar-mobile-row-height;
+}
+
+.mdc-top-app-bar--prominent-fixed-adjust {
+  margin-top: $mdc-top-app-bar-prominent-row-height;
+}
+
 // Mobile Styles
 @include mdc-top-app-bar-mobile-breakpoint_;

packages/mdc-top-app-bar/short/foundation.js

@@ -15,15 +15,15 @@
  * limitations under the License.
  */
 
-import {cssClasses} from '../constants';
 import MDCTopAppBarAdapter from '../adapter';
-import MDCTopAppBarFoundation from '../foundation';
+import MDCTopAppBarBaseFoundation from '../foundation';
+import {cssClasses} from '../constants';
 
 /**
- * @extends {MDCTopAppBarFoundation<!MDCShortTopAppBarFoundation>}
+ * @extends {MDCTopAppBarBaseFoundation<!MDCShortTopAppBarFoundation>}
  * @final
  */
-class MDCShortTopAppBarFoundation extends MDCTopAppBarFoundation {
+class MDCShortTopAppBarFoundation extends MDCTopAppBarBaseFoundation {
   /**
    * @param {!MDCTopAppBarAdapter} adapter
    */
@@ -58,6 +58,7 @@ class MDCShortTopAppBarFoundation extends MDCTopAppBarFoundation {
   /**
    * Scroll handler for applying/removing the collapsed modifier class
    * on the short top app bar.
+   * @private
    */
   shortAppBarScrollHandler_() {
     const currentScroll = this.adapter_.getViewportScrollY();