Skip to content

Commit

Permalink
[SpeedDial] Move from lab to core (#22743)
Browse files Browse the repository at this point in the history
  • Loading branch information
mbrookes authored Sep 28, 2020
1 parent 8ea6bbf commit 814fb60
Show file tree
Hide file tree
Showing 43 changed files with 1,225 additions and 1,114 deletions.
8 changes: 4 additions & 4 deletions docs/pages/api-docs/speed-dial-action.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
filename: /packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js
filename: /packages/material-ui/src/SpeedDialAction/SpeedDialAction.js
---

<!--- This documentation is automatically generated, do not try to edit it. -->
Expand All @@ -11,9 +11,9 @@ filename: /packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js
## Import

```js
import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
import SpeedDialAction from '@material-ui/core/SpeedDialAction';
// or
import { SpeedDialAction } from '@material-ui/lab';
import { SpeedDialAction } from '@material-ui/core';
```

You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
Expand Down Expand Up @@ -61,7 +61,7 @@ You can override the style of the component thanks to one of these customization
- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
- With a theme and an [`overrides` property](/customization/globals/#css).

If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js) for more detail.
If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/SpeedDialAction/SpeedDialAction.js) for more detail.

## Inheritance

Expand Down
8 changes: 4 additions & 4 deletions docs/pages/api-docs/speed-dial-icon.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
filename: /packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.js
filename: /packages/material-ui/src/SpeedDialIcon/SpeedDialIcon.js
---

<!--- This documentation is automatically generated, do not try to edit it. -->
Expand All @@ -11,9 +11,9 @@ filename: /packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.js
## Import

```js
import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon';
import SpeedDialIcon from '@material-ui/core/SpeedDialIcon';
// or
import { SpeedDialIcon } from '@material-ui/lab';
import { SpeedDialIcon } from '@material-ui/core';
```

You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
Expand Down Expand Up @@ -53,7 +53,7 @@ You can override the style of the component thanks to one of these customization
- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
- With a theme and an [`overrides` property](/customization/globals/#css).

If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-lab/src/SpeedDialIcon/SpeedDialIcon.js) for more detail.
If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/SpeedDialIcon/SpeedDialIcon.js) for more detail.

## Demos

Expand Down
8 changes: 4 additions & 4 deletions docs/pages/api-docs/speed-dial.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
filename: /packages/material-ui-lab/src/SpeedDial/SpeedDial.js
filename: /packages/material-ui/src/SpeedDial/SpeedDial.js
---

<!--- This documentation is automatically generated, do not try to edit it. -->
Expand All @@ -11,9 +11,9 @@ filename: /packages/material-ui-lab/src/SpeedDial/SpeedDial.js
## Import

```js
import SpeedDial from '@material-ui/lab/SpeedDial';
import SpeedDial from '@material-ui/core/SpeedDial';
// or
import { SpeedDial } from '@material-ui/lab';
import { SpeedDial } from '@material-ui/core';
```

You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
Expand Down Expand Up @@ -66,7 +66,7 @@ You can override the style of the component thanks to one of these customization
- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
- With a theme and an [`overrides` property](/customization/globals/#css).

If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui-lab/src/SpeedDial/SpeedDial.js) for more detail.
If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/SpeedDial/SpeedDial.js) for more detail.

