[ToggleButton] Migrate ToggleButtonGroup to emotion

docs/pages/api-docs/toggle-button-group.json

@@ -15,6 +15,7 @@
  },
  "default": "'medium'"
  },
+ "sx": { "type": { "name": "object" } },
  "value": { "type": { "name": "any" } }
  },
  "name": "ToggleButtonGroup",
@@ -28,6 +29,6 @@
  "filename": "/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js",
  "inheritance": null,
  "demos": "<ul><li><a href=\"/components/toggle-button/\">Toggle Button</a></li></ul>",
- "styledComponent": false,
+ "styledComponent": true,
  "cssComponent": false
 }

docs/src/pages/components/toggle-button/CustomizedDividers.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { makeStyles, withStyles } from '@material-ui/core/styles';
+import { experimentalStyled as styled } 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';
@@ -14,29 +14,18 @@ import Paper from '@material-ui/core/Paper';
 import ToggleButton from '@material-ui/core/ToggleButton';
 import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
-const useStyles = makeStyles((theme) => ({
- paper: {
- display: 'flex',
- border: `1px solid ${theme.palette.divider}`,
- flexWrap: 'wrap',
- },
- divider: {
- margin: theme.spacing(1, 0.5),
- },
-}));
-
-const StyledToggleButtonGroup = withStyles((theme) => ({
- grouped: {
+const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
+ '& .MuiToggleButtonGroup-grouped': {
  margin: theme.spacing(0.5),
  border: 'none',
- '&:not(:first-child)': {
+ '&:not(:first-of-type)': {
  borderRadius: theme.shape.borderRadius,
  },
- '&:first-child': {
+ '&:first-of-type': {
  borderRadius: theme.shape.borderRadius,
  },
  },
-}))(ToggleButtonGroup);
+}));
 
 export default function CustomizedDividers() {
  const [alignment, setAlignment] = React.useState('left');
@@ -50,11 +39,16 @@ export default function CustomizedDividers() {
  setAlignment(newAlignment);
  };
 
- const classes = useStyles();
-
  return (
  <div>
- <Paper elevation={0} className={classes.paper}>
+ <Paper
+ elevation={0}
+ sx={{
+ display: 'flex',
+ border: (theme) => `1px solid ${theme.palette.divider}`,
+ flexWrap: 'wrap',
+ }}
+ >
  <StyledToggleButtonGroup
  size="small"
  value={alignment}
@@ -75,7 +69,7 @@ export default function CustomizedDividers() {
  <FormatAlignJustifyIcon />
  </ToggleButton>
  </StyledToggleButtonGroup>
- <Divider flexItem orientation="vertical" className={classes.divider} />
+ <Divider flexItem orientation="vertical" sx={{ mx: 0.5, my: 1 }} />
  <StyledToggleButtonGroup
  size="small"
  value={formats}

docs/src/pages/components/toggle-button/CustomizedDividers.tsx

@@ -1,10 +1,5 @@
 import * as React from 'react';
-import {
- makeStyles,
- withStyles,
- Theme,
- createStyles,
-} from '@material-ui/core/styles';
+import { experimentalStyled as styled } 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';
@@ -19,31 +14,18 @@ import Paper from '@material-ui/core/Paper';
 import ToggleButton from '@material-ui/core/ToggleButton';
 import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
 
-const useStyles = makeStyles((theme: Theme) =>
- createStyles({
- paper: {
- display: 'flex',
- border: `1px solid ${theme.palette.divider}`,
- flexWrap: 'wrap',
- },
- divider: {
- margin: theme.spacing(1, 0.5),
- },
- }),
-);
-
-const StyledToggleButtonGroup = withStyles((theme) => ({
- grouped: {
+const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
+ '& .MuiToggleButtonGroup-grouped': {
  margin: theme.spacing(0.5),
  border: 'none',
- '&:not(:first-child)': {
+ '&:not(:first-of-type)': {
  borderRadius: theme.shape.borderRadius,
  },
- '&:first-child': {
+ '&:first-of-type': {
  borderRadius: theme.shape.borderRadius,
  },
  },
-}))(ToggleButtonGroup);
+}));
 
 export default function CustomizedDividers() {
  const [alignment, setAlignment] = React.useState('left');
@@ -63,11 +45,16 @@ export default function CustomizedDividers() {
  setAlignment(newAlignment);
  };
 
- const classes = useStyles();
-
  return (
  <div>
- <Paper elevation={0} className={classes.paper}>
+ <Paper
+ elevation={0}
+ sx={{
+ display: 'flex',
+ border: (theme) => `1px solid ${theme.palette.divider}`,
+ flexWrap: 'wrap',
+ }}
+ >
  <StyledToggleButtonGroup
  size="small"
  value={alignment}
@@ -88,7 +75,7 @@ export default function CustomizedDividers() {
  <FormatAlignJustifyIcon />
  </ToggleButton>
  </StyledToggleButtonGroup>
- <Divider flexItem orientation="vertical" className={classes.divider} />
+ <Divider flexItem orientation="vertical" sx={{ mx: 0.5, my: 1 }} />
  <StyledToggleButtonGroup
  size="small"
  value={formats}

docs/translations/api-docs/toggle-button-group/toggle-button-group.json

@@ -7,6 +7,7 @@
  "onChange": "Callback fired when the value changes.<br><br><strong>Signature:</strong><br><code>function(event: object, value: any) =&gt; void</code><br><em>event:</em> The event source of the callback.<br><em>value:</em> of the selected buttons. When <code>exclusive</code> is true this is a single value; when false an array of selected values. If no value is selected and <code>exclusive</code> is true the value is null; when false an empty array.",
  "orientation": "The component orientation (layout flow direction).",
  "size": "The size of the component.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details.",
  "value": "The currently selected value within the group or an array of selected values when <code>exclusive</code> is false.<br>The value must have reference equality with the option in order to be selected."
  },
  "classDescriptions": {

packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
 import { InternalStandardProps as StandardProps } from '..';
+import { Theme } from '../styles';
 
 export interface ToggleButtonGroupProps
  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
@@ -46,6 +48,10 @@ export interface ToggleButtonGroupProps
  * @default 'medium'
  */
  size?: 'small' | 'medium' | 'large';
+ /**
+ * The system prop that allows defining system overrides as well as additional CSS styles.
+ */
+ sx?: SxProps<Theme>;
  /**
  * The currently selected value within the group or an array of selected
  * values when `exclusive` is false.