[Avatar] Add circular variant

docs/pages/api-docs/avatar.md

@@ -36,7 +36,7 @@ The `MuiAvatar` name can be used for providing [default props](/customization/gl
 | <span class="prop-name">sizes</span> | <span class="prop-type">string</span> |  | The `sizes` attribute for the `img` element. |
 | <span class="prop-name">src</span> | <span class="prop-type">string</span> |  | The `src` attribute for the `img` element. |
 | <span class="prop-name">srcSet</span> | <span class="prop-type">string</span> |  | The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. |
-| <span class="prop-name">variant</span> | <span class="prop-type">'circle'<br>&#124;&nbsp;'rounded'<br>&#124;&nbsp;'square'</span> | <span class="prop-default">'circle'</span> | The shape of the avatar. |
+| <span class="prop-name">variant</span> | <span class="prop-type">'circle'<br>&#124;&nbsp;'circular'<br>&#124;&nbsp;'rounded'<br>&#124;&nbsp;'square'</span> | <span class="prop-default">'circle'</span> | The shape of the avatar. |
 
 The `ref` is forwarded to the root element.
 
@@ -49,6 +49,7 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiAvatar-root</span> | Styles applied to the root element.
 | <span class="prop-name">colorDefault</span> | <span class="prop-name">.MuiAvatar-colorDefault</span> | Styles applied to the root element if not `src` or `srcSet`.
 | <span class="prop-name">circle</span> | <span class="prop-name">.MuiAvatar-circle</span> | Styles applied to the root element if `variant="circle"`.
+| <span class="prop-name">circular</span> | <span class="prop-name">.MuiAvatar-circular</span> | Styles applied to the root element if `variant="circular"`.
 | <span class="prop-name">rounded</span> | <span class="prop-name">.MuiAvatar-rounded</span> | Styles applied to the root element if `variant="rounded"`.
 | <span class="prop-name">square</span> | <span class="prop-name">.MuiAvatar-square</span> | Styles applied to the root element if `variant="square"`.
 | <span class="prop-name">img</span> | <span class="prop-name">.MuiAvatar-img</span> | Styles applied to the img element if either `src` or `srcSet` is defined.

docs/src/modules/components/ThemeContext.js

@@ -208,6 +208,9 @@ export function ThemeProvider(props) {
           MuiBadge: {
             overlap: 'rectangular',
           },
+          MuiAvatar: {
+            variant: 'circular',
+          },
         },
         spacing,
       },

framer/Material-UI.framerfx/code/Avatar.tsx

@@ -6,7 +6,7 @@ import MuiAvatar from '@material-ui/core/Avatar';
 import { Icon } from './Icon';
 
 interface Props {
-  variant?: 'circle' | 'rounded' | 'square';
+  variant?: 'circle' | 'circular' | 'rounded' | 'square';
   backgroundColor?: string;
   textColor?: string;
   icon?: string;
@@ -57,7 +57,7 @@ addPropertyControls(Avatar, {
   variant: {
     type: ControlType.Enum,
     title: 'Variant',
-    options: ['circle', 'rounded', 'square'],
+    options: ['circle', 'circular', 'rounded', 'square'],
   },
   backgroundColor: {
     type: ControlType.Color,

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

@@ -34,7 +34,7 @@ export interface AvatarTypeMap<P = {}, D extends React.ElementType = 'div'> {
     /**
      * The shape of the avatar.
      */
-    variant?: 'circle' | 'rounded' | 'square';
+    variant?: 'circle' | 'circular' | 'rounded' | 'square';
   };
   defaultComponent: D;
   classKey: AvatarClassKey;
@@ -56,6 +56,7 @@ export type AvatarClassKey =
   | 'root'
   | 'colorDefault'
   | 'circle'
+  | 'circular'
   | 'rounded'
   | 'square'
   | 'img'

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

@@ -1,6 +1,7 @@
 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 Person from '../internal/svg-icons/Person';
 
@@ -29,6 +30,8 @@ export const styles = (theme) => ({
   },
   /* Styles applied to the root element if `variant="circle"`. */
   circle: {},
+  /* Styles applied to the root element if `variant="circular"`. */
+  circular: {},
   /* Styles applied to the root element if `variant="rounded"`. */
   rounded: {
     borderRadius: theme.shape.borderRadius,
@@ -170,7 +173,24 @@ Avatar.propTypes = {
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object,
+  classes: chainPropTypes(PropTypes.object, (props) => {
+    const { classes } = props;
+    if (classes == null) {
+      return null;
+    }
+
+    if (
+      classes.circle != null &&
+      // 2 classnames? one from withStyles the other must be custom
+      classes.circle.split(' ').length > 1
+    ) {
+      throw new Error(
+        `Material-UI: The \`circle\` class was deprecated. Use \`circular\` instead.`,
+      );
+    }
+
+    return null;
+  }),
   /**
    * @ignore
    */
@@ -201,7 +221,17 @@ Avatar.propTypes = {
   /**
    * The shape of the avatar.
    */
-  variant: PropTypes.oneOf(['circle', 'rounded', 'square']),
+  variant: chainPropTypes(PropTypes.oneOf(['circle', 'circular', 'rounded', 'square']), (props) => {
+    const { variant } = props;
+
+    if (variant === 'circle') {
+      throw new Error(
+        'Material-UI: `variant="circle"` was deprecated. Use `variant="circular"` instead.',
+      );
+    }
+
+    return null;
+  }),
 };
 
 export default withStyles(styles, { name: 'MuiAvatar' })(Avatar);

packages/material-ui/src/Avatar/Avatar.test.js

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { expect } from 'chai';
+import * as PropTypes from 'prop-types';
 import { createClientRender, fireEvent } from 'test/utils/createClientRender';
 import { getClasses } from '@material-ui/core/test-utils';
 import createMount from 'test/utils/createMount';
-import { spy } from 'sinon';
+import { spy, stub } from 'sinon';
 import CancelIcon from '../internal/svg-icons/Cancel';
 import describeConformance from '../test-utils/describeConformance';
 import Avatar from './Avatar';
@@ -195,4 +196,47 @@ describe('<Avatar />', () => {
       expect(avatar).to.have.class(classes.colorDefault);
     });
   });
+
+  describe('v5 deprecations', () => {
+    beforeEach(() => {
+      PropTypes.resetWarningCache();
+      stub(console, 'error');
+    });
+
+    afterEach(() => {
+      console.error.restore();
+    });
+
+    it('issues a warning for variant="circle"', () => {
+      PropTypes.checkPropTypes(
+        Avatar.Naked.propTypes,
+        {
+          variant: 'circle',
+        },
+        'props',
+        'Avatar',
+      );
+
+      expect(console.error.callCount).to.equal(1);
+      expect(console.error.firstCall.args[0]).to.equal(
+        'Warning: Failed props type: Material-UI: `variant="circle"` was deprecated. Use `variant="circular"` instead.',
+      );
+    });
+
+    it('issues a warning for the `circle` class', () => {
+      PropTypes.checkPropTypes(
+        Avatar.Naked.propTypes,
+        {
+          classes: { circle: 'mui-class my-class' },
+        },
+        'props',
+        'Badge',
+      );
+
+      expect(console.error.callCount).to.equal(1);
+      expect(console.error.firstCall.args[0]).to.equal(
+        'Warning: Failed props type: Material-UI: The `circle` class was deprecated. Use `circular` instead.',
+      );
+    });
+  });
 });