From 2e45286d0209eccb704dc1c9525b75d8f0f5aed2 Mon Sep 17 00:00:00 2001 From: "Suraj E.S" Date: Sat, 11 Aug 2018 11:07:50 +0530 Subject: [PATCH 1/3] theme-aware-outlined-button --- packages/material-ui/src/Button/Button.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js index cff9278f002aee..793ab80641e056 100644 --- a/packages/material-ui/src/Button/Button.js +++ b/packages/material-ui/src/Button/Button.js @@ -76,7 +76,7 @@ export const styles = theme => ({ flatSecondary: {}, /* Styles applied to the root element if `variant="outlined"`. */ outlined: { - border: `1px solid ${ + border: `2px solid ${ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' }`, }, @@ -131,6 +131,14 @@ export const styles = theme => ({ }, }, }, + /* Styles applied to the root element if `variant="[contained | fab]"` and `color="primary"`. */ + outlinedPrimary: { + border: `2px solid ${theme.palette.primary.main}`, + }, + /* Styles applied to the root element if `variant="[contained | fab]"` and `color="secondary"`. */ + outlinedSecondary: { + border: `2px solid ${theme.palette.secondary.main}`, + }, /* Styles applied to the root element for backwards compatibility with legacy variant naming. */ raised: {}, // legacy /* Styles applied to the root element for backwards compatibility with legacy variant naming. */ @@ -228,6 +236,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, From 04ed2eec982be54e24dbfde7cb8f57059404d4fa Mon Sep 17 00:00:00 2001 From: "Suraj E.S" Date: Sun, 12 Aug 2018 07:29:17 +0530 Subject: [PATCH 2/3] added variation to the color of the border on hover and change the border width to 1px --- packages/material-ui/src/Button/Button.js | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js index 793ab80641e056..1fe1900c915811 100644 --- a/packages/material-ui/src/Button/Button.js +++ b/packages/material-ui/src/Button/Button.js @@ -76,7 +76,7 @@ export const styles = theme => ({ flatSecondary: {}, /* Styles applied to the root element if `variant="outlined"`. */ outlined: { - border: `2px solid ${ + border: `1px solid ${ theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' }`, }, @@ -131,13 +131,19 @@ export const styles = theme => ({ }, }, }, - /* Styles applied to the root element if `variant="[contained | fab]"` and `color="primary"`. */ + /* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */ outlinedPrimary: { - border: `2px solid ${theme.palette.primary.main}`, + 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="[contained | fab]"` and `color="secondary"`. */ + /* Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */ outlinedSecondary: { - border: `2px solid ${theme.palette.secondary.main}`, + border: `1px solid ${fade(theme.palette.secondary.main, 0.5)}`, + '&:hover': { + border: `1px solid ${theme.palette.secondary.main}`, + }, }, /* Styles applied to the root element for backwards compatibility with legacy variant naming. */ raised: {}, // legacy From a43d2cffa1fa5d9ab6d81c75a3699637f2e5fd55 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 12 Aug 2018 16:53:06 +0200 Subject: [PATCH 3/3] some improvments --- packages/material-ui/src/Button/Button.d.ts | 2 ++ packages/material-ui/src/Button/Button.js | 30 +++++++++---------- .../src/styles/MuiThemeProvider.test.js | 8 ++--- pages/api/button.md | 2 ++ 4 files changed, 23 insertions(+), 19 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 1fe1900c915811..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]), @@ -131,20 +145,6 @@ export const styles = theme => ({ }, }, }, - /* 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 for backwards compatibility with legacy variant naming. */ raised: {}, // legacy /* Styles applied to the root element for backwards compatibility with legacy variant naming. */ 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('', () => { 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: | flatPrimary | Styles applied to the root element for backwards compatibility with legacy variant naming. | flatSecondary | Styles applied to the root element for backwards compatibility with legacy variant naming. | outlined | Styles applied to the root element if `variant="outlined"`. +| outlinedPrimary | Styles applied to the root element if `variant="outlined"` and `color="primary"`. +| outlinedSecondary | Styles applied to the root element if `variant="outlined"` and `color="secondary"`. | contained | Styles applied to the root element if `variant="[contained \| fab]"`. | containedPrimary | Styles applied to the root element if `variant="[contained \| fab]"` and `color="primary"`. | containedSecondary | Styles applied to the root element if `variant="[contained \| fab]"` and `color="secondary"`.