[ToggleButton] Migrate ToggleButtonGroup to emotion (#24878)

mui · Feb 18, 2021 · 14b1b7b · 14b1b7b
1 parent a9e5aec
commit 14b1b7b
Show file tree

Hide file tree

Showing 11 changed files with 171 additions and 124 deletions.
diff --git a/docs/pages/api-docs/toggle-button-group.json b/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
 }
diff --git a/docs/src/pages/components/toggle-button/CustomizedDividers.js b/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}

diff --git a/docs/src/pages/components/toggle-button/CustomizedDividers.tsx b/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}

diff --git a/docs/translations/api-docs/toggle-button-group/toggle-button-group.json b/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": {

diff --git a/packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.d.ts b/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.