diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md index 702d3ab3ee280b..20a214f91e27c9 100644 --- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md +++ b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md @@ -372,6 +372,198 @@ Here's how to migrate: }, ``` +## Chip + +Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#chip-classes) below to migrate the code as described in the following sections: + +```bash +npx @mui/codemod@latest deprecations/chip-classes +``` + +### Composed CSS classes + +The CSS classes that composed the following props were deprecated: + +- `variant` | `clickable` | `deletable` and `color` +- `avatar` and `color` | `size` +- `icon` and `color` | `size` +- `deleteIcon` and `color` | `size` +- `label` and `size` + +Here's how to migrate: + +```diff +-.MuiChip-clickableColorPrimary ++.MuiChip-clickable.MuiChip-colorPrimary +-.MuiChip-clickableColorSecondary ++.MuiChip-clickable.MuiChip-colorSecondary +-.MuiChip-deletableColorPrimary ++.MuiChip-deletable.MuiChip-colorPrimary +-.MuiChip-deletableColorSecondary ++.MuiChip-deletable.MuiChip-colorSecondary +-.MuiChip-outlinedPrimary ++.MuiChip-outlined.MuiChip-colorPrimary +-.MuiChip-outlinedSecondary ++.MuiChip-outlined.MuiChip-colorSecondary +-.MuiChip-filledPrimary ++.MuiChip-filled.MuiChip-colorPrimary +-.MuiChip-filledSecondary ++.MuiChip-filled.MuiChip-colorSecondary +-.MuiChip-root .MuiChip-avatarSmall ++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-avatar +-.MuiChip-root .MuiChip-avatarMedium ++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-avatar +-.MuiChip-root .MuiChip-avatarColorPrimary ++.MuiChip-root.MuiChip-colorPrimary > .MuiChip-avatar +-.MuiChip-root .MuiChip-avatarColorSecondary ++.MuiChip-root.MuiChip-colorSecondary > .MuiChip-avatar +-.MuiChip-root .MuiChip-iconSmall ++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-icon +-.MuiChip-root .MuiChip-iconMedium ++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-icon +-.MuiChip-root .MuiChip-iconColorPrimary ++.MuiChip-root.MuiChip-colorPrimary > .MuiChip-icon +-.MuiChip-root .MuiChip-iconColorSecondary ++.MuiChip-root.MuiChip-colorSecondary > .MuiChip-icon +-.MuiChip-root .MuiChip-labelSmall ++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-label +-.MuiChip-root .MuiChip-labelMedium ++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-label +-.MuiChip-root .MuiChip-deleteIconSmall ++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconMedium ++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconColorPrimary ++.MuiChip-root.MuiChip-colorPrimary > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconColorSecondary ++.MuiChip-root.MuiChip-colorSecondary > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconOutlinedColorPrimary ++.MuiChip-root.MuiChip-outlined.MuiChip-colorPrimary > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconOutlinedColorSecondary ++.MuiChip-root.MuiChip-outlined.MuiChip-colorSecondary > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconFilledColorPrimary ++.MuiChip-root.MuiChip-filled.MuiChip-colorPrimary > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconFilledColorSecondary ++.MuiChip-root.MuiChip-filled.MuiChip-colorSecondary > .MuiChip-deleteIcon +``` + +```diff + + import { chipClasses } from '@mui/material/Chip'; + + MuiChip: { + styleOverrides: { + root: { +- [`&.${chipClasses.clickableColorPrimary}`]: { ++ [`&.${chipClasses.clickable}.${chipClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${chipClasses.clickableColorSecondary}`]: { ++ [`&.${chipClasses.clickable}.${chipClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${chipClasses.deletableColorPrimary}`]: { ++ [`&.${chipClasses.deletable}.${chipClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${chipClasses.deletableColorSecondary}`]: { ++ [`&.${chipClasses.deletable}.${chipClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${chipClasses.outlinedPrimary}`]: { ++ [`&.${chipClasses.outlined}.${chipClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${chipClasses.outlinedSecondary}`]: { ++ [`&.${chipClasses.outlined}.${chipClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${chipClasses.filledPrimary}`]: { ++ [`&.${chipClasses.filled}.${chipClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${chipClasses.filledSecondary}`]: { ++ [`&.${chipClasses.filled}.${chipClasses.colorSecondary}`]: { + color: 'red', + }, +- [`& .${chipClasses.avatarSmall}`]: { ++ [`&.${chipClasses.sizeSmall} > .${chipClasses.avatar}`]: { + color: 'red', + }, +- [`& .${chipClasses.avatarMedium}`]: { ++ [`&.${chipClasses.sizeMedium} > .${chipClasses.avatar}`]: { + color: 'red', + }, +- [`& .${chipClasses.avatarColorPrimary}`]: { ++ [`&.${chipClasses.colorPrimary} > .${chipClasses.avatar}`]: { + color: 'red', + }, +- [`& .${chipClasses.avatarColorSecondary}`]: { ++ [`&.${chipClasses.colorSecondary} > .${chipClasses.avatar}`]: { + color: 'red', + }, +- [`& .${chipClasses.iconSmall}`]: { ++ [`&.${chipClasses.sizeSmall} > .${chipClasses.icon}`]: { + color: 'red', + }, +- [`& .${chipClasses.iconMedium}`]: { ++ [`&.${chipClasses.sizeMedium} > .${chipClasses.icon}`]: { + color: 'red', + }, +- [`& .${chipClasses.iconColorPrimary}`]: { ++ [`&.${chipClasses.colorPrimary} > .${chipClasses.icon}`]: { + color: 'red', + }, +- [`& .${chipClasses.iconColorSecondary}`]: { ++ [`&.${chipClasses.colorSecondary} > .${chipClasses.icon}`]: { + color: 'red', + }, +- [`& .${chipClasses.labelSmall}`]: { ++ [`&.${chipClasses.sizeSmall} > .${chipClasses.label}`]: { + color: 'red', + }, +- [`& .${chipClasses.labelMedium}`]: { ++ [`&.${chipClasses.sizeMedium} > .${chipClasses.label}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconSmall}`]: { ++ [`&.${chipClasses.sizeSmall} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconMedium}`]: { ++ [`&.${chipClasses.sizeMedium} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconColorPrimary}`]: { ++ [`&.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconColorSecondary}`]: { ++ [`&.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconOutlinedColorPrimary}`]: { ++ [`&.${chipClasses.outlined}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconOutlinedColorSecondary}`]: { ++ [`&.${chipClasses.outlined}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconFilledColorPrimary}`]: { ++ [`&.${chipClasses.filled}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconFilledColorSecondary}`]: { ++ [`&.${chipClasses.filled}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, + }, + }, + }, + +``` + ## Divider Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#divider-props) below to migrate the code as described in the following sections: diff --git a/docs/pages/material-ui/api/chip.json b/docs/pages/material-ui/api/chip.json index 999e26c5b18a97..1d3b02d127913a 100644 --- a/docs/pages/material-ui/api/chip.json +++ b/docs/pages/material-ui/api/chip.json @@ -53,25 +53,29 @@ "key": "avatarColorPrimary", "className": "MuiChip-avatarColorPrimary", "description": "Styles applied to the avatar element if `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "avatarColorSecondary", "className": "MuiChip-avatarColorSecondary", "description": "Styles applied to the avatar element if `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "avatarMedium", "className": "MuiChip-avatarMedium", "description": "Styles applied to the avatar element if `size=\"medium\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "avatarSmall", "className": "MuiChip-avatarSmall", "description": "Styles applied to the avatar element if `size=\"small\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "clickable", @@ -83,13 +87,15 @@ "key": "clickableColorPrimary", "className": "MuiChip-clickableColorPrimary", "description": "Styles applied to the root element if `onClick` and `color=\"primary\"` is defined or `clickable={true}`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "clickableColorSecondary", "className": "MuiChip-clickableColorSecondary", "description": "Styles applied to the root element if `onClick` and `color=\"secondary\"` is defined or `clickable={true}`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "colorError", @@ -137,13 +143,15 @@ "key": "deletableColorPrimary", "className": "MuiChip-deletableColorPrimary", "description": "Styles applied to the root element if `onDelete` and `color=\"primary\"` is defined.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "deletableColorSecondary", "className": "MuiChip-deletableColorSecondary", "description": "Styles applied to the root element if `onDelete` and `color=\"secondary\"` is defined.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "deleteIcon", @@ -155,49 +163,57 @@ "key": "deleteIconColorPrimary", "className": "MuiChip-deleteIconColorPrimary", "description": "Styles applied to the deleteIcon element if `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "deleteIconColorSecondary", "className": "MuiChip-deleteIconColorSecondary", "description": "Styles applied to the deleteIcon element if `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "deleteIconFilledColorPrimary", "className": "MuiChip-deleteIconFilledColorPrimary", "description": "Styles applied to the deleteIcon element if `color=\"primary\"` and `variant=\"filled\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "deleteIconFilledColorSecondary", "className": "MuiChip-deleteIconFilledColorSecondary", "description": "Styles applied to the deleteIcon element if `color=\"secondary\"` and `variant=\"filled\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "deleteIconMedium", "className": "MuiChip-deleteIconMedium", "description": "Styles applied to the deleteIcon element if `size=\"medium\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "deleteIconOutlinedColorPrimary", "className": "MuiChip-deleteIconOutlinedColorPrimary", "description": "Styles applied to the deleteIcon element if `color=\"primary\"` and `variant=\"outlined\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "deleteIconOutlinedColorSecondary", "className": "MuiChip-deleteIconOutlinedColorSecondary", "description": "Styles applied to the deleteIcon element if `color=\"secondary\"` and `variant=\"outlined\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "deleteIconSmall", "className": "MuiChip-deleteIconSmall", "description": "Styles applied to the deleteIcon element if `size=\"small\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "disabled", @@ -215,13 +231,15 @@ "key": "filledPrimary", "className": "MuiChip-filledPrimary", "description": "Styles applied to the root element if `variant=\"filled\"` and `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "filledSecondary", "className": "MuiChip-filledSecondary", "description": "Styles applied to the root element if `variant=\"filled\"` and `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "focusVisible", @@ -239,25 +257,29 @@ "key": "iconColorPrimary", "className": "MuiChip-iconColorPrimary", "description": "Styles applied to the icon element if `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "iconColorSecondary", "className": "MuiChip-iconColorSecondary", "description": "Styles applied to the icon element if `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "iconMedium", "className": "MuiChip-iconMedium", "description": "Styles applied to the icon element if `size=\"medium\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "iconSmall", "className": "MuiChip-iconSmall", "description": "Styles applied to the icon element if `size=\"small\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "label", @@ -269,13 +291,15 @@ "key": "labelMedium", "className": "MuiChip-labelMedium", "description": "Styles applied to the label `span` element if `size=\"medium\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "labelSmall", "className": "MuiChip-labelSmall", "description": "Styles applied to the label `span` element if `size=\"small\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlined", @@ -287,13 +311,15 @@ "key": "outlinedPrimary", "className": "MuiChip-outlinedPrimary", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedSecondary", "className": "MuiChip-outlinedSecondary", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "root", diff --git a/docs/translations/api-docs/chip/chip.json b/docs/translations/api-docs/chip/chip.json index 88d78e196f18a1..fddc50bdb23a05 100644 --- a/docs/translations/api-docs/chip/chip.json +++ b/docs/translations/api-docs/chip/chip.json @@ -41,22 +41,26 @@ "avatarColorPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the avatar element", - "conditions": "color=\"primary\"" + "conditions": "color=\"primary\"", + "deprecationInfo": "Combine the .MuiChip-avatar and .MuiChip-colorPrimary classes instead. How to migrate" }, "avatarColorSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the avatar element", - "conditions": "color=\"secondary\"" + "conditions": "color=\"secondary\"", + "deprecationInfo": "Combine the .MuiChip-avatar and .MuiChip-colorSecondary classes instead. How to migrate" }, "avatarMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the avatar element", - "conditions": "size=\"medium\"" + "conditions": "size=\"medium\"", + "deprecationInfo": "Combine the .MuiChip-avatar and .MuiChip-sizeMedium classes instead. How to migrate" }, "avatarSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the avatar element", - "conditions": "size=\"small\"" + "conditions": "size=\"small\"", + "deprecationInfo": "Combine the .MuiChip-avatar and .MuiChip-sizeSmall classes instead. How to migrate" }, "clickable": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", @@ -66,12 +70,14 @@ "clickableColorPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "onClick and color=\"primary\" is defined or clickable={true}" + "conditions": "onClick and color=\"primary\" is defined or clickable={true}", + "deprecationInfo": "Combine the .MuiChip-clickable and .MuiChip-colorPrimary classes instead. How to migrate" }, "clickableColorSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "onClick and color=\"secondary\" is defined or clickable={true}" + "conditions": "onClick and color=\"secondary\" is defined or clickable={true}", + "deprecationInfo": "Combine the .MuiChip-clickable and .MuiChip-colorSecondary classes instead. How to migrate" }, "colorError": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", @@ -111,12 +117,14 @@ "deletableColorPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "onDelete and color=\"primary\" is defined" + "conditions": "onDelete and color=\"primary\" is defined", + "deprecationInfo": "Combine the .MuiChip-deletable and .MuiChip-colorPrimary classes instead. How to migrate" }, "deletableColorSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "onDelete and color=\"secondary\" is defined" + "conditions": "onDelete and color=\"secondary\" is defined", + "deprecationInfo": "Combine the .MuiChip-deletable and .MuiChip-colorSecondary classes instead. How to migrate" }, "deleteIcon": { "description": "Styles applied to {{nodeName}}.", @@ -125,42 +133,50 @@ "deleteIconColorPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the deleteIcon element", - "conditions": "color=\"primary\"" + "conditions": "color=\"primary\"", + "deprecationInfo": "Combine the .MuiChip-deleteIcon and .MuiChip-colorPrimary classes instead. How to migrate" }, "deleteIconColorSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the deleteIcon element", - "conditions": "color=\"secondary\"" + "conditions": "color=\"secondary\"", + "deprecationInfo": "Combine the .MuiChip-deleteIcon and .MuiChip-colorSecondary classes instead. How to migrate" }, "deleteIconFilledColorPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the deleteIcon element", - "conditions": "color=\"primary\" and variant=\"filled\"" + "conditions": "color=\"primary\" and variant=\"filled\"", + "deprecationInfo": "Combine the .MuiChip-deleteIcon , .MuiChip-filled and .MuiChip-colorPrimary classes instead. How to migrate" }, "deleteIconFilledColorSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the deleteIcon element", - "conditions": "color=\"secondary\" and variant=\"filled\"" + "conditions": "color=\"secondary\" and variant=\"filled\"", + "deprecationInfo": "Combine the .MuiChip-deleteIcon , .MuiChip-filled and .MuiChip-colorSecondary classes instead. How to migrate" }, "deleteIconMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the deleteIcon element", - "conditions": "size=\"medium\"" + "conditions": "size=\"medium\"", + "deprecationInfo": "Combine the .MuiChip-deleteIcon and .MuiChip-sizeMedium classes instead. How to migrate" }, "deleteIconOutlinedColorPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the deleteIcon element", - "conditions": "color=\"primary\" and variant=\"outlined\"" + "conditions": "color=\"primary\" and variant=\"outlined\"", + "deprecationInfo": "Combine the .MuiChip-deleteIcon , .MuiChip-outlined and .MuiChip-colorPrimary classes instead. How to migrate" }, "deleteIconOutlinedColorSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the deleteIcon element", - "conditions": "color=\"secondary\" and variant=\"outlined\"" + "conditions": "color=\"secondary\" and variant=\"outlined\"", + "deprecationInfo": "Combine the .MuiChip-deleteIcon , .MuiChip-outlined and .MuiChip-colorSecondary classes instead. How to migrate" }, "deleteIconSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the deleteIcon element", - "conditions": "size=\"small\"" + "conditions": "size=\"small\"", + "deprecationInfo": "Combine the .MuiChip-deleteIcon and .MuiChip-sizeSmall classes instead. How to migrate" }, "disabled": { "description": "State class applied to {{nodeName}} if {{conditions}}.", @@ -175,12 +191,14 @@ "filledPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"filled\" and color=\"primary\"" + "conditions": "variant=\"filled\" and color=\"primary\"", + "deprecationInfo": "Combine the .MuiChip-filled and .MuiChip-colorPrimary classes instead. How to migrate" }, "filledSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"filled\" and color=\"secondary\"" + "conditions": "variant=\"filled\" and color=\"secondary\"", + "deprecationInfo": "Combine the .MuiChip-filled and .MuiChip-colorSecondary classes instead. How to migrate" }, "focusVisible": { "description": "State class applied to {{nodeName}} if {{conditions}}.", @@ -191,22 +209,26 @@ "iconColorPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the icon element", - "conditions": "color=\"primary\"" + "conditions": "color=\"primary\"", + "deprecationInfo": "Combine the .MuiChip-icon and .MuiChip-colorPrimary classes instead. How to migrate" }, "iconColorSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the icon element", - "conditions": "color=\"secondary\"" + "conditions": "color=\"secondary\"", + "deprecationInfo": "Combine the .MuiChip-icon and .MuiChip-colorSecondary classes instead. How to migrate" }, "iconMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the icon element", - "conditions": "size=\"medium\"" + "conditions": "size=\"medium\"", + "deprecationInfo": "Combine the .MuiChip-icon and .MuiChip-sizeMedium classes instead. How to migrate" }, "iconSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the icon element", - "conditions": "size=\"small\"" + "conditions": "size=\"small\"", + "deprecationInfo": "Combine the .MuiChip-icon and .MuiChip-sizeSmall classes instead. How to migrate" }, "label": { "description": "Styles applied to {{nodeName}}.", @@ -215,12 +237,14 @@ "labelMedium": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the label span element", - "conditions": "size=\"medium\"" + "conditions": "size=\"medium\"", + "deprecationInfo": "Combine the .MuiChip-label and .MuiChip-sizeMedium classes instead. How to migrate" }, "labelSmall": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the label span element", - "conditions": "size=\"small\"" + "conditions": "size=\"small\"", + "deprecationInfo": "Combine the .MuiChip-label and .MuiChip-sizeSmall classes instead. How to migrate" }, "outlined": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", @@ -230,12 +254,14 @@ "outlinedPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"primary\"" + "conditions": "variant=\"outlined\" and color=\"primary\"", + "deprecationInfo": "Combine the .MuiChip-outlined and .MuiChip-colorPrimary classes instead. How to migrate" }, "outlinedSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"secondary\"" + "conditions": "variant=\"outlined\" and color=\"secondary\"", + "deprecationInfo": "Combine the .MuiChip-outlined and .MuiChip-colorSecondary classes instead. How to migrate" }, "root": { "description": "Styles applied to the root element." }, "sizeMedium": { diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md index 8db02754cdba19..e2324924fa15b8 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -401,6 +401,188 @@ CSS transforms: npx @mui/codemod@latest deprecations/button-classes ``` +#### `chip-classes` + +JS transforms: + +```diff + + import { chipClasses } from '@mui/material/Chip'; + + MuiChip: { + styleOverrides: { + root: { +- [`&.${chipClasses.clickableColorPrimary}`]: { ++ [`&.${chipClasses.clickable}.${chipClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${chipClasses.clickableColorSecondary}`]: { ++ [`&.${chipClasses.clickable}.${chipClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${chipClasses.deletableColorPrimary}`]: { ++ [`&.${chipClasses.deletable}.${chipClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${chipClasses.deletableColorSecondary}`]: { ++ [`&.${chipClasses.deletable}.${chipClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${chipClasses.outlinedPrimary}`]: { ++ [`&.${chipClasses.outlined}.${chipClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${chipClasses.outlinedSecondary}`]: { ++ [`&.${chipClasses.outlined}.${chipClasses.colorSecondary}`]: { + color: 'red', + }, +- [`&.${chipClasses.filledPrimary}`]: { ++ [`&.${chipClasses.filled}.${chipClasses.colorPrimary}`]: { + color: 'red', + }, +- [`&.${chipClasses.filledSecondary}`]: { ++ [`&.${chipClasses.filled}.${chipClasses.colorSecondary}`]: { + color: 'red', + }, +- [`& .${chipClasses.avatarSmall}`]: { ++ [`&.${chipClasses.sizeSmall} > .${chipClasses.avatar}`]: { + color: 'red', + }, +- [`& .${chipClasses.avatarMedium}`]: { ++ [`&.${chipClasses.sizeMedium} > .${chipClasses.avatar}`]: { + color: 'red', + }, +- [`& .${chipClasses.avatarColorPrimary}`]: { ++ [`&.${chipClasses.colorPrimary} > .${chipClasses.avatar}`]: { + color: 'red', + }, +- [`& .${chipClasses.avatarColorSecondary}`]: { ++ [`&.${chipClasses.colorSecondary} > .${chipClasses.avatar}`]: { + color: 'red', + }, +- [`& .${chipClasses.iconSmall}`]: { ++ [`&.${chipClasses.sizeSmall} > .${chipClasses.icon}`]: { + color: 'red', + }, +- [`& .${chipClasses.iconMedium}`]: { ++ [`&.${chipClasses.sizeMedium} > .${chipClasses.icon}`]: { + color: 'red', + }, +- [`& .${chipClasses.iconColorPrimary}`]: { ++ [`&.${chipClasses.colorPrimary} > .${chipClasses.icon}`]: { + color: 'red', + }, +- [`& .${chipClasses.iconColorSecondary}`]: { ++ [`&.${chipClasses.colorSecondary} > .${chipClasses.icon}`]: { + color: 'red', + }, +- [`& .${chipClasses.labelSmall}`]: { ++ [`&.${chipClasses.sizeSmall} > .${chipClasses.label}`]: { + color: 'red', + }, +- [`& .${chipClasses.labelMedium}`]: { ++ [`&.${chipClasses.sizeMedium} > .${chipClasses.label}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconSmall}`]: { ++ [`&.${chipClasses.sizeSmall} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconMedium}`]: { ++ [`&.${chipClasses.sizeMedium} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconColorPrimary}`]: { ++ [`&.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconColorSecondary}`]: { ++ [`&.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconOutlinedColorPrimary}`]: { ++ [`&.${chipClasses.outlined}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconOutlinedColorSecondary}`]: { ++ [`&.${chipClasses.outlined}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconFilledColorPrimary}`]: { ++ [`&.${chipClasses.filled}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, +- [`& .${chipClasses.deleteIconFilledColorSecondary}`]: { ++ [`&.${chipClasses.filled}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`]: { + color: 'red', + }, + }, + }, + }, + +``` + +CSS transforms: + +```diff +-.MuiChip-clickableColorPrimary ++.MuiChip-clickable.MuiChip-colorPrimary +-.MuiChip-clickableColorSecondary ++.MuiChip-clickable.MuiChip-colorSecondary +-.MuiChip-deletableColorPrimary ++.MuiChip-deletable.MuiChip-colorPrimary +-.MuiChip-deletableColorSecondary ++.MuiChip-deletable.MuiChip-colorSecondary +-.MuiChip-outlinedPrimary ++.MuiChip-outlined.MuiChip-colorPrimary +-.MuiChip-outlinedSecondary ++.MuiChip-outlined.MuiChip-colorSecondary +-.MuiChip-filledPrimary ++.MuiChip-filled.MuiChip-colorPrimary +-.MuiChip-filledSecondary ++.MuiChip-filled.MuiChip-colorSecondary +-.MuiChip-root .MuiChip-avatarSmall ++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-avatar +-.MuiChip-root .MuiChip-avatarMedium ++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-avatar +-.MuiChip-root .MuiChip-avatarColorPrimary ++.MuiChip-root.MuiChip-colorPrimary > .MuiChip-avatar +-.MuiChip-root .MuiChip-avatarColorSecondary ++.MuiChip-root.MuiChip-colorSecondary > .MuiChip-avatar +-.MuiChip-root .MuiChip-iconSmall ++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-icon +-.MuiChip-root .MuiChip-iconMedium ++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-icon +-.MuiChip-root .MuiChip-iconColorPrimary ++.MuiChip-root.MuiChip-colorPrimary > .MuiChip-icon +-.MuiChip-root .MuiChip-iconColorSecondary ++.MuiChip-root.MuiChip-colorSecondary > .MuiChip-icon +-.MuiChip-root .MuiChip-labelSmall ++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-label +-.MuiChip-root .MuiChip-labelMedium ++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-label +-.MuiChip-root .MuiChip-deleteIconSmall ++.MuiChip-root.MuiChip-sizeSmall > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconMedium ++.MuiChip-root.MuiChip-sizeMedium > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconColorPrimary ++.MuiChip-root.MuiChip-colorPrimary > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconColorSecondary ++.MuiChip-root.MuiChip-colorSecondary > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconOutlinedColorPrimary ++.MuiChip-root.MuiChip-outlined.MuiChip-colorPrimary > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconOutlinedColorSecondary ++.MuiChip-root.MuiChip-outlined.MuiChip-colorSecondary > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconFilledColorPrimary ++.MuiChip-root.MuiChip-filled.MuiChip-colorPrimary > .MuiChip-deleteIcon +-.MuiChip-root .MuiChip-deleteIconFilledColorSecondary ++.MuiChip-root.MuiChip-filled.MuiChip-colorSecondary > .MuiChip-deleteIcon +``` + +```bash +npx @mui/codemod@latest deprecations/chip-classes +``` + #### `divider-props` ```diff diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/packages/mui-codemod/src/deprecations/all/deprecations-all.js index 2015bf1f4ae6df..98d80b66d82115 100644 --- a/packages/mui-codemod/src/deprecations/all/deprecations-all.js +++ b/packages/mui-codemod/src/deprecations/all/deprecations-all.js @@ -3,6 +3,7 @@ import transformAvatarProps from '../avatar-props'; import transformDividerProps from '../divider-props'; import transformAccordionClasses from '../accordion-summary-classes'; import transformButtonClasses from '../button-classes'; +import transformChipClasses from '../chip-classes'; import transformPaginationItemClasses from '../pagination-item-classes'; /** @@ -15,6 +16,7 @@ export default function deprecationsAll(file, api, options) { file.source = transformDividerProps(file, api, options); file.source = transformAccordionClasses(file, api, options); file.source = transformButtonClasses(file, api, options); + file.source = transformChipClasses(file, api, options); file.source = transformPaginationItemClasses(file, api, options); return file.source; diff --git a/packages/mui-codemod/src/deprecations/all/postcss.config.js b/packages/mui-codemod/src/deprecations/all/postcss.config.js index 90de20f2938847..9d5a7d81e51e37 100644 --- a/packages/mui-codemod/src/deprecations/all/postcss.config.js +++ b/packages/mui-codemod/src/deprecations/all/postcss.config.js @@ -2,10 +2,16 @@ const { plugin: accordionSummaryClassesPlugin, } = require('../accordion-summary-classes/postcss-plugin'); const { plugin: buttonClassesPlugin } = require('../button-classes/postcss-plugin'); +const { plugin: chipClassesPlugin } = require('../chip-classes/postcss-plugin'); const { plugin: paginationItemClassesPlugin, } = require('../pagination-item-classes/postcss-plugin'); module.exports = { - plugins: [accordionSummaryClassesPlugin, buttonClassesPlugin, paginationItemClassesPlugin], + plugins: [ + accordionSummaryClassesPlugin, + buttonClassesPlugin, + chipClassesPlugin, + paginationItemClassesPlugin, + ], }; diff --git a/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.js b/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.js new file mode 100644 index 00000000000000..82fec4f91a4e07 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.js @@ -0,0 +1,124 @@ +import { classes } from './postcss-plugin'; + +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function transformer(file, api, options) { + const j = api.jscodeshift; + const root = j(file.source); + const printOptions = options.printOptions; + classes.forEach(({ deprecatedClass, replacementSelector }) => { + const replacementSelectorPrefix = '&'; + root + .find(j.ImportDeclaration) + .filter((path) => path.node.source.value.match(/^@mui\/material\/Chip$/)) + .forEach((path) => { + path.node.specifiers.forEach((specifier) => { + if (specifier.type === 'ImportSpecifier' && specifier.imported.name === 'chipClasses') { + const deprecatedAtomicClass = deprecatedClass.replace( + `${deprecatedClass.split('-')[0]}-`, + '', + ); + root + .find(j.MemberExpression, { + object: { name: specifier.local.name }, + property: { name: deprecatedAtomicClass }, + }) + .forEach((memberExpression) => { + const parent = memberExpression.parentPath.parentPath.value; + if (parent.type === j.TemplateLiteral.name) { + const memberExpressionIndex = parent.expressions.findIndex( + (expression) => expression === memberExpression.value, + ); + const precedingTemplateElement = parent.quasis[memberExpressionIndex]; + const atomicClasses = replacementSelector + .replaceAll('MuiChip-', '') + .replaceAll(replacementSelectorPrefix, '') + .replaceAll(' > ', '') + .split('.') + .filter(Boolean); + + if ( + precedingTemplateElement.value.raw.endsWith( + deprecatedClass.startsWith(' ') + ? `${replacementSelectorPrefix} .` + : `${replacementSelectorPrefix}.`, + ) + ) { + const atomicClassesArgs = [ + memberExpressionIndex, + 1, + ...atomicClasses.map((atomicClass) => + j.memberExpression( + memberExpression.value.object, + j.identifier(atomicClass), + ), + ), + ]; + parent.expressions.splice(...atomicClassesArgs); + + if (replacementSelector.includes(' > ')) { + const quasisArgs = [ + memberExpressionIndex, + 1, + j.templateElement( + { + raw: precedingTemplateElement.value.raw.replace(' ', ''), + cooked: precedingTemplateElement.value.cooked.replace(' ', ''), + }, + false, + ), + j.templateElement({ raw: ' > .', cooked: ' > .' }, false), + ]; + + if (atomicClasses.length === 3) { + quasisArgs.splice( + 3, + 0, + j.templateElement({ raw: '.', cooked: '.' }, false), + ); + } + + parent.quasis.splice(...quasisArgs); + } else { + parent.quasis.splice( + memberExpressionIndex, + 1, + j.templateElement( + { + raw: precedingTemplateElement.value.raw, + cooked: precedingTemplateElement.value.cooked, + }, + false, + ), + + j.templateElement({ raw: '.', cooked: '.' }, false), + ); + } + } + } + }); + } + }); + }); + + const selectorRegex = new RegExp(`^${replacementSelectorPrefix}${deprecatedClass}`); + root + .find( + j.Literal, + (literal) => typeof literal.value === 'string' && literal.value.match(selectorRegex), + ) + .forEach((path) => { + path.replace( + j.literal( + path.value.value.replace( + selectorRegex, + `${replacementSelectorPrefix}${replacementSelector}`, + ), + ), + ); + }); + }); + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.test.js b/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.test.js new file mode 100644 index 00000000000000..aee266dc004726 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/chip-classes/chip-classes.test.js @@ -0,0 +1,78 @@ +import path from 'path'; +import { expect } from 'chai'; +import postcss from 'postcss'; +import { jscodeshift } from '../../../testUtils'; +import jsTransform from './chip-classes'; +import { plugin as postcssPlugin } from './postcss-plugin'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +const postcssProcessor = postcss([postcssPlugin]); + +describe('@mui/codemod', () => { + describe('deprecations', () => { + describe('chip-classes', () => { + describe('js-transform', () => { + it('transforms props as needed', () => { + const actual = jsTransform( + { source: read('./test-cases/actual.js') }, + { jscodeshift }, + { printOptions: { quote: 'double', trailingComma: true } }, + ); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = jsTransform( + { source: read('./test-cases/expected.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('css-transform', () => { + it('transforms classes as needed', async () => { + const actual = await postcssProcessor.process(read('./test-cases/actual.css'), { + from: undefined, + }); + + const expected = read('./test-cases/expected.css'); + expect(actual.css).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', async () => { + const actual = await postcssProcessor.process(read('./test-cases/expected.css'), { + from: undefined, + }); + + const expected = read('./test-cases/expected.css'); + expect(actual.css).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('test-cases', () => { + it('should not be the same', () => { + const actualJS = read('./test-cases/actual.js'); + const expectedJS = read('./test-cases/expected.js'); + expect(actualJS).not.to.equal(expectedJS, 'The actual and expected should be different'); + + const actualCSS = read('./test-cases/actual.css'); + const expectedCSS = read('./test-cases/expected.css'); + expect(actualCSS).not.to.equal( + expectedCSS, + 'The actual and expected should be different', + ); + }); + }); + }); + }); +}); diff --git a/packages/mui-codemod/src/deprecations/chip-classes/index.js b/packages/mui-codemod/src/deprecations/chip-classes/index.js new file mode 100644 index 00000000000000..a34fddd15caa1e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/chip-classes/index.js @@ -0,0 +1 @@ +export { default } from './chip-classes'; diff --git a/packages/mui-codemod/src/deprecations/chip-classes/postcss-plugin.js b/packages/mui-codemod/src/deprecations/chip-classes/postcss-plugin.js new file mode 100644 index 00000000000000..f2264798f6d96a --- /dev/null +++ b/packages/mui-codemod/src/deprecations/chip-classes/postcss-plugin.js @@ -0,0 +1,129 @@ +const classes = [ + { + deprecatedClass: '.MuiChip-clickableColorPrimary', + replacementSelector: '.MuiChip-clickable.MuiChip-colorPrimary', + }, + { + deprecatedClass: '.MuiChip-clickableColorSecondary', + replacementSelector: '.MuiChip-clickable.MuiChip-colorSecondary', + }, + { + deprecatedClass: '.MuiChip-deletableColorPrimary', + replacementSelector: '.MuiChip-deletable.MuiChip-colorPrimary', + }, + { + deprecatedClass: '.MuiChip-deletableColorSecondary', + replacementSelector: '.MuiChip-deletable.MuiChip-colorSecondary', + }, + { + deprecatedClass: '.MuiChip-outlinedPrimary', + replacementSelector: '.MuiChip-outlined.MuiChip-colorPrimary', + }, + { + deprecatedClass: '.MuiChip-outlinedSecondary', + replacementSelector: '.MuiChip-outlined.MuiChip-colorSecondary', + }, + { + deprecatedClass: '.MuiChip-filledPrimary', + replacementSelector: '.MuiChip-filled.MuiChip-colorPrimary', + }, + { + deprecatedClass: '.MuiChip-filledSecondary', + replacementSelector: '.MuiChip-filled.MuiChip-colorSecondary', + }, + { + deprecatedClass: ' .MuiChip-avatarSmall', + replacementSelector: '.MuiChip-sizeSmall > .MuiChip-avatar', + }, + { + deprecatedClass: ' .MuiChip-avatarMedium', + replacementSelector: '.MuiChip-sizeMedium > .MuiChip-avatar', + }, + { + deprecatedClass: ' .MuiChip-avatarColorPrimary', + replacementSelector: '.MuiChip-colorPrimary > .MuiChip-avatar', + }, + { + deprecatedClass: ' .MuiChip-avatarColorSecondary', + replacementSelector: '.MuiChip-colorSecondary > .MuiChip-avatar', + }, + { + deprecatedClass: ' .MuiChip-iconSmall', + replacementSelector: '.MuiChip-sizeSmall > .MuiChip-icon', + }, + { + deprecatedClass: ' .MuiChip-iconMedium', + replacementSelector: '.MuiChip-sizeMedium > .MuiChip-icon', + }, + { + deprecatedClass: ' .MuiChip-iconColorPrimary', + replacementSelector: '.MuiChip-colorPrimary > .MuiChip-icon', + }, + { + deprecatedClass: ' .MuiChip-iconColorSecondary', + replacementSelector: '.MuiChip-colorSecondary > .MuiChip-icon', + }, + { + deprecatedClass: ' .MuiChip-labelSmall', + replacementSelector: '.MuiChip-sizeSmall > .MuiChip-label', + }, + { + deprecatedClass: ' .MuiChip-labelMedium', + replacementSelector: '.MuiChip-sizeMedium > .MuiChip-label', + }, + { + deprecatedClass: ' .MuiChip-deleteIconSmall', + replacementSelector: '.MuiChip-sizeSmall > .MuiChip-deleteIcon', + }, + { + deprecatedClass: ' .MuiChip-deleteIconMedium', + replacementSelector: '.MuiChip-sizeMedium > .MuiChip-deleteIcon', + }, + { + deprecatedClass: ' .MuiChip-deleteIconColorPrimary', + replacementSelector: '.MuiChip-colorPrimary > .MuiChip-deleteIcon', + }, + { + deprecatedClass: ' .MuiChip-deleteIconColorSecondary', + replacementSelector: '.MuiChip-colorSecondary > .MuiChip-deleteIcon', + }, + { + deprecatedClass: ' .MuiChip-deleteIconOutlinedColorPrimary', + replacementSelector: '.MuiChip-outlined.MuiChip-colorPrimary > .MuiChip-deleteIcon', + }, + { + deprecatedClass: ' .MuiChip-deleteIconOutlinedColorSecondary', + replacementSelector: '.MuiChip-outlined.MuiChip-colorSecondary > .MuiChip-deleteIcon', + }, + { + deprecatedClass: ' .MuiChip-deleteIconFilledColorPrimary', + replacementSelector: '.MuiChip-filled.MuiChip-colorPrimary > .MuiChip-deleteIcon', + }, + { + deprecatedClass: ' .MuiChip-deleteIconFilledColorSecondary', + replacementSelector: '.MuiChip-filled.MuiChip-colorSecondary > .MuiChip-deleteIcon', + }, +]; + +const plugin = () => { + return { + postcssPlugin: `Replace deperecated Chip classes with new classes`, + Rule(rule) { + const { selector } = rule; + + classes.forEach(({ deprecatedClass, replacementSelector }) => { + const selectorRegex = new RegExp(`${deprecatedClass}`); + + if (selector.match(selectorRegex)) { + rule.selector = selector.replace(selectorRegex, replacementSelector); + } + }); + }, + }; +}; +plugin.postcss = true; + +module.exports = { + plugin, + classes, +}; diff --git a/packages/mui-codemod/src/deprecations/chip-classes/postcss.config.js b/packages/mui-codemod/src/deprecations/chip-classes/postcss.config.js new file mode 100644 index 00000000000000..23bebc1125be6e --- /dev/null +++ b/packages/mui-codemod/src/deprecations/chip-classes/postcss.config.js @@ -0,0 +1,5 @@ +const { plugin } = require('./postcss-plugin'); + +module.exports = { + plugins: [plugin], +}; diff --git a/packages/mui-codemod/src/deprecations/chip-classes/test-cases/actual.css b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/actual.css new file mode 100644 index 00000000000000..2b253d22c96a99 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/actual.css @@ -0,0 +1,103 @@ +.MuiChip-clickableColorPrimary { + color: red; +} + +.MuiChip-clickableColorSecondary { + color: red; +} + +.MuiChip-deletableColorPrimary { + color: red; +} + +.MuiChip-deletableColorSecondary { + color: red; +} + +.MuiChip-outlinedPrimary { + color: red; +} + +.MuiChip-outlinedSecondary { + color: red; +} + +.MuiChip-filledPrimary { + color: red; +} + +.MuiChip-filledSecondary { + color: red; +} + +.MuiChip-root .MuiChip-avatarSmall { + color: red; +} + +.MuiChip-root .MuiChip-avatarMedium { + color: red; +} + +.MuiChip-root .MuiChip-avatarColorPrimary { + color: red; +} + +.MuiChip-root .MuiChip-avatarColorSecondary { + color: red; +} + +.MuiChip-root .MuiChip-iconSmall { + color: red; +} + +.MuiChip-root .MuiChip-iconMedium { + color: red; +} + +.MuiChip-root .MuiChip-iconColorPrimary { + color: red; +} + +.MuiChip-root .MuiChip-iconColorSecondary { + color: red; +} + +.MuiChip-root .MuiChip-labelSmall { + color: red; +} + +.MuiChip-root .MuiChip-labelMedium { + color: red; +} + +.MuiChip-root .MuiChip-deleteIconSmall { + color: red; +} + +.MuiChip-root .MuiChip-deleteIconMedium { + color: red; +} + +.MuiChip-root .MuiChip-deleteIconColorPrimary { + color: red; +} + +.MuiChip-root .MuiChip-deleteIconColorSecondary { + color: red; +} + +.MuiChip-root .MuiChip-deleteIconFilledColorPrimary { + color: red; +} + +.MuiChip-root .MuiChip-deleteIconFilledColorSecondary { + color: red; +} + +.MuiChip-root .MuiChip-deleteIconOutlinedColorPrimary { + color: red; +} + +.MuiChip-root .MuiChip-deleteIconOutlinedColorSecondary { + color: red; +} diff --git a/packages/mui-codemod/src/deprecations/chip-classes/test-cases/actual.js b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/actual.js new file mode 100644 index 00000000000000..26a37c20e71dcb --- /dev/null +++ b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/actual.js @@ -0,0 +1,54 @@ +import { chipClasses } from '@mui/material/Chip'; + +('&.MuiChip-clickableColorPrimary'); +('&.MuiChip-clickableColorSecondary'); +('&.MuiChip-deletableColorPrimary'); +('&.MuiChip-deletableColorSecondary'); +('&.MuiChip-outlinedPrimary'); +('&.MuiChip-outlinedSecondary'); +('&.MuiChip-filledPrimary'); +('&.MuiChip-filledSecondary'); +('& .MuiChip-avatarSmall'); +('& .MuiChip-avatarMedium'); +('& .MuiChip-avatarColorPrimary'); +('& .MuiChip-avatarColorSecondary'); +('& .MuiChip-iconSmall'); +('& .MuiChip-iconMedium'); +('& .MuiChip-iconColorPrimary'); +('& .MuiChip-iconColorSecondary'); +('& .MuiChip-labelSmall'); +('& .MuiChip-labelMedium'); +('& .MuiChip-deleteIconSmall'); +('& .MuiChip-deleteIconMedium'); +('& .MuiChip-deleteIconColorPrimary'); +('& .MuiChip-deleteIconColorSecondary'); +('& .MuiChip-deleteIconFilledColorPrimary'); +('& .MuiChip-deleteIconFilledColorSecondary'); +('& .MuiChip-deleteIconOutlinedColorPrimary'); +('& .MuiChip-deleteIconOutlinedColorSecondary'); +`&.${chipClasses.clickableColorPrimary}`; +`&.${chipClasses.clickableColorSecondary}`; +`&.${chipClasses.deletableColorPrimary}`; +`&.${chipClasses.deletableColorSecondary}`; +`&.${chipClasses.outlinedPrimary}`; +`&.${chipClasses.outlinedSecondary}`; +`&.${chipClasses.filledPrimary}`; +`&.${chipClasses.filledSecondary}`; +`& .${chipClasses.avatarSmall}`; +`& .${chipClasses.avatarMedium}`; +`& .${chipClasses.avatarColorPrimary}`; +`& .${chipClasses.avatarColorSecondary}`; +`& .${chipClasses.iconSmall}`; +`& .${chipClasses.iconMedium}`; +`& .${chipClasses.iconColorPrimary}`; +`& .${chipClasses.iconColorSecondary}`; +`& .${chipClasses.labelSmall}`; +`& .${chipClasses.labelMedium}`; +`& .${chipClasses.deleteIconSmall}`; +`& .${chipClasses.deleteIconMedium}`; +`& .${chipClasses.deleteIconColorPrimary}`; +`& .${chipClasses.deleteIconColorSecondary}`; +`& .${chipClasses.deleteIconFilledColorPrimary}`; +`& .${chipClasses.deleteIconFilledColorSecondary}`; +`& .${chipClasses.deleteIconOutlinedColorPrimary}`; +`& .${chipClasses.deleteIconOutlinedColorSecondary}`; diff --git a/packages/mui-codemod/src/deprecations/chip-classes/test-cases/expected.css b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/expected.css new file mode 100644 index 00000000000000..6ca46e53bd5b2c --- /dev/null +++ b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/expected.css @@ -0,0 +1,103 @@ +.MuiChip-clickable.MuiChip-colorPrimary { + color: red; +} + +.MuiChip-clickable.MuiChip-colorSecondary { + color: red; +} + +.MuiChip-deletable.MuiChip-colorPrimary { + color: red; +} + +.MuiChip-deletable.MuiChip-colorSecondary { + color: red; +} + +.MuiChip-outlined.MuiChip-colorPrimary { + color: red; +} + +.MuiChip-outlined.MuiChip-colorSecondary { + color: red; +} + +.MuiChip-filled.MuiChip-colorPrimary { + color: red; +} + +.MuiChip-filled.MuiChip-colorSecondary { + color: red; +} + +.MuiChip-root.MuiChip-sizeSmall > .MuiChip-avatar { + color: red; +} + +.MuiChip-root.MuiChip-sizeMedium > .MuiChip-avatar { + color: red; +} + +.MuiChip-root.MuiChip-colorPrimary > .MuiChip-avatar { + color: red; +} + +.MuiChip-root.MuiChip-colorSecondary > .MuiChip-avatar { + color: red; +} + +.MuiChip-root.MuiChip-sizeSmall > .MuiChip-icon { + color: red; +} + +.MuiChip-root.MuiChip-sizeMedium > .MuiChip-icon { + color: red; +} + +.MuiChip-root.MuiChip-colorPrimary > .MuiChip-icon { + color: red; +} + +.MuiChip-root.MuiChip-colorSecondary > .MuiChip-icon { + color: red; +} + +.MuiChip-root.MuiChip-sizeSmall > .MuiChip-label { + color: red; +} + +.MuiChip-root.MuiChip-sizeMedium > .MuiChip-label { + color: red; +} + +.MuiChip-root.MuiChip-sizeSmall > .MuiChip-deleteIcon { + color: red; +} + +.MuiChip-root.MuiChip-sizeMedium > .MuiChip-deleteIcon { + color: red; +} + +.MuiChip-root.MuiChip-colorPrimary > .MuiChip-deleteIcon { + color: red; +} + +.MuiChip-root.MuiChip-colorSecondary > .MuiChip-deleteIcon { + color: red; +} + +.MuiChip-root.MuiChip-filled.MuiChip-colorPrimary > .MuiChip-deleteIcon { + color: red; +} + +.MuiChip-root.MuiChip-filled.MuiChip-colorSecondary > .MuiChip-deleteIcon { + color: red; +} + +.MuiChip-root.MuiChip-outlined.MuiChip-colorPrimary > .MuiChip-deleteIcon { + color: red; +} + +.MuiChip-root.MuiChip-outlined.MuiChip-colorSecondary > .MuiChip-deleteIcon { + color: red; +} diff --git a/packages/mui-codemod/src/deprecations/chip-classes/test-cases/expected.js b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/expected.js new file mode 100644 index 00000000000000..e3468e5166c6b5 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/chip-classes/test-cases/expected.js @@ -0,0 +1,54 @@ +import { chipClasses } from '@mui/material/Chip'; + +("&.MuiChip-clickable.MuiChip-colorPrimary"); +("&.MuiChip-clickable.MuiChip-colorSecondary"); +("&.MuiChip-deletable.MuiChip-colorPrimary"); +("&.MuiChip-deletable.MuiChip-colorSecondary"); +("&.MuiChip-outlined.MuiChip-colorPrimary"); +("&.MuiChip-outlined.MuiChip-colorSecondary"); +("&.MuiChip-filled.MuiChip-colorPrimary"); +("&.MuiChip-filled.MuiChip-colorSecondary"); +("&.MuiChip-sizeSmall > .MuiChip-avatar"); +("&.MuiChip-sizeMedium > .MuiChip-avatar"); +("&.MuiChip-colorPrimary > .MuiChip-avatar"); +("&.MuiChip-colorSecondary > .MuiChip-avatar"); +("&.MuiChip-sizeSmall > .MuiChip-icon"); +("&.MuiChip-sizeMedium > .MuiChip-icon"); +("&.MuiChip-colorPrimary > .MuiChip-icon"); +("&.MuiChip-colorSecondary > .MuiChip-icon"); +("&.MuiChip-sizeSmall > .MuiChip-label"); +("&.MuiChip-sizeMedium > .MuiChip-label"); +("&.MuiChip-sizeSmall > .MuiChip-deleteIcon"); +("&.MuiChip-sizeMedium > .MuiChip-deleteIcon"); +("&.MuiChip-colorPrimary > .MuiChip-deleteIcon"); +("&.MuiChip-colorSecondary > .MuiChip-deleteIcon"); +("&.MuiChip-filled.MuiChip-colorPrimary > .MuiChip-deleteIcon"); +("&.MuiChip-filled.MuiChip-colorSecondary > .MuiChip-deleteIcon"); +("&.MuiChip-outlined.MuiChip-colorPrimary > .MuiChip-deleteIcon"); +("&.MuiChip-outlined.MuiChip-colorSecondary > .MuiChip-deleteIcon"); +`&.${chipClasses.clickable}.${chipClasses.colorPrimary}`; +`&.${chipClasses.clickable}.${chipClasses.colorSecondary}`; +`&.${chipClasses.deletable}.${chipClasses.colorPrimary}`; +`&.${chipClasses.deletable}.${chipClasses.colorSecondary}`; +`&.${chipClasses.outlined}.${chipClasses.colorPrimary}`; +`&.${chipClasses.outlined}.${chipClasses.colorSecondary}`; +`&.${chipClasses.filled}.${chipClasses.colorPrimary}`; +`&.${chipClasses.filled}.${chipClasses.colorSecondary}`; +`&.${chipClasses.sizeSmall} > .${chipClasses.avatar}`; +`&.${chipClasses.sizeMedium} > .${chipClasses.avatar}`; +`&.${chipClasses.colorPrimary} > .${chipClasses.avatar}`; +`&.${chipClasses.colorSecondary} > .${chipClasses.avatar}`; +`&.${chipClasses.sizeSmall} > .${chipClasses.icon}`; +`&.${chipClasses.sizeMedium} > .${chipClasses.icon}`; +`&.${chipClasses.colorPrimary} > .${chipClasses.icon}`; +`&.${chipClasses.colorSecondary} > .${chipClasses.icon}`; +`&.${chipClasses.sizeSmall} > .${chipClasses.label}`; +`&.${chipClasses.sizeMedium} > .${chipClasses.label}`; +`&.${chipClasses.sizeSmall} > .${chipClasses.deleteIcon}`; +`&.${chipClasses.sizeMedium} > .${chipClasses.deleteIcon}`; +`&.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`; +`&.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`; +`&.${chipClasses.filled}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`; +`&.${chipClasses.filled}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`; +`&.${chipClasses.outlined}.${chipClasses.colorPrimary} > .${chipClasses.deleteIcon}`; +`&.${chipClasses.outlined}.${chipClasses.colorSecondary} > .${chipClasses.deleteIcon}`; diff --git a/packages/mui-material/src/Chip/chipClasses.ts b/packages/mui-material/src/Chip/chipClasses.ts index e7fb0fd51d1a43..48efe3fbe3cea6 100644 --- a/packages/mui-material/src/Chip/chipClasses.ts +++ b/packages/mui-material/src/Chip/chipClasses.ts @@ -24,71 +24,123 @@ export interface ChipClasses { disabled: string; /** Styles applied to the root element if `onClick` is defined or `clickable={true}`. */ clickable: string; - /** Styles applied to the root element if `onClick` and `color="primary"` is defined or `clickable={true}`. */ + /** Styles applied to the root element if `onClick` and `color="primary"` is defined or `clickable={true}`. + * @deprecated Combine the [.MuiChip-clickable](/material-ui/api/chip/#chip-classes-clickable) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ clickableColorPrimary: string; - /** Styles applied to the root element if `onClick` and `color="secondary"` is defined or `clickable={true}`. */ + /** Styles applied to the root element if `onClick` and `color="secondary"` is defined or `clickable={true}`. + * @deprecated Combine the [.MuiChip-clickable](/material-ui/api/chip/#chip-classes-clickable) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ clickableColorSecondary: string; /** Styles applied to the root element if `onDelete` is defined. */ deletable: string; - /** Styles applied to the root element if `onDelete` and `color="primary"` is defined. */ + /** Styles applied to the root element if `onDelete` and `color="primary"` is defined. + * @deprecated Combine the [.MuiChip-deletable](/material-ui/api/chip/#chip-classes-deletable) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ deletableColorPrimary: string; - /** Styles applied to the root element if `onDelete` and `color="secondary"` is defined. */ + /** Styles applied to the root element if `onDelete` and `color="secondary"` is defined. + * @deprecated Combine the [.MuiChip-deletable](/material-ui/api/chip/#chip-classes-deletable) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ deletableColorSecondary: string; /** Styles applied to the root element if `variant="outlined"`. */ outlined: string; /** Styles applied to the root element if `variant="filled"`. */ filled: string; - /** Styles applied to the root element if `variant="outlined"` and `color="primary"`. */ + /** Styles applied to the root element if `variant="outlined"` and `color="primary"`. + * @deprecated Combine the [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-outlined) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ outlinedPrimary: string; - /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */ + /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. + * @deprecated Combine the [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-outlined) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ outlinedSecondary: string; - /** Styles applied to the root element if `variant="filled"` and `color="primary"`. */ + /** Styles applied to the root element if `variant="filled"` and `color="primary"`. + * @deprecated Combine the [.MuiChip-filled](/material-ui/api/chip/#chip-classes-filled) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ filledPrimary: string; - /** Styles applied to the root element if `variant="filled"` and `color="secondary"`. */ + /** Styles applied to the root element if `variant="filled"` and `color="secondary"`. + * @deprecated Combine the [.MuiChip-filled](/material-ui/api/chip/#chip-classes-filled) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ filledSecondary: string; /** Styles applied to the avatar element. */ avatar: string; - /** Styles applied to the avatar element if `size="small"`. */ + /** Styles applied to the avatar element if `size="small"`. + * @deprecated Combine the [.MuiChip-avatar](/material-ui/api/chip/#chip-classes-avatar) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-sizeSmall) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ avatarSmall: string; - /** Styles applied to the avatar element if `size="medium"`. */ + /** Styles applied to the avatar element if `size="medium"`. + * @deprecated Combine the [.MuiChip-avatar](/material-ui/api/chip/#chip-classes-avatar) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-sizeMedium) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ avatarMedium: string; - /** Styles applied to the avatar element if `color="primary"`. */ + /** Styles applied to the avatar element if `color="primary"`. + * @deprecated Combine the [.MuiChip-avatar](/material-ui/api/chip/#chip-classes-avatar) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ avatarColorPrimary: string; - /** Styles applied to the avatar element if `color="secondary"`. */ + /** Styles applied to the avatar element if `color="secondary"`. + * @deprecated Combine the [.MuiChip-avatar](/material-ui/api/chip/#chip-classes-avatar) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ avatarColorSecondary: string; /** Styles applied to the icon element. */ icon: string; - /** Styles applied to the icon element if `size="small"`. */ + /** Styles applied to the icon element if `size="small"`. + * @deprecated Combine the [.MuiChip-icon](/material-ui/api/chip/#chip-classes-icon) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-sizeSmall) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ iconSmall: string; - /** Styles applied to the icon element if `size="medium"`. */ + /** Styles applied to the icon element if `size="medium"`. + * @deprecated Combine the [.MuiChip-icon](/material-ui/api/chip/#chip-classes-icon) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-sizeMedium) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ iconMedium: string; - /** Styles applied to the icon element if `color="primary"`. */ + /** Styles applied to the icon element if `color="primary"`. + * @deprecated Combine the [.MuiChip-icon](/material-ui/api/chip/#chip-classes-icon) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ iconColorPrimary: string; - /** Styles applied to the icon element if `color="secondary"`. */ + /** Styles applied to the icon element if `color="secondary"`. + * @deprecated Combine the [.MuiChip-icon](/material-ui/api/chip/#chip-classes-icon) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ iconColorSecondary: string; /** Styles applied to the label `span` element. */ label: string; - /** Styles applied to the label `span` element if `size="small"`. */ + /** Styles applied to the label `span` element if `size="small"`. + * @deprecated Combine the [.MuiChip-label](/material-ui/api/chip/#chip-classes-label) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-sizeSmall) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ labelSmall: string; - /** Styles applied to the label `span` element if `size="medium"`. */ + /** Styles applied to the label `span` element if `size="medium"`. + * @deprecated Combine the [.MuiChip-label](/material-ui/api/chip/#chip-classes-label) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-sizeMedium) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ labelMedium: string; /** Styles applied to the deleteIcon element. */ deleteIcon: string; - /** Styles applied to the deleteIcon element if `size="small"`. */ + /** Styles applied to the deleteIcon element if `size="small"`. + * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) and [.MuiChip-sizeSmall](/material-ui/api/chip/#chip-classes-sizeSmall) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ deleteIconSmall: string; - /** Styles applied to the deleteIcon element if `size="medium"`. */ + /** Styles applied to the deleteIcon element if `size="medium"`. + * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) and [.MuiChip-sizeMedium](/material-ui/api/chip/#chip-classes-sizeMedium) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ deleteIconMedium: string; - /** Styles applied to the deleteIcon element if `color="primary"`. */ + /** Styles applied to the deleteIcon element if `color="primary"`. + * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ deleteIconColorPrimary: string; - /** Styles applied to the deleteIcon element if `color="secondary"`. */ + /** Styles applied to the deleteIcon element if `color="secondary"`. + * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ deleteIconColorSecondary: string; - /** Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`. */ + /** Styles applied to the deleteIcon element if `color="primary"` and `variant="outlined"`. + * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) , [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-outlined) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ deleteIconOutlinedColorPrimary: string; - /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="outlined"`. */ + /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="outlined"`. + * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) , [.MuiChip-outlined](/material-ui/api/chip/#chip-classes-outlined) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ deleteIconOutlinedColorSecondary: string; - /** Styles applied to the deleteIcon element if `color="primary"` and `variant="filled"`. */ + /** Styles applied to the deleteIcon element if `color="primary"` and `variant="filled"`. + * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) , [.MuiChip-filled](/material-ui/api/chip/#chip-classes-filled) and [.MuiChip-colorPrimary](/material-ui/api/chip/#chip-classes-colorPrimary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ deleteIconFilledColorPrimary: string; - /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`. */ + /** Styles applied to the deleteIcon element if `color="secondary"` and `variant="filled"`. + * @deprecated Combine the [.MuiChip-deleteIcon](/material-ui/api/chip/#chip-classes-deleteIcon) , [.MuiChip-filled](/material-ui/api/chip/#chip-classes-filled) and [.MuiChip-colorSecondary](/material-ui/api/chip/#chip-classes-colorSecondary) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/) + */ deleteIconFilledColorSecondary: string; /** State class applied to the root element if keyboard focused. */ focusVisible: string;