[Button] Make the outlined variant better leverage the color (#12473)

Author: essuraj

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

@@ -26,6 +26,8 @@ export type ButtonClassKey =
   | 'flatPrimary'
   | 'flatSecondary'
   | 'outlined'
+  | 'outlinedPrimary'
+  | 'outlinedSecondary'
   | 'colorInherit'
   | 'contained'
   | 'containedPrimary'

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

@@ -19,7 +19,7 @@ export const styles = theme => ({
     padding: '8px 16px',
     borderRadius: theme.shape.borderRadius,
     color: theme.palette.text.primary,
-    transition: theme.transitions.create(['background-color', 'box-shadow'], {
+    transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
       duration: theme.transitions.duration.short,
     }),
     '&:hover': {
@@ -80,6 +80,20 @@ export const styles = theme => ({
       theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
     }`,
   },
+  /* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
+  outlinedPrimary: {
+    border: `1px solid ${fade(theme.palette.primary.main, 0.5)}`,
+    '&:hover': {
+      border: `1px solid ${theme.palette.primary.main}`,
+    },
+  },
+  /* Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
+  outlinedSecondary: {
+    border: `1px solid ${fade(theme.palette.secondary.main, 0.5)}`,
+    '&:hover': {
+      border: `1px solid ${theme.palette.secondary.main}`,
+    },
+  },
   /* Styles applied to the root element if `variant="[contained | fab]"`. */
   contained: {
     color: theme.palette.getContrastText(theme.palette.grey[300]),
@@ -228,6 +242,8 @@ function Button(props) {
       [classes.raisedPrimary]: (contained || fab) && color === 'primary',
       [classes.raisedSecondary]: (contained || fab) && color === 'secondary',
       [classes.outlined]: variant === 'outlined',
+      [classes.outlinedPrimary]: variant === 'outlined' && color === 'primary',
+      [classes.outlinedSecondary]: variant === 'outlined' && color === 'secondary',
       [classes[`size${capitalize(size)}`]]: size !== 'medium',
       [classes.disabled]: disabled,
       [classes.fullWidth]: fullWidth,

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-28');
+      assert.strictEqual(sheetsRegistry.registry[0].classes.root, 'MuiTouchRipple-root-30');
       assert.deepEqual(
         sheetsRegistry.registry[1].classes,
         {
-          disabled: 'MuiButtonBase-disabled-26',
-          focusVisible: 'MuiButtonBase-focusVisible-27',
-          root: 'MuiButtonBase-root-25',
+          disabled: 'MuiButtonBase-disabled-28',
+          focusVisible: 'MuiButtonBase-focusVisible-29',
+          root: 'MuiButtonBase-root-27',
         },
         'the class names should be deterministic',
       );

pages/api/button.md

@@ -47,6 +47,8 @@ This property accepts the following keys:
 | <span class="prop-name">flatPrimary</span> | Styles applied to the root element for backwards compatibility with legacy variant naming.
 | <span class="prop-name">flatSecondary</span> | Styles applied to the root element for backwards compatibility with legacy variant naming.
 | <span class="prop-name">outlined</span> | Styles applied to the root element if `variant="outlined"`.
+| <span class="prop-name">outlinedPrimary</span> | Styles applied to the root element if `variant="outlined"` and `color="primary"`.
+| <span class="prop-name">outlinedSecondary</span> | Styles applied to the root element if `variant="outlined"` and `color="secondary"`.
 | <span class="prop-name">contained</span> | Styles applied to the root element if `variant="[contained \| fab]"`.
 | <span class="prop-name">containedPrimary</span> | Styles applied to the root element if `variant="[contained \| fab]"` and `color="primary"`.
 | <span class="prop-name">containedSecondary</span> | Styles applied to the root element if `variant="[contained \| fab]"` and `color="secondary"`.