Skip to content

Commit

Permalink
[SpeedDial] Move from lab to core
Browse files Browse the repository at this point in the history
  • Loading branch information
mbrookes committed Sep 26, 2020
1 parent de5c502 commit 74ac597
Show file tree
Hide file tree
Showing 42 changed files with 1,208 additions and 1,111 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
13 changes: 11 additions & 2 deletions docs/src/pages/components/speed-dial/speed-dial.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
title: Speed Dial React component
components: SpeedDial, SpeedDialAction, SpeedDialIcon
githubLabel: 'component: SpeedDial'
packageName: '@material-ui/lab'
---

# Speed Dial
Expand All @@ -17,7 +16,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 +38,13 @@ 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

### Keyboard

It's complicated.

SpeedDial behaves as a menu where keyboard interaction is concerned.
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 74ac597

Please sign in to comment.