From 4377beb9bc3d3fb12280d456de754fdf297a3207 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Sat, 21 Jul 2018 21:33:53 +0100 Subject: [PATCH] [SpeedDial] Fix SpeedDialAction dark theme Also improve some button class descriptions. --- .../src/SpeedDialAction/SpeedDialAction.js | 5 +++++ packages/material-ui/src/Button/Button.js | 10 +++++----- pages/api/button.md | 10 +++++----- 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js index 41d5676b854441..0d1d1319ff3a9e 100644 --- a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js +++ b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js @@ -2,6 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { withStyles } from '@material-ui/core/styles'; +import { emphasize } from '@material-ui/core/styles/colorManipulator'; import Button from '@material-ui/core/Button'; import Tooltip from '@material-ui/core/Tooltip'; @@ -14,6 +15,10 @@ export const styles = theme => ({ button: { margin: 8, color: theme.palette.text.secondary, + backgroundColor: emphasize(theme.palette.background.default, 0.12), + '&:hover': { + backgroundColor: emphasize(theme.palette.background.default, 0.15), + }, transition: `${theme.transitions.create('transform', { duration: theme.transitions.duration.shorter, })}, opacity 0.8s`, diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js index 965603ba079ebc..9096ca46ebf195 100644 --- a/packages/material-ui/src/Button/Button.js +++ b/packages/material-ui/src/Button/Button.js @@ -79,7 +79,7 @@ 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="contained"`. */ + /* Styles applied to the root element if `variant="[contained | fab]"`. */ contained: { color: theme.palette.getContrastText(theme.palette.grey[300]), backgroundColor: theme.palette.grey[300], @@ -106,7 +106,7 @@ export const styles = theme => ({ }, }, }, - /* Styles applied to the root element if `variant="contained"` and `color="primary"`. */ + /* Styles applied to the root element if `variant="[contained | fab|"` and `color="primary"`. */ containedPrimary: { color: theme.palette.primary.contrastText, backgroundColor: theme.palette.primary.main, @@ -118,7 +118,7 @@ export const styles = theme => ({ }, }, }, - /* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */ + /* Styles applied to the root element if `variant="[contained | fab]"` and `color="secondary"`. */ containedSecondary: { color: theme.palette.secondary.contrastText, backgroundColor: theme.palette.secondary.main, @@ -136,7 +136,7 @@ export const styles = theme => ({ raisedPrimary: {}, // legacy /* Styles applied to the root element for backwards compatibility with legacy variant naming. */ raisedSecondary: {}, // legacy - /* Styles applied to the root element if `variant="fab"`. */ + /* Styles applied to the root element if `variant="[fab | extendedFab]"`. */ fab: { borderRadius: '50%', padding: 0, @@ -164,7 +164,7 @@ export const styles = theme => ({ colorInherit: { color: 'inherit', }, - /* Styles applied to the root element if `size="mini"`. */ + /* Styles applied to the root element if `size="mini"` & `variant="[fab | extendedFab]"`. */ mini: { width: 40, height: 40, diff --git a/pages/api/button.md b/pages/api/button.md index 6a6693aa496855..9d7b1883e05f03 100644 --- a/pages/api/button.md +++ b/pages/api/button.md @@ -47,18 +47,18 @@ 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"`. -| contained | Styles applied to the root element if `variant="contained"`. -| containedPrimary | Styles applied to the root element if `variant="contained"` and `color="primary"`. -| containedSecondary | Styles applied to the root element if `variant="contained"` 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"`. | raised | Styles applied to the root element for backwards compatibility with legacy variant naming. | raisedPrimary | Styles applied to the root element for backwards compatibility with legacy variant naming. | raisedSecondary | Styles applied to the root element for backwards compatibility with legacy variant naming. -| fab | Styles applied to the root element if `variant="fab"`. +| fab | Styles applied to the root element if `variant="[fab | extendedFab]"`. | extendedFab | Styles applied to the root element if `variant="extendedFab"`. | focusVisible | Styles applied to the ButtonBase root element if the button is keyboard focused. | disabled | Styles applied to the root element if `disabled={true}`. | colorInherit | Styles applied to the root element if `color="inherit"`. -| mini | Styles applied to the root element if `size="mini"`. +| mini | Styles applied to the root element if `size="mini"` & `variant="[fab | extendedFab]"`. | sizeSmall | Styles applied to the root element if `size="small"`. | sizeLarge | Styles applied to the root element if `size="large"`. | fullWidth | Styles applied to the root element if `fullWidth={true}`.