feat(tab-scroller): Add scroll content width method for use in tab bar (

#3222)

packages/mdc-tab-scroller/README.md

@@ -65,6 +65,9 @@ CSS Class | Description
 `mdc-tab-scroller` | Mandatory. Contains the tab scroller content.
 `mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.
 `mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.
+`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.
+`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.
+`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.
 
 ## `MDCTabScroller` Methods
 
@@ -73,6 +76,7 @@ Method Signature | Description
 `scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.
 `incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value.
 `getScrollPosition() => number` | Returns the current visual scroll position.
+`getScrollContentWidth() => number` | Returns the width of the scroll content element.
 
 ## Usage within Web Frameworks
 

packages/mdc-tab-scroller/foundation.js

@@ -136,6 +136,11 @@ class MDCTabScrollerFoundation extends MDCFoundation {
    * @param {number} scrollXIncrement The value by which to increment the scroll position
    */
   incrementScroll(scrollXIncrement) {
+    // Early exit for non-operational increment values
+    if (scrollXIncrement === 0) {
+      return;
+    }
+
     if (this.isRTL_()) {
       return this.incrementScrollRTL_(scrollXIncrement);
     }

packages/mdc-tab-scroller/index.js

@@ -113,6 +113,14 @@ class MDCTabScroller extends MDCComponent {
     return this.foundation_.getScrollPosition();
   }
 
+  /**
+   * Returns the width of the scroll content
+   * @return {number}
+   */
+  getScrollContentWidth() {
+    return this.content_.offsetWidth;
+  }
+
   /**
    * Increments the scroll value by the given amount
    * @param {number} scrollXIncrement The pixel value by which to increment the scroll value

packages/mdc-tab-scroller/mdc-tab-scroller.scss

@@ -59,6 +59,18 @@
   will-change: transform;
 }
 
+.mdc-tab-scroller--align-start .mdc-tab-scroller__scroll-content {
+  justify-content: flex-start;
+}
+
+.mdc-tab-scroller--align-end .mdc-tab-scroller__scroll-content {
+  justify-content: flex-end;
+}
+
+.mdc-tab-scroller--align-center .mdc-tab-scroller__scroll-content {
+  justify-content: center;
+}
+
 .mdc-tab-scroller--animating .mdc-tab-scroller__scroll-area {
   -webkit-overflow-scrolling: auto;
 }

test/unit/mdc-tab-scroller/foundation.test.js

@@ -209,6 +209,13 @@ test('#scrollTo() unsets the transform property in a rAF', () => {
   td.verify(mockAdapter.setScrollContentStyleProperty('transform', 'none'), {times: 1});
 });
 
+test('#incrementScroll() exits early if increment is 0', () => {
+  const {foundation, mockAdapter} = setupScrollToTest({scrollLeft: 700});
+  foundation.incrementScroll(0);
+  td.verify(mockAdapter.setScrollContentStyleProperty(td.matchers.isA(String), td.matchers.isA(String)), {times: 0});
+  td.verify(mockAdapter.setScrollAreaScrollLeft(td.matchers.isA(Number)), {times: 0});
+});
+
 test('#incrementScroll() exits early if increment puts the scrollLeft over the max value', () => {
   const {foundation, mockAdapter} = setupScrollToTest({scrollLeft: 700});
   foundation.incrementScroll(10);

test/unit/mdc-tab-scroller/mdc-tab-scroller.test.js

@@ -18,6 +18,7 @@
 import bel from 'bel';
 import {assert} from 'chai';
 import td from 'testdouble';
+import domEvents from 'dom-events';
 
 import {
   MDCTabScroller,
@@ -205,6 +206,12 @@ test('#getScrollPosition() calls getScrollPosition', () => {
   td.verify(mockFoundation.getScrollPosition(), {times: 1});
 });
 
+test('#getScrollContentWidth() returns the offsetWidth of the content element', () => {
+  const {component, root} = setupMockFoundationTest();
+  const contentElement = root.querySelector(MDCTabScrollerFoundation.strings.CONTENT_SELECTOR);
+  assert.strictEqual(component.getScrollContentWidth(), contentElement.offsetWidth);
+});
+
 function setupTestRTL() {
   const {root, content, component} = setupTest();
   root.style.setProperty('width', '100px');
@@ -223,3 +230,17 @@ test('#getRTLScroller() returns an instance of MDCTabScrollerRTL', () => {
   assert.instanceOf(component.getDefaultFoundation().getRTLScroller(), MDCTabScrollerRTL);
   document.body.removeChild(root);
 });
+
+test('on interaction in the area element, call #handleInteraction()', () => {
+  const {root, mockFoundation} = setupMockFoundationTest();
+  const area = root.querySelector(MDCTabScrollerFoundation.strings.AREA_SELECTOR);
+  domEvents.emit(area, 'touchstart', {bubbles: true});
+  td.verify(mockFoundation.handleInteraction());
+});
+
+test('on transitionend of the content element, call #handleTransitionEnd()', () => {
+  const {root, mockFoundation} = setupMockFoundationTest();
+  const content = root.querySelector(MDCTabScrollerFoundation.strings.CONTENT_SELECTOR);
+  domEvents.emit(content, 'transitionend', {bubbles: true});
+  td.verify(mockFoundation.handleTransitionEnd(td.matchers.anything()));
+});