[Badge] v4 deprecation warnings in default Badge usage

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

In the 4.12.4 release of @material-ui/core, the Badge component started giving the following warning in its default configuration:

Warning: Failed prop type: Material-UI: overlap="rectangle" was deprecated. Use overlap="rectangular" instead.

Expected behavior 🤔

Badge should be usable in its default configuration without errors.

Steps to reproduce 🕹

Steps:

1. Visit https://codesandbox.io/s/mui-badge-deprecation-b9n498?file=/src/App.tsx
2. Note the deprecation warning in the console.

Context 🔦

This is apparently the result of #27573. If I understand correctly, that was to address the problem of updating classes but not overlap - however, getting an error on the default configuration seems like a step backwards. (I’m assuming that overriding the classes key is done less frequently.)

As a suggested fix, what about reverting this line and extending the deprecatedClassKey logic to communicate the issue with default overlap there?

    [
      'anchorOriginTopRight',
      'anchorOriginBottomRight',
      'anchorOriginTopLeft',
      'anchorOriginBottomLeft',
    ].forEach(([classKey]) => {
      [
        ['rectangle', 'rectangular'],
        ['circle', 'circular'],
      ].forEach(([deprecatedOverlap, newOverlap]) => {
        const deprecatedClassKey = classKey + deprecatedOverlap;
        if (
          classes[deprecatedClassKey] != null &&
          // 2 classnames? one from withStyles the other must be custom
          classes[deprecatedClassKey].split(' ').length > 1
        ) {
          const newClassKey = classKey + newOverlap;
          throw new Error(
            `Material-UI: The \`${deprecatedClassKey}\` class was deprecated. Use \`${newClassKey}\` instead (and make sure that \`overlap=${newOverlap}\`).`,
          );
        }
      });
    });

I can submit a PR for this if it seems reasonable.

Your environment 🌎

`npx @mui/envinfo`

Using Chrome

  System:
    OS: macOS 12.3
  Binaries:
    Node: 14.19.1 - ~/.nvm/versions/node/v14.19.1/bin/node
    Yarn: 1.22.18 - /opt/homebrew/bin/yarn
    npm: 6.14.16 - ~/.nvm/versions/node/v14.19.1/bin/npm
  Browsers:
    Chrome: 99.0.4844.84
    Edge: Not Found
    Firefox: 98.0.2
    Safari: 15.4

[DDukers]

I resolved this by specifying the overlap=“rectangular” prop everywhere where i used the Badge-components in my code. If you don’t supply this property it reverts to the specified default value which is set to "overlap=“rectangle”.

When deprecating prop values used as default it would be nice if those defaults would be updated to the new value.

[simplecommerce]

I resolved this by specifying the overlap=“rectangular” prop everywhere where i used the Badge-components in my code. If you don’t supply this property it reverts to the specified default value which is set to "overlap=“rectangle”.

When deprecating prop values used as default it would be nice if those defaults would be updated to the new value.

I did the same, since I am using themes, I specified it in the default props. I didn’t think of that until I read your post, thanks!!