fix(button): Rename stroked to outlined (#74)

Author: patrick91

packages/button/README.md

@@ -32,7 +32,7 @@ Prop Name | Type | Description
 className | String | Classes to be applied to the root element.
 raised | Boolean | Enables raised variant.
 unelevated | Boolean | Enables unelevated variant.
-stroked | Boolean | Enables stroked variant.
+outlined | Boolean | Enables outlined variant.
 icon | Element | Icon to render within root element.
 children | String | Text to be displayed within root element.
 disabled | Boolean | Disables button if true.

packages/button/index.js

@@ -9,7 +9,7 @@ export class Button extends Component {
       className,
       raised,
       unelevated,
-      stroked,
+      outlined,
       icon,
       children,
       initRipple,
@@ -20,7 +20,7 @@ export class Button extends Component {
     const classes = classnames('mdc-button', className, {
       'mdc-button--raised': raised,
       'mdc-button--unelevated': unelevated,
-      'mdc-button--stroked': stroked,
+      'mdc-button--outlined': outlined,
     });
 
     return (
@@ -51,7 +51,7 @@ export class Button extends Component {
 Button.propTypes = {
   raised: PropTypes.bool,
   unelevated: PropTypes.bool,
-  stroked: PropTypes.bool,
+  outlined: PropTypes.bool,
   disabled: PropTypes.bool,
   unbounded: PropTypes.bool,
   initRipple: PropTypes.func,
@@ -63,7 +63,7 @@ Button.propTypes = {
 Button.defaultProps = {
   raised: false,
   unelevated: false,
-  stroked: false,
+  outlined: false,
   disabled: false,
   unbounded: false,
   initRipple: () => {},

test/screenshot/button/index.js

@@ -29,7 +29,7 @@ ReactDOM.render((
       <Button raised>Raised</Button>
     </div>
     <div className='button-container'>
-      <Button stroked>Stroked</Button>
+      <Button outlined>Outlined</Button>
     </div>
     <div className='button-container'>
       <Button unelevated>Unelevated</Button>

test/screenshot/golden.json

@@ -8,12 +8,12 @@
   "material-icon/menu.html": "790b2076760612c6c91ee0f6bb42aa3603b30c2a60f302de22429c2572645640",
   "fab/standard.html": "c0a68de7fa657ac62622e4f541c8e1eaef7544d12afb26b3421c3b04d58effa6",
   "card/index.html": "fe449cbe9e766c68386704b6cbfc3f3f508fbc947c6cdec97fa1b05183d0e61d",
-  "button/index.html": "5a31c21c642f7536a08276c9367aae19004e0eea550898d92ecd962bfc5bdad4",
+  "button/index.html": "66a897d49f43d12844333b54370e7a5c441a9f5c563a8703f5e61251fdd6bde7",
   "material-icon/index.html": "20c6c6bfe5ff444b52952343661151226a8786001fdd3e66e51e80903c3a9292",
   "line-ripple/index.html": "4b8eca29eb61834715ca0eeaec2c620358fa943623b5235ca02717c351f1485b",
   "floating-label/index.html": "67d9b6caad3a494563e2584ac6af071bbb3b73afc3e945f8299ca720b4015256",
   "notched-outline/index.html": "73394b6d7dcd94bc930dc740db8199000b94d365d7d703381ef01b3318b97d8c",
   "text-field/icon/index.html": "ce761ca24e2d5ca425ad1783c9e2d476b84f65232d86c4fdc0e8c3e756311c8f",
   "text-field/helper-text/index.html": "722a8eb27cbde5e32fc92c70e6c107f8ef75bff1abb3914fd2ef58fd49b678bb",
   "text-field/index.html": "8cac264e77fe54efcc659edeb8ef1e530963f9efbe8a26edd2e54780beafcb71"
-}
+}

test/unit/button/index.test.js

@@ -33,9 +33,9 @@ test('renders a unelevated button', () => {
   assert.isTrue(wrapper.hasClass('mdc-button--unelevated'));
 });
 
-test('renders a stroked button', () => {
-  const wrapper = shallow(<Button stroked />);
-  assert.isTrue(wrapper.hasClass('mdc-button--stroked'));
+test('renders an outlined button', () => {
+  const wrapper = shallow(<Button outlined />);
+  assert.isTrue(wrapper.hasClass('mdc-button--outlined'));
 });
 
 test('default initRipple function', () => {