favor prop-type warnings

Author: oliviertassinari

docs/pages/api-docs/avatar-group.md

@@ -31,7 +31,7 @@ The `MuiAvatarGroup` name can be used for providing [default props](/customizati
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The avatars to stack. |
 | <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">max</span> | <span class="prop-type">number</span> | <span class="prop-default">5</span> | Max avatars to show before +x. |
-| <span class="prop-name">spacing</span> | <span class="prop-type">'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;number</span> |  | Spacing between avatars. |
+| <span class="prop-name">spacing</span> | <span class="prop-type">'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;number</span> | <span class="prop-default">'medium'</span> | Spacing between avatars. |
 
 The `ref` is forwarded to the root element.
 

packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js

@@ -4,6 +4,7 @@ import { isFragment } from 'react-is';
 import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
 import Avatar from '@material-ui/core/Avatar';
+import { chainPropTypes } from '@material-ui/utils';
 
 const SPACINGS = {
   small: -16,
@@ -23,13 +24,15 @@ export const styles = (theme) => ({
 });
 
 const AvatarGroup = React.forwardRef(function AvatarGroup(props, ref) {
-  const { children: childrenProp, classes, className, spacing = 'medium', ...other } = props;
-  let { max = 5 } = props;
-
-  if (max < 2) {
-    max = 2;
-    console.warn('Material-UI: AvatarGroup `max` should be at least 2.');
-  }
+  const {
+    children: childrenProp,
+    classes,
+    className,
+    max = 5,
+    spacing = 'medium',
+    ...other
+  } = props;
+  const clampedMax = max < 2 ? 2 : max;
 
   const children = React.Children.toArray(childrenProp).filter((child) => {
     if (process.env.NODE_ENV !== 'production') {
@@ -46,7 +49,7 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(props, ref) {
     return React.isValidElement(child);
   });
 
-  const extraAvatars = children.length > max ? children.length - max + 1 : 0;
+  const extraAvatars = children.length > clampedMax ? children.length - clampedMax + 1 : 0;
 
   return (
     <div className={clsx(classes.root, className)} ref={ref} {...other}>
@@ -96,7 +99,16 @@ AvatarGroup.propTypes = {
   /**
    * Max avatars to show before +x.
    */
-  max: PropTypes.number,
+  max: chainPropTypes(PropTypes.number, (props) => {
+    if (props.max < 2) {
+      throw new Error(
+        [
+          'Material-UI: the prop `max` should be equal to 2 or above.',
+          'A value below is clamped to 2.',
+        ].join('\n'),
+      );
+    }
+  }),
   /**
    * Spacing between avatars.
    */

packages/material-ui-lab/src/AvatarGroup/AvatarGroup.test.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { stub } from 'sinon';
 import { createMount, getClasses } from '@material-ui/core/test-utils';
 import describeConformance from '@material-ui/core/test-utils/describeConformance';
 import { createClientRender } from 'test/utils/createClientRender';
@@ -29,47 +28,30 @@ describe('<AvatarGroup />', () => {
     skip: ['componentProp'],
   }));
 
-  it('should display 1 avatar and "+X" if `max` is lower than 2', () => {
-    const consoleWarn = stub(console, 'warn');
-    const { container } = render(
-      <AvatarGroup max={1}>
-        <Avatar src="image-url" />
-        <Avatar src="image-url" />
-        <Avatar src="image-url" />
-        <Avatar src="image-url" />
-      </AvatarGroup>,
-    );
-    expect(consoleWarn.callCount).to.equal(1);
-    expect(container.querySelectorAll('.MuiAvatar-root').length).to.equal(2);
-    expect(container.querySelectorAll('img').length).to.equal(1);
-    expect(container.textContent).to.equal('+3');
-  });
-
-  it('should display first `max` avatars, followed by "+X"', () => {
+  it('should display all the avatars', () => {
     const { container } = render(
       <AvatarGroup max={3}>
         <Avatar src="image-url" />
         <Avatar src="image-url" />
         <Avatar src="image-url" />
-        <Avatar src="image-url" />
-        <Avatar src="image-url" />
       </AvatarGroup>,
     );
     expect(container.querySelectorAll('.MuiAvatar-root').length).to.equal(3);
-    expect(container.querySelectorAll('img').length).to.equal(2);
-    expect(container.textContent).to.equal('+3');
+    expect(container.querySelectorAll('img').length).to.equal(3);
+    expect(container.textContent).to.equal('');
   });
 
-  it('should display all avatars instead of `max` avatars followed by "+1"', () => {
+  it('should display 2 avatars and "+2"', () => {
     const { container } = render(
       <AvatarGroup max={3}>
         <Avatar src="image-url" />
         <Avatar src="image-url" />
         <Avatar src="image-url" />
+        <Avatar src="image-url" />
       </AvatarGroup>,
     );
     expect(container.querySelectorAll('.MuiAvatar-root').length).to.equal(3);
-    expect(container.querySelectorAll('img').length).to.equal(3);
-    expect(container.textContent).to.have.lengthOf(0);
+    expect(container.querySelectorAll('img').length).to.equal(2);
+    expect(container.textContent).to.equal('+2');
   });
 });