Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Migrate SpeedDial to emotion #25367

Merged
merged 5 commits into from
Mar 14, 2021
Merged

[docs] Migrate SpeedDial to emotion #25367

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5394dfd
docs: Migrate basic speed dial demo to emotion
vicasas Mar 14, 2021
e4b89c4
docs: Migrate controlled speed dial demo to emotion
vicasas Mar 14, 2021
e2a6cbd
docs: Migrate custom close speed dial demo to emotion
vicasas Mar 14, 2021
e0480cb
docs: Migrate persistent action tooltips speed dial demo to emotion
vicasas Mar 14, 2021
814a1d4
add a real basic first demo
oliviertassinari Mar 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 16 additions & 85 deletions docs/src/pages/components/speed-dial/BasicSpeedDial.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
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 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';
Expand All @@ -13,93 +8,29 @@ 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,
},
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 actions = [
{ icon: <FileCopyIcon />, name: 'Copy' },
{ icon: <SaveIcon />, name: 'Save' },
{ icon: <PrintIcon />, name: 'Print' },
{ icon: <ShareIcon />, name: 'Share' },
];

export default function SpeedDials() {
const classes = useStyles();
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 (
<div className={classes.root}>
<FormControlLabel
control={
<Switch checked={hidden} onChange={handleHiddenChange} color="primary" />
}
label="Hidden"
/>
<FormLabel className={classes.radioGroup} component="legend">
Direction
</FormLabel>
<RadioGroup
aria-label="direction"
name="direction"
value={direction}
onChange={handleDirectionChange}
row
<Box sx={{ height: 320, transform: 'translateZ(0px)', flexGrow: 1 }}>
<SpeedDial
ariaLabel="SpeedDial basic example"
sx={{ position: 'absolute', bottom: 16, right: 16 }}
icon={<SpeedDialIcon />}
>
<FormControlLabel value="up" control={<Radio />} label="Up" />
<FormControlLabel value="right" control={<Radio />} label="Right" />
<FormControlLabel value="down" control={<Radio />} label="Down" />
<FormControlLabel value="left" control={<Radio />} label="Left" />
</RadioGroup>
<div className={classes.exampleWrapper}>
<SpeedDial
ariaLabel="SpeedDial example"
className={classes.speedDial}
hidden={hidden}
icon={<SpeedDialIcon />}
direction={direction}
>
{actions.map((action) => (
<SpeedDialAction
key={action.name}
icon={action.icon}
tooltipTitle={action.name}
/>
))}
</SpeedDial>
</div>
</div>
{actions.map((action) => (
<SpeedDialAction
key={action.name}
icon={action.icon}
tooltipTitle={action.name}
/>
))}
</SpeedDial>
</Box>
);
}
108 changes: 17 additions & 91 deletions docs/src/pages/components/speed-dial/BasicSpeedDial.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,110 +1,36 @@
import * as React from 'react';
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
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 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';
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 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 actions = [
{ icon: <FileCopyIcon />, name: 'Copy' },
{ icon: <SaveIcon />, name: 'Save' },
{ icon: <PrintIcon />, name: 'Print' },
{ icon: <ShareIcon />, name: 'Share' },
];

export default function SpeedDials() {
const classes = useStyles();
const [direction, setDirection] = React.useState<SpeedDialProps['direction']>(
'up',
);
const [hidden, setHidden] = React.useState(false);

const handleDirectionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setDirection(
(event.target as HTMLInputElement).value as SpeedDialProps['direction'],
);
};

const handleHiddenChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setHidden(event.target.checked);
};

export default function BasicSpeedDial() {
return (
<div className={classes.root}>
<FormControlLabel
control={
<Switch checked={hidden} onChange={handleHiddenChange} color="primary" />
}
label="Hidden"
/>
<FormLabel className={classes.radioGroup} component="legend">
Direction
</FormLabel>
<RadioGroup
aria-label="direction"
name="direction"
value={direction}
onChange={handleDirectionChange}
row
<Box sx={{ height: 320, transform: 'translateZ(0px)', flexGrow: 1 }}>
<SpeedDial
ariaLabel="SpeedDial basic example"
sx={{ position: 'absolute', bottom: 16, right: 16 }}
icon={<SpeedDialIcon />}
>
<FormControlLabel value="up" control={<Radio />} label="Up" />
<FormControlLabel value="right" control={<Radio />} label="Right" />
<FormControlLabel value="down" control={<Radio />} label="Down" />
<FormControlLabel value="left" control={<Radio />} label="Left" />
</RadioGroup>
<div className={classes.exampleWrapper}>
<SpeedDial
ariaLabel="SpeedDial example"
className={classes.speedDial}
hidden={hidden}
icon={<SpeedDialIcon />}
direction={direction}
>
{actions.map((action) => (
<SpeedDialAction
key={action.name}
icon={action.icon}
tooltipTitle={action.name}
/>
))}
</SpeedDial>
</div>
</div>
{actions.map((action) => (
<SpeedDialAction
key={action.name}
icon={action.icon}
tooltipTitle={action.name}
/>
))}
</SpeedDial>
</Box>
);
}
22 changes: 4 additions & 18 deletions docs/src/pages/components/speed-dial/ControlledOpenSpeedDial.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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: <FileCopyIcon />, name: 'Copy' },
{ icon: <SaveIcon />, name: 'Save' },
Expand All @@ -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 (
<div className={classes.root}>
<Box sx={{ height: 320, transform: 'translateZ(0px)', flexGrow: 1 }}>
<SpeedDial
ariaLabel="SpeedDial uncontrolled open example"
className={classes.speedDial}
sx={{ position: 'absolute', bottom: 16, right: 16 }}
icon={<SpeedDialIcon />}
onClose={handleClose}
onOpen={handleOpen}
Expand All @@ -53,6 +39,6 @@ export default function ControlledOpenSpeedDial() {
/>
))}
</SpeedDial>
</div>
</Box>
);
}
22 changes: 4 additions & 18 deletions docs/src/pages/components/speed-dial/ControlledOpenSpeedDial.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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: <FileCopyIcon />, name: 'Copy' },
{ icon: <SaveIcon />, name: 'Save' },
Expand All @@ -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 (
<div className={classes.root}>
<Box sx={{ height: 320, transform: 'translateZ(0px)', flexGrow: 1 }}>
<SpeedDial
ariaLabel="SpeedDial uncontrolled open example"
className={classes.speedDial}
sx={{ position: 'absolute', bottom: 16, right: 16 }}
icon={<SpeedDialIcon />}
onClose={handleClose}
onOpen={handleOpen}
Expand All @@ -53,6 +39,6 @@ export default function ControlledOpenSpeedDial() {
/>
))}
</SpeedDial>
</div>
</Box>
);
}
Loading