[Badge] Warn on default overlap value as well (#27573)

mui · Aug 11, 2021 · 5cc1d0f · 5cc1d0f
1 parent 25a1018
commit 5cc1d0f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/packages/material-ui/src/Badge/Badge.js b/packages/material-ui/src/Badge/Badge.js
@@ -371,7 +371,7 @@ Badge.propTypes = {
   overlap: chainPropTypes(
     PropTypes.oneOf(['circle', 'rectangle', 'circular', 'rectangular']),
     (props) => {
-      const { overlap } = props;
+      const { overlap = 'rectangle' } = props;
 
       if (overlap === 'rectangle') {
         throw new Error(

diff --git a/packages/material-ui/src/Badge/Badge.test.js b/packages/material-ui/src/Badge/Badge.test.js
@@ -23,14 +23,15 @@ describe('<Badge />', () => {
       </div>
     ),
     badgeContent: 10,
+    overlap: 'rectangular',
   };
 
   before(() => {
     classes = getClasses(<Badge {...defaultProps} />);
   });
 
   describeConformance(
-    <Badge>
+    <Badge overlap="rectangular">
       <div />
     </Badge>,
     () => ({
@@ -45,7 +46,11 @@ describe('<Badge />', () => {
   it('renders children and badgeContent', () => {
     const children = <div id="child" data-testid="child" />;
     const badge = <div id="badge" data-testid="badge" />;
-    const { container, getByTestId } = render(<Badge badgeContent={badge}>{children}</Badge>);
+    const { container, getByTestId } = render(
+      <Badge badgeContent={badge} overlap="rectangular">
+        {children}
+      </Badge>,
+    );
     expect(container.firstChild).to.contain(getByTestId('child'));
     expect(container.firstChild).to.contain(getByTestId('badge'));
   });
@@ -220,6 +225,7 @@ describe('<Badge />', () => {
         Badge.Naked.propTypes,
         {
           classes: { anchorOriginTopRightRectangle: 'mui-class my-class' },
+          overlap: 'rectangular',
         },
         'props',
         'Badge',
@@ -236,6 +242,7 @@ describe('<Badge />', () => {
         Badge.Naked.propTypes,
         {
           classes: { anchorOriginBottomRightRectangle: 'mui-class my-class' },
+          overlap: 'rectangular',
         },
         'props',
         'Badge',
@@ -252,6 +259,7 @@ describe('<Badge />', () => {
         Badge.Naked.propTypes,
         {
           classes: { anchorOriginTopLeftRectangle: 'mui-class my-class' },
+          overlap: 'rectangular',
         },
         'props',
         'Badge',
@@ -268,6 +276,7 @@ describe('<Badge />', () => {
         Badge.Naked.propTypes,
         {
           classes: { anchorOriginBottomLeftRectangle: 'mui-class my-class' },
+          overlap: 'rectangular',
         },
         'props',
         'Badge',
@@ -284,6 +293,7 @@ describe('<Badge />', () => {
         Badge.Naked.propTypes,
         {
           classes: { anchorOriginTopRightCircle: 'mui-class my-class' },
+          overlap: 'circular',
         },
         'props',
         'Badge',
@@ -300,6 +310,7 @@ describe('<Badge />', () => {
         Badge.Naked.propTypes,
         {
           classes: { anchorOriginBottomRightCircle: 'mui-class my-class' },
+          overlap: 'circular',
         },
         'props',
         'Badge',
@@ -316,6 +327,7 @@ describe('<Badge />', () => {
         Badge.Naked.propTypes,
         {
           classes: { anchorOriginTopLeftCircle: 'mui-class my-class' },
+          overlap: 'circular',
         },
         'props',
         'Badge',