From 8e8141aaabbf66e5c7d9ca846cbbbe59463ae9f4 Mon Sep 17 00:00:00 2001 From: Nathalie Kroeker Date: Wed, 11 Sep 2019 19:22:06 -0400 Subject: [PATCH 1/3] Add demo for vertical divider --- .../components/dividers/VerticalDividers.js | 100 ++++++++++++++++++ .../components/dividers/VerticalDividers.tsx | 99 +++++++++++++++++ .../src/pages/components/dividers/dividers.md | 7 ++ 3 files changed, 206 insertions(+) create mode 100644 docs/src/pages/components/dividers/VerticalDividers.js create mode 100644 docs/src/pages/components/dividers/VerticalDividers.tsx diff --git a/docs/src/pages/components/dividers/VerticalDividers.js b/docs/src/pages/components/dividers/VerticalDividers.js new file mode 100644 index 00000000000000..4e31c58535285c --- /dev/null +++ b/docs/src/pages/components/dividers/VerticalDividers.js @@ -0,0 +1,100 @@ +import React from 'react'; +import { makeStyles, withStyles } from '@material-ui/core/styles'; +import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft'; +import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter'; +import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight'; +import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify'; +import FormatBoldIcon from '@material-ui/icons/FormatBold'; +import FormatItalicIcon from '@material-ui/icons/FormatItalic'; +import FormatUnderlinedIcon from '@material-ui/icons/FormatUnderlined'; +import FormatColorFillIcon from '@material-ui/icons/FormatColorFill'; +import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; +import Grid from '@material-ui/core/Grid'; +import Divider from '@material-ui/core/Divider'; +import ToggleButton from '@material-ui/lab/ToggleButton'; +import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; + +const useStyles = makeStyles(theme => ({ + toggleContainer: { + margin: theme.spacing(2, 0), + width: 'fit-content', + border: `1px solid ${theme.palette.divider}`, + background: theme.palette.background.paper + }, + divider: { + height: theme.spacing(4), + margin: theme.spacing(0.5), + }, +})); + +const StyledToggleButtonGroup = withStyles(theme => ({ + grouped: { + margin: theme.spacing(0.5), + border: 'none', + '&:not(:first-child)': { + borderRadius: theme.shape.borderRadius, + }, + '&:first-child': { + borderRadius: theme.shape.borderRadius, + }, + }, +}))(ToggleButtonGroup); + +export default function VerticalDividers() { + const [alignment, setAlignment] = React.useState('left'); + const [formats, setFormats] = React.useState(() => ['italic']); + + const handleFormat = (event, newFormats) => { + setFormats(newFormats); + }; + + const handleAlignment = (event, newAlignment) => { + setAlignment(newAlignment); + }; + + const classes = useStyles(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/docs/src/pages/components/dividers/VerticalDividers.tsx b/docs/src/pages/components/dividers/VerticalDividers.tsx new file mode 100644 index 00000000000000..7be263ffacfe55 --- /dev/null +++ b/docs/src/pages/components/dividers/VerticalDividers.tsx @@ -0,0 +1,99 @@ +import React from 'react'; +import { makeStyles, withStyles } from '@material-ui/core/styles'; +import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft'; +import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter'; +import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight'; +import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify'; +import FormatBoldIcon from '@material-ui/icons/FormatBold'; +import FormatItalicIcon from '@material-ui/icons/FormatItalic'; +import FormatUnderlinedIcon from '@material-ui/icons/FormatUnderlined'; +import FormatColorFillIcon from '@material-ui/icons/FormatColorFill'; +import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; +import Grid from '@material-ui/core/Grid'; +import Divider from '@material-ui/core/Divider'; +import ToggleButton from '@material-ui/lab/ToggleButton'; +import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; + +const useStyles = makeStyles(theme => ({ + toggleContainer: { + margin: theme.spacing(2, 0), + width: 'fit-content', + border: `1px solid ${theme.palette.divider}` + }, + divider: { + height: theme.spacing(4), + margin: theme.spacing(0.5) + } +})); + +const StyledToggleButtonGroup = withStyles(theme => ({ + grouped: { + margin: theme.spacing(0.5), + border: 'none', + '&:not(:first-child)': { + borderRadius: theme.shape.borderRadius + }, + '&:first-child': { + borderRadius: theme.shape.borderRadius + } + } +}))(ToggleButtonGroup); + +export default function VerticalDividers() { + const [alignment, setAlignment] = React.useState('left'); + const [formats, setFormats] = React.useState(() => ['italic']); + + const handleFormat = (event: React.MouseEvent, newFormats: string[]) => { + setFormats(newFormats); + }; + + const handleAlignment = (event: React.MouseEvent, newAlignment: string) => { + setAlignment(newAlignment); + }; + + const classes = useStyles(); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/docs/src/pages/components/dividers/dividers.md b/docs/src/pages/components/dividers/dividers.md index 496a40881904fd..3c41a925f102c1 100644 --- a/docs/src/pages/components/dividers/dividers.md +++ b/docs/src/pages/components/dividers/dividers.md @@ -16,6 +16,13 @@ You can save rendering this DOM element by using the `divider` property on the ` {{"demo": "pages/components/dividers/ListDividers.js"}} + +## Vertical Dividers + +A divider can also be rendered vertically using the `orientation` property. + +{{"demo": "pages/components/dividers/VerticalDividers.js"}} + ## HTML5 Specification In a list, you should ensure the `Divider` is rendered as an `
  • ` to match the HTML5 specification. From e155e275a5fcb311ef902eff5458b1e3eb3b918d Mon Sep 17 00:00:00 2001 From: Nathalie Kroeker Date: Wed, 11 Sep 2019 19:32:12 -0400 Subject: [PATCH 2/3] Run yarn prettier to fix tab sizes --- .../components/dividers/VerticalDividers.js | 2 +- .../components/dividers/VerticalDividers.tsx | 142 +++++++++--------- 2 files changed, 72 insertions(+), 72 deletions(-) diff --git a/docs/src/pages/components/dividers/VerticalDividers.js b/docs/src/pages/components/dividers/VerticalDividers.js index 4e31c58535285c..41fe8066e2690f 100644 --- a/docs/src/pages/components/dividers/VerticalDividers.js +++ b/docs/src/pages/components/dividers/VerticalDividers.js @@ -19,7 +19,7 @@ const useStyles = makeStyles(theme => ({ margin: theme.spacing(2, 0), width: 'fit-content', border: `1px solid ${theme.palette.divider}`, - background: theme.palette.background.paper + background: theme.palette.background.paper, }, divider: { height: theme.spacing(4), diff --git a/docs/src/pages/components/dividers/VerticalDividers.tsx b/docs/src/pages/components/dividers/VerticalDividers.tsx index 7be263ffacfe55..a707586555e61d 100644 --- a/docs/src/pages/components/dividers/VerticalDividers.tsx +++ b/docs/src/pages/components/dividers/VerticalDividers.tsx @@ -15,85 +15,85 @@ import ToggleButton from '@material-ui/lab/ToggleButton'; import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; const useStyles = makeStyles(theme => ({ - toggleContainer: { - margin: theme.spacing(2, 0), - width: 'fit-content', - border: `1px solid ${theme.palette.divider}` - }, - divider: { - height: theme.spacing(4), - margin: theme.spacing(0.5) - } + toggleContainer: { + margin: theme.spacing(2, 0), + width: 'fit-content', + border: `1px solid ${theme.palette.divider}`, + }, + divider: { + height: theme.spacing(4), + margin: theme.spacing(0.5), + }, })); const StyledToggleButtonGroup = withStyles(theme => ({ - grouped: { - margin: theme.spacing(0.5), - border: 'none', - '&:not(:first-child)': { - borderRadius: theme.shape.borderRadius - }, - '&:first-child': { - borderRadius: theme.shape.borderRadius - } - } + grouped: { + margin: theme.spacing(0.5), + border: 'none', + '&:not(:first-child)': { + borderRadius: theme.shape.borderRadius, + }, + '&:first-child': { + borderRadius: theme.shape.borderRadius, + }, + }, }))(ToggleButtonGroup); export default function VerticalDividers() { - const [alignment, setAlignment] = React.useState('left'); - const [formats, setFormats] = React.useState(() => ['italic']); + const [alignment, setAlignment] = React.useState('left'); + const [formats, setFormats] = React.useState(() => ['italic']); - const handleFormat = (event: React.MouseEvent, newFormats: string[]) => { - setFormats(newFormats); - }; + const handleFormat = (event: React.MouseEvent, newFormats: string[]) => { + setFormats(newFormats); + }; - const handleAlignment = (event: React.MouseEvent, newAlignment: string) => { - setAlignment(newAlignment); - }; + const handleAlignment = (event: React.MouseEvent, newAlignment: string) => { + setAlignment(newAlignment); + }; - const classes = useStyles(); + const classes = useStyles(); - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); } From da55e699ed548a024fc1860139254142a4b8e5bd Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Fri, 13 Sep 2019 10:32:22 +0200 Subject: [PATCH 3/3] use a toggle button customization demo --- .../components/dividers/VerticalDividers.js | 100 ---------------- .../components/dividers/VerticalDividers.tsx | 99 ---------------- .../src/pages/components/dividers/dividers.md | 7 -- .../toggle-button/CustomizedDividers.js | 105 +++++++++++++++++ .../toggle-button/CustomizedDividers.tsx | 107 ++++++++++++++++++ .../components/toggle-button/toggle-button.md | 7 ++ 6 files changed, 219 insertions(+), 206 deletions(-) delete mode 100644 docs/src/pages/components/dividers/VerticalDividers.js delete mode 100644 docs/src/pages/components/dividers/VerticalDividers.tsx create mode 100644 docs/src/pages/components/toggle-button/CustomizedDividers.js create mode 100644 docs/src/pages/components/toggle-button/CustomizedDividers.tsx diff --git a/docs/src/pages/components/dividers/VerticalDividers.js b/docs/src/pages/components/dividers/VerticalDividers.js deleted file mode 100644 index 41fe8066e2690f..00000000000000 --- a/docs/src/pages/components/dividers/VerticalDividers.js +++ /dev/null @@ -1,100 +0,0 @@ -import React from 'react'; -import { makeStyles, withStyles } from '@material-ui/core/styles'; -import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft'; -import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter'; -import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight'; -import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify'; -import FormatBoldIcon from '@material-ui/icons/FormatBold'; -import FormatItalicIcon from '@material-ui/icons/FormatItalic'; -import FormatUnderlinedIcon from '@material-ui/icons/FormatUnderlined'; -import FormatColorFillIcon from '@material-ui/icons/FormatColorFill'; -import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; -import Grid from '@material-ui/core/Grid'; -import Divider from '@material-ui/core/Divider'; -import ToggleButton from '@material-ui/lab/ToggleButton'; -import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; - -const useStyles = makeStyles(theme => ({ - toggleContainer: { - margin: theme.spacing(2, 0), - width: 'fit-content', - border: `1px solid ${theme.palette.divider}`, - background: theme.palette.background.paper, - }, - divider: { - height: theme.spacing(4), - margin: theme.spacing(0.5), - }, -})); - -const StyledToggleButtonGroup = withStyles(theme => ({ - grouped: { - margin: theme.spacing(0.5), - border: 'none', - '&:not(:first-child)': { - borderRadius: theme.shape.borderRadius, - }, - '&:first-child': { - borderRadius: theme.shape.borderRadius, - }, - }, -}))(ToggleButtonGroup); - -export default function VerticalDividers() { - const [alignment, setAlignment] = React.useState('left'); - const [formats, setFormats] = React.useState(() => ['italic']); - - const handleFormat = (event, newFormats) => { - setFormats(newFormats); - }; - - const handleAlignment = (event, newAlignment) => { - setAlignment(newAlignment); - }; - - const classes = useStyles(); - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/src/pages/components/dividers/VerticalDividers.tsx b/docs/src/pages/components/dividers/VerticalDividers.tsx deleted file mode 100644 index a707586555e61d..00000000000000 --- a/docs/src/pages/components/dividers/VerticalDividers.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import React from 'react'; -import { makeStyles, withStyles } from '@material-ui/core/styles'; -import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft'; -import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter'; -import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight'; -import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify'; -import FormatBoldIcon from '@material-ui/icons/FormatBold'; -import FormatItalicIcon from '@material-ui/icons/FormatItalic'; -import FormatUnderlinedIcon from '@material-ui/icons/FormatUnderlined'; -import FormatColorFillIcon from '@material-ui/icons/FormatColorFill'; -import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; -import Grid from '@material-ui/core/Grid'; -import Divider from '@material-ui/core/Divider'; -import ToggleButton from '@material-ui/lab/ToggleButton'; -import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; - -const useStyles = makeStyles(theme => ({ - toggleContainer: { - margin: theme.spacing(2, 0), - width: 'fit-content', - border: `1px solid ${theme.palette.divider}`, - }, - divider: { - height: theme.spacing(4), - margin: theme.spacing(0.5), - }, -})); - -const StyledToggleButtonGroup = withStyles(theme => ({ - grouped: { - margin: theme.spacing(0.5), - border: 'none', - '&:not(:first-child)': { - borderRadius: theme.shape.borderRadius, - }, - '&:first-child': { - borderRadius: theme.shape.borderRadius, - }, - }, -}))(ToggleButtonGroup); - -export default function VerticalDividers() { - const [alignment, setAlignment] = React.useState('left'); - const [formats, setFormats] = React.useState(() => ['italic']); - - const handleFormat = (event: React.MouseEvent, newFormats: string[]) => { - setFormats(newFormats); - }; - - const handleAlignment = (event: React.MouseEvent, newAlignment: string) => { - setAlignment(newAlignment); - }; - - const classes = useStyles(); - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/src/pages/components/dividers/dividers.md b/docs/src/pages/components/dividers/dividers.md index 3c41a925f102c1..496a40881904fd 100644 --- a/docs/src/pages/components/dividers/dividers.md +++ b/docs/src/pages/components/dividers/dividers.md @@ -16,13 +16,6 @@ You can save rendering this DOM element by using the `divider` property on the ` {{"demo": "pages/components/dividers/ListDividers.js"}} - -## Vertical Dividers - -A divider can also be rendered vertically using the `orientation` property. - -{{"demo": "pages/components/dividers/VerticalDividers.js"}} - ## HTML5 Specification In a list, you should ensure the `Divider` is rendered as an `
  • ` to match the HTML5 specification. diff --git a/docs/src/pages/components/toggle-button/CustomizedDividers.js b/docs/src/pages/components/toggle-button/CustomizedDividers.js new file mode 100644 index 00000000000000..c54b4478f82af5 --- /dev/null +++ b/docs/src/pages/components/toggle-button/CustomizedDividers.js @@ -0,0 +1,105 @@ +import React from 'react'; +import { makeStyles, withStyles } from '@material-ui/core/styles'; +import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft'; +import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter'; +import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight'; +import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify'; +import FormatBoldIcon from '@material-ui/icons/FormatBold'; +import FormatItalicIcon from '@material-ui/icons/FormatItalic'; +import FormatUnderlinedIcon from '@material-ui/icons/FormatUnderlined'; +import FormatColorFillIcon from '@material-ui/icons/FormatColorFill'; +import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; +import Divider from '@material-ui/core/Divider'; +import Paper from '@material-ui/core/Paper'; +import ToggleButton from '@material-ui/lab/ToggleButton'; +import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; + +const useStyles = makeStyles(theme => ({ + paper: { + display: 'flex', + border: `1px solid ${theme.palette.divider}`, + flexWrap: 'wrap', + }, + divider: { + alignSelf: 'stretch', + height: 'auto', + margin: theme.spacing(1, 0.5), + }, +})); + +const StyledToggleButtonGroup = withStyles(theme => ({ + grouped: { + margin: theme.spacing(0.5), + border: 'none', + padding: theme.spacing(0, 1), + '&:not(:first-child)': { + borderRadius: theme.shape.borderRadius, + }, + '&:first-child': { + borderRadius: theme.shape.borderRadius, + }, + }, +}))(ToggleButtonGroup); + +export default function CustomizedDividers() { + const [alignment, setAlignment] = React.useState('left'); + const [formats, setFormats] = React.useState(() => ['italic']); + + const handleFormat = (event, newFormats) => { + setFormats(newFormats); + }; + + const handleAlignment = (event, newAlignment) => { + setAlignment(newAlignment); + }; + + const classes = useStyles(); + + return ( +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + ); +} diff --git a/docs/src/pages/components/toggle-button/CustomizedDividers.tsx b/docs/src/pages/components/toggle-button/CustomizedDividers.tsx new file mode 100644 index 00000000000000..e9f81d9dc19c13 --- /dev/null +++ b/docs/src/pages/components/toggle-button/CustomizedDividers.tsx @@ -0,0 +1,107 @@ +import React from 'react'; +import { makeStyles, withStyles, Theme, createStyles } from '@material-ui/core/styles'; +import FormatAlignLeftIcon from '@material-ui/icons/FormatAlignLeft'; +import FormatAlignCenterIcon from '@material-ui/icons/FormatAlignCenter'; +import FormatAlignRightIcon from '@material-ui/icons/FormatAlignRight'; +import FormatAlignJustifyIcon from '@material-ui/icons/FormatAlignJustify'; +import FormatBoldIcon from '@material-ui/icons/FormatBold'; +import FormatItalicIcon from '@material-ui/icons/FormatItalic'; +import FormatUnderlinedIcon from '@material-ui/icons/FormatUnderlined'; +import FormatColorFillIcon from '@material-ui/icons/FormatColorFill'; +import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown'; +import Divider from '@material-ui/core/Divider'; +import Paper from '@material-ui/core/Paper'; +import ToggleButton from '@material-ui/lab/ToggleButton'; +import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + paper: { + display: 'flex', + border: `1px solid ${theme.palette.divider}`, + flexWrap: 'wrap', + }, + divider: { + alignSelf: 'stretch', + height: 'auto', + margin: theme.spacing(1, 0.5), + }, + }), +); + +const StyledToggleButtonGroup = withStyles(theme => ({ + grouped: { + margin: theme.spacing(0.5), + border: 'none', + padding: theme.spacing(0, 1), + '&:not(:first-child)': { + borderRadius: theme.shape.borderRadius, + }, + '&:first-child': { + borderRadius: theme.shape.borderRadius, + }, + }, +}))(ToggleButtonGroup); + +export default function CustomizedDividers() { + const [alignment, setAlignment] = React.useState('left'); + const [formats, setFormats] = React.useState(() => ['italic']); + + const handleFormat = (event: React.MouseEvent, newFormats: string[]) => { + setFormats(newFormats); + }; + + const handleAlignment = (event: React.MouseEvent, newAlignment: string) => { + setAlignment(newAlignment); + }; + + const classes = useStyles(); + + return ( +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + ); +} diff --git a/docs/src/pages/components/toggle-button/toggle-button.md b/docs/src/pages/components/toggle-button/toggle-button.md index 00a1f6a9f8efda..11ea8fee70d4ef 100644 --- a/docs/src/pages/components/toggle-button/toggle-button.md +++ b/docs/src/pages/components/toggle-button/toggle-button.md @@ -25,6 +25,13 @@ Fancy larger or smaller buttons? Use the `size` property. {{"demo": "pages/components/toggle-button/StandaloneToggleButton.js"}} +## Customized toggle button + +Here is an example of customizing the component. You can learn more about this in the +[overrides documentation page](/customization/components/). + +{{"demo": "pages/components/toggle-button/CustomizedDividers.js"}} + ## Accessibility ToggleButtonGroup has `role="group"`. You should provide an accessible label with `arial-label="label"`, `aria-labelledby="id"` or `