Allows the actions of speed dial to be placed in any direction

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

@@ -6,9 +6,14 @@ import { TransitionHandlerProps } from '@material-ui/core/transitions/transition
 
 export interface SpeedDialProps
  extends StandardProps<
- React.HTMLAttributes<HTMLDivElement> & Partial<TransitionHandlerProps>,
- SpeedDialClassKey
- > {
+ React.HTMLAttributes<HTMLDivElement> & Partial<TransitionHandlerProps>,
+ SpeedDialClassKey
+ > {
+ actionsPlacement?:
+ | 'top'
+ | 'bottom'
+ | 'left'
+ | 'right';
  ariaLabel: string;
  ButtonProps?: Partial<ButtonProps>;
  hidden?: boolean;

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

@@ -15,12 +15,26 @@ export const styles = {
  root: {
  zIndex: 1050,
  display: 'flex',
- flexDirection: 'column-reverse', // Place the Actions above the FAB.
+ },
+ /* Styles when actions are placed to the top */
+ actionsTop: {
+ flexDirection: 'column-reverse',
+ },
+ /* Styles when actions are placed to the bottom */
+ actionsBottom: {
+ flexDirection: 'column',
+ },
+ /* Styles when actions are placed to the left */
+ actionsLeft: {
+ flexDirection: 'row-reverse',
+ },
+ /* Styles when actions are placed to the right */
+ actionsRight: {
+ flexDirection: 'row',
  },
  /* Styles applied to the actions (`children` wrapper) element. */
  actions: {
  display: 'flex',
- flexDirection: 'column-reverse', // Display the first action at the bottom.
  marginBottom: 16,
  },
  /* Styles applied to the actions (`children` wrapper) element if `open={false}`. */
@@ -102,6 +116,7 @@ class SpeedDial extends React.Component {
  onClose,
  onKeyDown,
  open,
+ actionsPlacement,
  openIcon,
  TransitionComponent,
  transitionDuration,
@@ -151,8 +166,15 @@ class SpeedDial extends React.Component {
  return icon;
  };
 
+ const actionsPlacementClass = {
+ [classes.actionsTop]: actionsPlacement === 'top',
+ [classes.actionsBottom]: actionsPlacement === 'bottom',
+ [classes.actionsLeft]: actionsPlacement === 'left',
+ [classes.actionsRight]: actionsPlacement === 'right',
+ }
+
  return (
- <div className={classNames(classes.root, classNameProp)} {...other}>
+ <div className={classNames(classes.root, classNameProp, actionsPlacementClass)} {...other}>
  <TransitionComponent
  in={!hidden}
  timeout={transitionDuration}
@@ -178,7 +200,7 @@ 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;
  }}
@@ -191,6 +213,15 @@ class SpeedDial extends React.Component {
 }
 
 SpeedDial.propTypes = {
+ /**
+ * The placement of floating actions buttons in relation to speed dial.
+ */
+ actionsPlacement: PropTypes.oneOf([
+ 'top',
+ 'bottom',
+ 'left',
+ 'right',
+ ]),
  /**
  * The aria-label of the `Button` element.
  * Also used to provide the `id` for the `SpeedDial` element and its children.
@@ -265,6 +296,7 @@ SpeedDial.propTypes = {
 
 SpeedDial.defaultProps = {
  hidden: false,
+ actionsPlacement: '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: actionPlacement', () => {
+ const testPlacement = placement => {
+ const className = `actions${placement}`;
+ const wrapper = shallow(
+ <SpeedDial {...defaultProps} actionsPlacement={placement.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', () => {
+ testPlacement('Left');
+ testPlacement('Right');
+ testPlacement('Top');
+ testPlacement('Bottom');
+ });
+ });
 });

pages/lab/api/speed-dial.md

@@ -15,6 +15,7 @@ title: SpeedDial API
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
+| <span class="prop-name">actionsPlacement</span> | <span class="prop-type">enum:&nbsp;'top'&nbsp;&#124;<br>&nbsp;'bottom'&nbsp;&#124;<br>&nbsp;'left'&nbsp;&#124;<br>&nbsp;'right'<br> | <span class="prop-default">'top'</span> | The placement of floating actions buttons in relation to speed dial. |
 | <span class="prop-name required">ariaLabel *</span> | <span class="prop-type">string |   | The aria-label of the `Button` element. Also used to provide the `id` for the `SpeedDial` element and its children. |
 | <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`. |
@@ -39,6 +40,10 @@ This property accepts the following keys:
 | Name | Description |
 |:-----|:------------|
 | <span class="prop-name">root</span> | Styles applied to the root element.
+| <span class="prop-name">actionsTop</span> | Styles when actions are placed to the top
+| <span class="prop-name">actionsBottom</span> | Styles when actions are placed to the bottom
+| <span class="prop-name">actionsLeft</span> | Styles when actions are placed to the left
+| <span class="prop-name">actionsRight</span> | Styles when actions are placed to the 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}`.