[Button] Add outlined variant

docs/src/pages/demos/buttons/OutlinedButtons.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+
+const styles = theme => ({
+  button: {
+    margin: theme.spacing.unit,
+  },
+});
+
+function doSomething(event) {
+  // eslint-disable-next-line no-console
+  console.log(event.currentTarget.getAttribute('data-something'));
+}
+
+function OutlinedButtons(props) {
+  const { classes } = props;
+  return (
+    <div>
+      <Button variant="outlined" className={classes.button}>
+        Default
+      </Button>
+      <Button color="primary" variant="outlined" className={classes.button}>
+        Primary
+      </Button>
+      <Button color="secondary" variant="outlined" className={classes.button}>
+        Secondary
+      </Button>
+      <Button variant="outlined" disabled className={classes.button}>
+        Disabled
+      </Button>
+      <Button variant="outlined" href="#flat-buttons" className={classes.button}>
+        Link
+      </Button>
+      <Button variant="outlined" disabled href="/" className={classes.button}>
+        Link disabled
+      </Button>
+      <Button
+        variant="outlined"
+        className={classes.button}
+        onClick={doSomething}
+        data-something="here I am"
+      >
+        Does something
+      </Button>
+    </div>
+  );
+}
+
+OutlinedButtons.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(OutlinedButtons);

docs/src/pages/demos/buttons/buttons.md

@@ -18,6 +18,13 @@ They do not lift, but fill with color on press.
 
 {{"demo": "pages/demos/buttons/FlatButtons.js"}}
 
+## Outlined Buttons
+Outlined buttons are text-only buttons with medium emphasis.
+They behave like flat buttons but have an outline and are typically used for actions that are important, but
+aren’t the primary action in an app.
+
+{{"demo": "pages/demos/buttons/OutlinedButtons.js"}}
+
 ## Raised Buttons
 
 Raised buttons are rectangular-shaped buttons.

packages/material-ui/src/Button/Button.d.ts

@@ -13,7 +13,7 @@ export interface ButtonProps extends StandardProps<ButtonBaseProps, ButtonClassK
   mini?: boolean;
   size?: 'small' | 'medium' | 'large';
   type?: string;
-  variant?: 'flat' | 'raised' | 'fab';
+  variant?: 'flat' | 'outlined' | 'raised' | 'fab';
 }
 
 export type ButtonClassKey =

packages/material-ui/src/Button/Button.js

@@ -62,6 +62,12 @@ export const styles = theme => ({
       },
     },
   },
+  outlined: {
+    border: `1px solid ${
+      theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
+    }`,
+    borderRadius: 4,
+  },
   colorInherit: {
     color: 'inherit',
   },
