diff --git a/docs/pages/api-docs/avatar.md b/docs/pages/api-docs/avatar.md index 2dcef999209e42..06e7acec386ef9 100644 --- a/docs/pages/api-docs/avatar.md +++ b/docs/pages/api-docs/avatar.md @@ -36,7 +36,7 @@ The `MuiAvatar` name can be used for providing [default props](/customization/gl | sizes | string | | The `sizes` attribute for the `img` element. | | src | string | | The `src` attribute for the `img` element. | | srcSet | string | | The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. | -| variant | 'circle'
| 'rounded'
| 'square'
| 'circle' | The shape of the avatar. | +| variant | 'circular'
| 'rounded'
| 'square'
| 'circular' | 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). |:-----|:-------------|:------------| | root | .MuiAvatar-root | Styles applied to the root element. | colorDefault | .MuiAvatar-colorDefault | Styles applied to the root element if not `src` or `srcSet`. -| circle | .MuiAvatar-circle | Styles applied to the root element if `variant="circle"`. +| circular | .MuiAvatar-circular | Styles applied to the root element if `variant="circular"`. | rounded | .MuiAvatar-rounded | Styles applied to the root element if `variant="rounded"`. | square | .MuiAvatar-square | Styles applied to the root element if `variant="square"`. | img | .MuiAvatar-img | Styles applied to the img element if either `src` or `srcSet` is defined. diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index 51fba8f457d96d..7489c9d2c5978a 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/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. ``) +### Avatar + +- Rename `circle` to `circular` for consistency. The possible values should be adjectives, not nouns: + + ```diff + - + + + ``` + ### Badge - Rename `circle` to `circular` and `rectangle` to `rectangular` for consistency. The possible values should be adjectives, not nouns: diff --git a/framer/Material-UI.framerfx/code/Avatar.tsx b/framer/Material-UI.framerfx/code/Avatar.tsx index 58b06da3c88218..8108f74d1449d6 100644 --- a/framer/Material-UI.framerfx/code/Avatar.tsx +++ b/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, diff --git a/packages/material-ui/src/Avatar/Avatar.d.ts b/packages/material-ui/src/Avatar/Avatar.d.ts index 5d654146c108f1..dc11fbd2d0a3c3 100644 --- a/packages/material-ui/src/Avatar/Avatar.d.ts +++ b/packages/material-ui/src/Avatar/Avatar.d.ts @@ -34,7 +34,7 @@ export interface AvatarTypeMap

{ /** * 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; export type AvatarClassKey = | 'root' | 'colorDefault' - | 'circle' + | 'circular' | 'rounded' | 'square' | 'img' diff --git a/packages/material-ui/src/Avatar/Avatar.js b/packages/material-ui/src/Avatar/Avatar.js index 05c7a79ca21de7..c6cf8ae2f7f628 100644 --- a/packages/material-ui/src/Avatar/Avatar.js +++ b/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);