## Demos

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ const pages = [
{ pathname: '/components/drawers' },
{ pathname: '/components/links' },
{ pathname: '/components/menus' },
{ pathname: '/components/speed-dial' },
{ pathname: '/components/steppers' },
{ pathname: '/components/tabs' },
],
Expand Down Expand Up @@ -124,7 +125,6 @@ const pages = [
{ pathname: '/components/skeleton' },
{ pathname: '/components/rating' },
{ pathname: '/components/slider-styled' },
{ pathname: '/components/speed-dial' },
{ pathname: '/components/timeline' },
{ pathname: '/components/toggle-button' },
{ pathname: '/components/trap-focus' },
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import FormLabel from '@material-ui/core/FormLabel';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import Switch from '@material-ui/core/Switch';
import SpeedDial from '@material-ui/lab/SpeedDial';
import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon';
import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
import SpeedDial from '@material-ui/core/SpeedDial';
import SpeedDialIcon from '@material-ui/core/SpeedDialIcon';
import SpeedDialAction from '@material-ui/core/SpeedDialAction';
import FileCopyIcon from '@material-ui/icons/FileCopyOutlined';
import SaveIcon from '@material-ui/icons/Save';
import PrintIcon from '@material-ui/icons/Print';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import FormLabel from '@material-ui/core/FormLabel';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import Switch from '@material-ui/core/Switch';
import SpeedDial, { SpeedDialProps } from '@material-ui/lab/SpeedDial';
import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon';
import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
import SpeedDial, { SpeedDialProps } from '@material-ui/core/SpeedDial';
import SpeedDialIcon from '@material-ui/core/SpeedDialIcon';
import SpeedDialAction from '@material-ui/core/SpeedDialAction';
import FileCopyIcon from '@material-ui/icons/FileCopyOutlined';
import SaveIcon from '@material-ui/icons/Save';
import PrintIcon from '@material-ui/icons/Print';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import SpeedDial from '@material-ui/lab/SpeedDial';
import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon';
import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
import SpeedDial from '@material-ui/core/SpeedDial';
import SpeedDialIcon from '@material-ui/core/SpeedDialIcon';
import SpeedDialAction from '@material-ui/core/SpeedDialAction';
import FileCopyIcon from '@material-ui/icons/FileCopyOutlined';
import SaveIcon from '@material-ui/icons/Save';
import PrintIcon from '@material-ui/icons/Print';
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import * as React from 'react';
import { makeStyles, Theme } from '@material-ui/core/styles';
import SpeedDial from '@material-ui/lab/SpeedDial';
import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon';
import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
import SpeedDial from '@material-ui/core/SpeedDial';
import SpeedDialIcon from '@material-ui/core/SpeedDialIcon';
import SpeedDialAction from '@material-ui/core/SpeedDialAction';
import FileCopyIcon from '@material-ui/icons/FileCopyOutlined';
import SaveIcon from '@material-ui/icons/Save';
import PrintIcon from '@material-ui/icons/Print';
Expand Down
6 changes: 3 additions & 3 deletions docs/src/pages/components/speed-dial/OpenIconSpeedDial.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import SpeedDial from '@material-ui/lab/SpeedDial';
import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon';
import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
import SpeedDial from '@material-ui/core/SpeedDial';
import SpeedDialIcon from '@material-ui/core/SpeedDialIcon';
import SpeedDialAction from '@material-ui/core/SpeedDialAction';
import FileCopyIcon from '@material-ui/icons/FileCopyOutlined';
import SaveIcon from '@material-ui/icons/Save';
import PrintIcon from '@material-ui/icons/Print';
Expand Down
6 changes: 3 additions & 3 deletions docs/src/pages/components/speed-dial/OpenIconSpeedDial.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import * as React from 'react';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import SpeedDial from '@material-ui/lab/SpeedDial';
import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon';
import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
import SpeedDial from '@material-ui/core/SpeedDial';
import SpeedDialIcon from '@material-ui/core/SpeedDialIcon';
import SpeedDialAction from '@material-ui/core/SpeedDialAction';
import FileCopyIcon from '@material-ui/icons/FileCopyOutlined';
import SaveIcon from '@material-ui/icons/Save';
import PrintIcon from '@material-ui/icons/Print';
Expand Down
6 changes: 3 additions & 3 deletions docs/src/pages/components/speed-dial/SpeedDialTooltipOpen.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Backdrop from '@material-ui/core/Backdrop';
import SpeedDial from '@material-ui/lab/SpeedDial';
import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon';
import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
import SpeedDial from '@material-ui/core/SpeedDial';
import SpeedDialIcon from '@material-ui/core/SpeedDialIcon';
import SpeedDialAction from '@material-ui/core/SpeedDialAction';
import FileCopyIcon from '@material-ui/icons/FileCopyOutlined';
import SaveIcon from '@material-ui/icons/Save';
import PrintIcon from '@material-ui/icons/Print';
Expand Down
6 changes: 3 additions & 3 deletions docs/src/pages/components/speed-dial/SpeedDialTooltipOpen.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import * as React from 'react';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import Backdrop from '@material-ui/core/Backdrop';
import SpeedDial from '@material-ui/lab/SpeedDial';
import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon';
import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
import SpeedDial from '@material-ui/core/SpeedDial';
import SpeedDialIcon from '@material-ui/core/SpeedDialIcon';
import SpeedDialAction from '@material-ui/core/SpeedDialAction';
import FileCopyIcon from '@material-ui/icons/FileCopyOutlined';
import SaveIcon from '@material-ui/icons/Save';
import PrintIcon from '@material-ui/icons/Print';
Expand Down
29 changes: 26 additions & 3 deletions docs/src/pages/components/speed-dial/speed-dial.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
---
title: Speed Dial React component
title: React Speed Dial component
components: SpeedDial, SpeedDialAction, SpeedDialIcon
githubLabel: 'component: SpeedDial'
packageName: '@material-ui/lab'
https://material.io/components/buttons-floating-action-button#types-of-transitions
waiAria: https://www.w3.org/TR/wai-aria-practices/#menubutton
---

# Speed Dial
Expand All @@ -17,7 +18,7 @@ If more than six actions are needed, something other than a FAB should be used t

The floating action button can display related actions.

{{"demo": "pages/components/speed-dial/SpeedDials.js"}}
{{"demo": "pages/components/speed-dial/BasicSpeedDial.js"}}

## Controlled speed dial

Expand All @@ -39,3 +40,25 @@ The SpeedDialActions tooltips can be displayed persistently so that users don't
It is enabled here across all devices for demo purposes, but in production it could use the `isTouch` logic to conditionally set the prop.

{{"demo": "pages/components/speed-dial/SpeedDialTooltipOpen.js"}}

## Accessibility

### ARIA

#### Required

- You should provide an `ariaLabel` for the speed dial component.
- You should provide a `tooltipTitle` for each speed dial action.

#### Provided

- The Fab has `aria-haspopup`, `aria-expanded` and `aria-controls` attributes.
- The speed dial actions container has `role="menu"` and `aria-orientation` set acccording to the direction.
- The speed dial actions have `role="menuitem"`, and an `aria-describedby` attribute that references the associated tooltip.

### Keyboard

- The speed dial opens on focus.
- The Space and Enter keys trigger the selected speed dial action, and toggle the speed dial open state.
- The cursor keys move focus to the next or previous speed dial action. (Note that any cursor direction can be used initially to open the speed dial. This enables the expected behavior for the actual or percieved orientation of the speed dial, for example for a screen reader user who percieves the speed dial as a drop-down menu.)
- The Escape key closes the speed dial and, if a speed dial action was focused, returns focus to the Fab.
13 changes: 13 additions & 0 deletions docs/src/pages/guides/migration-v4/migration-v4.md
Original file line number Diff line number Diff line change
Expand Up @@ -626,6 +626,19 @@ const theme = createMuitheme({
/>
```

### SpeedDial

- Move the component from the lab to the core. The component is now stable.

```diff
-import SpeedDial from '@material-ui/lab/SpeedDial';
-import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
-import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon';
+import SpeedDial from '@material-ui/core/SpeedDial';
+import SpeedDialAction from '@material-ui/core/SpeedDialAction';
+import SpeedDialIcon from '@material-ui/core/SpeedDialIcon';
```

### Stepper

- The root component (Paper) was replaced with a div. Stepper no longer has elevation, nor inherits Paper's props. This change is meant to encourage composition.
Expand Down
122 changes: 2 additions & 120 deletions packages/material-ui-lab/src/SpeedDial/SpeedDial.d.ts
Original file line number Diff line number Diff line change
@@ -1,120 +1,2 @@
import * as React from 'react';
import { InternalStandardProps as StandardProps } from '@material-ui/core';
import { FabProps } from '@material-ui/core/Fab';
import { TransitionHandlerProps, TransitionProps } from '@material-ui/core/transitions';

export type CloseReason = 'toggle' | 'blur' | 'mouseLeave' | 'escapeKeyDown';
export type OpenReason = 'toggle' | 'focus' | 'mouseEnter';

export interface SpeedDialProps
extends StandardProps<
React.HTMLAttributes<HTMLDivElement> & Partial<TransitionHandlerProps>,
'children'
> {
/**
* SpeedDialActions to display when the SpeedDial is `open`.
*/
children?: React.ReactNode;
/**
* Override or extend the styles applied to the component.
*/
classes?: {
/** Styles applied to the root element. */
root?: string;
/** Styles applied to the Fab component. */
fab?: string;
/** Styles applied to the root if direction="up" */
directionUp?: string;
/** Styles applied to the root if direction="down" */
directionDown?: string;
/** Styles applied to the root if direction="left" */
directionLeft?: string;
/** Styles applied to the root if direction="right" */
directionRight?: string;
/** Styles applied to the actions (`children` wrapper) element. */
actions?: string;
/** Styles applied to the actions (`children` wrapper) element if `open={false}`. */
actionsClosed?: string;
};
/**
* The aria-label of the button element.
* Also used to provide the `id` for the `SpeedDial` element and its children.
*/
ariaLabel: string;
/**
* The direction the actions open relative to the floating action button.
* @default 'up'
*/
direction?: 'up' | 'down' | 'left' | 'right';
/**
* If `true`, the SpeedDial will be hidden.
* @default false
*/
hidden?: boolean;
/**
* Props applied to the [`Fab`](/api/fab/) element.
* @default {}
*/
FabProps?: Partial<FabProps>;
/**
* The icon to display in the SpeedDial Fab. The `SpeedDialIcon` component
* provides a default Icon with animation.
*/
icon?: React.ReactNode;
/**
* Callback fired when the component requests to be closed.
*
* @param {object} event The event source of the callback.
* @param {string} reason Can be: `"toggle"`, `"blur"`, `"mouseLeave"`, `"escapeKeyDown"`.
*/
onClose?: (event: React.SyntheticEvent<{}>, reason: CloseReason) => void;
/**
* Callback fired when the component requests to be open.
*
* @param {object} event The event source of the callback.
* @param {string} reason Can be: `"toggle"`, `"focus"`, `"mouseEnter"`.
*/
onOpen?: (event: React.SyntheticEvent<{}>, reason: OpenReason) => void;
/**
* If `true`, the SpeedDial is open.
*/
open?: boolean;
/**
* The icon to display in the SpeedDial Fab when the SpeedDial is open.
*/
openIcon?: React.ReactNode;
/**
* The component used for the transition.
* [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* @default Zoom
*/
TransitionComponent?: React.ComponentType<TransitionProps>;
/**
* The duration for the transition, in milliseconds.
* You may specify a single timeout for all transitions, or individually with an object.
* @default {
* enter: duration.enteringScreen,
* exit: duration.leavingScreen,
* }
*/
transitionDuration?: TransitionProps['timeout'];
/**
* Props applied to the transition element.
* By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition) component.
*/
TransitionProps?: TransitionProps;
}

export type SpeedDialClassKey = keyof NonNullable<SpeedDialProps['classes']>;

/**
*
* Demos:
*
* - [Speed Dial](https://material-ui.com/components/speed-dial/)
*
* API:
*
* - [SpeedDial API](https://material-ui.com/api/speed-dial/)
*/
export default function SpeedDial(props: SpeedDialProps): JSX.Element;
export { default } from '@material-ui/core/SpeedDial';
export * from '@material-ui/core/SpeedDial';
Loading

0 comments on commit 814fb60

Please sign in to comment.