@@ -178,6 +184,7 @@ function Button(props) {
       [classes.flatSecondary]: flat && color === 'secondary',
       [classes.raisedPrimary]: !flat && color === 'primary',
       [classes.raisedSecondary]: !flat && color === 'secondary',
+      [classes.outlined]: variant === 'outlined',
       [classes[`size${capitalize(size)}`]]: size !== 'medium',
       [classes.disabled]: disabled,
       [classes.fullWidth]: fullWidth,
@@ -263,7 +270,7 @@ Button.propTypes = {
   /**
    * The type of button.
    */
-  variant: PropTypes.oneOf(['flat', 'raised', 'fab']),
+  variant: PropTypes.oneOf(['flat', 'outlined', 'raised', 'fab']),
 };
 
 Button.defaultProps = {

packages/material-ui/src/Button/Button.test.js

@@ -122,6 +122,48 @@ describe('<Button />', () => {
     );
   });
 
+  it('should render an outlined button', () => {
+    const wrapper = shallow(<Button variant="outlined">Hello World</Button>);
+    assert.strictEqual(wrapper.hasClass(classes.root), true);
+    assert.strictEqual(wrapper.hasClass(classes.outlined), true, 'should have the outlined class');
+    assert.strictEqual(wrapper.hasClass(classes.raised), false, 'should not have the raised class');
+    assert.strictEqual(wrapper.hasClass(classes.fab), false, 'should not have the fab class');
+  });
+
+  it('should render a primary outlined button', () => {
+    const wrapper = shallow(
+      <Button variant="outlined" color="primary">
+        Hello World
+      </Button>,
+    );
+    assert.strictEqual(wrapper.hasClass(classes.root), true);
+    assert.strictEqual(wrapper.hasClass(classes.outlined), true, 'should have the outlined class');
+    assert.strictEqual(
+      wrapper.hasClass(classes.flatPrimary),
+      true,
+      'should have the flatPrimary class',
+    );
+    assert.strictEqual(wrapper.hasClass(classes.raised), false, 'should not have the raised class');
+    assert.strictEqual(wrapper.hasClass(classes.fab), false, 'should not have the fab class');
+  });
+
+  it('should render a secondary outlined button', () => {
+    const wrapper = shallow(
+      <Button variant="outlined" color="secondary">
+        Hello World
+      </Button>,
+    );
+    assert.strictEqual(wrapper.hasClass(classes.root), true);
+    assert.strictEqual(wrapper.hasClass(classes.outlined), true, 'should have the outlined class');
+    assert.strictEqual(
+      wrapper.hasClass(classes.flatSecondary),
+      true,
+      'should have the flatSecondary class',
+    );
+    assert.strictEqual(wrapper.hasClass(classes.raised), false, 'should not have the raised class');
+    assert.strictEqual(wrapper.hasClass(classes.fab), false, 'should not have the fab class');
+  });
+
   it('should render a floating action button', () => {
     const wrapper = shallow(<Button variant="fab">Hello World</Button>);
     assert.strictEqual(wrapper.hasClass(classes.root), true);

packages/material-ui/src/styles/MuiThemeProvider.test.js

@@ -86,13 +86,13 @@ describe('<MuiThemeProvider />', () => {
       assert.notStrictEqual(markup.match('Hello World'), null);
       assert.strictEqual(sheetsRegistry.registry.length, 3);
       assert.strictEqual(sheetsRegistry.toString().length > 4000, true);
-      assert.strictEqual(sheetsRegistry.registry[0].classes.root, 'MuiTouchRipple-root-19');
+      assert.strictEqual(sheetsRegistry.registry[0].classes.root, 'MuiTouchRipple-root-20');
       assert.deepEqual(
         sheetsRegistry.registry[1].classes,
         {
-          disabled: 'MuiButtonBase-disabled-17',
-          focusVisible: 'MuiButtonBase-focusVisible-18',
-          root: 'MuiButtonBase-root-16',
+          disabled: 'MuiButtonBase-disabled-18',
+          focusVisible: 'MuiButtonBase-focusVisible-19',
+          root: 'MuiButtonBase-root-17',
         },
         'the class names should be deterministic',
       );

pages/api/button.md

@@ -23,7 +23,7 @@ filename: /packages/material-ui/src/Button/Button.js
 | <span class="prop-name">href</span> | <span class="prop-type">string |  | The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. |
 | <span class="prop-name">mini</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, and `variant` is `'fab'`, will use mini floating action button styling. |
 | <span class="prop-name">size</span> | <span class="prop-type">enum:&nbsp;'small'&nbsp;&#124;<br>&nbsp;'medium'&nbsp;&#124;<br>&nbsp;'large'<br> | <span class="prop-default">'medium'</span> | The size of the button. `small` is equivalent to the dense button styling. |
-| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'flat'&nbsp;&#124;<br>&nbsp;'raised'&nbsp;&#124;<br>&nbsp;'fab'<br> | <span class="prop-default">'flat'</span> | The type of button. |
+| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'flat'&nbsp;&#124;<br>&nbsp;'outlined'&nbsp;&#124;<br>&nbsp;'raised'&nbsp;&#124;<br>&nbsp;'fab'<br> | <span class="prop-default">'flat'</span> | The type of button. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 
@@ -35,6 +35,7 @@ This property accepts the following keys:
 - `label`
 - `flatPrimary`
 - `flatSecondary`
+- `outlined`
 - `colorInherit`
 - `raised`
 - `raisedPrimary`

pages/demos/buttons.js

@@ -13,6 +13,13 @@ function Page() {
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/demos/buttons/FlatButtons'), 'utf8')
+`,
+        },
+        'pages/demos/buttons/OutlinedButtons.js': {
+          js: require('docs/src/pages/demos/buttons/OutlinedButtons').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/buttons/OutlinedButtons'), 'utf8')
 `,
         },
         'pages/demos/buttons/RaisedButtons.js': {