[ButtonGroup] Custom variant

docs/pages/api-docs/button-group.md

@@ -39,7 +39,7 @@ The `MuiButtonGroup` name can be used for providing [default props](/customizati
 | <span class="prop-name">fullWidth</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the buttons will take up the full width of its container. |
 | <span class="prop-name">orientation</span> | <span class="prop-type">'horizontal'<br>&#124;&nbsp;'vertical'</span> | <span class="prop-default">'horizontal'</span> | The group orientation (layout flow direction). |
 | <span class="prop-name">size</span> | <span class="prop-type">'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'</span> | <span class="prop-default">'medium'</span> | The size of the button. `small` is equivalent to the dense button styling. |
-| <span class="prop-name">variant</span> | <span class="prop-type">'contained'<br>&#124;&nbsp;'outlined'<br>&#124;&nbsp;'text'</span> | <span class="prop-default">'outlined'</span> | The variant to use. |
+| <span class="prop-name">variant</span> | <span class="prop-type">'contained'<br>&#124;&nbsp;'outlined'<br>&#124;&nbsp;'text'<br>&#124;&nbsp;string</span> | <span class="prop-default">'outlined'</span> | The variant to use. |
 
 The `ref` is forwarded to the root element.
 
@@ -51,6 +51,8 @@ Any other props supplied will be provided to the root element (native element).
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiButtonGroup-root</span> | Styles applied to the root element.
 | <span class="prop-name">contained</span> | <span class="prop-name">.MuiButtonGroup-contained</span> | Styles applied to the root element if `variant="contained"`.
+| <span class="prop-name">outlined</span> | <span class="prop-name">.MuiButtonGroup-outlined</span> | Styles applied to the root element if `variant="outlined"`.
+| <span class="prop-name">text</span> | <span class="prop-name">.MuiButtonGroup-text</span> | Styles applied to the root element if `variant="text"`.
 | <span class="prop-name">disableElevation</span> | <span class="prop-name">.MuiButtonGroup-disableElevation</span> | Styles applied to the root element if `disableElevation={true}`.
 | <span class="prop-name">disabled</span> | <span class="prop-name">.Mui-disabled</span> | Pseudo-class applied to child elements if `disabled={true}`.
 | <span class="prop-name">fullWidth</span> | <span class="prop-name">.MuiButtonGroup-fullWidth</span> | Styles applied to the root element if `fullWidth={true}`.

packages/material-ui-styles/src/makeStyles/makeStyles.js

@@ -246,6 +246,7 @@ export default function makeStyles(stylesOrCreator, options = {}) {
         'MuiAvatar',
         'MuiBadge',
         'MuiButton',
+        'MuiButtonGroup',
         'MuiChip',
         'MuiTypography',
       ];

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

@@ -1,6 +1,10 @@
 import * as React from 'react';
+import { OverridableStringUnion } from '@material-ui/types';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
+export interface ButtonGroupPropsVariantOverrides {}
+export type ButtonGroupVariantDefaults = Record<'text' | 'outlined' | 'contained', true>;
+
 export interface ButtonGroupTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P & {
     /**
@@ -43,7 +47,7 @@ export interface ButtonGroupTypeMap<P = {}, D extends React.ElementType = 'div'>
     /**
      * The variant to use.
      */
-    variant?: 'text' | 'outlined' | 'contained';
+    variant?: OverridableStringUnion<ButtonGroupVariantDefaults, ButtonGroupPropsVariantOverrides>;
   };
   defaultComponent: D;
   classKey: ButtonGroupClassKey;
@@ -64,6 +68,8 @@ declare const ButtonGroup: OverridableComponent<ButtonGroupTypeMap>;
 export type ButtonGroupClassKey =
   | 'root'
   | 'contained'
+  | 'outlined'
+  | 'text'
   | 'disabled'
   | 'disableElevation'
   | 'fullWidth'

packages/material-ui/src/ButtonGroup/ButtonGroup.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { useThemeVariants } from '@material-ui/styles';
 import capitalize from '../utils/capitalize';
 import { fade } from '../styles/colorManipulator';
 import withStyles from '../styles/withStyles';
@@ -21,6 +22,10 @@ export const styles = (theme) => ({
   contained: {
     boxShadow: theme.shadows[2],
   },
+  /* Styles applied to the root element if `variant="outlined"`. */
+  outlined: {},
+  /* Styles applied to the root element if `variant="text"`. */
+  text: {},
   /* Styles applied to the root element if `disableElevation={true}`. */
   disableElevation: {
     boxShadow: 'none',
@@ -180,6 +185,23 @@ const ButtonGroup = React.forwardRef(function ButtonGroup(props, ref) {
     ...other
   } = props;
 
+  const themeVariantsClasses = useThemeVariants(
+    {
+      ...props,
+      color,
+      component: Component,
+      disabled,
+      disableElevation,
+      disableFocusRipple,
+      disableRipple,
+      fullWidth,
+      orientation,
+      size,
+      variant,
+    },
+    'MuiButtonGroup',
+  );
+
   const buttonClassName = clsx(
     classes.grouped,
     classes[`grouped${capitalize(orientation)}`],
@@ -202,6 +224,7 @@ const ButtonGroup = React.forwardRef(function ButtonGroup(props, ref) {
           [classes.fullWidth]: fullWidth,
           [classes.disableElevation]: disableElevation,
         },
+        themeVariantsClasses,
         className,
       )}
       ref={ref}
@@ -298,7 +321,10 @@ ButtonGroup.propTypes = {
   /**
    * The variant to use.
    */
-  variant: PropTypes.oneOf(['contained', 'outlined', 'text']),
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['contained', 'outlined', 'text']),
+    PropTypes.string,
+  ]),
 };
 
 export default withStyles(styles, { name: 'MuiButtonGroup' })(ButtonGroup);