[SpeedDial] Allow tooltip to always be displayed

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

@@ -0,0 +1,110 @@
+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';
+
+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' },
+  { icon: <SaveIcon />, name: 'Save' },
+  { icon: <PrintIcon />, name: 'Print' },
+  { icon: <ShareIcon />, name: 'Share' },
+  { icon: <DeleteIcon />, name: 'Delete' },
+];
+
+class SpeedDialTooltipOpen 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;
+
+    let isTouch;
+    if (typeof document !== 'undefined') {
+      isTouch = 'ontouchstart' in document.documentElement;
+    }
+
+    return (
+      <div className={classes.root}>
+        <Button onClick={this.handleVisibility}>Toggle Speed Dial</Button>
+        <SpeedDial
+          ariaLabel="SpeedDial example"
+          className={classes.speedDial}
+          hidden={hidden}
+          icon={<SpeedDialIcon />}
+          onBlur={this.handleClose}
+          onClick={this.handleClick}
+          onClose={this.handleClose}
+          onFocus={isTouch ? undefined : this.handleOpen}
+          onMouseEnter={isTouch ? undefined : this.handleOpen}
+          onMouseLeave={this.handleClose}
+          open={open}
+        >
+          {actions.map(action => (
+            <SpeedDialAction
+              key={action.name}
+              icon={action.icon}
+              tooltipTitle={action.name}
+              tooltipOpen
+              onClick={this.handleClick}
+            />
+          ))}
+        </SpeedDial>
+      </div>
+    );
+  }
+}
+
+SpeedDialTooltipOpen.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(SpeedDialTooltipOpen);

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

@@ -21,3 +21,11 @@ You can provide an alternate icon for the closed and open states using the `icon
 of the `SpeedDialIcon` component.
 
 {{"demo": "pages/lab/speed-dial/OpenIconSpeedDial.js"}}
+
+## Persistant action tooltips
+
+The SpeedDialActions tooltips can be be displayed persistently so that users don't have to long-press in order to see the tooltip on touch devices.
+
+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"}}

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

@@ -36,14 +36,32 @@ class SpeedDialAction extends React.Component {
     tooltipOpen: false,
   };
 
+  static getDerivedStateFromProps = (props, state) => {
+    if (!props.open && state.tooltipOpen) {
+      return { tooltipOpen: false };
+    }
+    return null;
+  };
+
   handleTooltipClose = () => {
+    if (this.props.tooltipOpen) return;
     this.setState({ tooltipOpen: false });
   };
 
   handleTooltipOpen = () => {
+    if (this.props.tooltipOpen) return;
     this.setState({ tooltipOpen: true });
   };
 
+  componentDidUpdate = prevProps => {
+    if (!this.props.tooltipOpen || prevProps.open === this.props.open) return;
+    if (!this.state.tooltipOpen) {
+      this.timeout = setTimeout(() => this.setState({ tooltipOpen: true }), this.props.delay + 100);
+    }
+  };
+
+  componentWillUnmount = () => clearTimeout(this.timeout);
+
   render() {
     const {
       ButtonProps,
@@ -56,6 +74,7 @@ class SpeedDialAction extends React.Component {
       open,
       tooltipTitle,
       tooltipPlacement,
+      tooltipOpen,
       ...other
     } = this.props;
 
@@ -125,6 +144,10 @@ SpeedDialAction.propTypes = {
    * @ignore
    */
   open: PropTypes.bool,
+  /**
+   * Make the tooltip always visible when the SpeedDial is open.
+   */
+  tooltipOpen: PropTypes.bool,
   /**
    * Placement of the tooltip.
    */

pages/lab/api/speed-dial-action.md

@@ -23,6 +23,7 @@ import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
 | <span class="prop-name">classes</span> | <span class="prop-type">object |   | Useful to extend the style applied to components. |
 | <span class="prop-name">delay</span> | <span class="prop-type">number | <span class="prop-default">0</span> | Adds a transition delay, to allow a series of SpeedDialActions to be animated. |
 | <span class="prop-name required">icon *</span> | <span class="prop-type">node |   | The Icon to display in the SpeedDial Floating Action Button. |
+| <span class="prop-name">tooltipOpen</span> | <span class="prop-type">bool |   | Make the tooltip always visible when the SpeedDial is open. |
 | <span class="prop-name">tooltipPlacement</span> | <span class="prop-type">enum:&nbsp;'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top'<br> | <span class="prop-default">'left'</span> | Placement of the tooltip. |
 | <span class="prop-name">tooltipTitle</span> | <span class="prop-type">node |   | Label to display in the tooltip. |
 

pages/lab/speed-dial.js

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