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; + 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..9edda9c05ba219 100644 --- a/packages/material-ui-lab/src/SpeedDial/SpeedDial.js +++ b/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 ( -
+
{ 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, 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('', () => { assert.strictEqual(handleKeyDown.args[0][0], event); }); }); + + describe('prop: direction', () => { + const testDirection = direction => { + const className = `direction${direction}`; + const wrapper = shallow( + + + + , + ); + 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/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.d.ts b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.d.ts index cb8ea6d5148351..d954cc004badd7 100644 --- a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.d.ts +++ b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.d.ts @@ -8,6 +8,7 @@ export interface SpeedDialActionProps ButtonProps?: Partial; delay?: number; icon: React.ReactNode; + tooltipPlacement?: string; tooltipTitle?: React.ReactNode; } diff --git a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js index 0d1d1319ff3a9e..0c665e1d406426 100644 --- a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js +++ b/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); diff --git a/pages/lab/api/speed-dial-action.md b/pages/lab/api/speed-dial-action.md index d620ace6b7c1e5..2cf25615803511 100644 --- a/pages/lab/api/speed-dial-action.md +++ b/pages/lab/api/speed-dial-action.md @@ -19,6 +19,7 @@ title: SpeedDialAction API | classes | object |   | Useful to extend the style applied to components. | | delay | number | 0 | Adds a transition delay, to allow a series of SpeedDialActions to be animated. | | icon * | node |   | The Icon to display in the SpeedDial Floating Action Button. | +| tooltipPlacement | string | 'left' | Placement of the tooltip. | | tooltipTitle | node |   | Label to display in the tooltip. | Any other properties supplied will be spread to the root element (native element). diff --git a/pages/lab/api/speed-dial.md b/pages/lab/api/speed-dial.md index 0d8981205bcab5..676ff87d4f0b51 100644 --- a/pages/lab/api/speed-dial.md +++ b/pages/lab/api/speed-dial.md @@ -19,6 +19,7 @@ title: SpeedDial API | ButtonProps | object |   | Properties applied to the [`Button`](/api/button) element. | | children * | node |   | SpeedDialActions to display when the SpeedDial is `open`. | | classes | object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. | +| direction | enum: 'up' |
 'down' |
 'left' |
 'right'
| 'top' | The direction the actions open relative to the floating action button. | | hidden | bool | false | If `true`, the SpeedDial will be hidden. | | icon * | element |   | The icon to display in the SpeedDial Floating Action Button. The `SpeedDialIcon` component provides a default Icon with animation. | | onClose | func |   | Callback fired when the component requests to be closed.

**Signature:**
`function(event: object, key: string) => void`
*event:* The event source of the callback
*key:* The key pressed | @@ -40,6 +41,10 @@ This property accepts the following keys: |:-----|:------------| | root | Styles applied to the root element. | fab | Styles applied to the Button component. +| directionUp | Styles applied to the root and action container elements when direction="up" +| directionDown | Styles applied to the root and action container elements when direction="down" +| directionLeft | Styles applied to the root and action container elements when direction="left" +| directionRight | Styles applied to the root and action container elements when direction="right" | actions | Styles applied to the actions (`children` wrapper) element. | actionsClosed | Styles applied to the actions (`children` wrapper) element if `open={false}`.