[SpeedDial] Allow a tooltip placement prop

packages/material-ui-lab/src/SpeedDial/SpeedDial.d.ts

@@ -11,6 +11,7 @@ export interface SpeedDialProps
  > {
  ariaLabel: string;
  ButtonProps?: Partial<ButtonProps>;
+ direction?: 'up' | 'down' | 'left' | 'right';
  hidden?: boolean;
  icon: React.ReactNode;
  onClose?: React.ReactEventHandler<{}>;

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

@@ -15,17 +15,31 @@ export const styles = {
  root: {
  zIndex: 1050,
  display: 'flex',
- flexDirection: 'column-reverse', // Place the Actions above the FAB.
  pointerEvents: 'none',
  },
  /* Styles applied to the Button component. */
  fab: {
  pointerEvents: 'auto',
  },
+ /* Styles applied to the root and action container elements when direction="up" */
+ directionUp: {
+ flexDirection: 'column-reverse',
+ },
+ /* Styles applied to the root and action container elements when direction="down" */
+ directionDown: {
+ flexDirection: 'column',
+ },
+ /* Styles applied to the root and action container elements when direction="left" */
+ directionLeft: {
+ flexDirection: 'row-reverse',
+ },
+ /* Styles applied to the root and action container elements when direction="right" */
+ directionRight: {
+ flexDirection: 'row',
+ },
  /* Styles applied to the actions (`children` wrapper) element. */
  actions: {
  display: 'flex',
- flexDirection: 'column-reverse', // Display the first action at the bottom.
  paddingBottom: 16,
  pointerEvents: 'auto',
  },
@@ -109,6 +123,7 @@ class SpeedDial extends React.Component {
  onClose,
  onKeyDown,
  open,
+ direction,
  openIcon,
  TransitionComponent,
  transitionDuration,
@@ -158,8 +173,15 @@ class SpeedDial extends React.Component {
  return icon;
  };
 
+ const actionsPlacementClass = {
+ [classes.directionUp]: direction === 'up',
+ [classes.directionDown]: direction === 'down',
+ [classes.directionLeft]: direction === 'left',
+ [classes.directionRight]: direction === 'right',
+ };
+
  return (
- <div className={classNames(classes.root, classNameProp)} {...other}>
+ <div className={classNames(classes.root, actionsPlacementClass, classNameProp)} {...other}>
  <TransitionComponent
  in={!hidden}
  timeout={transitionDuration}
@@ -186,7 +208,11 @@ class SpeedDial extends React.Component {
  </TransitionComponent>
  <div
  id={`${id}-actions`}
- className={classNames(classes.actions, { [classes.actionsClosed]: !open })}
+ className={classNames(
+ classes.actions,
+ { [classes.actionsClosed]: !open },
+ actionsPlacementClass,
+ )}
  ref={ref => {
  this.actionsRef = ref;
  }}
@@ -221,6 +247,10 @@ SpeedDial.propTypes = {
  * @ignore
  */
  className: PropTypes.string,
+ /**
+ * The direction the actions open relative to the floating action button.
+ */
+ direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
  /**
  * If `true`, the SpeedDial will be hidden.
  */
@@ -273,6 +303,7 @@ SpeedDial.propTypes = {
 
 SpeedDial.defaultProps = {
  hidden: false,
+ direction: 'top',
  TransitionComponent: Zoom,
  transitionDuration: {
  enter: duration.enteringScreen,

packages/material-ui-lab/src/SpeedDial/SpeedDial.test.js

@@ -129,4 +129,26 @@ describe('<SpeedDial />', () => {
  assert.strictEqual(handleKeyDown.args[0][0], event);
  });
  });
+
+ describe('prop: direction', () => {
+ const testDirection = direction => {
+ const className = `direction${direction}`;
+ const wrapper = shallow(
+ <SpeedDial {...defaultProps} direction={direction.toLowerCase()} icon={icon}>
+ <SpeedDialAction icon={icon} />
+ <SpeedDialAction icon={icon} />
+ </SpeedDial>,
+ );
+ const actionsWrapper = wrapper.childAt(1);
+ assert.strictEqual(wrapper.hasClass(classes[className]), true);
+ assert.strictEqual(actionsWrapper.hasClass(classes[className]), true);
+ };
+
+ it('should place actions in correct position', () => {
+ testDirection('Up');
+ testDirection('Down');
+ testDirection('Left');
+ testDirection('Right');
+ });
+ });
 });

packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.d.ts

@@ -8,6 +8,7 @@ export interface SpeedDialActionProps
  ButtonProps?: Partial<ButtonProps>;
  delay?: number;
  icon: React.ReactNode;
+ tooltipPlacement?: string;
  tooltipTitle?: React.ReactNode;
 }
 

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

@@ -55,6 +55,7 @@ class SpeedDialAction extends React.Component {
  onClick,
  open,
  tooltipTitle,
+ tooltipPlacement,
  ...other
  } = this.props;
 
@@ -63,7 +64,7 @@ class SpeedDialAction extends React.Component {
  id={id}
  className={classNames(classes.root, classNameProp)}
  title={tooltipTitle}
- placement="left"
+ placement={tooltipPlacement}
  onClose={this.handleTooltipClose}
  onOpen={this.handleTooltipOpen}
  open={open && this.state.tooltipOpen}
@@ -124,6 +125,10 @@ SpeedDialAction.propTypes = {
  * @ignore
  */
  open: PropTypes.bool,
+ /**
+ * Placement of the tooltip.
+ */
+ tooltipPlacement: PropTypes.string,
  /**
  * Label to display in the tooltip.
  */
@@ -133,6 +138,7 @@ SpeedDialAction.propTypes = {
 SpeedDialAction.defaultProps = {
  delay: 0,
  open: false,
+ tooltipPlacement: 'left',
 };
 
 export default withStyles(styles, { name: 'MuiSpeedDialAction' })(SpeedDialAction);

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

@@ -19,6 +19,7 @@ title: SpeedDialAction API
 | <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">tooltipPlacement</span> | <span class="prop-type">string | <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. |
 
 Any other properties supplied will be spread to the root element (native element).

pages/lab/api/speed-dial.md

@@ -19,6 +19,7 @@ title: SpeedDial API
 | <span class="prop-name">ButtonProps</span> | <span class="prop-type">object |   | Properties applied to the [`Button`](/api/button) element. |
 | <span class="prop-name required">children *</span> | <span class="prop-type">node |   | SpeedDialActions to display when the SpeedDial is `open`. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
+| <span class="prop-name">direction</span> | <span class="prop-type">enum:&nbsp;'up'&nbsp;&#124;<br>&nbsp;'down'&nbsp;&#124;<br>&nbsp;'left'&nbsp;&#124;<br>&nbsp;'right'<br> | <span class="prop-default">'top'</span> | The direction the actions open relative to the floating action button. |
 | <span class="prop-name">hidden</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the SpeedDial will be hidden. |
 | <span class="prop-name required">icon *</span> | <span class="prop-type">element |   | The icon to display in the SpeedDial Floating Action Button. The `SpeedDialIcon` component provides a default Icon with animation. |
 | <span class="prop-name">onClose</span> | <span class="prop-type">func |   | Callback fired when the component requests to be closed.<br><br>**Signature:**<br>`function(event: object, key: string) => void`<br>*event:* The event source of the callback<br>*key:* The key pressed |
@@ -40,6 +41,10 @@ This property accepts the following keys:
 |:-----|:------------|
 | <span class="prop-name">root</span> | Styles applied to the root element.
 | <span class="prop-name">fab</span> | Styles applied to the Button component.
+| <span class="prop-name">directionUp</span> | Styles applied to the root and action container elements when direction="up"
+| <span class="prop-name">directionDown</span> | Styles applied to the root and action container elements when direction="down"
+| <span class="prop-name">directionLeft</span> | Styles applied to the root and action container elements when direction="left"
+| <span class="prop-name">directionRight</span> | Styles applied to the root and action container elements when direction="right"
 | <span class="prop-name">actions</span> | Styles applied to the actions (`children` wrapper) element.
 | <span class="prop-name">actionsClosed</span> | Styles applied to the actions (`children` wrapper) element if `open={false}`.