[Button] Custom variant

docs/src/pages/components/buttons/CustomizedButtons.js

@@ -66,6 +66,66 @@ const theme = createMuiTheme({
   palette: {
     primary: green,
   },
+  additions: {
+    MuiButton: {
+      dashed: {
+        padding: '5px 15px',
+        border: '5px dashed red',
+        '&$disabled': {
+          border: `5px dashed red`,
+        },
+      },
+      tertiery: {
+        backgroundColor: 'yellow',
+        padding: 20,
+      },
+    },
+  },
+  variants: {
+    MuiButton: [
+      {
+        trigger: (props) => props.variant === 'red',
+        styles: {
+          color: 'red'
+        }
+      },
+      {
+        trigger: (props) => props.size === 'xxsmall',
+        styles: {
+          fontSize: '5px'
+        }
+      },
+      {
+        trigger: (props) => props.toggle,
+        styles: {
+          background: 'green'
+        }
+      },
+      {
+        trigger: (props) => props.toggle === 'red',
+        styles: {
+          backgroundColor: 'red'
+        }
+      }
+    ],
+  },
+  variantsV2: {
+    MuiButton: [
+      {
+        matcher: { variant: 'yellow' },
+        styles: {
+          color: 'yellow',
+          background: 'grey',
+        }
+      },
+      {
+        matcher: { size: 'xxlarge' },
+        styles: {
+          fontSize: '50px',
+        }
+      },
+    ],
+  }
 });
 
 export default function CustomizedButtons() {
@@ -84,6 +144,15 @@ export default function CustomizedButtons() {
         <Button variant="contained" color="primary" className={classes.margin}>
           Theme Provider
         </Button>
+        <Button variant="dashed" color="primary" className={classes.margin}>
+          Dashed Variant
+        </Button>
+        <Button variant="red" color="primary" className={classes.margin}>
+          Red Variant
+        </Button>
+        <Button variant="yellow" size="xxlarge" className={classes.margin}>
+          Yellow Variant
+        </Button>
       </ThemeProvider>
       <BootstrapButton
         variant="contained"

docs/src/pages/components/buttons/CustomizedButtons.tsx

@@ -70,6 +70,21 @@ const theme = createMuiTheme({
   palette: {
     primary: green,
   },
+  additions: {
+    MuiButton: {
+      dashed: {
+        padding: '5px 15px',
+        border: '5px dashed red',
+        '&$disabled': {
+          border: `5px dashed red`,
+        },
+      },
+      tertiery: {
+        backgroundColor: 'yellow',
+        padding: 20,
+      },
+    },
+  },
 });
 
 export default function CustomizedButtons() {
@@ -88,6 +103,9 @@ export default function CustomizedButtons() {
         <Button variant="contained" color="primary" className={classes.margin}>
           Theme Provider
         </Button>
+        <Button variant="dashed" color="primary" className={classes.margin}>
+          Dashed Variant
+        </Button>
       </ThemeProvider>
       <BootstrapButton
         variant="contained"

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

@@ -1,6 +1,23 @@
 import { deepmerge } from '@material-ui/utils';
 import noopTheme from './noopTheme';
 
+const capitalize = (string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
+// This should be defined somehwere per component
+// ideally each component would define this for itself...
+const propsToClassKey = (matcher) => {
+  let classKey = matcher.variant ? matcher.variant : '';
+  if(matcher.color) {
+    classKey += capitalize(matcher.color);
+  }
+  if(matcher.size) {
+    classKey += (classKey.length === 0 ? 's' : 'S') + `ize${capitalize(matcher.size)}`;
+  }
+  return classKey;
+}
+
 export default function getStylesCreator(stylesOrCreator) {
   const themingEnabled = typeof stylesOrCreator === 'function';
 
@@ -36,11 +53,17 @@ export default function getStylesCreator(stylesOrCreator) {
         throw err;
       }
 
-      if (!name || !theme.overrides || !theme.overrides[name]) {
+      if (
+        !name ||
+        ((!theme.overrides || !theme.overrides[name]) &&
+          (!theme.additions || !theme.additions[name]))
+      ) {
         return styles;
       }
 
-      const overrides = theme.overrides[name];
+      const additions = theme.additions[name] || {};
+      const overrides = theme.overrides[name] || {};
+      const variants = theme.variantsV2[name] || [];
       const stylesWithOverrides = { ...styles };
 
       Object.keys(overrides).forEach((key) => {
@@ -50,14 +73,24 @@ export default function getStylesCreator(stylesOrCreator) {
               [
                 'Material-UI: You are trying to override a style that does not exist.',
                 `Fix the \`${key}\` key of \`theme.overrides.${name}\`.`,
+                'If you intentionally wanted to add new key, please use the theme.additions option',
               ].join('\n'),
             );
           }
         }
 
-        stylesWithOverrides[key] = deepmerge(stylesWithOverrides[key], overrides[key]);
+        stylesWithOverrides[key] = deepmerge(stylesWithOverrides[key] || {}, overrides[key]);
+      });
+
+      Object.keys(additions).forEach((key) => {
+        stylesWithOverrides[key] = deepmerge(stylesWithOverrides[key] || {}, additions[key]);
       });
 
+      variants.forEach(definition => {
+        const classKey = propsToClassKey(definition.matcher);
+        stylesWithOverrides[classKey] = deepmerge(stylesWithOverrides[classKey] || {}, definition.styles);
+      })
+
       return stylesWithOverrides;
     },
     options: {},

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

@@ -48,7 +48,8 @@ const withStyles = (stylesOrCreator, options = {}) => (Component) => {
     // The wrapper receives only user supplied props, which could be a subset of
     // the actual props Component might receive due to merging with defaultProps.
     // So copying it here would give us the same result in the wrapper as well.
-    const classes = useStyles({ ...Component.defaultProps, ...props });
+    const allProps = { ...Component.defaultProps, ...props };
+    const classes = useStyles(allProps);
 
     let theme;
     let more = other;
@@ -57,7 +58,24 @@ const withStyles = (stylesOrCreator, options = {}) => (Component) => {
       // name and withTheme are invariant in the outer scope
       // eslint-disable-next-line react-hooks/rules-of-hooks
       theme = useTheme() || defaultTheme;
-
+      // if(theme && theme.variants && theme.variants[name]) {
+
+      //   const arr = theme.variants[name];
+      //   const styles = arr.reduce((acc, curr) => {
+      //     // TODO: add state
+      //     if(curr.trigger(allProps)) {
+      //       acc = { ...acc, ...curr.styles } // TODO: deepmerge
+      //     }
+      //     return acc;
+      //   }, {});
+
+
+      //   const useVariantStyles = makeStyles({ root: styles });
+
+      //   const variantClasses = useVariantStyles();
+
+      //   classes.root = classes.root + " " + variantClasses.root; // merge styles first :\
+      // }
       if (name) {
         more = getThemeProps({ theme, name, props: other });
       }

packages/material-ui-utils/src/deepmerge.js

@@ -5,6 +5,7 @@ export function isPlainObject(item) {
 export default function deepmerge(target, source, options = { clone: true }) {
   const output = options.clone ? { ...target } : target;
 
+  // TODO: add merging of arrays
   if (isPlainObject(target) && isPlainObject(source)) {
     Object.keys(source).forEach((key) => {
       // Avoid prototype pollution

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

@@ -52,7 +52,7 @@ export type ButtonTypeMap<
     /**
      * The variant to use.
      */
-    variant?: 'text' | 'outlined' | 'contained';
+    variant?: 'text' | 'outlined' | 'contained' | string;
   };
   defaultComponent: D;
   classKey: ButtonClassKey;

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

@@ -409,7 +409,10 @@ Button.propTypes = {
   /**
    * The variant to use.
    */
-  variant: PropTypes.oneOf(['contained', 'outlined', 'text']),
+  variant: PropTypes.oneOfType([
+    PropTypes.oneOf(['contained', 'outlined', 'text']),
+    PropTypes.string,
+  ]),
 };
 
 export default withStyles(styles, { name: 'MuiButton' })(Button);

packages/material-ui/src/styles/additions.d.ts

@@ -0,0 +1,100 @@
+import { StyleRules } from './withStyles';
+
+export interface Additions {
+  MuiAppBar?: StyleRules;
+  MuiAvatar?: StyleRules;
+  MuiBackdrop?: StyleRules;
+  MuiBadge?: StyleRules;
+  MuiBottomNavigation?: StyleRules;
+  MuiBottomNavigationAction?: StyleRules;
+  MuiBreadcrumbs?: StyleRules;
+  MuiButton?: StyleRules;
+  MuiButtonBase?: StyleRules;
+  MuiButtonGroup?: StyleRules;
+  MuiCard?: StyleRules;
+  MuiCardActionArea?: StyleRules;
+  MuiCardActions?: StyleRules;
+  MuiCardContent?: StyleRules;
+  MuiCardHeader?: StyleRules;
+  MuiCardMedia?: StyleRules;
+  MuiCheckbox?: StyleRules;
+  MuiChip?: StyleRules;
+  MuiCircularProgress?: StyleRules;
+  MuiCollapse?: StyleRules;
+  MuiContainer?: StyleRules;
+  MuiDialog?: StyleRules;
+  MuiDialogActions?: StyleRules;
+  MuiDialogContent?: StyleRules;
+  MuiDialogContentText?: StyleRules;
+  MuiDialogTitle?: StyleRules;
+  MuiDivider?: StyleRules;
+  MuiDrawer?: StyleRules;
+  MuiAccordion?: StyleRules;
+  MuiAccordionActions?: StyleRules;
+  MuiAccordionDetails?: StyleRules;
+  MuiAccordionSummary?: StyleRules;
+  MuiFab?: StyleRules;
+  MuiFilledInput?: StyleRules;
+  MuiFormControl?: StyleRules;
+  MuiFormControlLabel?: StyleRules;
+  MuiFormGroup?: StyleRules;
+  MuiFormHelperText?: StyleRules;
+  MuiFormLabel?: StyleRules;
+  MuiGrid?: StyleRules;
+  MuiGridList?: StyleRules;
+  MuiGridListTile?: StyleRules;
+  MuiGridListTileBar?: StyleRules;
+  MuiIcon?: StyleRules;
+  MuiIconButton?: StyleRules;
+  MuiInput?: StyleRules;
+  MuiInputAdornment?: StyleRules;
+  MuiInputBase?: StyleRules;
+  MuiInputLabel?: StyleRules;
+  MuiLinearProgress?: StyleRules;
+  MuiLink?: StyleRules;
+  MuiList?: StyleRules;
+  MuiListItem?: StyleRules;
+  MuiListItemAvatar?: StyleRules;
+  MuiListItemIcon?: StyleRules;
+  MuiListItemSecondaryAction?: StyleRules;
+  MuiListItemText?: StyleRules;
+  MuiListSubheader?: StyleRules;
+  MuiMenu?: StyleRules;
+  MuiMenuItem?: StyleRules;
+  MuiMobileStepper?: StyleRules;
+  MuiNativeSelect?: StyleRules;
+  MuiOutlinedInput?: StyleRules;
+  MuiPaper?: StyleRules;
+  MuiPopover?: StyleRules;
+  MuiRadio?: StyleRules;
+  MuiScopedCssBaseline?: StyleRules;
+  MuiSelect?: StyleRules;
+  MuiSlider?: StyleRules;
+  MuiSnackbar?: StyleRules;
+  MuiSnackbarContent?: StyleRules;
+  MuiStep?: StyleRules;
+  MuiStepButton?: StyleRules;
+  MuiStepConnector?: StyleRules;
+  MuiStepContent?: StyleRules;
+  MuiStepIcon?: StyleRules;
+  MuiStepLabel?: StyleRules;
+  MuiStepper?: StyleRules;
+  MuiSvgIcon?: StyleRules;
+  MuiSwitch?: StyleRules;
+  MuiTab?: StyleRules;
+  MuiTable?: StyleRules;
+  MuiTableBody?: StyleRules;
+  MuiTableCell?: StyleRules;
+  MuiTableContainer?: StyleRules;
+  MuiTableFooter?: StyleRules;
+  MuiTableHead?: StyleRules;
+  MuiTablePagination?: StyleRules;
+  MuiTableRow?: StyleRules;
+  MuiTableSortLabel?: StyleRules;
+  MuiTabs?: StyleRules;
+  MuiTextField?: StyleRules;
+  MuiToolbar?: StyleRules;
+  MuiTooltip?: StyleRules;
+  MuiTouchRipple?: StyleRules;
+  MuiTypography?: StyleRules;
+}

packages/material-ui/src/styles/createMuiTheme.d.ts

@@ -8,12 +8,17 @@ import { Spacing, SpacingOptions } from './createSpacing';
 import { Transitions, TransitionsOptions } from './transitions';
 import { ZIndex, ZIndexOptions } from './zIndex';
 import { Overrides } from './overrides';
+import { Additions } from './additions';
+import { Variants } from './variants';
 import { ComponentsProps } from './props';
 
 export type Direction = 'ltr' | 'rtl';
 
 export interface ThemeOptions {
   shape?: ShapeOptions;
+  additions?: Additions;
+  variants?: any;
+  variantsV2?: Variants;
   breakpoints?: BreakpointsOptions;
   direction?: Direction;
   mixins?: MixinsOptions;
@@ -30,12 +35,14 @@ export interface ThemeOptions {
 
 export interface Theme {
   shape: Shape;
+  additions?: Additions;
   breakpoints: Breakpoints;
   direction: Direction;
   mixins: Mixins;
   overrides?: Overrides;
   palette: Palette;
   props?: ComponentsProps;
+  variants: any;
   shadows: Shadows;
   spacing: Spacing;
   transitions: Transitions;