Feat/badge unstyled remove color v2

docs/pages/api-docs/badge-unstyled.md

@@ -29,8 +29,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">anchorOrigin</span> | <span class="prop-type">{ horizontal: 'left'<br>&#124;&nbsp;'right', vertical: 'bottom'<br>&#124;&nbsp;'top' }</span> | <span class="prop-default">{  vertical: 'top',  horizontal: 'right',}</span> | The anchor of the badge. |
 | <span class="prop-name">badgeContent</span> | <span class="prop-type">node</span> |  | The content rendered within the badge. |
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The badge will be added relative to this node. |
-| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
-| <span class="prop-name">color</span> | <span class="prop-type">'default'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'</span> | <span class="prop-default">'default'</span> | The color of the component. It supports those theme colors that make sense for this component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Override or extend the styles applied to the component. |
 | <span class="prop-name">components</span> | <span class="prop-type">{ Badge?: elementType, Root?: elementType }</span> | <span class="prop-default">{}</span> | The components used for each slot inside the Badge. Either a string to use a HTML element or a component. |
 | <span class="prop-name">componentsProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | The props used for each slot inside the Badge. |
 | <span class="prop-name">invisible</span> | <span class="prop-type">bool</span> |  | If `true`, the badge is invisible. |
@@ -49,9 +48,6 @@ Any other props supplied will be provided to the root element (native element).
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiBadge-root</span> | Styles applied to the root element.
 | <span class="prop-name">badge</span> | <span class="prop-name">.MuiBadge-badge</span> | Styles applied to the badge `span` element.
-| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiBadge-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
-| <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"`.

docs/pages/api-docs/badge.md

