From 5394dfdff1a30237910cf45bb6113b77f03c779c Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 14 Mar 2021 16:09:02 -0300 Subject: [PATCH 1/5] docs: Migrate basic speed dial demo to emotion --- .../components/speed-dial/BasicSpeedDial.js | 49 ++++++---------- .../components/speed-dial/BasicSpeedDial.tsx | 57 +++++++------------ 2 files changed, 37 insertions(+), 69 deletions(-) diff --git a/docs/src/pages/components/speed-dial/BasicSpeedDial.js b/docs/src/pages/components/speed-dial/BasicSpeedDial.js index 2b545734da61e1..2d635210ce315b 100644 --- a/docs/src/pages/components/speed-dial/BasicSpeedDial.js +++ b/docs/src/pages/components/speed-dial/BasicSpeedDial.js @@ -1,5 +1,6 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import FormLabel from '@material-ui/core/FormLabel'; import Radio from '@material-ui/core/Radio'; @@ -13,29 +14,15 @@ import SaveIcon from '@material-ui/icons/Save'; import PrintIcon from '@material-ui/icons/Print'; import ShareIcon from '@material-ui/icons/Share'; -const useStyles = makeStyles((theme) => ({ - root: { - transform: 'translateZ(0px)', - flexGrow: 1, +const StyledSpeedDial = styled(SpeedDial)(({ theme }) => ({ + position: 'absolute', + '&.MuiSpeedDial-directionUp, &.MuiSpeedDial-directionLeft': { + bottom: theme.spacing(2), + right: theme.spacing(2), }, - exampleWrapper: { - position: 'relative', - marginTop: theme.spacing(3), - height: 320, - }, - radioGroup: { - margin: theme.spacing(1, 0), - }, - speedDial: { - position: 'absolute', - '&.MuiSpeedDial-directionUp, &.MuiSpeedDial-directionLeft': { - bottom: theme.spacing(2), - right: theme.spacing(2), - }, - '&.MuiSpeedDial-directionDown, &.MuiSpeedDial-directionRight': { - top: theme.spacing(2), - left: theme.spacing(2), - }, + '&.MuiSpeedDial-directionDown, &.MuiSpeedDial-directionRight': { + top: theme.spacing(2), + left: theme.spacing(2), }, })); @@ -47,7 +34,6 @@ const actions = [ ]; export default function SpeedDials() { - const classes = useStyles(); const [direction, setDirection] = React.useState('up'); const [hidden, setHidden] = React.useState(false); @@ -61,14 +47,14 @@ export default function SpeedDials() { }; return ( -
+ } label="Hidden" /> - + Direction } label="Down" /> } label="Left" /> -
- + -
-
+ + + ); } diff --git a/docs/src/pages/components/speed-dial/BasicSpeedDial.tsx b/docs/src/pages/components/speed-dial/BasicSpeedDial.tsx index 873f361664b5e4..feb2854f519393 100644 --- a/docs/src/pages/components/speed-dial/BasicSpeedDial.tsx +++ b/docs/src/pages/components/speed-dial/BasicSpeedDial.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import FormLabel from '@material-ui/core/FormLabel'; import Radio from '@material-ui/core/Radio'; @@ -13,33 +14,17 @@ import SaveIcon from '@material-ui/icons/Save'; import PrintIcon from '@material-ui/icons/Print'; import ShareIcon from '@material-ui/icons/Share'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - transform: 'translateZ(0px)', - flexGrow: 1, - }, - exampleWrapper: { - position: 'relative', - marginTop: theme.spacing(3), - height: 320, - }, - radioGroup: { - margin: theme.spacing(1, 0), - }, - speedDial: { - position: 'absolute', - '&.MuiSpeedDial-directionUp, &.MuiSpeedDial-directionLeft': { - bottom: theme.spacing(2), - right: theme.spacing(2), - }, - '&.MuiSpeedDial-directionDown, &.MuiSpeedDial-directionRight': { - top: theme.spacing(2), - left: theme.spacing(2), - }, - }, - }), -); +const StyledSpeedDial = styled(SpeedDial)(({ theme }) => ({ + position: 'absolute', + '&.MuiSpeedDial-directionUp, &.MuiSpeedDial-directionLeft': { + bottom: theme.spacing(2), + right: theme.spacing(2), + }, + '&.MuiSpeedDial-directionDown, &.MuiSpeedDial-directionRight': { + top: theme.spacing(2), + left: theme.spacing(2), + }, +})); const actions = [ { icon: , name: 'Copy' }, @@ -49,7 +34,6 @@ const actions = [ ]; export default function SpeedDials() { - const classes = useStyles(); const [direction, setDirection] = React.useState( 'up', ); @@ -66,14 +50,14 @@ export default function SpeedDials() { }; return ( -
+ } label="Hidden" /> - + Direction } label="Down" /> } label="Left" /> -
- + -
-
+ + + ); } From e4b89c4baa86974a4e1bf27cb94621128be682b0 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 14 Mar 2021 16:09:25 -0300 Subject: [PATCH 2/5] docs: Migrate controlled speed dial demo to emotion --- .../speed-dial/ControlledOpenSpeedDial.js | 22 ++++--------------- .../speed-dial/ControlledOpenSpeedDial.tsx | 22 ++++--------------- 2 files changed, 8 insertions(+), 36 deletions(-) diff --git a/docs/src/pages/components/speed-dial/ControlledOpenSpeedDial.js b/docs/src/pages/components/speed-dial/ControlledOpenSpeedDial.js index 5d7f2401c3f744..0b22e2c57d815c 100644 --- a/docs/src/pages/components/speed-dial/ControlledOpenSpeedDial.js +++ b/docs/src/pages/components/speed-dial/ControlledOpenSpeedDial.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import SpeedDial from '@material-ui/core/SpeedDial'; import SpeedDialIcon from '@material-ui/core/SpeedDialIcon'; import SpeedDialAction from '@material-ui/core/SpeedDialAction'; @@ -8,19 +8,6 @@ import SaveIcon from '@material-ui/icons/Save'; import PrintIcon from '@material-ui/icons/Print'; import ShareIcon from '@material-ui/icons/Share'; -const useStyles = makeStyles((theme) => ({ - root: { - height: 320, - transform: 'translateZ(0px)', - flexGrow: 1, - }, - speedDial: { - position: 'absolute', - bottom: theme.spacing(2), - right: theme.spacing(2), - }, -})); - const actions = [ { icon: , name: 'Copy' }, { icon: , name: 'Save' }, @@ -29,16 +16,15 @@ const actions = [ ]; export default function ControlledOpenSpeedDial() { - const classes = useStyles(); const [open, setOpen] = React.useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); return ( -
+ } onClose={handleClose} onOpen={handleOpen} @@ -53,6 +39,6 @@ export default function ControlledOpenSpeedDial() { /> ))} -
+ ); } diff --git a/docs/src/pages/components/speed-dial/ControlledOpenSpeedDial.tsx b/docs/src/pages/components/speed-dial/ControlledOpenSpeedDial.tsx index 96d984044a965c..0b22e2c57d815c 100644 --- a/docs/src/pages/components/speed-dial/ControlledOpenSpeedDial.tsx +++ b/docs/src/pages/components/speed-dial/ControlledOpenSpeedDial.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles, Theme } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import SpeedDial from '@material-ui/core/SpeedDial'; import SpeedDialIcon from '@material-ui/core/SpeedDialIcon'; import SpeedDialAction from '@material-ui/core/SpeedDialAction'; @@ -8,19 +8,6 @@ import SaveIcon from '@material-ui/icons/Save'; import PrintIcon from '@material-ui/icons/Print'; import ShareIcon from '@material-ui/icons/Share'; -const useStyles = makeStyles((theme: Theme) => ({ - root: { - height: 320, - transform: 'translateZ(0px)', - flexGrow: 1, - }, - speedDial: { - position: 'absolute', - bottom: theme.spacing(2), - right: theme.spacing(2), - }, -})); - const actions = [ { icon: , name: 'Copy' }, { icon: , name: 'Save' }, @@ -29,16 +16,15 @@ const actions = [ ]; export default function ControlledOpenSpeedDial() { - const classes = useStyles(); const [open, setOpen] = React.useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); return ( -
+ } onClose={handleClose} onOpen={handleOpen} @@ -53,6 +39,6 @@ export default function ControlledOpenSpeedDial() { /> ))} -
+ ); } From e2a6cbd91001fea335812b8816fca88f6f381330 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 14 Mar 2021 16:09:54 -0300 Subject: [PATCH 3/5] docs: Migrate custom close speed dial demo to emotion --- .../speed-dial/OpenIconSpeedDial.js | 23 +++-------------- .../speed-dial/OpenIconSpeedDial.tsx | 25 +++---------------- 2 files changed, 8 insertions(+), 40 deletions(-) diff --git a/docs/src/pages/components/speed-dial/OpenIconSpeedDial.js b/docs/src/pages/components/speed-dial/OpenIconSpeedDial.js index 5e483a9059dbad..1fe36a557b4b37 100644 --- a/docs/src/pages/components/speed-dial/OpenIconSpeedDial.js +++ b/docs/src/pages/components/speed-dial/OpenIconSpeedDial.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import SpeedDial from '@material-ui/core/SpeedDial'; import SpeedDialIcon from '@material-ui/core/SpeedDialIcon'; import SpeedDialAction from '@material-ui/core/SpeedDialAction'; @@ -9,19 +9,6 @@ import PrintIcon from '@material-ui/icons/Print'; import ShareIcon from '@material-ui/icons/Share'; import EditIcon from '@material-ui/icons/Edit'; -const useStyles = makeStyles((theme) => ({ - root: { - height: 320, - transform: 'translateZ(0px)', - flexGrow: 1, - }, - speedDial: { - position: 'absolute', - bottom: theme.spacing(2), - right: theme.spacing(2), - }, -})); - const actions = [ { icon: , name: 'Copy' }, { icon: , name: 'Save' }, @@ -30,13 +17,11 @@ const actions = [ ]; export default function OpenIconSpeedDial() { - const classes = useStyles(); - return ( -
+ } />} > {actions.map((action) => ( @@ -47,6 +32,6 @@ export default function OpenIconSpeedDial() { /> ))} -
+ ); } diff --git a/docs/src/pages/components/speed-dial/OpenIconSpeedDial.tsx b/docs/src/pages/components/speed-dial/OpenIconSpeedDial.tsx index 6a1bf981247f33..1fe36a557b4b37 100644 --- a/docs/src/pages/components/speed-dial/OpenIconSpeedDial.tsx +++ b/docs/src/pages/components/speed-dial/OpenIconSpeedDial.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import SpeedDial from '@material-ui/core/SpeedDial'; import SpeedDialIcon from '@material-ui/core/SpeedDialIcon'; import SpeedDialAction from '@material-ui/core/SpeedDialAction'; @@ -9,21 +9,6 @@ import PrintIcon from '@material-ui/icons/Print'; import ShareIcon from '@material-ui/icons/Share'; import EditIcon from '@material-ui/icons/Edit'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - height: 320, - transform: 'translateZ(0px)', - flexGrow: 1, - }, - speedDial: { - position: 'absolute', - bottom: theme.spacing(2), - right: theme.spacing(2), - }, - }), -); - const actions = [ { icon: , name: 'Copy' }, { icon: , name: 'Save' }, @@ -32,13 +17,11 @@ const actions = [ ]; export default function OpenIconSpeedDial() { - const classes = useStyles(); - return ( -
+ } />} > {actions.map((action) => ( @@ -49,6 +32,6 @@ export default function OpenIconSpeedDial() { /> ))} -
+ ); } From e0480cbec83beb55e05b96c068750313a52aecb4 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 14 Mar 2021 16:10:21 -0300 Subject: [PATCH 4/5] docs: Migrate persistent action tooltips speed dial demo to emotion --- .../speed-dial/SpeedDialTooltipOpen.js | 22 ++++------------- .../speed-dial/SpeedDialTooltipOpen.tsx | 24 ++++--------------- 2 files changed, 8 insertions(+), 38 deletions(-) diff --git a/docs/src/pages/components/speed-dial/SpeedDialTooltipOpen.js b/docs/src/pages/components/speed-dial/SpeedDialTooltipOpen.js index 6f2c611e6d333a..0e7e1f73a08124 100644 --- a/docs/src/pages/components/speed-dial/SpeedDialTooltipOpen.js +++ b/docs/src/pages/components/speed-dial/SpeedDialTooltipOpen.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Backdrop from '@material-ui/core/Backdrop'; import SpeedDial from '@material-ui/core/SpeedDial'; import SpeedDialIcon from '@material-ui/core/SpeedDialIcon'; @@ -9,19 +9,6 @@ import SaveIcon from '@material-ui/icons/Save'; import PrintIcon from '@material-ui/icons/Print'; import ShareIcon from '@material-ui/icons/Share'; -const useStyles = makeStyles((theme) => ({ - root: { - height: 330, - transform: 'translateZ(0px)', - flexGrow: 1, - }, - speedDial: { - position: 'absolute', - bottom: theme.spacing(2), - right: theme.spacing(2), - }, -})); - const actions = [ { icon: , name: 'Copy' }, { icon: , name: 'Save' }, @@ -30,17 +17,16 @@ const actions = [ ]; export default function SpeedDialTooltipOpen() { - const classes = useStyles(); const [open, setOpen] = React.useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); return ( -
+ } onClose={handleClose} onOpen={handleOpen} @@ -56,6 +42,6 @@ export default function SpeedDialTooltipOpen() { /> ))} -
+ ); } diff --git a/docs/src/pages/components/speed-dial/SpeedDialTooltipOpen.tsx b/docs/src/pages/components/speed-dial/SpeedDialTooltipOpen.tsx index 728d311417f545..0e7e1f73a08124 100644 --- a/docs/src/pages/components/speed-dial/SpeedDialTooltipOpen.tsx +++ b/docs/src/pages/components/speed-dial/SpeedDialTooltipOpen.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Backdrop from '@material-ui/core/Backdrop'; import SpeedDial from '@material-ui/core/SpeedDial'; import SpeedDialIcon from '@material-ui/core/SpeedDialIcon'; @@ -9,21 +9,6 @@ import SaveIcon from '@material-ui/icons/Save'; import PrintIcon from '@material-ui/icons/Print'; import ShareIcon from '@material-ui/icons/Share'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - height: 330, - transform: 'translateZ(0px)', - flexGrow: 1, - }, - speedDial: { - position: 'absolute', - bottom: theme.spacing(2), - right: theme.spacing(2), - }, - }), -); - const actions = [ { icon: , name: 'Copy' }, { icon: , name: 'Save' }, @@ -32,17 +17,16 @@ const actions = [ ]; export default function SpeedDialTooltipOpen() { - const classes = useStyles(); const [open, setOpen] = React.useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); return ( -
+ } onClose={handleClose} onOpen={handleOpen} @@ -58,6 +42,6 @@ export default function SpeedDialTooltipOpen() { /> ))} -
+ ); } From 814a1d47a4ee972cff2544dfd55809ba92cbcd12 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 14 Mar 2021 20:40:54 +0100 Subject: [PATCH 5/5] add a real basic first demo --- .../components/speed-dial/BasicSpeedDial.js | 82 +++------------- .../components/speed-dial/BasicSpeedDial.tsx | 87 +++-------------- .../speed-dial/PlaygroundSpeedDial.js | 90 ++++++++++++++++++ .../speed-dial/PlaygroundSpeedDial.tsx | 93 +++++++++++++++++++ .../pages/components/speed-dial/speed-dial.md | 4 + 5 files changed, 216 insertions(+), 140 deletions(-) create mode 100644 docs/src/pages/components/speed-dial/PlaygroundSpeedDial.js create mode 100644 docs/src/pages/components/speed-dial/PlaygroundSpeedDial.tsx diff --git a/docs/src/pages/components/speed-dial/BasicSpeedDial.js b/docs/src/pages/components/speed-dial/BasicSpeedDial.js index 2d635210ce315b..600c4a56c4b8f8 100644 --- a/docs/src/pages/components/speed-dial/BasicSpeedDial.js +++ b/docs/src/pages/components/speed-dial/BasicSpeedDial.js @@ -1,11 +1,5 @@ import * as React from 'react'; -import { experimentalStyled as styled } from '@material-ui/core/styles'; import Box from '@material-ui/core/Box'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -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/core/SpeedDial'; import SpeedDialIcon from '@material-ui/core/SpeedDialIcon'; import SpeedDialAction from '@material-ui/core/SpeedDialAction'; @@ -14,18 +8,6 @@ import SaveIcon from '@material-ui/icons/Save'; import PrintIcon from '@material-ui/icons/Print'; import ShareIcon from '@material-ui/icons/Share'; -const StyledSpeedDial = styled(SpeedDial)(({ theme }) => ({ - position: 'absolute', - '&.MuiSpeedDial-directionUp, &.MuiSpeedDial-directionLeft': { - bottom: theme.spacing(2), - right: theme.spacing(2), - }, - '&.MuiSpeedDial-directionDown, &.MuiSpeedDial-directionRight': { - top: theme.spacing(2), - left: theme.spacing(2), - }, -})); - const actions = [ { icon: , name: 'Copy' }, { icon: , name: 'Save' }, @@ -33,58 +15,22 @@ const actions = [ { icon: , name: 'Share' }, ]; -export default function SpeedDials() { - const [direction, setDirection] = React.useState('up'); - - const [hidden, setHidden] = React.useState(false); - - const handleDirectionChange = (event) => { - setDirection(event.target.value); - }; - - const handleHiddenChange = (event) => { - setHidden(event.target.checked); - }; - +export default function BasicSpeedDial() { return ( - - - } - label="Hidden" - /> - - Direction - - + } > - } label="Up" /> - } label="Right" /> - } label="Down" /> - } label="Left" /> - - - - + {actions.map((action) => ( + + ))} + ); } diff --git a/docs/src/pages/components/speed-dial/BasicSpeedDial.tsx b/docs/src/pages/components/speed-dial/BasicSpeedDial.tsx index feb2854f519393..600c4a56c4b8f8 100644 --- a/docs/src/pages/components/speed-dial/BasicSpeedDial.tsx +++ b/docs/src/pages/components/speed-dial/BasicSpeedDial.tsx @@ -1,12 +1,6 @@ import * as React from 'react'; -import { experimentalStyled as styled } from '@material-ui/core/styles'; import Box from '@material-ui/core/Box'; -import FormControlLabel from '@material-ui/core/FormControlLabel'; -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/core/SpeedDial'; +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'; @@ -14,18 +8,6 @@ import SaveIcon from '@material-ui/icons/Save'; import PrintIcon from '@material-ui/icons/Print'; import ShareIcon from '@material-ui/icons/Share'; -const StyledSpeedDial = styled(SpeedDial)(({ theme }) => ({ - position: 'absolute', - '&.MuiSpeedDial-directionUp, &.MuiSpeedDial-directionLeft': { - bottom: theme.spacing(2), - right: theme.spacing(2), - }, - '&.MuiSpeedDial-directionDown, &.MuiSpeedDial-directionRight': { - top: theme.spacing(2), - left: theme.spacing(2), - }, -})); - const actions = [ { icon: , name: 'Copy' }, { icon: , name: 'Save' }, @@ -33,61 +15,22 @@ const actions = [ { icon: , name: 'Share' }, ]; -export default function SpeedDials() { - const [direction, setDirection] = React.useState( - 'up', - ); - const [hidden, setHidden] = React.useState(false); - - const handleDirectionChange = (event: React.ChangeEvent) => { - setDirection( - (event.target as HTMLInputElement).value as SpeedDialProps['direction'], - ); - }; - - const handleHiddenChange = (event: React.ChangeEvent) => { - setHidden(event.target.checked); - }; - +export default function BasicSpeedDial() { return ( - - - } - label="Hidden" - /> - - Direction - - + } > - } label="Up" /> - } label="Right" /> - } label="Down" /> - } label="Left" /> - - - - + {actions.map((action) => ( + + ))} + ); } diff --git a/docs/src/pages/components/speed-dial/PlaygroundSpeedDial.js b/docs/src/pages/components/speed-dial/PlaygroundSpeedDial.js new file mode 100644 index 00000000000000..a7b122e25ccc71 --- /dev/null +++ b/docs/src/pages/components/speed-dial/PlaygroundSpeedDial.js @@ -0,0 +1,90 @@ +import * as React from 'react'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +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/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'; +import ShareIcon from '@material-ui/icons/Share'; + +const StyledSpeedDial = styled(SpeedDial)(({ theme }) => ({ + position: 'absolute', + '&.MuiSpeedDial-directionUp, &.MuiSpeedDial-directionLeft': { + bottom: theme.spacing(2), + right: theme.spacing(2), + }, + '&.MuiSpeedDial-directionDown, &.MuiSpeedDial-directionRight': { + top: theme.spacing(2), + left: theme.spacing(2), + }, +})); + +const actions = [ + { icon: , name: 'Copy' }, + { icon: , name: 'Save' }, + { icon: , name: 'Print' }, + { icon: , name: 'Share' }, +]; + +export default function PlaygroundSpeedDial() { + const [direction, setDirection] = React.useState('up'); + + const [hidden, setHidden] = React.useState(false); + + const handleDirectionChange = (event) => { + setDirection(event.target.value); + }; + + const handleHiddenChange = (event) => { + setHidden(event.target.checked); + }; + + return ( + + + } + label="Hidden" + /> + + Direction + + + } label="Up" /> + } label="Right" /> + } label="Down" /> + } label="Left" /> + + + + + + ); +} diff --git a/docs/src/pages/components/speed-dial/PlaygroundSpeedDial.tsx b/docs/src/pages/components/speed-dial/PlaygroundSpeedDial.tsx new file mode 100644 index 00000000000000..7c51cac7cf1054 --- /dev/null +++ b/docs/src/pages/components/speed-dial/PlaygroundSpeedDial.tsx @@ -0,0 +1,93 @@ +import * as React from 'react'; +import { experimentalStyled as styled } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +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/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'; +import ShareIcon from '@material-ui/icons/Share'; + +const StyledSpeedDial = styled(SpeedDial)(({ theme }) => ({ + position: 'absolute', + '&.MuiSpeedDial-directionUp, &.MuiSpeedDial-directionLeft': { + bottom: theme.spacing(2), + right: theme.spacing(2), + }, + '&.MuiSpeedDial-directionDown, &.MuiSpeedDial-directionRight': { + top: theme.spacing(2), + left: theme.spacing(2), + }, +})); + +const actions = [ + { icon: , name: 'Copy' }, + { icon: , name: 'Save' }, + { icon: , name: 'Print' }, + { icon: , name: 'Share' }, +]; + +export default function PlaygroundSpeedDial() { + const [direction, setDirection] = React.useState( + 'up', + ); + const [hidden, setHidden] = React.useState(false); + + const handleDirectionChange = (event: React.ChangeEvent) => { + setDirection( + (event.target as HTMLInputElement).value as SpeedDialProps['direction'], + ); + }; + + const handleHiddenChange = (event: React.ChangeEvent) => { + setHidden(event.target.checked); + }; + + return ( + + + } + label="Hidden" + /> + + Direction + + + } label="Up" /> + } label="Right" /> + } label="Down" /> + } label="Left" /> + + + + + + ); +} diff --git a/docs/src/pages/components/speed-dial/speed-dial.md b/docs/src/pages/components/speed-dial/speed-dial.md index b49678e80978cb..d0a1d63c19f732 100644 --- a/docs/src/pages/components/speed-dial/speed-dial.md +++ b/docs/src/pages/components/speed-dial/speed-dial.md @@ -20,6 +20,10 @@ The floating action button can display related actions. {{"demo": "pages/components/speed-dial/BasicSpeedDial.js"}} +## Playground + +{{"demo": "pages/components/speed-dial/PlaygroundSpeedDial.js"}} + ## Controlled speed dial The open state of the component can be controlled with the `open`/`onOpen`/`onClose` props.