fix(icon-button): upgrade to mdc-web v1.1 (#792)

Author: Ben McKernan

package-lock.json

@@ -71,7 +71,7 @@
     "@material/drawer": "^1.0.1",
     "@material/fab": "^1.1.0",
     "@material/floating-label": "^1.0.0",
-    "@material/icon-button": "^0.41.0",
+    "@material/icon-button": "^1.1.0",
     "@material/layout-grid": "^0.41.0",
     "@material/line-ripple": "^1.0.0",
     "@material/linear-progress": "^1.1.0",

package.json

@@ -23,8 +23,9 @@
 import * as React from 'react';
 import classnames from 'classnames';
 import * as Ripple from '@material/react-ripple';
-// @ts-ignore no mdc .d.ts file
-import {MDCIconButtonToggleFoundation} from '@material/icon-button/dist/mdc.iconButton';
+import {MDCIconButtonToggleAdapter} from '@material/icon-button/adapter';
+import {MDCIconButtonToggleFoundation} from '@material/icon-button/foundation';
+import {MDCIconButtonToggleEventDetail} from '@material/icon-button/types';
 import IconToggle from './IconToggle';
 const ARIA_PRESSED = 'aria-pressed';
 
@@ -35,6 +36,7 @@ interface ElementAttributes {
 
 type IconButtonTypes = HTMLButtonElement | HTMLAnchorElement;
 export interface IconButtonBaseProps extends ElementAttributes {
+  handleChange?: (evt: MDCIconButtonToggleEventDetail) => void;
   isLink?: boolean;
 };
 
@@ -49,7 +51,7 @@ class IconButtonBase<T extends IconButtonTypes> extends React.Component<
   IconButtonProps<T>,
   IconButtonBaseState
   > {
-  foundation = MDCIconButtonToggleFoundation;
+  foundation!: MDCIconButtonToggleFoundation;
 
   constructor(props: IconButtonProps<T>) {
     super(props);
@@ -61,6 +63,7 @@ class IconButtonBase<T extends IconButtonTypes> extends React.Component<
 
   static defaultProps = {
     className: '',
+    handleChange: () => {},
     initRipple: () => {},
     isLink: false,
     onClick: () => {},
@@ -78,17 +81,18 @@ class IconButtonBase<T extends IconButtonTypes> extends React.Component<
     return classnames('mdc-icon-button', Array.from(classList), className);
   }
 
-  get adapter() {
+  get adapter(): MDCIconButtonToggleAdapter {
     return {
       addClass: (className: string) =>
         this.setState({classList: this.state.classList.add(className)}),
       removeClass: (className: string) => {
-        const classList = new Set(this.state.classList);
+        const {classList} = this.state;
         classList.delete(className);
         this.setState({classList});
       },
       hasClass: (className: string) => this.classes.split(' ').includes(className),
       setAttr: this.updateState,
+      notifyChange: this.props.handleChange!,
     };
   }
 
@@ -111,6 +115,7 @@ class IconButtonBase<T extends IconButtonTypes> extends React.Component<
       isLink,
       /* eslint-disable no-unused-vars */
       className,
+      handleChange,
       onClick,
       unbounded,
       [ARIA_PRESSED]: ariaPressed,

packages/icon-button/index.tsx

@@ -17,7 +17,7 @@
     "url": "https://github.com/material-components/material-components-web-react.git"
   },
   "dependencies": {
-    "@material/icon-button": "^0.41.0",
+    "@material/icon-button": "^1.1.0",
     "@material/react-ripple": "^0.11.0",
     "classnames": "^2.2.6",
     "react": "^16.3.2"

packages/icon-button/package.json

@@ -4,6 +4,7 @@ import * as td from 'testdouble';
 import {shallow} from 'enzyme';
 import {IconButtonBase as IconButton} from '../../../packages/icon-button/index';
 import {coerceForTesting} from '../helpers/types';
+import {MDCIconButtonToggleEventDetail} from '@material/icon-button/types';
 
 suite('IconButton');
 
@@ -34,7 +35,7 @@ test('renders anchor tag when isLink is true', () => {
 
 test('#foundation.handleClick gets called onClick', () => {
   const wrapper = shallow<IconButton<HTMLButtonElement>>(<IconButton />);
-  wrapper.instance().foundation.handleClick = td.func();
+  wrapper.instance().foundation.handleClick = td.func<() => void>();
   wrapper.simulate('click');
   td.verify(wrapper.instance().foundation.handleClick(), {times: 1});
 });
@@ -62,13 +63,13 @@ test('aria-pressed is set false if passed as prop but on className is not passed
 test('#get.classes has a class added to state.classList', () => {
   const wrapper = shallow(<IconButton />);
   wrapper.setState({classList: new Set(['test-class'])});
-  wrapper.hasClass('test-class');
+  assert.isTrue(wrapper.hasClass('test-class'));
 });
 
 test('#adapter.addClass adds a class to state.classList', () => {
   const wrapper = shallow<IconButton<HTMLButtonElement>>(<IconButton />);
   wrapper.instance().adapter.addClass('test-class');
-  wrapper.state().classList.has('test-class');
+  assert.isTrue(wrapper.state().classList.has('test-class'));
 });
 
 test('#adapter.removeClass removes a class to state.classList', () => {
@@ -91,7 +92,14 @@ test('#adapter.hasClass returns false if element does not contains class', () =>
 
 test('#adapter.setAttr sets aria-pressed', () => {
   const wrapper = shallow<IconButton<HTMLButtonElement>>(<IconButton />);
-  wrapper.instance().adapter.setAttr('aria-pressed', true);
-  assert.isTrue(wrapper.state()['aria-pressed']);
+  wrapper.instance().adapter.setAttr('aria-pressed', 'true');
+  assert.equal(wrapper.state('aria-pressed'), 'true');
 });
 
+test('#adapter.notifyChange calls props.handleChange', () => {
+  const handleChange = td.func<(event: MDCIconButtonToggleEventDetail) => void>();
+  const wrapper = shallow<IconButton<HTMLButtonElement>>(<IconButton handleChange={handleChange} />);
+  const event = {isOn: false};
+  wrapper.instance().adapter.notifyChange(event);
+  td.verify(handleChange(event), {times: 1});
+});