From 350c2a41db51a0068f78c89f4e1f0539b29aac6a Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 20 Dec 2020 19:04:54 +0100 Subject: [PATCH 1/2] [Fab] Deprecate variant="round" --- docs/pages/api-docs/fab.md | 2 +- framer/Material-UI.framerfx/code/Fab.tsx | 6 +++--- packages/material-ui/src/Fab/Fab.d.ts | 2 +- packages/material-ui/src/Fab/Fab.js | 13 +++++++++++-- 4 files changed, 16 insertions(+), 7 deletions(-) diff --git a/docs/pages/api-docs/fab.md b/docs/pages/api-docs/fab.md index 36092fcd898423..c15ec3b46607eb 100644 --- a/docs/pages/api-docs/fab.md +++ b/docs/pages/api-docs/fab.md @@ -37,7 +37,7 @@ The `MuiFab` name can be used for providing [default props](/customization/globa | disableRipple | bool | | If `true`, the ripple effect will be disabled. | | href | string | | The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. | | size | 'large'
| 'medium'
| 'small' | 'large' | The size of the button. `small` is equivalent to the dense button styling. | -| variant | 'extended'
| 'round' | 'round' | The variant to use. | +| variant | 'extended'
| 'circular' | 'circular' | The variant to use. | The `ref` is forwarded to the root element. diff --git a/framer/Material-UI.framerfx/code/Fab.tsx b/framer/Material-UI.framerfx/code/Fab.tsx index 3499efaa49c5b3..091c1dee02651e 100644 --- a/framer/Material-UI.framerfx/code/Fab.tsx +++ b/framer/Material-UI.framerfx/code/Fab.tsx @@ -10,7 +10,7 @@ interface Props { disabled?: boolean; href?: string; size?: 'small' | 'medium' | 'large'; - variant?: 'round' | 'extended'; + variant?: 'circular' | 'extended'; icon?: string; iconTheme?: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp'; label?: string; @@ -22,7 +22,7 @@ const defaultProps: Props = { color: 'default', disabled: false, size: 'large', - variant: 'round', + variant: 'circular', icon: 'add', iconTheme: 'Filled', label: 'extended', @@ -70,7 +70,7 @@ addPropertyControls(Fab, { variant: { type: ControlType.Enum, title: 'Variant', - options: ['round', 'extended'], + options: ['circular', 'extended'], }, icon: { type: ControlType.String, diff --git a/packages/material-ui/src/Fab/Fab.d.ts b/packages/material-ui/src/Fab/Fab.d.ts index f4acfd8fb1bc58..8ef6afc49c4ac0 100644 --- a/packages/material-ui/src/Fab/Fab.d.ts +++ b/packages/material-ui/src/Fab/Fab.d.ts @@ -37,7 +37,7 @@ export type FabTypeMap

= ExtendB /** * The variant to use. */ - variant?: 'round' | 'extended'; + variant?: 'circular' | 'extended'; }; defaultComponent: D; classKey: FabClassKey; diff --git a/packages/material-ui/src/Fab/Fab.js b/packages/material-ui/src/Fab/Fab.js index ef5212b9b2d2fa..0b3b93ba4b0cad 100644 --- a/packages/material-ui/src/Fab/Fab.js +++ b/packages/material-ui/src/Fab/Fab.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 ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; @@ -130,7 +131,7 @@ const Fab = React.forwardRef(function Fab(props, ref) { disableFocusRipple = false, focusVisibleClassName, size = 'large', - variant = 'round', + variant = 'circular', ...other } = props; @@ -216,7 +217,15 @@ Fab.propTypes = { /** * The variant to use. */ - variant: PropTypes.oneOf(['extended', 'round']), + variant: chainPropTypes(PropTypes.oneOf(['extended', 'circular']), (props) => { + if (props.variant === 'round') { + throw new Error( + 'Material-UI: variant="round" was renamed variant="circular" for consistency.', + ); + } + + return null; + }), }; export default withStyles(styles, { name: 'MuiFab' })(Fab); From d496a091ec10250d616864d312e1669cb5c345a5 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 22 Dec 2020 15:56:37 +0100 Subject: [PATCH 2/2] keep listing 'round' in the variant API --- docs/pages/api-docs/fab.md | 2 +- packages/material-ui/src/Fab/Fab.d.ts | 3 ++- packages/material-ui/src/Fab/Fab.js | 3 ++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/pages/api-docs/fab.md b/docs/pages/api-docs/fab.md index c15ec3b46607eb..3216fcee6d5230 100644 --- a/docs/pages/api-docs/fab.md +++ b/docs/pages/api-docs/fab.md @@ -37,7 +37,7 @@ The `MuiFab` name can be used for providing [default props](/customization/globa | disableRipple | bool | | If `true`, the ripple effect will be disabled. | | href | string | | The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. | | size | 'large'
| 'medium'
| 'small' | 'large' | The size of the button. `small` is equivalent to the dense button styling. | -| variant | 'extended'
| 'circular' | 'circular' | The variant to use. | +| variant | 'extended'
| 'circular'
| 'round' | 'circular' | The variant to use. 'round' is deprecated, use 'circular' instead. | The `ref` is forwarded to the root element. diff --git a/packages/material-ui/src/Fab/Fab.d.ts b/packages/material-ui/src/Fab/Fab.d.ts index 8ef6afc49c4ac0..0d382298f54dcc 100644 --- a/packages/material-ui/src/Fab/Fab.d.ts +++ b/packages/material-ui/src/Fab/Fab.d.ts @@ -36,8 +36,9 @@ export type FabTypeMap

= ExtendB size?: 'small' | 'medium' | 'large'; /** * The variant to use. + * 'round' is deprecated, use 'circular' instead. */ - variant?: 'circular' | 'extended'; + variant?: 'circular' | 'extended' | 'round'; }; defaultComponent: D; classKey: FabClassKey; diff --git a/packages/material-ui/src/Fab/Fab.js b/packages/material-ui/src/Fab/Fab.js index 0b3b93ba4b0cad..379f6c605f5b2d 100644 --- a/packages/material-ui/src/Fab/Fab.js +++ b/packages/material-ui/src/Fab/Fab.js @@ -216,8 +216,9 @@ Fab.propTypes = { size: PropTypes.oneOf(['large', 'medium', 'small']), /** * The variant to use. + * 'round' is deprecated, use 'circular' instead. */ - variant: chainPropTypes(PropTypes.oneOf(['extended', 'circular']), (props) => { + variant: chainPropTypes(PropTypes.oneOf(['extended', 'circular', 'round']), (props) => { if (props.variant === 'round') { throw new Error( 'Material-UI: variant="round" was renamed variant="circular" for consistency.',