[Fab] Deprecate variant="round" (#24080)

mui · Jan 24, 2021 · 6abf72a · 6abf72a
1 parent a0f2b0f
commit 6abf72a
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 7 deletions.
diff --git 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
 | <span class="prop-name">disableRipple</span> | <span class="prop-type">bool</span> |  | If `true`, the ripple effect will be disabled. |
 | <span class="prop-name">href</span> | <span class="prop-type">string</span> |  | The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. |
 | <span class="prop-name">size</span> | <span class="prop-type">'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'</span> | <span class="prop-default">'large'</span> | The size of the button. `small` is equivalent to the dense button styling. |
-| <span class="prop-name">variant</span> | <span class="prop-type">'extended'<br>&#124;&nbsp;'round'</span> | <span class="prop-default">'round'</span> | The variant to use. |
+| <span class="prop-name">variant</span> | <span class="prop-type">'extended'<br>&#124;&nbsp;'circular'<br>&#124;&nbsp;'round'</span> | <span class="prop-default">'circular'</span> | The variant to use. 'round' is deprecated, use 'circular' instead. |
 
 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
@@ -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
@@ -36,8 +36,9 @@ export type FabTypeMap<P = {}, D extends React.ElementType = 'button'> = ExtendB
     size?: 'small' | 'medium' | 'large';
     /**
      * The variant to use.
+     * 'round' is deprecated, use 'circular' instead.
      */
-    variant?: 'round' | '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
@@ -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;
 
@@ -215,8 +216,17 @@ Fab.propTypes = {
   size: PropTypes.oneOf(['large', 'medium', 'small']),
   /**
    * The variant to use.
+   * 'round' is deprecated, use 'circular' instead.
    */
-  variant: PropTypes.oneOf(['extended', 'round']),
+  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.',
+      );
+    }
+
+    return null;
+  }),
 };
 
 export default withStyles(styles, { name: 'MuiFab' })(Fab);