From ab0cd47e2ee4317672dee79788075f029a4c50c4 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 6 Aug 2020 14:46:15 +0200 Subject: [PATCH] [Avatar] Add circular variant --- docs/pages/api-docs/avatar.md | 3 +- docs/src/modules/components/ThemeContext.js | 6 +++ framer/Material-UI.framerfx/code/Avatar.tsx | 4 +- packages/material-ui/src/Avatar/Avatar.d.ts | 4 +- packages/material-ui/src/Avatar/Avatar.js | 34 +++++++++++++- .../material-ui/src/Avatar/Avatar.test.js | 46 ++++++++++++++++++- 6 files changed, 89 insertions(+), 8 deletions(-) diff --git a/docs/pages/api-docs/avatar.md b/docs/pages/api-docs/avatar.md index 7e5c8c74d96af9..3c61fcad93c9e4 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 | 'circle'
| 'circular'
| 'rounded'
| 'square' | 'circle' | 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). | 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/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js index 08eacbe30b05fd..e7e44a2c015dd8 100644 --- a/docs/src/modules/components/ThemeContext.js +++ b/docs/src/modules/components/ThemeContext.js @@ -203,6 +203,12 @@ export function ThemeProvider(props) { }, ...paletteColors, }, + // v5 migration + props: { + MuiAvatar: { + variant: 'circular', + }, + }, spacing, }, dense ? highDensity : null, diff --git a/framer/Material-UI.framerfx/code/Avatar.tsx b/framer/Material-UI.framerfx/code/Avatar.tsx index a5f5d3a47d9ef5..12f585513b0be3 100644 --- a/framer/Material-UI.framerfx/code/Avatar.tsx +++ b/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, diff --git a/packages/material-ui/src/Avatar/Avatar.d.ts b/packages/material-ui/src/Avatar/Avatar.d.ts index 5d654146c108f1..566b5230158d5c 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?: 'circle' | '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 782ce7fa2de2e6..aa864099843191 100644 --- a/packages/material-ui/src/Avatar/Avatar.js +++ b/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); diff --git a/packages/material-ui/src/Avatar/Avatar.test.js b/packages/material-ui/src/Avatar/Avatar.test.js index d73164692a28c9..969f9d7ae28748 100644 --- a/packages/material-ui/src/Avatar/Avatar.test.js +++ b/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('', () => { 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.', + ); + }); + }); });