+ ```
+
### 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);