Revert "[Badge] Add overlap circular and rectangular (#22076)"

This reverts commit f00c441.

docs/pages/api-docs/badge.md

@@ -36,7 +36,7 @@ The `MuiBadge` name can be used for providing [default props](/customization/glo
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'span'</span> | The component used for the root node. Either a string to use a HTML element or a component. |
 | <span class="prop-name">invisible</span> | <span class="prop-type">bool</span> |  | If `true`, the badge will be invisible. |
 | <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">'circle'<br>&#124;&nbsp;'rectangle'<br>&#124;&nbsp;'circular'<br>&#124;&nbsp;'rectangular'</span> | <span class="prop-default">'rectangle'</span> | Wrapped shape the badge should overlap. |
+| <span class="prop-name">overlap</span> | <span class="prop-type">'circle'<br>&#124;&nbsp;'rectangle'</span> | <span class="prop-default">'rectangle'</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. |
 
@@ -55,21 +55,13 @@ Any other props supplied will be provided to the root element (native element).
 | <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">anchorOriginTopRightRectangle</span> | <span class="prop-name">.MuiBadge-anchorOriginTopRightRectangle</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangle"`.
-| <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">anchorOriginBottomRightRectangle</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomRightRectangle</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangle"`.
-| <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">anchorOriginTopLeftRectangle</span> | <span class="prop-name">.MuiBadge-anchorOriginTopLeftRectangle</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangle"`.
-| <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"`.
 | <span class="prop-name">anchorOriginBottomLeftRectangle</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomLeftRectangle</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangle"`.
-| <span class="prop-name">anchorOriginBottomLeftRectangular</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomLeftRectangular</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`.
 | <span class="prop-name">anchorOriginTopRightCircle</span> | <span class="prop-name">.MuiBadge-anchorOriginTopRightCircle</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circle"`.
-| <span class="prop-name">anchorOriginTopRightCircular</span> | <span class="prop-name">.MuiBadge-anchorOriginTopRightCircular</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`.
 | <span class="prop-name">anchorOriginBottomRightCircle</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomRightCircle</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circle"`.
-| <span class="prop-name">anchorOriginBottomRightCircular</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomRightCircular</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`.
 | <span class="prop-name">anchorOriginTopLeftCircle</span> | <span class="prop-name">.MuiBadge-anchorOriginTopLeftCircle</span> | Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circle"`.
-| <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">anchorOriginBottomLeftCircle</span> | <span class="prop-name">.MuiBadge-anchorOriginBottomLeftCircle</span> | Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circle"`.
-| <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}`.
 
 You can override the style of the component thanks to one of these customization points:

docs/src/modules/components/ThemeContext.js

@@ -203,15 +203,6 @@ export function ThemeProvider(props) {
           },
           ...paletteColors,
         },
-        // v5 migration
-        props: {
-          MuiBadge: {
-            overlap: 'rectangular',
-          },
-          MuiAvatar: {
-            variant: 'circular',
-          },
-        },
         spacing,
       },
       dense ? highDensity : null,

docs/src/pages/components/avatars/BadgeAvatars.js

