[Fab] Rename round -> circular for consistency (#21903)

mui · Aug 1, 2020 · de2af45 · de2af45
1 parent ceffdd9
commit de2af45
Show file tree

Hide file tree

Showing 5 changed files with 16 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">'circular'<br>&#124;&nbsp;'extended'</span> | <span class="prop-default">'circular'</span> | The variant to use. |
 
 The `ref` is forwarded to the root element.
 

diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -143,6 +143,15 @@ This change affects almost all components where you're using the `component` pro
   +<Accordion onChange={(event: React.SyntheticEvent, expanded: boolean) => {}} />
   ```
 
+### Fab
+
+- Rename `round` to `circular` for consistency. The possible values should be adjectives, not nouns:
+
+  ```diff
+  -<Fab variant="round">
+  +<Fab variant="circular">
+  ```
+
 ### Grid
 
 - Rename `justify` prop with `justifyContent` to be aligned with the CSS property name.

diff --git a/framer/Material-UI.framerfx/code/Fab.tsx b/framer/Material-UI.framerfx/code/Fab.tsx
@@ -8,7 +8,7 @@ interface Props {
   disabled: boolean;
   href?: string;
   size: 'large' | 'medium' | 'small';
-  variant: 'extended' | 'round';
+  variant: 'circular' | 'extended';
   icon: string;
   iconTheme: 'Filled' | 'Outlined' | 'Rounded' | 'TwoTone' | 'Sharp';
   label: string;
@@ -34,7 +34,7 @@ Fab.defaultProps = {
   color: 'default' as 'default',
   disabled: false,
   size: 'large' as 'large',
-  variant: 'round' as 'round',
+  variant: 'circular' as 'circular',
   icon: 'add',
   iconTheme: 'Filled' as 'Filled',
   label: 'extended',
@@ -64,7 +64,7 @@ addPropertyControls(Fab, {
   variant: {
     type: ControlType.Enum,
     title: 'Variant',
-    options: ['extended', 'round'],
+    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
@@ -37,7 +37,7 @@ export type FabTypeMap<P = {}, D extends React.ElementType = 'button'> = 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
@@ -130,7 +130,7 @@ const Fab = React.forwardRef(function Fab(props, ref) {
     disableFocusRipple = false,
     focusVisibleClassName,
     size = 'large',
-    variant = 'round',
+    variant = 'circular',
     ...other
   } = props;
 
@@ -216,7 +216,7 @@ Fab.propTypes = {
   /**
    * The variant to use.
    */
-  variant: PropTypes.oneOf(['extended', 'round']),
+  variant: PropTypes.oneOf(['circular', 'extended']),
 };
 
 export default withStyles(styles, { name: 'MuiFab' })(Fab);