[Chip] Rename default variant to filled (#22683)

Author: mnajdova

docs/pages/api-docs/chip.md

@@ -40,7 +40,7 @@ The `MuiChip` name can be used for providing [default props](/customization/glob
 | <span class="prop-name">label</span> | <span class="prop-type">node</span> |  | The content of the label. |
 | <span class="prop-name">onDelete</span> | <span class="prop-type">func</span> |  | Callback fired when the delete icon is clicked. If set, the delete icon will be shown. |
 | <span class="prop-name">size</span> | <span class="prop-type">'medium'<br>&#124;&nbsp;'small'</span> | <span class="prop-default">'medium'</span> | The size of the chip. |
-| <span class="prop-name">variant</span> | <span class="prop-type">'default'<br>&#124;&nbsp;'outlined'<br>&#124;&nbsp;string</span> | <span class="prop-default">'default'</span> | The variant to use. |
+| <span class="prop-name">variant</span> | <span class="prop-type">'filled'<br>&#124;&nbsp;'outlined'<br>&#124;&nbsp;string</span> | <span class="prop-default">'filled'</span> | The variant to use. |
 
 The `ref` is forwarded to the root element.
 
@@ -62,7 +62,7 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">deletableColorPrimary</span> | <span class="prop-name">.MuiChip-deletableColorPrimary</span> | Styles applied to the root element if `onDelete` and `color="primary"` is defined.
 | <span class="prop-name">deletableColorSecondary</span> | <span class="prop-name">.MuiChip-deletableColorSecondary</span> | Styles applied to the root element if `onDelete` and `color="secondary"` is defined.
 | <span class="prop-name">outlined</span> | <span class="prop-name">.MuiChip-outlined</span> | Styles applied to the root element if `variant="outlined"`.
-| <span class="prop-name">default</span> | <span class="prop-name">.MuiChip-default</span> | Styles applied to the root element if `variant="default"`.
+| <span class="prop-name">filled</span> | <span class="prop-name">.MuiChip-filled</span> | Styles applied to the root element if `variant="filled"`.
 | <span class="prop-name">outlinedPrimary</span> | <span class="prop-name">.MuiChip-outlinedPrimary</span> | Styles applied to the root element if `variant="outlined"` and `color="primary"`.
 | <span class="prop-name">outlinedSecondary</span> | <span class="prop-name">.MuiChip-outlinedSecondary</span> | Styles applied to the root element if `variant="outlined"` and `color="secondary"`.
 | <span class="prop-name">avatar</span> | <span class="prop-name">.MuiChip-avatar</span> | Styles applied to the `avatar` element.
@@ -77,8 +77,8 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">labelSmall</span> | <span class="prop-name">.MuiChip-labelSmall</span> | Styles applied to the label `span` element if `size="small"`.
 | <span class="prop-name">deleteIcon</span> | <span class="prop-name">.MuiChip-deleteIcon</span> | Styles applied to the `deleteIcon` element.
 | <span class="prop-name">deleteIconSmall</span> | <span class="prop-name">.MuiChip-deleteIconSmall</span> | Styles applied to the `deleteIcon` element if `size="small"`.
-| <span class="prop-name">deleteIconColorPrimary</span> | <span class="prop-name">.MuiChip-deleteIconColorPrimary</span> | Styles applied to the deleteIcon element if `color="primary"` and `variant="default"`.
-| <span class="prop-name">deleteIconColorSecondary</span> | <span class="prop-name">.MuiChip-deleteIconColorSecondary</span> | Styles applied to the deleteIcon element if `color="secondary"` and `variant="default"`.
+| <span class="prop-name">deleteIconColorPrimary</span> | <span class="prop-name">.MuiChip-deleteIconColorPrimary</span> | Styles applied to the deleteIcon element if `color="primary"` and `variant="filled"`.
+| <span class="prop-name">deleteIconColorSecondary</span> | <span class="prop-name">.MuiChip-deleteIconColorSecondary</span> | Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`.
 | <span class="prop-name">deleteIconOutlinedColorPrimary</span> | <span class="prop-name">.MuiChip-deleteIconOutlinedColorPrimary</span> | Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`.
 | <span class="prop-name">deleteIconOutlinedColorSecondary</span> | <span class="prop-name">.MuiChip-deleteIconOutlinedColorSecondary</span> | Styles applied to the deleteIcon element if `color="secondary"` and `variant="outlined"`.
 | <span class="prop-name">focusVisible</span> | <span class="prop-name">.Mui-focusVisible</span> | Pseudo-class applied to the root element if keyboard focused.

docs/src/pages/components/chips/ChipsPlayground.js

@@ -29,7 +29,7 @@ function ChipsPlayground(props) {
     onDelete: 'none',
     avatar: 'none',
     icon: 'none',
-    variant: 'default',
+    variant: 'filled',
     size: 'medium',
   });
   const { color, onDelete, avatar, icon, variant, size } = state;
@@ -47,7 +47,7 @@ function ChipsPlayground(props) {
 
   const colorToCode = color !== 'default' ? `color="${color}" ` : '';
   const sizeToCode = size === 'small' ? `size="small" ` : '';
-  const variantToCode = variant !== 'default' ? `variant="${variant}" ` : '';
+  const variantToCode = variant !== 'filled' ? `variant="${variant}" ` : '';
 
   let onDeleteToCode;
   switch (onDelete) {
@@ -132,9 +132,9 @@ function ChipsPlayground(props) {
                 onChange={handleChange}
               >
                 <FormControlLabel
-                  value="default"
+                  value="filled"
                   control={<Radio />}
-                  label="default"
+                  label="filled"
                 />
                 <FormControlLabel
                   value="outlined"

docs/src/pages/components/chips/chips.md

@@ -48,7 +48,7 @@ gain depth while clicked or touched.
 
 You can use the `size` prop to define a small Chip.
 
-### Default variant
+### Filled variant
 
 {{"demo": "pages/components/chips/SmallChips.js"}}
 

docs/src/pages/guides/migration-v4/migration-v4.md

@@ -358,6 +358,14 @@ const theme = createMuitheme({
   +<Fab variant="circular">
   ```
 
+### Chip
+
+- Rename `default` variant to `filled` for consistency.
+  ```diff
+  -<Chip variant="default">
+  +<Chip variant="filled">
+  ```
+
 ### Grid
 
 - Rename `justify` prop with `justifyContent` to be aligned with the CSS property name.

packages/material-ui/src/Chip/Chip.d.ts

@@ -4,7 +4,7 @@ import { PropTypes } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface ChipPropsVariantOverrides {}
-export type ChipVariantDefaults = Record<'default' | 'outlined', true>;
+export type ChipVariantDefaults = Record<'filled' | 'outlined', true>;
 
 export interface ChipTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P & {
@@ -45,8 +45,8 @@ export interface ChipTypeMap<P = {}, D extends React.ElementType = 'div'> {
       deletableColorSecondary?: string;
       /** Styles applied to the root element if `variant="outlined"`. */
       outlined?: string;
-      /** Styles applied to the root element if `variant="default"`. */
-      default?: string;
+      /** Styles applied to the root element if `variant="filled"`. */
+      filled?: string;
       /** Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
       outlinedPrimary?: string;
       /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
@@ -75,9 +75,9 @@ export interface ChipTypeMap<P = {}, D extends React.ElementType = 'div'> {
       deleteIcon?: string;
       /** Styles applied to the `deleteIcon` element if `size="small"`. */
       deleteIconSmall?: string;
-      /** Styles applied to the deleteIcon element if `color="primary"` and `variant="default"`. */
+      /** Styles applied to the deleteIcon element if `color="primary"` and `variant="filled"`. */
       deleteIconColorPrimary?: string;
-      /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="default"`. */
+      /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`. */
       deleteIconColorSecondary?: string;
       /** Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`. */
       deleteIconOutlinedColorPrimary?: string;
@@ -128,7 +128,7 @@ export interface ChipTypeMap<P = {}, D extends React.ElementType = 'div'> {
     size?: 'small' | 'medium';
     /**
      * The variant to use.
-     * @default 'default'
+     * @default 'filled'
      */
     variant?: OverridableStringUnion<ChipVariantDefaults, ChipPropsVariantOverrides>;
   };

packages/material-ui/src/Chip/Chip.js

@@ -152,8 +152,8 @@ export const styles = (theme) => {
         marginRight: 3,
       },
     },
-    /* Styles applied to the root element if `variant="default"`. */
-    default: {},
+    /* Styles applied to the root element if `variant="filled"`. */
+    filled: {},
     /* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
     outlinedPrimary: {
       color: theme.palette.primary.main,
@@ -229,14 +229,14 @@ export const styles = (theme) => {
       marginRight: 4,
       marginLeft: -4,
     },
-    /* Styles applied to the deleteIcon element if `color="primary"` and `variant="default"`. */
+    /* Styles applied to the deleteIcon element if `color="primary"` and `variant="filled"`. */
     deleteIconColorPrimary: {
       color: fade(theme.palette.primary.contrastText, 0.7),
       '&:hover, &:active': {
         color: theme.palette.primary.contrastText,
       },
     },
-    /* Styles applied to the deleteIcon element if `color="secondary"` and `variant="default"`. */
+    /* Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`. */
     deleteIconColorSecondary: {
       color: fade(theme.palette.secondary.contrastText, 0.7),
       '&:hover, &:active': {
@@ -286,7 +286,7 @@ const Chip = React.forwardRef(function Chip(props, ref) {
     onKeyDown,
     onKeyUp,
     size = 'medium',
-    variant = 'default',
+    variant = 'filled',
     ...other
   } = props;
 
@@ -528,10 +528,10 @@ Chip.propTypes = {
   size: PropTypes.oneOf(['medium', 'small']),
   /**
    * The variant to use.
-   * @default 'default'
+   * @default 'filled'
    */
   variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
-    PropTypes.oneOf(['default', 'outlined']),
+    PropTypes.oneOf(['filled', 'outlined']),
     PropTypes.string,
   ]),
 };