chore(tab): Move computeIndicatorClientRect logic out of the foundati…

…on (#3367)

Resolves #3341

BREAKING CHANGE: We've removed the `computeIndicatorClientRect` method from `MDCTabFoundation`

packages/mdc-tab/README.md

@@ -139,7 +139,6 @@ Method Signature | Description
 `setAttr(attr: string, value: string) => void` | Sets the given attribute on the root element to the given value.
 `activateIndicator(previousIndicatorClientRect: ClientRect=) => void` | Activates the tab indicator subcomponent. `previousIndicatorClientRect` is an optional argument.
 `deactivateIndicator() => void` | Deactivates the tab indicator subcomponent.
-`computeIndicatorClientRect() => ClientRect` | Returns the tab indicator subcomponent's content bounding client rect.
 `getOffsetLeft() => number` | Returns the `offsetLeft` value of the root element.
 `getOffsetWidth() => number` | Returns the `offsetWidth` value of the root element.
 `getContentOffsetLeft() => number` | Returns the `offsetLeft` value of the content element.
@@ -155,7 +154,6 @@ Method Signature | Description
 `isActive() => boolean` | Returns whether the tab is active.
 `activate(previousIndicatorClientRect: ClientRect=) => void` | Activates the tab. `previousIndicatorClientRect` is an optional argument.
 `deactivate() => void` | Deactivates the tab.
-`computeIndicatorClientRect() => ClientRect` | Returns the tab indicator subcomponent's content bounding client rect.
 `computeDimensions() => MDCTabDimensions` | Returns the dimensions of the tab.
 
 ### `MDCTabFoundation` Event Handlers

packages/mdc-tab/adapter.js

@@ -71,12 +71,6 @@ class MDCTabAdapter {
   /** Deactivates the indicator. */
   deactivateIndicator() {}
 
-  /**
-   * Returns the client rect of the indicator.
-   * @return {!ClientRect}
-   */
-  computeIndicatorClientRect() {}
-
   /**
    * Emits the MDCTab:interacted event for use by parent components
    */

packages/mdc-tab/foundation.js

@@ -53,7 +53,6 @@ class MDCTabFoundation extends MDCFoundation {
       setAttr: () => {},
       activateIndicator: () => {},
       deactivateIndicator: () => {},
-      computeIndicatorClientRect: () => {},
       notifyInteracted: () => {},
       getOffsetLeft: () => {},
       getOffsetWidth: () => {},
@@ -120,14 +119,6 @@ class MDCTabFoundation extends MDCFoundation {
     this.adapter_.deactivateIndicator();
   }
 
-  /**
-   * Returns the indicator's client rect
-   * @return {!ClientRect}
-   */
-  computeIndicatorClientRect() {
-    return this.adapter_.computeIndicatorClientRect();
-  }
-
   /**
    * Returns the dimensions of the Tab
    * @return {!MDCTabDimensions}

packages/mdc-tab/index.js

@@ -95,7 +95,6 @@ class MDCTab extends MDCComponent {
         hasClass: (className) => this.root_.classList.contains(className),
         activateIndicator: (previousIndicatorClientRect) => this.tabIndicator_.activate(previousIndicatorClientRect),
         deactivateIndicator: () => this.tabIndicator_.deactivate(),
-        computeIndicatorClientRect: () => this.tabIndicator_.computeContentClientRect(),
         notifyInteracted: () => this.emit(MDCTabFoundation.strings.INTERACTED_EVENT, {tab: this}, true /* bubble */),
         getOffsetLeft: () => this.root_.offsetLeft,
         getOffsetWidth: () => this.root_.offsetWidth,
@@ -133,7 +132,7 @@ class MDCTab extends MDCComponent {
    * @return {!ClientRect}
    */
   computeIndicatorClientRect() {
-    return this.foundation_.computeIndicatorClientRect();
+    return this.tabIndicator_.computeContentClientRect();
   }
 
   /**

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

@@ -35,7 +35,7 @@ test('defaultAdapter returns a complete adapter implementation', () => {
   verifyDefaultAdapter(MDCTabFoundation, [
     'addClass', 'removeClass', 'hasClass',
     'setAttr',
-    'activateIndicator', 'deactivateIndicator', 'computeIndicatorClientRect',
+    'activateIndicator', 'deactivateIndicator',
     'getOffsetLeft', 'getOffsetWidth', 'getContentOffsetLeft', 'getContentOffsetWidth',
     'notifyInteracted',
     'focus',
@@ -81,12 +81,6 @@ test('#activate focuses the root node', () => {
   td.verify(mockAdapter.focus());
 });
 
-test('#computeIndicatorClientRect calls computeIndicatorClientRect on the adapter', () => {
-  const {foundation, mockAdapter} = setupTest();
-  foundation.computeIndicatorClientRect();
-  td.verify(mockAdapter.computeIndicatorClientRect());
-});
-
 test('#deactivate does nothing if not active', () => {
   const {foundation, mockAdapter} = setupTest();
   foundation.deactivate();

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

@@ -114,15 +114,6 @@ test('#adapter.deactivateIndicator deactivates the indicator subcomponent', () =
   assert.notOk(root.querySelector('.mdc-tab-indicator').classList.contains('mdc-tab-indicator--active'));
 });
 
-test('#adapter.computeIndicatorClientRect returns the indicator element\'s bounding client rect', () => {
-  const {root, component} = setupTest();
-  component.getDefaultFoundation().adapter_.deactivateIndicator();
-  assert.deepEqual(
-    component.getDefaultFoundation().adapter_.computeIndicatorClientRect(),
-    root.querySelector('.mdc-tab-indicator').getBoundingClientRect()
-  );
-});
-
 test('#adapter.getOffsetWidth() returns the offsetWidth of the root element', () => {
   const {root, component} = setupTest();
   assert.strictEqual(component.getDefaultFoundation().adapter_.getOffsetWidth(), root.offsetWidth);
@@ -191,10 +182,13 @@ test('#deactivate() calls deactivate', () => {
   td.verify(mockFoundation.deactivate(), {times: 1});
 });
 
-test('#computeIndicatorClientRect() calls computeIndicatorClientRect', () => {
-  const {component, mockFoundation} = setupMockFoundationTest();
-  component.computeIndicatorClientRect();
-  td.verify(mockFoundation.computeIndicatorClientRect(), {times: 1});
+test('#computeIndicatorClientRect() returns the indicator element\'s bounding client rect', () => {
+  const {root, component} = setupTest();
+  component.getDefaultFoundation().adapter_.deactivateIndicator();
+  assert.deepEqual(
+    component.computeIndicatorClientRect(),
+    root.querySelector('.mdc-tab-indicator').getBoundingClientRect()
+  );
 });
 
 test('#computeDimensions() calls computeDimensions', () => {