[Avatar] Rename variant circle -> circular for consistency

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">'circular'<br>&#124;&nbsp;'rounded'<br>&#124;&nbsp;'square'</span> | <span class="prop-default">'circular'</span> | The shape of the avatar. |
 
 The `ref` is forwarded to the root element.
 
@@ -48,7 +48,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/pages/guides/migration-v4/migration-v4.md

@@ -51,6 +51,15 @@ Support for non-ref-forwarding class components in the `component` prop or as an
 Otherwise check out the ["Caveat with refs" section in our composition guide](/guides/composition/#caveat-with-refs) to find out how to migrate.
 This change affects almost all components where you're using the `component` prop or passing `children` to components that require `children` to be elements (e.g. `<MenuList><CustomMenuItem /></MenuList>`)
 
+### Avatar
+
+- Rename `circle` to `circular` for consistency. The possible values should be adjectives, not nouns:
+
+  ```diff
+  -<Avatar variant="circle">
+  +<Avatar variant="circular">
+  ```
+
 ### Badge
 
 - Rename `circle` to `circular` and `rectangle` to `rectangular` for consistency. The possible values should be adjectives, not nouns:

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

@@ -4,7 +4,7 @@ import MuiAvatar from '@material-ui/core/Avatar';
 import { Icon } from './Icon';
 
 interface Props {
-  variant: 'circle' | 'rounded' | 'square';
+  variant: 'circular' | 'rounded' | 'square';
   backgroundColor: string;
   textColor: string;
   icon: string;
@@ -38,7 +38,7 @@ export function Avatar(props: Props): JSX.Element {
 }
 
 Avatar.defaultProps = {
-  variant: 'circle' as 'circle',
+  variant: 'circular' as 'circular',
   backgroundColor: '#4154af',
   textColor: undefined,
   icon: 'face',
@@ -53,7 +53,7 @@ addPropertyControls(Avatar, {
   variant: {
     type: ControlType.Enum,
     title: 'Variant',
-    options: ['circle', 'rounded', 'square'],
+    options: ['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?: 'circular' | 'rounded' | 'square';
   };
   defaultComponent: D;
   classKey: AvatarClassKey;
@@ -55,7 +55,7 @@ declare const Avatar: OverridableComponent<AvatarTypeMap>;
 export type AvatarClassKey =
   | 'root'
   | 'colorDefault'
-  | 'circle'
+  | 'circular'
   | 'rounded'
   | 'square'
   | 'img'

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

@@ -27,8 +27,8 @@ export const styles = (theme) => ({
     backgroundColor:
       theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600],
   },
-  /* 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,
@@ -102,7 +102,7 @@ const Avatar = React.forwardRef(function Avatar(props, ref) {
     sizes,
     src,
     srcSet,
-    variant = 'circle',
+    variant = 'circular',
     ...other
   } = props;
 
@@ -201,7 +201,7 @@ Avatar.propTypes = {
   /**
    * The shape of the avatar.
    */
-  variant: PropTypes.oneOf(['circle', 'rounded', 'square']),
+  variant: PropTypes.oneOf(['circular', 'rounded', 'square']),
 };
 
 export default withStyles(styles, { name: 'MuiAvatar' })(Avatar);