[Badge] Custom variant (#22140)

* added support for custom variants * prettier + docs:api * framer * added to allowlisted components
mui · Aug 10, 2020 · d1a585d · d1a585d
1 parent 3b8f9b0
commit d1a585d
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 12 deletions.
diff --git a/docs/pages/api-docs/badge.md b/docs/pages/api-docs/badge.md
@@ -38,7 +38,7 @@ The `MuiBadge` name can be used for providing [default props](/customization/glo
 | <span class="prop-name">max</span> | <span class="prop-type">number</span> | <span class="prop-default">99</span> | Max count to show. |
 | <span class="prop-name">overlap</span> | <span class="prop-type">'circular'<br>&#124;&nbsp;'rectangular'</span> | <span class="prop-default">'rectangular'</span> | Wrapped shape the badge should overlap. |
 | <span class="prop-name">showZero</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Controls whether the badge is hidden when `badgeContent` is zero. |
-| <span class="prop-name">variant</span> | <span class="prop-type">'dot'<br>&#124;&nbsp;'standard'</span> | <span class="prop-default">'standard'</span> | The variant to use. |
+| <span class="prop-name">variant</span> | <span class="prop-type">'dot'<br>&#124;&nbsp;'standard'<br>&#124;&nbsp;string</span> | <span class="prop-default">'standard'</span> | The variant to use. |
 
 The `ref` is forwarded to the root element.
 
@@ -54,6 +54,7 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiBadge-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
 | <span class="prop-name">colorError</span> | <span class="prop-name">.MuiBadge-colorError</span> | Styles applied to the root element if `color="error"`.
 | <span class="prop-name">dot</span> | <span class="prop-name">.MuiBadge-dot</span> | Styles applied to the root element if `variant="dot"`.
+| <span class="prop-name">standard</span> | <span class="prop-name">.MuiBadge-standard</span> | Styles applied to the root element if `variant="standard"`.
 | <span class="prop-name">anchorOriginTopRightRectangular</span> | <span class="prop-name">.MuiBadge-anchorOriginTopRightRectangular</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`.
 | <span class="prop-name">anchorOriginBottomRightRectangular</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomRightRectangular</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`.
 | <span class="prop-name">anchorOriginTopLeftRectangular</span> | <span class="prop-name">.MuiBadge-anchorOriginTopLeftRectangular</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`.

diff --git a/framer/Material-UI.framerfx/code/Badge.tsx b/framer/Material-UI.framerfx/code/Badge.tsx
@@ -7,7 +7,6 @@ interface Props {
   badgeContent: string;
   max: number;
   showZero: boolean;
-  variant: 'dot' | 'standard';
   icon: string;
   theme: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp';
   badgeColor: 'default' | 'primary' | 'secondary' | 'error';
@@ -37,7 +36,6 @@ Badge.defaultProps = {
   badgeContent: '8',
   max: 99,
   showZero: false,
-  variant: 'standard' as 'standard',
   icon: '',
   theme: 'Filled' as 'Filled',
   badgeColor: 'primary' as 'primary',
@@ -58,11 +56,6 @@ addPropertyControls(Badge, {
     type: ControlType.Boolean,
     title: 'Show zero',
   },
-  variant: {
-    type: ControlType.Enum,
-    title: 'Variant',
-    options: ['dot', 'standard'],
-  },
   icon: {
     type: ControlType.String,
     title: 'Icon',

diff --git a/framer/scripts/framerConfig.js b/framer/scripts/framerConfig.js
@@ -39,6 +39,8 @@ export const componentSettings = {
       'disableFocusRipple',
       'invisible',
       'overlap',
+      // FIXME: `Union`
+      'variant',
     ],
     propValues: {
       icon: "''",

diff --git a/packages/material-ui-styles/src/makeStyles/makeStyles.js b/packages/material-ui-styles/src/makeStyles/makeStyles.js
@@ -242,7 +242,7 @@ export default function makeStyles(stylesOrCreator, options = {}) {
       React.useDebugValue(classes);
     }
     if (process.env.NODE_ENV !== 'production') {
-      const allowlistedComponents = ['MuiButton', 'MuiTypography'];
+      const allowlistedComponents = ['MuiButton', 'MuiTypography', 'MuiBadge'];
 
       if (
         name &&

diff --git a/packages/material-ui/src/Badge/Badge.d.ts b/packages/material-ui/src/Badge/Badge.d.ts
@@ -1,11 +1,15 @@
 import * as React from 'react';
+import { OverridableStringUnion } from '@material-ui/types';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface BadgeOrigin {
   vertical: 'top' | 'bottom';
   horizontal: 'left' | 'right';
 }
 
+export interface BadgePropsVariantOverrides {}
+export type BadgeVariantDefaults = Record<'standard' | 'dot', true>;
+
 export interface BadgeTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P & {
     /**
@@ -43,7 +47,7 @@ export interface BadgeTypeMap<P = {}, D extends React.ElementType = 'div'> {
     /**
      * The variant to use.
      */
-    variant?: 'standard' | 'dot';
+    variant?: OverridableStringUnion<BadgeVariantDefaults, BadgePropsVariantOverrides>;
   };
   defaultComponent: D;
   classKey: BadgeClassKey;
@@ -56,6 +60,7 @@ export type BadgeClassKey =
   | 'colorSecondary'
   | 'colorError'
   | 'dot'
+  | 'standard'
   | 'anchorOriginTopRightRectangular'
   | 'anchorOriginBottomRightRectangular'
   | 'anchorOriginTopLeftRectangular'

diff --git a/packages/material-ui/src/Badge/Badge.js b/packages/material-ui/src/Badge/Badge.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { useThemeVariants } from '@material-ui/styles';
 import withStyles from '../styles/withStyles';
 import capitalize from '../utils/capitalize';
 
@@ -62,6 +63,8 @@ export const styles = (theme) => ({
     minWidth: RADIUS_DOT * 2,
     padding: 0,
   },
+  /* Styles applied to the root element if `variant="standard"`. */
+  standard: {},
   /* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`. */
   anchorOriginTopRightRectangular: {
     top: 0,
@@ -206,6 +209,22 @@ const Badge = React.forwardRef(function Badge(props, ref) {
     variant = variantProp,
   } = invisible ? prevProps : props;
 
+  const themeVariantsClasses = useThemeVariants(
+    {
+      ...props,
+      anchorOrigin,
+      badgeContent,
+      color,
+      component: ComponentProp,
+      invisible,
+      max,
+      overlap,
+      showZero,
+      variant,
+    },
+    'MuiBadge',
+  );
+
   let displayValue = '';
 
   if (variant !== 'dot') {
@@ -218,6 +237,7 @@ const Badge = React.forwardRef(function Badge(props, ref) {
       <span
         className={clsx(
           classes.badge,
+          classes[variant],
           classes[
             `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(
               anchorOrigin.horizontal,
@@ -226,8 +246,8 @@ const Badge = React.forwardRef(function Badge(props, ref) {
           {
             [classes[`color${capitalize(color)}`]]: color !== 'default',
             [classes.invisible]: invisible,
-            [classes.dot]: variant === 'dot',
           },
+          themeVariantsClasses,
         )}
       >
         {displayValue}
@@ -293,7 +313,10 @@ Badge.propTypes = {
   /**
    * The variant to use.
    */
-  variant: PropTypes.oneOf(['dot', 'standard']),
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['dot', 'standard']),
+    PropTypes.string,
+  ]),
 };
 
 export default withStyles(styles, { name: 'MuiBadge' })(Badge);