From 4a61acde976f1be0e0b665bc7f6985d2e140b836 Mon Sep 17 00:00:00 2001
From: Suraj Elapully <essuraj@users.noreply.github.com>
Date: Mon, 13 Aug 2018 00:47:30 +0530
Subject: [PATCH] [Button] Make the outlined variant better leverage the color
 (#12473)

---
 packages/material-ui/src/Button/Button.d.ts    |  2 ++
 packages/material-ui/src/Button/Button.js      | 18 +++++++++++++++++-
 .../src/styles/MuiThemeProvider.test.js        |  8 ++++----
 pages/api/button.md                            |  2 ++
 4 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/packages/material-ui/src/Button/Button.d.ts b/packages/material-ui/src/Button/Button.d.ts
index a01e336643eaa3..a3c77059b68c37 100644
--- a/packages/material-ui/src/Button/Button.d.ts
+++ b/packages/material-ui/src/Button/Button.d.ts
@@ -26,6 +26,8 @@ export type ButtonClassKey =
   | 'flatPrimary'
   | 'flatSecondary'
   | 'outlined'
+  | 'outlinedPrimary'
+  | 'outlinedSecondary'
   | 'colorInherit'
   | 'contained'
   | 'containedPrimary'
diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js
index cff9278f002aee..0e10bb0a88b29c 100644
--- a/packages/material-ui/src/Button/Button.js
+++ b/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,
diff --git a/packages/material-ui/src/styles/MuiThemeProvider.test.js b/packages/material-ui/src/styles/MuiThemeProvider.test.js
index 27e0afdb133eea..0cb8e1a8595e33 100644
--- a/packages/material-ui/src/styles/MuiThemeProvider.test.js
+++ b/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',
       );
diff --git a/pages/api/button.md b/pages/api/button.md
index 76746b89597ed7..93f3015aaa071d 100644
--- a/pages/api/button.md
+++ b/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"`.