@@ -55,7 +55,7 @@ export default function BadgeAvatars() {
   return (
     <div className={classes.root}>
       <StyledBadge
-        overlap="circular"
+        overlap="circle"
         anchorOrigin={{
           vertical: 'bottom',
           horizontal: 'right',
@@ -65,7 +65,7 @@ export default function BadgeAvatars() {
         <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
       </StyledBadge>
       <Badge
-        overlap="circular"
+        overlap="circle"
         anchorOrigin={{
           vertical: 'bottom',
           horizontal: 'right',

docs/src/pages/components/avatars/BadgeAvatars.tsx

@@ -61,7 +61,7 @@ export default function BadgeAvatars() {
   return (
     <div className={classes.root}>
       <StyledBadge
-        overlap="circular"
+        overlap="circle"
         anchorOrigin={{
           vertical: 'bottom',
           horizontal: 'right',
@@ -71,7 +71,7 @@ export default function BadgeAvatars() {
         <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
       </StyledBadge>
       <Badge
-        overlap="circular"
+        overlap="circle"
         anchorOrigin={{
           vertical: 'bottom',
           horizontal: 'right',

docs/src/pages/components/badges/BadgeOverlap.js

@@ -33,10 +33,10 @@ export default function BadgeOverlap() {
       <Badge color="secondary" badgeContent=" " variant="dot">
         {rectangle}
       </Badge>
-      <Badge color="secondary" overlap="circular" badgeContent=" ">
+      <Badge color="secondary" overlap="circle" badgeContent=" ">
         {circle}
       </Badge>
-      <Badge color="secondary" overlap="circular" badgeContent=" " variant="dot">
+      <Badge color="secondary" overlap="circle" badgeContent=" " variant="dot">
         {circle}
       </Badge>
     </div>

docs/src/pages/components/badges/BadgeOverlap.tsx

@@ -35,10 +35,10 @@ export default function BadgeOverlap() {
       <Badge color="secondary" badgeContent=" " variant="dot">
         {rectangle}
       </Badge>
-      <Badge color="secondary" overlap="circular" badgeContent=" ">
+      <Badge color="secondary" overlap="circle" badgeContent=" ">
         {circle}
       </Badge>
-      <Badge color="secondary" overlap="circular" badgeContent=" " variant="dot">
+      <Badge color="secondary" overlap="circle" badgeContent=" " variant="dot">
         {circle}
       </Badge>
     </div>

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

@@ -15,7 +15,7 @@ export interface BadgeTypeMap<P = {}, D extends React.ElementType = 'div'> {
     /**
      * Wrapped shape the badge should overlap.
      */
-    overlap?: 'rectangle' | 'circle' | 'rectangular' | 'circular';
+    overlap?: 'rectangle' | 'circle';
     /**
      * The content rendered within the badge.
      */
@@ -63,13 +63,6 @@ export type BadgeClassKey =
   | 'anchorOriginTopRightCircle'
   | 'anchorOriginBottomRightCircle'
   | 'anchorOriginTopLeftCircle'
-  | 'anchorOriginTopRightRectangular'
-  | 'anchorOriginBottomRightRectangular'
-  | 'anchorOriginTopLeftRectangular'
-  | 'anchorOriginBottomLeftRectangular'
-  | 'anchorOriginTopRightCircular'
-  | 'anchorOriginBottomRightCircular'
-  | 'anchorOriginTopLeftCircular'
   | 'invisible';
 /**
  *

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

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { chainPropTypes } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import capitalize from '../utils/capitalize';
 
@@ -73,16 +72,6 @@ export const styles = (theme) => ({
       transform: 'scale(0) translate(50%, -50%)',
     },
   },
-  /* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="rectangular"`. */
-  anchorOriginTopRightRectangular: {
-    top: 0,
-    right: 0,
-    transform: 'scale(1) translate(50%, -50%)',
-    transformOrigin: '100% 0%',
-    '&$invisible': {
-      transform: 'scale(0) translate(50%, -50%)',
-    },
-  },
   /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangle"`. */
   anchorOriginBottomRightRectangle: {
     bottom: 0,
@@ -93,16 +82,6 @@ export const styles = (theme) => ({
       transform: 'scale(0) translate(50%, 50%)',
     },
   },
-  /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="rectangular"`. */
-  anchorOriginBottomRightRectangular: {
-    bottom: 0,
-    right: 0,
-    transform: 'scale(1) translate(50%, 50%)',
-    transformOrigin: '100% 100%',
-    '&$invisible': {
-      transform: 'scale(0) translate(50%, 50%)',
-    },
-  },
   /* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangle"`. */
   anchorOriginTopLeftRectangle: {
     top: 0,
@@ -113,16 +92,6 @@ export const styles = (theme) => ({
       transform: 'scale(0) translate(-50%, -50%)',
     },
   },
-  /* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="rectangular"`. */
-  anchorOriginTopLeftRectangular: {
-    top: 0,
-    left: 0,
-    transform: 'scale(1) translate(-50%, -50%)',
-    transformOrigin: '0% 0%',
-    '&$invisible': {
-      transform: 'scale(0) translate(-50%, -50%)',
-    },
-  },
   /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangle"`. */
   anchorOriginBottomLeftRectangle: {
     bottom: 0,
@@ -133,16 +102,6 @@ export const styles = (theme) => ({
       transform: 'scale(0) translate(-50%, 50%)',
     },
   },
-  /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="rectangular"`. */
-  anchorOriginBottomLeftRectangular: {
-    bottom: 0,
-    left: 0,
-    transform: 'scale(1) translate(-50%, 50%)',
-    transformOrigin: '0% 100%',
-    '&$invisible': {
-      transform: 'scale(0) translate(-50%, 50%)',
-    },
-  },
   /* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circle"`. */
   anchorOriginTopRightCircle: {
     top: '14%',
@@ -153,16 +112,6 @@ export const styles = (theme) => ({
       transform: 'scale(0) translate(50%, -50%)',
     },
   },
-  /* Styles applied to the root element if `anchorOrigin={{ 'top', 'right' }} overlap="circular"`. */
-  anchorOriginTopRightCircular: {
-    top: '14%',
-    right: '14%',
-    transform: 'scale(1) translate(50%, -50%)',
-    transformOrigin: '100% 0%',
-    '&$invisible': {
-      transform: 'scale(0) translate(50%, -50%)',
-    },
-  },
   /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circle"`. */
   anchorOriginBottomRightCircle: {
     bottom: '14%',
@@ -173,16 +122,6 @@ export const styles = (theme) => ({
       transform: 'scale(0) translate(50%, 50%)',
     },
   },
-  /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'right' }} overlap="circular"`. */
-  anchorOriginBottomRightCircular: {
-    bottom: '14%',
-    right: '14%',
-    transform: 'scale(1) translate(50%, 50%)',
-    transformOrigin: '100% 100%',
-    '&$invisible': {
-      transform: 'scale(0) translate(50%, 50%)',
-    },
-  },
   /* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circle"`. */
   anchorOriginTopLeftCircle: {
     top: '14%',
@@ -193,16 +132,6 @@ export const styles = (theme) => ({
       transform: 'scale(0) translate(-50%, -50%)',
     },
   },
-  /* Styles applied to the root element if `anchorOrigin={{ 'top', 'left' }} overlap="circular"`. */
-  anchorOriginTopLeftCircular: {
-    top: '14%',
-    left: '14%',
-    transform: 'scale(1) translate(-50%, -50%)',
-    transformOrigin: '0% 0%',
-    '&$invisible': {
-      transform: 'scale(0) translate(-50%, -50%)',
-    },
-  },
   /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circle"`. */
   anchorOriginBottomLeftCircle: {
     bottom: '14%',
@@ -213,16 +142,6 @@ export const styles = (theme) => ({
       transform: 'scale(0) translate(-50%, 50%)',
     },
   },
-  /* Styles applied to the root element if `anchorOrigin={{ 'bottom', 'left' }} overlap="circular"`. */
-  anchorOriginBottomLeftCircular: {
-    bottom: '14%',
-    left: '14%',
-    transform: 'scale(1) translate(-50%, 50%)',
-    transformOrigin: '0% 100%',
-    '&$invisible': {
-      transform: 'scale(0) translate(-50%, 50%)',
-    },
-  },
   /* Pseudo-class to the badge `span` element if `invisible={true}`. */
   invisible: {
     transition: theme.transitions.create('transform', {
@@ -316,34 +235,7 @@ Badge.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: chainPropTypes(PropTypes.object, (props) => {
-    const { classes } = props;
-    if (classes == null) {
-      return null;
-    }
-
-    [
-      ['anchorOriginTopRightRectangle', 'anchorOriginTopRightRectangular'],
-      ['anchorOriginBottomRightRectangle', 'anchorOriginBottomRightRectangular'],
-      ['anchorOriginTopLeftRectangle', 'anchorOriginTopLeftRectangular'],
-      ['anchorOriginBottomLeftRectangle', 'anchorOriginBottomLeftRectangular'],
-      ['anchorOriginTopRightCircle', 'anchorOriginTopRightCircular'],
-      ['anchorOriginBottomRightCircle', 'anchorOriginBottomRightCircular'],
-      ['anchorOriginTopLeftCircle', 'anchorOriginTopLeftCircular'],
-    ].forEach(([deprecatedClassKey, newClassKey]) => {
-      if (
-        classes[deprecatedClassKey] != null &&
-        // 2 classnames? one from withStyles the other must be custom
-        classes[deprecatedClassKey].split(' ').length > 1
-      ) {
-        throw new Error(
-          `Material-UI: The \`${deprecatedClassKey}\` class was deprecated. Use \`${newClassKey}\` instead.`,
-        );
-      }
-    });
-
-    return null;
-  }),
+  classes: PropTypes.object,
   /**
    * @ignore
    */
@@ -368,26 +260,7 @@ Badge.propTypes = {
   /**
    * Wrapped shape the badge should overlap.
    */
-  overlap: chainPropTypes(
-    PropTypes.oneOf(['circle', 'rectangle', 'circular', 'rectangular']),
-    (props) => {
-      const { overlap } = props;
-
-      if (overlap === 'rectangle') {
-        throw new Error(
-          'Material-UI: `overlap="rectangle"` was deprecated. Use `overlap="rectangular"` instead.',
-        );
-      }
-
-      if (overlap === 'circle') {
-        throw new Error(
-          'Material-UI: `overlap="circle"` was deprecated. Use `overlap="circular"` instead.',
-        );
-      }
-
-      return null;
-    },
-  ),
+  overlap: PropTypes.oneOf(['circle', 'rectangle']),
   /**
    * Controls whether the badge is hidden when `badgeContent` is zero.
    */