Migrate ButtonGroup to emotion

mui · Feb 5, 2021 · 3d26ec2 · 3d26ec2
1 parent 53d2741
commit 3d26ec2
Show file tree

Hide file tree

Showing 9 changed files with 294 additions and 206 deletions.
diff --git a/docs/pages/api-docs/button-group.json b/docs/pages/api-docs/button-group.json
@@ -26,6 +26,7 @@
       },
       "default": "'medium'"
     },
+    "sx": { "type": { "name": "object" } },
     "variant": {
       "type": {
         "name": "union",
@@ -72,6 +73,6 @@
   "filename": "/packages/material-ui/src/ButtonGroup/ButtonGroup.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/components/button-group/\">Button Group</a></li></ul>",
-  "styledComponent": false,
+  "styledComponent": true,
   "cssComponent": false
 }
diff --git a/docs/translations/api-docs/button-group/button-group.json b/docs/translations/api-docs/button-group/button-group.json
@@ -12,6 +12,7 @@
     "fullWidth": "If <code>true</code>, the buttons will take up the full width of its container.",
     "orientation": "The component orientation (layout flow direction).",
     "size": "The size of the component. <code>small</code> is equivalent to the dense button styling.",
+    "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.",
     "variant": "The variant to use."
   },
   "classDescriptions": {

diff --git a/packages/material-ui/src/ButtonGroup/ButtonGroup.d.ts b/packages/material-ui/src/ButtonGroup/ButtonGroup.d.ts
@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { SxProps } from '@material-ui/system';
 import { OverridableStringUnion } from '@material-ui/types';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
+import { Theme } from '..';
 
 export interface ButtonGroupPropsVariantOverrides {}
 export type ButtonGroupVariantDefaults = Record<'text' | 'outlined' | 'contained', true>;
@@ -114,6 +116,10 @@ export interface ButtonGroupTypeMap<P = {}, D extends React.ElementType = 'div'>
      * @default 'outlined'
      */
     variant?: OverridableStringUnion<ButtonGroupVariantDefaults, ButtonGroupPropsVariantOverrides>;
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
   };
   defaultComponent: D;
 }