[SpeedDial] Move from lab to core

docs/pages/api-docs/speed-dial-action.md

@@ -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. -->
@@ -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/).
@@ -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
 

docs/pages/api-docs/speed-dial-icon.md

@@ -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. -->
@@ -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/).
@@ -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
 

docs/pages/api-docs/speed-dial.md

@@ -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. -->
@@ -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/).
@@ -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
 

docs/src/pages.js

@@ -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' },
         ],
@@ -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' },

docs/src/pages/components/speed-dial/SpeedDials.js → docs/src/pages/components/speed-dial/BasicSpeedDial.js

@@ -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';

docs/src/pages/components/speed-dial/SpeedDials.tsx → docs/src/pages/components/speed-dial/BasicSpeedDial.tsx

@@ -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';

docs/src/pages/components/speed-dial/ControlledOpenSpeedDial.js

@@ -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';

docs/src/pages/components/speed-dial/ControlledOpenSpeedDial.tsx

@@ -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';

docs/src/pages/components/speed-dial/OpenIconSpeedDial.js

@@ -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';

docs/src/pages/components/speed-dial/OpenIconSpeedDial.tsx

@@ -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';

docs/src/pages/components/speed-dial/SpeedDialTooltipOpen.js

@@ -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';

docs/src/pages/components/speed-dial/SpeedDialTooltipOpen.tsx

@@ -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';

docs/src/pages/components/speed-dial/speed-dial.md

@@ -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
@@ -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
 
@@ -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.

docs/src/pages/guides/migration-v4/migration-v4.md

@@ -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.

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

@@ -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';