[SpeedDialAction] pass through button color props to speed dial action button

docs/src/pages/lab/speed-dial/ColoredSpeedDialActions.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import SpeedDial from '@material-ui/lab/SpeedDial';
+import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon';
+import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
+import FileCopyIcon from '@material-ui/icons/FileCopyOutlined';
+import SaveIcon from '@material-ui/icons/Save';
+import PrintIcon from '@material-ui/icons/Print';
+import ShareIcon from '@material-ui/icons/Share';
+import DeleteIcon from '@material-ui/icons/Delete';
+import EditIcon from '@material-ui/icons/Edit';
+
+const styles = theme => ({
+  root: {
+    height: 380,
+  },
+  speedDial: {
+    position: 'absolute',
+    bottom: theme.spacing.unit * 2,
+    right: theme.spacing.unit * 3,
+  },
+});
+
+const actions = [
+  { icon: <FileCopyIcon />, name: 'Copy', color: 'primary' },
+  { icon: <SaveIcon />, name: 'Save', color: 'secondary' },
+  { icon: <PrintIcon />, name: 'Print' },
+  { icon: <ShareIcon />, name: 'Share' },
+  { icon: <DeleteIcon />, name: 'Delete' },
+];
+
+class ColoredSpeedDialActions extends React.Component {
+  state = {
+    open: false,
+    hidden: false,
+  };
+
+  handleVisibility = () => {
+    this.setState(state => ({
+      open: false,
+      hidden: !state.hidden,
+    }));
+  };
+
+  handleClick = () => {
+    this.setState(state => ({
+      open: !state.open,
+    }));
+  };
+
+  handleOpen = () => {
+    if (!this.state.hidden) {
+      this.setState({
+        open: true,
+      });
+    }
+  };
+
+  handleClose = () => {
+    this.setState({
+      open: false,
+    });
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { hidden, open } = this.state;
+
+    return (
+      <div className={classes.root}>
+        <Button onClick={this.handleVisibility}>Toggle Speed Dial</Button>
+        <SpeedDial
+          ariaLabel="SpeedDial openIcon example"
+          className={classes.speedDial}
+          hidden={hidden}
+          icon={<SpeedDialIcon openIcon={<EditIcon />} />}
+          onBlur={this.handleClose}
+          onClick={this.handleClick}
+          onClose={this.handleClose}
+          onFocus={this.handleOpen}
+          onMouseEnter={this.handleOpen}
+          onMouseLeave={this.handleClose}
+          open={open}
+        >
+          {actions.map(action => (
+            <SpeedDialAction
+              key={action.name}
+              ButtonProps={{
+                color: action.color,
+              }}
+              icon={action.icon}
+              tooltipTitle={action.name}
+              onClick={this.handleClick}
+            />
+          ))}
+        </SpeedDial>
+      </div>
+    );
+  }
+}
+
+ColoredSpeedDialActions.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(ColoredSpeedDialActions);

docs/src/pages/lab/speed-dial/speed-dial.md

@@ -29,3 +29,9 @@ The SpeedDialActions tooltips can be be displayed persistently so that users don
 It is enabled here across all devices for demo purposes, but in production it could use the `isTouch` logic to conditionally set the property.
 
 {{"demo": "pages/lab/speed-dial/SpeedDialTooltipOpen.js"}}
+
+## Colored action buttons
+
+The SpeedDialActions can be colored.
+
+{{"demo": "pages/lab/speed-dial/ColoredSpeedDialActions.js"}}

packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js

@@ -2,7 +2,6 @@ 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,11 +13,6 @@ export const styles = theme => ({
   /* Styles applied to the `Button` component. */
   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`,

pages/lab/speed-dial.js

@@ -27,6 +27,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/lab/speed-dial/SpeedDialTooltipOpen'), 'utf8')
+`,
+        },
+        'pages/lab/speed-dial/ColoredSpeedDialActions.js': {
+          js: require('docs/src/pages/lab/speed-dial/ColoredSpeedDialActions').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/lab/speed-dial/ColoredSpeedDialActions'), 'utf8')
 `,
         },
       }}