@@ -31,7 +31,7 @@ The `MuiBadge` name can be used for providing [default props](/customization/glo
 | <span class="prop-name">anchorOrigin</span> | <span class="prop-type">{ horizontal: 'left'<br>&#124;&nbsp;'right', vertical: 'bottom'<br>&#124;&nbsp;'top' }</span> | <span class="prop-default">{  vertical: 'top',  horizontal: 'right',}</span> | The anchor of the badge. |
 | <span class="prop-name">badgeContent</span> | <span class="prop-type">node</span> |  | The content rendered within the badge. |
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The badge will be added relative to this node. |
-| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | Override or extend the styles applied to the component. |
 | <span class="prop-name">color</span> | <span class="prop-type">'default'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'</span> | <span class="prop-default">'default'</span> | The color of the component. It supports those theme colors that make sense for this component. |
 | <span class="prop-name">components</span> | <span class="prop-type">{ Badge?: elementType, Root?: elementType }</span> | <span class="prop-default">{}</span> | The components used for each slot inside the Badge. Either a string to use a HTML element or a component. |
 | <span class="prop-name">componentsProps</span> | <span class="prop-type">object</span> | <span class="prop-default">{}</span> | The props used for each slot inside the Badge. |
@@ -52,9 +52,6 @@ Any other props supplied will be provided to the root element ([BadgeUnstyled](/
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiBadge-root</span> | Styles applied to the root element.
 | <span class="prop-name">badge</span> | <span class="prop-name">.MuiBadge-badge</span> | Styles applied to the badge `span` element.
-| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiBadge-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
-| <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"`.
@@ -66,6 +63,9 @@ Any other props supplied will be provided to the root element ([BadgeUnstyled](/
 | <span class="prop-name">anchorOriginTopLeftCircular</span> | <span class="prop-name">.MuiBadge-anchorOriginTopLeftCircular</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`.
 | <span class="prop-name">anchorOriginBottomLeftCircular</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomLeftCircular</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`.
 | <span class="prop-name">invisible</span> | <span class="prop-name">.MuiBadge-invisible</span> | Pseudo-class to the badge `span` element if `invisible={true}`.
+| <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiBadge-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
+| <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"`.
 
 You can override the style of the component thanks to one of these customization points:
 

docs/scripts/buildApi.ts

@@ -20,6 +20,7 @@ import createGenerateClassName from '../../packages/material-ui-styles/src/creat
 import getStylesCreator from '../../packages/material-ui-styles/src/getStylesCreator';
 import createMuiTheme from '../../packages/material-ui/src/styles/createMuiTheme';
 import { getLineFeed, getUnstyledFilename } from './helpers';
+import { CssBaseline } from '@material-ui/core';
 
 const generateClassName = createGenerateClassName();
 
@@ -227,7 +228,6 @@ async function updateStylesDefinition(context: {
   const unstyledFileName = getUnstyledFilename(typesFilename, true);
 
   try {
-    // If the JSON file doesn't exists try extracting the info from the TS definition
     const typesSource = readFileSync(unstyledFileName, { encoding: 'utf8' });
     const typesAST = await babel.parseAsync(typesSource, {
       configFile: false,
@@ -251,7 +251,53 @@ async function updateStylesDefinition(context: {
           const members = (node.typeAnnotation.typeAnnotation as babel.types.TSTypeLiteral).members;
 
           if (members) {
-            styles.descriptions = {};
+            styles.descriptions = styles.descriptions || {};
+            members.forEach((member) => {
+              const className = ((member as babel.types.TSPropertySignature)
+                .key as babel.types.Identifier).name;
+              styles.classes.push(className);
+              if (member.leadingComments) {
+                styles.descriptions[className] = trimComment(member.leadingComments[0].value);
+              }
+            });
+          }
+        }
+      },
+    });
+
+    const source = readFileSync(typesFilename, { encoding: 'utf8' });
+    const sourceAST = await babel.parseAsync(source, {
+      configFile: false,
+      filename: typesFilename,
+      presets: [require.resolve('@babel/preset-typescript')],
+    });
+    if (sourceAST === null) {
+      throw new Error('No AST returned from babel.');
+    }
+
+    traverse(sourceAST, {
+      TSPropertySignature(babelPath) {
+        const { node } = babelPath;
+        const possiblyPropName = (node.key as babel.types.Identifier).name;
+        if (possiblyPropName === 'classes' && node.typeAnnotation !== null) {
+          let classesDeclarationNode = null;
+          const types = (node.typeAnnotation.typeAnnotation as babel.types.TSIntersectionType)
+            .types;
+
+          if (types) {
+            types.forEach((node) => {
+              if (node.type === 'TSTypeLiteral') {
+                classesDeclarationNode = node;
+              }
+            });
+          }
+
+          const members = classesDeclarationNode
+            ? (classesDeclarationNode as babel.types.TSTypeLiteral).members
+            : [];
+
+          if (members) {
+            styles.descriptions = styles.descriptions || {};
             members.forEach((member) => {
               const className = ((member as babel.types.TSPropertySignature)
                 .key as babel.types.Identifier).name;
@@ -267,6 +313,8 @@ async function updateStylesDefinition(context: {
   } catch (e) {
     // Do nothing as not every components has an unstyled version
   }
+
+  styles.classes = Array.from(new Set(styles.classes));
 }
 
 async function annotateClassesDefinition(context: {

packages/material-ui-unstyled/src/BadgeUnstyled/BadgeUnstyled.d.ts

@@ -54,18 +54,13 @@ export interface BadgeUnstyledTypeMap<P = {}, D extends React.ElementType = 'div
     children?: React.ReactNode;
     /**
      * Override or extend the styles applied to the component.
+     * @default {}
      */
     classes?: {
       /** Styles applied to the root element. */
       root?: string;
       /** Styles applied to the badge `span` element. */
       badge?: string;
-      /** Styles applied to the root element if `color="primary"`. */
-      colorPrimary?: string;
-      /** Styles applied to the root element if `color="secondary"`. */
-      colorSecondary?: string;
-      /** Styles applied to the root element if `color="error"`. */
-      colorError?: string;
       /** Styles applied to the root element if `variant="dot"`. */
       dot?: string;
       /** Styles applied to the root element if `variant="standard"`. */
@@ -89,11 +84,6 @@ export interface BadgeUnstyledTypeMap<P = {}, D extends React.ElementType = 'div
       /** Pseudo-class to the badge `span` element if `invisible={true}`. */
       invisible?: string;
     };
-    /**
-     * The color of the component. It supports those theme colors that make sense for this component.
-     * @default 'default'
-     */
-    color?: 'primary' | 'secondary' | 'default' | 'error';
     /**
      * If `true`, the badge is invisible.
      */

packages/material-ui-unstyled/src/BadgeUnstyled/BadgeUnstyled.js

@@ -1,27 +1,19 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_capitalize as capitalize } from '@material-ui/utils';
+import { unstable_capitalize as capitalize, usePreviousProps } from '@material-ui/utils';
 import isHostComponent from '../utils/isHostComponent';
-import badgeClasses, { getUtilityClass } from './badgeClasses';
-
-const usePreviousProps = (value) => {
-  const ref = React.useRef({});
-  React.useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-};
+import badgeClasses, { getBadgeUtilityClass } from './badgeClasses';
 
 const useBadgeClasses = (props) => {
-  const { color, variant, anchorOrigin, overlap, invisible, classes = {} } = props;
+  const { variant, anchorOrigin, overlap, invisible, classes = {} } = props;
 
   const utilityClasses = {
     root: clsx(badgeClasses['root'], classes['root']),
     badge: clsx(
       badgeClasses['badge'],
       classes['badge'],
-      getUtilityClass(variant),
+      getBadgeUtilityClass(variant),
       badgeClasses[
         `anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(
           anchorOrigin.horizontal,
@@ -33,8 +25,6 @@ const useBadgeClasses = (props) => {
         )}${capitalize(overlap)}`
       ],
       {
-        [badgeClasses[`color${capitalize(color)}`]]: color !== 'default',
-        [classes[`color${capitalize(color)}`]]: color !== 'default',
         [badgeClasses['invisible']]: invisible,
         [classes.invisible]: invisible,
       },
@@ -50,10 +40,10 @@ const BadgeUnstyled = React.forwardRef(function BadgeUnstyled(props, ref) {
       vertical: 'top',
       horizontal: 'right',
     },
+    classes: classesProp = {},
     badgeContent: badgeContentProp,
     children,
     className,
-    color: colorProp = 'default',
     components = {},
     componentsProps = {},
     invisible: invisibleProp,
@@ -69,7 +59,6 @@ const BadgeUnstyled = React.forwardRef(function BadgeUnstyled(props, ref) {
   const prevProps = usePreviousProps({
     anchorOrigin: anchorOriginProp,
     badgeContent: badgeContentProp,
-    color: colorProp,
     max: maxProp,
     overlap: overlapProp,
     variant: variantProp,
@@ -87,7 +76,6 @@ const BadgeUnstyled = React.forwardRef(function BadgeUnstyled(props, ref) {
   const {
     anchorOrigin = anchorOriginProp,
     badgeContent,
-    color = colorProp,
     max = maxProp,
     overlap = overlapProp,
     variant = variantProp,
@@ -97,7 +85,6 @@ const BadgeUnstyled = React.forwardRef(function BadgeUnstyled(props, ref) {
     ...props,
     anchorOrigin,
     badgeContent,
-    color,
     invisible,
     max,
     overlap,
@@ -120,22 +107,22 @@ const BadgeUnstyled = React.forwardRef(function BadgeUnstyled(props, ref) {
 
   return (
     <Root
+      {...rootProps}
       {...(!isHostComponent(Root) && {
-        styleProps: stateAndProps,
+        styleProps: { ...stateAndProps, ...rootProps.styleProps },
         theme,
       })}
       ref={ref}
-      {...rootProps}
       {...other}
       className={clsx(classes.root, rootProps.className, className)}
     >
       {children}
       <Badge
+        {...badgeProps}
         {...(!isHostComponent(Badge) && {
-          styleProps: stateAndProps,
+          styleProps: { ...stateAndProps, ...badgeProps.styleProps },
           theme,
         })}
-        {...badgeProps}
         className={clsx(classes.badge, badgeProps.className)}
       >
         {displayValue}
@@ -170,17 +157,13 @@ BadgeUnstyled.propTypes = {
   children: PropTypes.node,
   /**
    * Override or extend the styles applied to the component.
+   * @default {}
    */
   classes: PropTypes.object,
   /**
    * @ignore
    */
   className: PropTypes.string,
-  /**
-   * The color of the component. It supports those theme colors that make sense for this component.
-   * @default 'default'
-   */
-  color: PropTypes.oneOf(['default', 'error', 'primary', 'secondary']),
   /**
    * The components used for each slot inside the Badge.
    * Either a string to use a HTML element or a component.

packages/material-ui-unstyled/src/BadgeUnstyled/badgeClasses.d.ts

@@ -1,4 +1,4 @@
-interface BadgeClasses {
+export interface BadgeClasses {
   root: string;
   badge: string;
   anchorOriginTopLeftCircular: string;
@@ -9,12 +9,11 @@ interface BadgeClasses {
   anchorOriginBottomLeftRectangular: string;
   anchorOriginBottomRightCircular: string;
   anchorOriginBottomRightRectangular: string;
-  colorError: string;
-  colorPrimary: string;
-  colorSecondary: string;
   invisible: string;
 }
 
+export const getBadgeUtilityClass: (part: string) => string;
+
 declare const badgeClasses: BadgeClasses;
 
 export default badgeClasses;

packages/material-ui-unstyled/src/BadgeUnstyled/badgeClasses.js

@@ -1,23 +1,20 @@
-export const getUtilityClass = (name) => {
+export const getBadgeUtilityClass = (name) => {
   return `MuiBadge-${name}`;
 };
 
 const badgeClasses = {
-  root: getUtilityClass('root'),
-  badge: getUtilityClass('badge'),
-  dot: getUtilityClass('dot'),
-  anchorOriginTopLeftCircular: getUtilityClass('anchorOriginTopLeftCircular'),
-  anchorOriginTopLeftRectangular: getUtilityClass('anchorOriginTopLeftRectangular'),
-  anchorOriginTopRightCircular: getUtilityClass('anchorOriginTopRightCircular'),
-  anchorOriginTopRightRectangular: getUtilityClass('anchorOriginTopRightRectangular'),
-  anchorOriginBottomLeftCircular: getUtilityClass('anchorOriginBottomLeftCircular'),
-  anchorOriginBottomLeftRectangular: getUtilityClass('anchorOriginBottomLeftRectangular'),
-  anchorOriginBottomRightCircular: getUtilityClass('anchorOriginBottomRightCircular'),
-  anchorOriginBottomRightRectangular: getUtilityClass('anchorOriginBottomRightRectangular'),
-  colorError: getUtilityClass('colorError'),
-  colorPrimary: getUtilityClass('colorPrimary'),
-  colorSecondary: getUtilityClass('colorSecondary'),
-  invisible: getUtilityClass('invisible'),
+  root: getBadgeUtilityClass('root'),
+  badge: getBadgeUtilityClass('badge'),
+  dot: getBadgeUtilityClass('dot'),
+  anchorOriginTopLeftCircular: getBadgeUtilityClass('anchorOriginTopLeftCircular'),
+  anchorOriginTopLeftRectangular: getBadgeUtilityClass('anchorOriginTopLeftRectangular'),
+  anchorOriginTopRightCircular: getBadgeUtilityClass('anchorOriginTopRightCircular'),
+  anchorOriginTopRightRectangular: getBadgeUtilityClass('anchorOriginTopRightRectangular'),
+  anchorOriginBottomLeftCircular: getBadgeUtilityClass('anchorOriginBottomLeftCircular'),
+  anchorOriginBottomLeftRectangular: getBadgeUtilityClass('anchorOriginBottomLeftRectangular'),
+  anchorOriginBottomRightCircular: getBadgeUtilityClass('anchorOriginBottomRightCircular'),
+  anchorOriginBottomRightRectangular: getBadgeUtilityClass('anchorOriginBottomRightRectangular'),
+  invisible: getBadgeUtilityClass('invisible'),
 };
 
 export default badgeClasses;

packages/material-ui-unstyled/src/BadgeUnstyled/index.d.ts

@@ -1,3 +1,4 @@
 export { default } from './BadgeUnstyled';
 export * from './BadgeUnstyled';
 export { default as badgeClasses } from './badgeClasses';
+export * from './badgeClasses';

packages/material-ui-unstyled/src/BadgeUnstyled/index.js

@@ -1,2 +1,2 @@
 export { default } from './BadgeUnstyled';
-export { default as badgeClasses } from './badgeClasses';
+export { default as badgeClasses, getBadgeUtilityClass } from './badgeClasses';

packages/material-ui-utils/src/index.ts

@@ -29,3 +29,4 @@ export {
   detectScrollType as unstable_detectScrollType,
   getNormalizedScrollLeft as unstable_getNormalizedScrollLeft,
 } from './scrollLeft';
+export { default as usePreviousProps } from './usePreviousProps';

packages/material-ui-utils/src/usePreviousProps.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+const usePreviousProps = (value: object): object => {
+  const ref = React.useRef({});
+  React.useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};
+
+export default usePreviousProps;