From f4c06c0dfc26e219f5d9ee616d5a4aa415efe6fd Mon Sep 17 00:00:00 2001
From: Sean Chamberlain <sean.chamberlain@ailytic.com>
Date: Wed, 25 Jul 2018 10:46:45 +0930
Subject: [PATCH] Allows the actions of speed dial to be placed in any
 direction

---
 .../src/SpeedDial/SpeedDial.d.ts              | 11 +++--
 .../src/SpeedDial/SpeedDial.js                | 40 +++++++++++++++++--
 .../src/SpeedDial/SpeedDial.test.js           | 22 ++++++++++
 pages/lab/api/speed-dial.md                   |  5 +++
 4 files changed, 71 insertions(+), 7 deletions(-)

diff --git a/packages/material-ui-lab/src/SpeedDial/SpeedDial.d.ts b/packages/material-ui-lab/src/SpeedDial/SpeedDial.d.ts
index f7db93a28467bd..22deadaf281153 100644
--- a/packages/material-ui-lab/src/SpeedDial/SpeedDial.d.ts
+++ b/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;
diff --git a/packages/material-ui-lab/src/SpeedDial/SpeedDial.js b/packages/material-ui-lab/src/SpeedDial/SpeedDial.js
index b1697a34f07faf..be9e92ef62c1de 100644
--- a/packages/material-ui-lab/src/SpeedDial/SpeedDial.js
+++ b/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,
diff --git a/packages/material-ui-lab/src/SpeedDial/SpeedDial.test.js b/packages/material-ui-lab/src/SpeedDial/SpeedDial.test.js
index d38ca042a99be9..7143f51a15e036 100644
--- a/packages/material-ui-lab/src/SpeedDial/SpeedDial.test.js
+++ b/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');
+    });
+  });
 });
diff --git a/pages/lab/api/speed-dial.md b/pages/lab/api/speed-dial.md
index 84129e6a88572c..bbb659c04f5023 100644
--- a/pages/lab/api/speed-dial.md
+++ b/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}`.