fix(tab): update readme and ref name in tab component (#226)

Author: Matt Goo

.travis.yml

@@ -37,4 +37,4 @@ matrix:
         - docker pull mdcreact/screenshots
         - docker image ls
       script:
-        - docker run -it --rm --cap-add=SYS_ADMIN -e MDC_GCLOUD_SERVICE_ACCOUNT_KEY="${MDC_GCLOUD_SERVICE_ACCOUNT_KEY}" mdcreact/screenshots /bin/sh -c "git fetch; git checkout \"${CURRENT_BRANCH}\"; git pull; npm i; /home/pptruser/material-components-web-react/test/screenshot/start.sh; sleep 300s; npm run test:image-diff"
+        - docker run -it --rm --cap-add=SYS_ADMIN -e MDC_GCLOUD_SERVICE_ACCOUNT_KEY="${MDC_GCLOUD_SERVICE_ACCOUNT_KEY}" mdcreact/screenshots /bin/sh -c "git fetch; git checkout \"${CURRENT_BRANCH}\"; git pull; npm i; /home/pptruser/material-components-web-react/test/screenshot/start.sh; sleep 330s; npm run test:image-diff"

package-lock.json

@@ -34,6 +34,8 @@
           "line-ripple",
           "ripple",
           "top-app-bar",
+          "tab",
+          "tab-scroller",
           "infrastructure",
           "tab-indicator",
           "text-field"

package.json

@@ -36,11 +36,7 @@ class MyApp extends React.Component {
 
   render() {
     return (
-      <Tab
-        active={this.state.active}
-         // this will be another tab's clientRect object
-        previousActiveClientRect={previousTabClientRect}
-      >
+      <Tab active={this.state.active}>
         <MaterialIcon className='mdc-tab__icon' icon='favorite' />
         <span className='mdc-tab__text-label'>Love</span>
       </Tab>
@@ -51,7 +47,7 @@ class MyApp extends React.Component {
 
 #### With Custom Indicator
 
-Possibly you don't want to use the default underline indicator, but instead would like to use an icon. You'll need to add an `indicator` prop, which is a function that returns a `<TabIndicator />` element.
+Possibly you don't want to use the default underline indicator, but instead would like to use an icon. You'll need to add an `indicatorContent` prop, which should be set to an icon element.
 
 ```js
 import React from 'react';
@@ -65,32 +61,12 @@ class MyApp extends React.Component {
     return (
       <Tab
         active={this.state.active}
-        previousActiveClientRect={previousTabClientRect}
-        indicator={this.renderIndicator}
+        indicatorContent={<MaterialIcon icon='favorite' />}
       >
         <span className='mdc-tab__text-label'>Love</span>
       </Tab>
     );
   }
-
-  renderIndicator(props) {
-    // must return a <TabIndicator /> element
-    return (
-      <TabIndicator
-        icon
-        {/*--
-          You need to pass
-          active, ref, and previousIndicatorClientRect props to the
-          TabIndicator element
-        --*/}
-        active={props.active}
-        ref={props.ref}
-        previousIndicatorClientRect={props.previousIndicatorClientRect}
-      >
-        <MaterialIcon icon='favorite' />
-      </TabIndicator>
-    );
-  }
 }
 ```
 
@@ -101,9 +77,10 @@ Prop Name | Type | Description
 active | boolean | If true will activate the tab and indicator.
 className | string | Classes to appear on className attribute of root element.
 isFadingIndicator | boolean | Enables a fading indicator, instead of sliding (default).
-indicator | function | Function that is passed props as an argument, that must return a `<TabIndicator />` element. The `<TabIndicator />` element must be passed `active`, `ref`, and `previousIndicatorClientRect` props. See example above.
+indicatorContent | element | Element that will appear within the `<TabIndicator />` element.
 minWidth | boolean | If true will display the `<Tab />` as narrow as possible.
 isMinWidthIndicator | boolean | If true will display the `<TabIndicator />` to the size of the longest content element.
+isIconIndicator | boolean | If true will display the indicator content in the center of the tab.
 previousIndicatorClientRect | ClientRect | The indicator's clientRect that was previously activated.
 onTransitionEnd | function | transitionend event callback handler.
 

packages/tab/README.md

@@ -9,7 +9,7 @@ export default class Tab extends Component {
   foundation_ = null;
   tabElement_ = React.createRef();
   tabContentElement_ = React.createRef();
-  tabIndicatorElement_ = React.createRef();
+  tabIndicator_ = React.createRef();
 
   state = {
     'classList': new Set(),
@@ -77,8 +77,8 @@ export default class Tab extends Component {
   }
 
   computeIndicatorClientRect = () => {
-    if (!this.tabIndicatorElement_.current) return;
-    return this.tabIndicatorElement_.current.computeContentClientRect();
+    if (!this.tabIndicator_.current) return;
+    return this.tabIndicator_.current.computeContentClientRect();
   }
 
   computeDimensions = () => {
@@ -143,7 +143,7 @@ export default class Tab extends Component {
         icon={isIconIndicator}
         active={active}
         fade={isFadingIndicator}
-        ref={this.tabIndicatorElement_}
+        ref={this.tabIndicator_}
         previousIndicatorClientRect={previousActiveClientRect}
       >
         {indicatorContent}

packages/tab/index.js

@@ -123,11 +123,11 @@ test('#adapter.focus focuses the tabElement_', () => {
   td.verify(wrapper.instance().tabElement_.current.focus(), {times: 1});
 });
 
-test('#computeIndicatorClientRect returns the tabIndicatorElement_ clientRect', () => {
+test('#computeIndicatorClientRect returns the tabIndicator_ clientRect', () => {
   const wrapper = mount(<Tab/>);
-  wrapper.instance().tabIndicatorElement_.current.computeContentClientRect = td.func();
+  wrapper.instance().tabIndicator_.current.computeContentClientRect = td.func();
   wrapper.instance().computeIndicatorClientRect();
-  td.verify(wrapper.instance().tabIndicatorElement_.current.computeContentClientRect(), {times: 1});
+  td.verify(wrapper.instance().tabIndicator_.current.computeContentClientRect(), {times: 1});
 });
 
 test('#computeDimensions calls foundation.computeDimensions', () => {
@@ -244,7 +244,7 @@ test('custom tabIndicator should render with a ref attached', () => {
     indicatorContent={<i className='icon'>icon</i>}
   />);
 
-  assert.instanceOf(wrapper.instance().tabIndicatorElement_.current, TabIndicator);
+  assert.instanceOf(wrapper.instance().tabIndicator_.current, TabIndicator);
 });
 
 test('isMinWidthIndicator renders indicator within the content element', () => {