From a5775fed18ee2d44077378f6fdcd03e50fa63eb1 Mon Sep 17 00:00:00 2001
From: Sean Chamberlain <sean.chamberlain@ailytic.com>
Date: Wed, 1 Aug 2018 15:12:56 +0930
Subject: [PATCH] Allows the actions of speed dial to be placed in any
 direction

# Conflicts:
#	packages/material-ui-lab/src/SpeedDial/SpeedDial.js
#	pages/lab/api/speed-dial.md
---
 .../src/SpeedDial/SpeedDial.d.ts              |  1 +
 .../src/SpeedDial/SpeedDial.js                | 40 +++++++++++++++++--
 .../src/SpeedDial/SpeedDial.test.js           | 22 ++++++++++
 pages/lab/api/speed-dial.md                   |  5 +++
 4 files changed, 64 insertions(+), 4 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..57301d75802b9d 100644
--- a/packages/material-ui-lab/src/SpeedDial/SpeedDial.d.ts
+++ b/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<{}>;
diff --git a/packages/material-ui-lab/src/SpeedDial/SpeedDial.js b/packages/material-ui-lab/src/SpeedDial/SpeedDial.js
index bc18f916450994..f33df350b05c1a 100644
--- a/packages/material-ui-lab/src/SpeedDial/SpeedDial.js
+++ b/packages/material-ui-lab/src/SpeedDial/SpeedDial.js
@@ -15,19 +15,34 @@ 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',
+    marginBottom: 16,
   },
   /* Styles applied to the actions (`children` wrapper) element if `open={false}`. */
   actionsClosed: {
@@ -109,6 +124,7 @@ class SpeedDial extends React.Component {
       onClose,
       onKeyDown,
       open,
+      direction,
       openIcon,
       TransitionComponent,
       transitionDuration,
@@ -158,8 +174,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 +209,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 +248,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 +304,7 @@ SpeedDial.propTypes = {
 
 SpeedDial.defaultProps = {
   hidden: false,
+  direction: '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..94519137eb51e6 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: 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');
+    });
+  });
 });
diff --git a/pages/lab/api/speed-dial.md b/pages/lab/api/speed-dial.md
index 0d8981205bcab5..e144262bc83803 100644
--- a/pages/lab/api/speed-dial.md
+++ b/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 |
@@ -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">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">fab</span> | Styles applied to the Button component.
 | <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}`.