fix(toolbar): rename ambiguous identifiers (#765) (#773)

Fixes #765 

BREAKING CHANGE: The adapter method `getFlexibleRowElementOffsetHeight` has been _renamed_ to `getFirstRowElementOffsetHeight`. Please update your code accordingly.

packages/mdc-toolbar/README.md

@@ -426,7 +426,7 @@ const toolbar = new MDCToolbar(document.querySelector('.mdc-toolbar'));
 | `getViewportWidth() => number` | Gets viewport (window) width. |
 | `getViewportScrollY() => number` | Gets the number of pixels that the content of body is scrolled upward.|
 | `getOffsetHeight() => number` | Gets root element `mdc-toolbar` offsetHeight. |
-| `getFlexibleRowElementOffsetHeight() => number` | Gets flexible row element offsetHeight. |
+| `getFirstRowElementOffsetHeight() => number` | Gets first row element offsetHeight. |
 | `notifyChange(evtData: {flexibleExpansionRatio: number}) => void` | Broadcasts an event with the remaining ratio of flexible space. |
 | `setStyle(property: string, value: number) => void` | Sets `mdc-toolbar` style property to provided value. |
 | `setStyleForTitleElement(property: string, value: number) => void` | Sets `mdc-toolbar__title` style property to provided value. |

packages/mdc-toolbar/constants.js

@@ -26,7 +26,7 @@ export const cssClasses = {
 
 export const strings = {
   TITLE_SELECTOR: '.mdc-toolbar__title',
-  FLEXIBLE_ROW_SELECTOR: '.mdc-toolbar__row:first-child',
+  FIRST_ROW_SELECTOR: '.mdc-toolbar__row:first-child',
   CHANGE_EVENT: 'MDCToolbar:change',
 };
 

packages/mdc-toolbar/foundation.js

@@ -41,7 +41,7 @@ export default class MDCToolbarFoundation extends MDCFoundation {
       getViewportWidth: () => /* number */ 0,
       getViewportScrollY: () => /* number */ 0,
       getOffsetHeight: () => /* number */ 0,
-      getFlexibleRowElementOffsetHeight: () => /* number */ 0,
+      getFirstRowElementOffsetHeight: () => /* number */ 0,
       notifyChange: (/* evtData: {flexibleExpansionRatio: number} */) => {},
       setStyle: (/* property: string, value: string */) => {},
       setStyleForTitleElement: (/* property: string, value: string */) => {},
@@ -164,13 +164,13 @@ export default class MDCToolbarFoundation extends MDCFoundation {
 
   initKeyRatio_() {
     const toolbarRowHeight = this.getRowHeight_();
-    const flexibleRowMaxRatio = this.adapter_.getFlexibleRowElementOffsetHeight() / toolbarRowHeight;
+    const firstRowMaxRatio = this.adapter_.getFirstRowElementOffsetHeight() / toolbarRowHeight;
     this.calculations_.toolbarRatio = this.adapter_.getOffsetHeight() / toolbarRowHeight;
-    this.calculations_.flexibleExpansionRatio = flexibleRowMaxRatio - 1;
+    this.calculations_.flexibleExpansionRatio = firstRowMaxRatio - 1;
     this.calculations_.maxTranslateYRatio =
-      this.fixedLastrow_ ? this.calculations_.toolbarRatio - flexibleRowMaxRatio : 0;
+      this.fixedLastrow_ ? this.calculations_.toolbarRatio - firstRowMaxRatio : 0;
     this.calculations_.scrollThresholdRatio =
-      (this.fixedLastrow_ ? this.calculations_.toolbarRatio : flexibleRowMaxRatio) - 1;
+      (this.fixedLastrow_ ? this.calculations_.toolbarRatio : firstRowMaxRatio) - 1;
   }
 
   getRowHeight_() {

packages/mdc-toolbar/index.js

@@ -27,8 +27,8 @@ export class MDCToolbar extends MDCComponent {
     return new MDCToolbar(root);
   }
 
-  get flexibleRowElement_() {
-    return this.root_.querySelector(MDCToolbarFoundation.strings.FLEXIBLE_ROW_SELECTOR);
+  get firstRowElement_() {
+    return this.root_.querySelector(MDCToolbarFoundation.strings.FIRST_ROW_SELECTOR);
   }
 
   get titleElement_() {
@@ -56,11 +56,11 @@ export class MDCToolbar extends MDCComponent {
       getViewportWidth: () => window.innerWidth,
       getViewportScrollY: () => window.pageYOffset,
       getOffsetHeight: () => this.root_.offsetHeight,
-      getFlexibleRowElementOffsetHeight: () => this.flexibleRowElement_.offsetHeight,
+      getFirstRowElementOffsetHeight: () => this.firstRowElement_.offsetHeight,
       notifyChange: (evtData) => this.emit(MDCToolbarFoundation.strings.CHANGE_EVENT, evtData),
       setStyle: (property, value) => this.root_.style.setProperty(property, value),
       setStyleForTitleElement: (property, value) => this.titleElement_.style.setProperty(property, value),
-      setStyleForFlexibleRowElement: (property, value) => this.flexibleRowElement_.style.setProperty(property, value),
+      setStyleForFlexibleRowElement: (property, value) => this.firstRowElement_.style.setProperty(property, value),
       setStyleForFixedAdjustElement: (property, value) => {
         if (this.fixedAdjustElement) {
           this.fixedAdjustElement.style.setProperty(property, value);

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

@@ -43,7 +43,7 @@ test('defaultAdapter returns a complete adapter implementation', () => {
     'hasClass', 'addClass', 'removeClass', 'registerScrollHandler',
     'deregisterScrollHandler', 'registerResizeHandler', 'deregisterResizeHandler',
     'getViewportWidth', 'getViewportScrollY', 'getOffsetHeight',
-    'getFlexibleRowElementOffsetHeight', 'notifyChange', 'setStyle',
+    'getFirstRowElementOffsetHeight', 'notifyChange', 'setStyle',
     'setStyleForTitleElement', 'setStyleForFlexibleRowElement',
     'setStyleForFixedAdjustElement',
   ]);
@@ -147,7 +147,7 @@ test('on scroll handles no flexible height case', () => {
   const mockRaf = createMockRaf();
 
   setDeviceDesktop(mockAdapter);
-  td.when(mockAdapter.getFlexibleRowElementOffsetHeight()).thenReturn(numbers.TOOLBAR_ROW_HEIGHT);
+  td.when(mockAdapter.getFirstRowElementOffsetHeight()).thenReturn(numbers.TOOLBAR_ROW_HEIGHT);
   td.when(mockAdapter.getOffsetHeight()).thenReturn(numbers.TOOLBAR_ROW_HEIGHT);
   const {scrollHandler} = createMockHandlers(foundation, mockAdapter, mockRaf);
 
@@ -163,7 +163,7 @@ test('on scroll handles no flexible height case', () => {
 const scrollEventMock =
   (foundation, mockAdapter, mockRaf, {isOutOfThreshold=false, flexExpansionRatio=0} = {}) => {
     setDeviceDesktop(mockAdapter);
-    td.when(mockAdapter.getFlexibleRowElementOffsetHeight()).thenReturn(numbers.TOOLBAR_ROW_HEIGHT * 3);
+    td.when(mockAdapter.getFirstRowElementOffsetHeight()).thenReturn(numbers.TOOLBAR_ROW_HEIGHT * 3);
     td.when(mockAdapter.getOffsetHeight()).thenReturn(numbers.TOOLBAR_ROW_HEIGHT * 4);
     const {scrollHandler} = createMockHandlers(foundation, mockAdapter, mockRaf);
 

test/unit/mdc-toolbar/mdc-toolbar.test.js

@@ -151,11 +151,11 @@ test('adapter#getOffsetHeight returns the height of the toolbar', () => {
   assert.equal(component.getDefaultFoundation().adapter_.getOffsetHeight(), root.offsetHeight);
 });
 
-test('adapter#getFlexibleRowElementOffsetHeight returns the height of the flexible row', () => {
+test('adapter#getFirstRowElementOffsetHeight returns the height of the first row', () => {
   const {root, component} = setupTest();
-  const flexibleRowElement = root.querySelector(strings.FLEXIBLE_ROW_SELECTOR);
-  assert.equal(component.getDefaultFoundation().adapter_.getFlexibleRowElementOffsetHeight(),
-    flexibleRowElement.offsetHeight);
+  const firstRowElement = root.querySelector(strings.FIRST_ROW_SELECTOR);
+  assert.equal(component.getDefaultFoundation().adapter_.getFirstRowElementOffsetHeight(),
+    firstRowElement.offsetHeight);
 });
 
 test(`adapter#notifyChange emits ${strings.CHANGE_EVENT}`, () => {
@@ -184,7 +184,7 @@ test('adapter#setStyleForTitleElement sets the correct style on title element',
 
 test('adapter#setStyleForFlexibleRowElement sets the correct style on flexible row element', () => {
   const {root, component} = setupTest();
-  const flexibleRowElement = root.querySelector(strings.FLEXIBLE_ROW_SELECTOR);
+  const flexibleRowElement = root.querySelector(strings.FIRST_ROW_SELECTOR);
   component.getDefaultFoundation().adapter_.setStyleForFlexibleRowElement('height', '56px');
   assert.equal(flexibleRowElement.style.getPropertyValue('height'), '56px');
 });