diff --git a/docs/data/material/customization/theme-components/GlobalCss.js b/docs/data/material/customization/theme-components/GlobalCss.js index 566d40dd62bc74..e97adc197a30b3 100644 --- a/docs/data/material/customization/theme-components/GlobalCss.js +++ b/docs/data/material/customization/theme-components/GlobalCss.js @@ -7,15 +7,22 @@ const theme = createTheme({ // Style sheet name ⚛️ styleOverrides: { // Name of the rule - textPrimary: { - // Some CSS - background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', - borderRadius: 3, - border: 0, - color: 'white', - height: 48, - padding: '0 30px', - boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)', + root: { + variants: [ + { + props: { variant: 'text', color: 'primary' }, + style: { + // Some CSS + background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', + borderRadius: 3, + border: 0, + color: 'white', + height: 48, + padding: '0 30px', + boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)', + }, + }, + ], }, }, }, diff --git a/docs/data/material/customization/theme-components/GlobalCss.tsx b/docs/data/material/customization/theme-components/GlobalCss.tsx index 566d40dd62bc74..e97adc197a30b3 100644 --- a/docs/data/material/customization/theme-components/GlobalCss.tsx +++ b/docs/data/material/customization/theme-components/GlobalCss.tsx @@ -7,15 +7,22 @@ const theme = createTheme({ // Style sheet name ⚛️ styleOverrides: { // Name of the rule - textPrimary: { - // Some CSS - background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', - borderRadius: 3, - border: 0, - color: 'white', - height: 48, - padding: '0 30px', - boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)', + root: { + variants: [ + { + props: { variant: 'text', color: 'primary' }, + style: { + // Some CSS + background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', + borderRadius: 3, + border: 0, + color: 'white', + height: 48, + padding: '0 30px', + boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)', + }, + }, + ], }, }, }, diff --git a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md index 5f459c8c9baf07..67ea0efb2faafd 100644 --- a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md +++ b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md @@ -612,6 +612,133 @@ The following deprecated props have been removed from the `Badge` component: /> ``` +#### Button deprecated CSS classes removed + +Use the [button-classes codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#button-classes) below to migrate the code as described in the following section: + +```bash +npx @mui/codemod@latest deprecations/button-classes +``` + +The following deprecated `Button` CSS classes have been removed: + +- `textInherit` → use `.MuiButton-text.MuiButton-colorInherit` +- `textPrimary` → use `.MuiButton-text.MuiButton-colorPrimary` +- `textSecondary` → use `.MuiButton-text.MuiButton-colorSecondary` +- `textSuccess` → use `.MuiButton-text.MuiButton-colorSuccess` +- `textError` → use `.MuiButton-text.MuiButton-colorError` +- `textInfo` → use `.MuiButton-text.MuiButton-colorInfo` +- `textWarning` → use `.MuiButton-text.MuiButton-colorWarning` +- `outlinedInherit` → use `.MuiButton-outlined.MuiButton-colorInherit` +- `outlinedPrimary` → use `.MuiButton-outlined.MuiButton-colorPrimary` +- `outlinedSecondary` → use `.MuiButton-outlined.MuiButton-colorSecondary` +- `outlinedSuccess` → use `.MuiButton-outlined.MuiButton-colorSuccess` +- `outlinedError` → use `.MuiButton-outlined.MuiButton-colorError` +- `outlinedInfo` → use `.MuiButton-outlined.MuiButton-colorInfo` +- `outlinedWarning` → use `.MuiButton-outlined.MuiButton-colorWarning` +- `containedInherit` → use `.MuiButton-contained.MuiButton-colorInherit` +- `containedPrimary` → use `.MuiButton-contained.MuiButton-colorPrimary` +- `containedSecondary` → use `.MuiButton-contained.MuiButton-colorSecondary` +- `containedSuccess` → use `.MuiButton-contained.MuiButton-colorSuccess` +- `containedError` → use `.MuiButton-contained.MuiButton-colorError` +- `containedInfo` → use `.MuiButton-contained.MuiButton-colorInfo` +- `containedWarning` → use `.MuiButton-contained.MuiButton-colorWarning` +- `textSizeSmall` → use `.MuiButton-text.MuiButton-sizeSmall` +- `textSizeMedium` → use `.MuiButton-text.MuiButton-sizeMedium` +- `textSizeLarge` → use `.MuiButton-text.MuiButton-sizeLarge` +- `outlinedSizeSmall` → use `.MuiButton-outlined.MuiButton-sizeSmall` +- `outlinedSizeMedium` → use `.MuiButton-outlined.MuiButton-sizeMedium` +- `outlinedSizeLarge` → use `.MuiButton-outlined.MuiButton-sizeLarge` +- `containedSizeSmall` → use `.MuiButton-contained.MuiButton-sizeSmall` +- `containedSizeMedium` → use `.MuiButton-contained.MuiButton-sizeMedium` +- `containedSizeLarge` → use `.MuiButton-contained.MuiButton-sizeLarge` +- `iconSizeSmall` → use `.MuiButton-root.MuiButton-sizeSmall > .MuiButton-icon` +- `iconSizeMedium` → use `.MuiButton-root.MuiButton-sizeMedium > .MuiButton-icon` +- `iconSizeLarge` → use `.MuiButton-root.MuiButton-sizeLarge > .MuiButton-icon` + +If you were using these deprecated class names as `styleOverrides` keys in your theme, use the `variants` array in the `root` override instead: + +```diff + const theme = createTheme({ + components: { + MuiButton: { + styleOverrides: { +- textInherit: { color: 'inherit' }, +- textPrimary: { color: 'blue' }, +- textSecondary: { color: 'purple' }, +- textSuccess: { color: 'green' }, +- textError: { color: 'red' }, +- textInfo: { color: 'cyan' }, +- textWarning: { color: 'orange' }, +- outlinedInherit: { borderColor: 'inherit' }, +- outlinedPrimary: { borderColor: 'blue' }, +- outlinedSecondary: { borderColor: 'purple' }, +- outlinedSuccess: { borderColor: 'green' }, +- outlinedError: { borderColor: 'red' }, +- outlinedInfo: { borderColor: 'cyan' }, +- outlinedWarning: { borderColor: 'orange' }, +- containedInherit: { backgroundColor: 'inherit' }, +- containedPrimary: { backgroundColor: 'blue' }, +- containedSecondary: { backgroundColor: 'purple' }, +- containedSuccess: { backgroundColor: 'green' }, +- containedError: { backgroundColor: 'red' }, +- containedInfo: { backgroundColor: 'cyan' }, +- containedWarning: { backgroundColor: 'orange' }, +- textSizeSmall: { fontSize: '0.75rem' }, +- textSizeMedium: { fontSize: '0.875rem' }, +- textSizeLarge: { fontSize: '1rem' }, +- outlinedSizeSmall: { fontSize: '0.75rem' }, +- outlinedSizeMedium: { fontSize: '0.875rem' }, +- outlinedSizeLarge: { fontSize: '1rem' }, +- containedSizeSmall: { fontSize: '0.75rem' }, +- containedSizeMedium: { fontSize: '0.875rem' }, +- containedSizeLarge: { fontSize: '1rem' }, +- iconSizeSmall: { fontSize: '18px' }, +- iconSizeMedium: { fontSize: '20px' }, +- iconSizeLarge: { fontSize: '22px' }, ++ root: { ++ variants: [ ++ { props: { variant: 'text', color: 'inherit' }, style: { color: 'inherit' } }, ++ { props: { variant: 'text', color: 'primary' }, style: { color: 'blue' } }, ++ { props: { variant: 'text', color: 'secondary' }, style: { color: 'purple' } }, ++ { props: { variant: 'text', color: 'success' }, style: { color: 'green' } }, ++ { props: { variant: 'text', color: 'error' }, style: { color: 'red' } }, ++ { props: { variant: 'text', color: 'info' }, style: { color: 'cyan' } }, ++ { props: { variant: 'text', color: 'warning' }, style: { color: 'orange' } }, ++ { props: { variant: 'outlined', color: 'inherit' }, style: { borderColor: 'inherit' } }, ++ { props: { variant: 'outlined', color: 'primary' }, style: { borderColor: 'blue' } }, ++ { props: { variant: 'outlined', color: 'secondary' }, style: { borderColor: 'purple' } }, ++ { props: { variant: 'outlined', color: 'success' }, style: { borderColor: 'green' } }, ++ { props: { variant: 'outlined', color: 'error' }, style: { borderColor: 'red' } }, ++ { props: { variant: 'outlined', color: 'info' }, style: { borderColor: 'cyan' } }, ++ { props: { variant: 'outlined', color: 'warning' }, style: { borderColor: 'orange' } }, ++ { props: { variant: 'contained', color: 'inherit' }, style: { backgroundColor: 'inherit' } }, ++ { props: { variant: 'contained', color: 'primary' }, style: { backgroundColor: 'blue' } }, ++ { props: { variant: 'contained', color: 'secondary' }, style: { backgroundColor: 'purple' } }, ++ { props: { variant: 'contained', color: 'success' }, style: { backgroundColor: 'green' } }, ++ { props: { variant: 'contained', color: 'error' }, style: { backgroundColor: 'red' } }, ++ { props: { variant: 'contained', color: 'info' }, style: { backgroundColor: 'cyan' } }, ++ { props: { variant: 'contained', color: 'warning' }, style: { backgroundColor: 'orange' } }, ++ { props: { variant: 'text', size: 'small' }, style: { fontSize: '0.75rem' } }, ++ { props: { variant: 'text', size: 'medium' }, style: { fontSize: '0.875rem' } }, ++ { props: { variant: 'text', size: 'large' }, style: { fontSize: '1rem' } }, ++ { props: { variant: 'outlined', size: 'small' }, style: { fontSize: '0.75rem' } }, ++ { props: { variant: 'outlined', size: 'medium' }, style: { fontSize: '0.875rem' } }, ++ { props: { variant: 'outlined', size: 'large' }, style: { fontSize: '1rem' } }, ++ { props: { variant: 'contained', size: 'small' }, style: { fontSize: '0.75rem' } }, ++ { props: { variant: 'contained', size: 'medium' }, style: { fontSize: '0.875rem' } }, ++ { props: { variant: 'contained', size: 'large' }, style: { fontSize: '1rem' } }, ++ { props: { size: 'small' }, style: { '& .MuiButton-icon': { fontSize: '18px' } } }, ++ { props: { size: 'medium' }, style: { '& .MuiButton-icon': { fontSize: '20px' } } }, ++ { props: { size: 'large' }, style: { '& .MuiButton-icon': { fontSize: '22px' } } }, ++ ], ++ }, + }, + }, + }, + }); +``` + #### Divider deprecated props removed 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/button.json b/docs/pages/material-ui/api/button.json index 9873c89dcc0792..77345472c60fce 100644 --- a/docs/pages/material-ui/api/button.json +++ b/docs/pages/material-ui/api/button.json @@ -106,76 +106,6 @@ "description": "Styles applied to the root element if `variant=\"contained\"`.", "isGlobal": false }, - { - "key": "containedError", - "className": "MuiButton-containedError", - "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"error\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "containedInfo", - "className": "MuiButton-containedInfo", - "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"info\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "containedInherit", - "className": "MuiButton-containedInherit", - "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"inherit\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "containedPrimary", - "className": "MuiButton-containedPrimary", - "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"primary\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "containedSecondary", - "className": "MuiButton-containedSecondary", - "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"secondary\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "containedSizeLarge", - "className": "MuiButton-containedSizeLarge", - "description": "Styles applied to the root element if `size=\"large\"` and `variant=\"contained\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "containedSizeMedium", - "className": "MuiButton-containedSizeMedium", - "description": "Styles applied to the root element if `size=\"medium\"` and `variant=\"contained\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "containedSizeSmall", - "className": "MuiButton-containedSizeSmall", - "description": "Styles applied to the root element if `size=\"small\"` and `variant=\"contained\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "containedSuccess", - "className": "MuiButton-containedSuccess", - "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"success\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "containedWarning", - "className": "MuiButton-containedWarning", - "description": "Styles applied to the root element if `variant=\"contained\"` and `color=\"warning\"`.", - "isGlobal": false, - "isDeprecated": true - }, { "key": "disabled", "className": "Mui-disabled", @@ -212,27 +142,6 @@ "description": "Styles applied to the icon element if supplied", "isGlobal": false }, - { - "key": "iconSizeLarge", - "className": "MuiButton-iconSizeLarge", - "description": "Styles applied to the icon element if supplied and `size=\"large\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "iconSizeMedium", - "className": "MuiButton-iconSizeMedium", - "description": "Styles applied to the icon element if supplied and `size=\"medium\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "iconSizeSmall", - "className": "MuiButton-iconSizeSmall", - "description": "Styles applied to the icon element if supplied and `size=\"small\"`.", - "isGlobal": false, - "isDeprecated": true - }, { "key": "loading", "className": "MuiButton-loading", @@ -281,76 +190,6 @@ "description": "Styles applied to the root element if `variant=\"outlined\"`.", "isGlobal": false }, - { - "key": "outlinedError", - "className": "MuiButton-outlinedError", - "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"error\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "outlinedInfo", - "className": "MuiButton-outlinedInfo", - "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"info\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "outlinedInherit", - "className": "MuiButton-outlinedInherit", - "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"inherit\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "outlinedPrimary", - "className": "MuiButton-outlinedPrimary", - "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"primary\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "outlinedSecondary", - "className": "MuiButton-outlinedSecondary", - "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"secondary\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "outlinedSizeLarge", - "className": "MuiButton-outlinedSizeLarge", - "description": "Styles applied to the root element if `size=\"large\"` and `variant=\"outlined\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "outlinedSizeMedium", - "className": "MuiButton-outlinedSizeMedium", - "description": "Styles applied to the root element if `size=\"medium\"` and `variant=\"outlined\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "outlinedSizeSmall", - "className": "MuiButton-outlinedSizeSmall", - "description": "Styles applied to the root element if `size=\"small\"` and `variant=\"outlined\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "outlinedSuccess", - "className": "MuiButton-outlinedSuccess", - "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"success\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "outlinedWarning", - "className": "MuiButton-outlinedWarning", - "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"warning\"`.", - "isGlobal": false, - "isDeprecated": true - }, { "key": "root", "className": "MuiButton-root", @@ -386,76 +225,6 @@ "className": "MuiButton-text", "description": "Styles applied to the root element if `variant=\"text\"`.", "isGlobal": false - }, - { - "key": "textError", - "className": "MuiButton-textError", - "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"error\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "textInfo", - "className": "MuiButton-textInfo", - "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"info\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "textInherit", - "className": "MuiButton-textInherit", - "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"inherit\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "textPrimary", - "className": "MuiButton-textPrimary", - "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"primary\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "textSecondary", - "className": "MuiButton-textSecondary", - "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"secondary\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "textSizeLarge", - "className": "MuiButton-textSizeLarge", - "description": "Styles applied to the root element if `size=\"large\"` and `variant=\"text\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "textSizeMedium", - "className": "MuiButton-textSizeMedium", - "description": "Styles applied to the root element if `size=\"medium\"` and `variant=\"text\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "textSizeSmall", - "className": "MuiButton-textSizeSmall", - "description": "Styles applied to the root element if `size=\"small\"` and `variant=\"text\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "textSuccess", - "className": "MuiButton-textSuccess", - "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"success\"`.", - "isGlobal": false, - "isDeprecated": true - }, - { - "key": "textWarning", - "className": "MuiButton-textWarning", - "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"warning\"`.", - "isGlobal": false, - "isDeprecated": true } ], "spread": true, diff --git a/docs/src/components/action/MaterialVsCustomToggle.tsx b/docs/src/components/action/MaterialVsCustomToggle.tsx index 1a7d4cd6b95ee2..d3d4d62d4f73e9 100644 --- a/docs/src/components/action/MaterialVsCustomToggle.tsx +++ b/docs/src/components/action/MaterialVsCustomToggle.tsx @@ -31,7 +31,7 @@ export default function MaterialVsCustomToggle({ padding: '1px 8px', fontSize: theme.typography.pxToRem(12), }, - '& .MuiButton-outlinedPrimary': { + [`& .${buttonClasses.outlined}.${buttonClasses.colorPrimary}`]: { backgroundColor: alpha(theme.palette.primary[900], 0.5), }, })} diff --git a/docs/src/components/home/MaterialDesignComponents.tsx b/docs/src/components/home/MaterialDesignComponents.tsx index ef241db8b9ce32..88e8f8a5883b07 100644 --- a/docs/src/components/home/MaterialDesignComponents.tsx +++ b/docs/src/components/home/MaterialDesignComponents.tsx @@ -10,7 +10,7 @@ import { import { capitalize } from '@mui/material/utils'; import Alert from '@mui/material/Alert'; import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; +import Button, { buttonClasses } from '@mui/material/Button'; import Chip from '@mui/material/Chip'; import Tabs from '@mui/material/Tabs'; import Menu from '@mui/material/Menu'; @@ -228,6 +228,20 @@ export function buildTheme(): ThemeOptions { fontSize: '0.875rem', lineHeight: 24 / 16, textTransform: 'none', + variants: [ + { + props: { size: 'small' }, + style: { [`& .${buttonClasses.icon}`]: { fontSize: '0.875rem' } }, + }, + { + props: { size: 'medium' }, + style: { [`& .${buttonClasses.icon}`]: { fontSize: '0.875rem' } }, + }, + { + props: { size: 'large' }, + style: { [`& .${buttonClasses.icon}`]: { fontSize: '1rem' } }, + }, + ], }, sizeSmall: ({ theme }) => ({ padding: theme.spacing(0.5, 1), @@ -264,21 +278,6 @@ export function buildTheme(): ThemeOptions { borderColor: alpha(theme.palette.primary[300], 0.5), }), }), - iconSizeSmall: { - '& > *:nth-of-type(1)': { - fontSize: '0.875rem', - }, - }, - iconSizeMedium: { - '& > *:nth-of-type(1)': { - fontSize: '0.875rem', - }, - }, - iconSizeLarge: { - '& > *:nth-of-type(1)': { - fontSize: '1rem', - }, - }, }, }, MuiAlert: { diff --git a/docs/translations/api-docs/button/button.json b/docs/translations/api-docs/button/button.json index 76efbc84729490..d5f831042aa076 100644 --- a/docs/translations/api-docs/button/button.json +++ b/docs/translations/api-docs/button/button.json @@ -83,66 +83,6 @@ "nodeName": "the root element", "conditions": "variant=\"contained\"" }, - "containedError": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"error\"", - "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorError classes instead. See Migrating from deprecated APIs for more details." - }, - "containedInfo": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"info\"", - "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInfo classes instead. See Migrating from deprecated APIs for more details." - }, - "containedInherit": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"inherit\"", - "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInherit classes instead. See Migrating from deprecated APIs for more details." - }, - "containedPrimary": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"primary\"", - "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorPrimary classes instead. See Migrating from deprecated APIs for more details." - }, - "containedSecondary": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"secondary\"", - "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSecondary classes instead. See Migrating from deprecated APIs for more details." - }, - "containedSizeLarge": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "size=\"large\" and variant=\"contained\"", - "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-contained classes instead. See Migrating from deprecated APIs for more details." - }, - "containedSizeMedium": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "size=\"medium\" and variant=\"contained\"", - "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-contained classes instead. See Migrating from deprecated APIs for more details." - }, - "containedSizeSmall": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "size=\"small\" and variant=\"contained\"", - "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-contained classes instead. See Migrating from deprecated APIs for more details." - }, - "containedSuccess": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"success\"", - "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSuccess classes instead. See Migrating from deprecated APIs for more details." - }, - "containedWarning": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"contained\" and color=\"warning\"", - "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorWarning classes instead. See Migrating from deprecated APIs for more details." - }, "disabled": { "description": "State class applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -169,24 +109,6 @@ "conditions": "fullWidth={true}" }, "icon": { "description": "Styles applied to the icon element if supplied" }, - "iconSizeLarge": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the icon element", - "conditions": "supplied and size=\"large\"", - "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeLarge classes instead. See Migrating from deprecated APIs for more details." - }, - "iconSizeMedium": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the icon element", - "conditions": "supplied and size=\"medium\"", - "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeMedium classes instead. See Migrating from deprecated APIs for more details." - }, - "iconSizeSmall": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the icon element", - "conditions": "supplied and size=\"small\"", - "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeSmall classes instead. See Migrating from deprecated APIs for more details." - }, "loading": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -224,66 +146,6 @@ "nodeName": "the root element", "conditions": "variant=\"outlined\"" }, - "outlinedError": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"error\"", - "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorError classes instead. See Migrating from deprecated APIs for more details." - }, - "outlinedInfo": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"info\"", - "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInfo classes instead. See Migrating from deprecated APIs for more details." - }, - "outlinedInherit": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"inherit\"", - "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInherit classes instead. See Migrating from deprecated APIs for more details." - }, - "outlinedPrimary": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"primary\"", - "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorPrimary classes instead. See Migrating from deprecated APIs for more details." - }, - "outlinedSecondary": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"secondary\"", - "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorSecondary classes instead. See Migrating from deprecated APIs for more details." - }, - "outlinedSizeLarge": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "size=\"large\" and variant=\"outlined\"", - "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-outlined classes instead. See Migrating from deprecated APIs for more details." - }, - "outlinedSizeMedium": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "size=\"medium\" and variant=\"outlined\"", - "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-outlined classes instead. See Migrating from deprecated APIs for more details." - }, - "outlinedSizeSmall": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "size=\"small\" and variant=\"outlined\"", - "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-outlined classes instead. See Migrating from deprecated APIs for more details." - }, - "outlinedSuccess": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"success\"", - "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorSuccess classes instead. See Migrating from deprecated APIs for more details." - }, - "outlinedWarning": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"outlined\" and color=\"warning\"", - "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorWarning classes instead. See Migrating from deprecated APIs for more details." - }, "root": { "description": "Styles applied to the root element." }, "sizeLarge": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", @@ -309,66 +171,6 @@ "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", "conditions": "variant=\"text\"" - }, - "textError": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"error\"", - "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorError classes instead. See Migrating from deprecated APIs for more details." - }, - "textInfo": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"info\"", - "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInfo classes instead. See Migrating from deprecated APIs for more details." - }, - "textInherit": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"inherit\"", - "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInherit classes instead. See Migrating from deprecated APIs for more details." - }, - "textPrimary": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"primary\"", - "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorPrimary classes instead. See Migrating from deprecated APIs for more details." - }, - "textSecondary": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"secondary\"", - "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSecondary classes instead. See Migrating from deprecated APIs for more details." - }, - "textSizeLarge": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "size=\"large\" and variant=\"text\"", - "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-text classes instead. See Migrating from deprecated APIs for more details." - }, - "textSizeMedium": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "size=\"medium\" and variant=\"text\"", - "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-text classes instead. See Migrating from deprecated APIs for more details." - }, - "textSizeSmall": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "size=\"small\" and variant=\"text\"", - "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-text classes instead. See Migrating from deprecated APIs for more details." - }, - "textSuccess": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"success\"", - "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSuccess classes instead. See Migrating from deprecated APIs for more details." - }, - "textWarning": { - "description": "Styles applied to {{nodeName}} if {{conditions}}.", - "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"warning\"", - "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorWarning classes instead. See Migrating from deprecated APIs for more details." } } } diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index 35e8f9870b7fe4..24eb16d99c8a38 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -26,16 +26,14 @@ const useUtilityClasses = (ownerState) => { 'root', loading && 'loading', variant, - `${variant}${capitalize(color)}`, `size${capitalize(size)}`, - `${variant}Size${capitalize(size)}`, `color${capitalize(color)}`, disableElevation && 'disableElevation', fullWidth && 'fullWidth', loading && `loadingPosition${capitalize(loadingPosition)}`, ], - startIcon: ['icon', 'startIcon', `iconSize${capitalize(size)}`], - endIcon: ['icon', 'endIcon', `iconSize${capitalize(size)}`], + startIcon: ['icon', 'startIcon'], + endIcon: ['icon', 'endIcon'], loadingIndicator: ['loadingIndicator'], loadingWrapper: ['loadingWrapper'], }; @@ -85,9 +83,7 @@ const ButtonRoot = styled(ButtonBase, { return [ styles.root, styles[ownerState.variant], - styles[`${ownerState.variant}${capitalize(ownerState.color)}`], styles[`size${capitalize(ownerState.size)}`], - styles[`${ownerState.variant}Size${capitalize(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, @@ -334,11 +330,7 @@ const ButtonStartIcon = styled('span', { overridesResolver: (props, styles) => { const { ownerState } = props; - return [ - styles.startIcon, - ownerState.loading && styles.startIconLoadingStart, - styles[`iconSize${capitalize(ownerState.size)}`], - ]; + return [styles.startIcon, ownerState.loading && styles.startIconLoadingStart]; }, })(({ theme }) => ({ display: 'inherit', @@ -376,11 +368,7 @@ const ButtonEndIcon = styled('span', { overridesResolver: (props, styles) => { const { ownerState } = props; - return [ - styles.endIcon, - ownerState.loading && styles.endIconLoadingEnd, - styles[`iconSize${capitalize(ownerState.size)}`], - ]; + return [styles.endIcon, ownerState.loading && styles.endIconLoadingEnd]; }, })(({ theme }) => ({ display: 'inherit', diff --git a/packages/mui-material/src/Button/Button.test.js b/packages/mui-material/src/Button/Button.test.js index dc6619dc230068..e2b177b05fb6f6 100644 --- a/packages/mui-material/src/Button/Button.test.js +++ b/packages/mui-material/src/Button/Button.test.js @@ -29,26 +29,18 @@ describe('); const button = screen.getByRole('button'); expect(button).to.have.class(classes.root); expect(button).to.have.class(classes.text); - expect(button).to.have.class(classes.textPrimary); - expect(button).not.to.have.class(classes.textSecondary); + expect(button).to.have.class(classes.colorPrimary); + expect(button).not.to.have.class(classes.colorSecondary); expect(button).not.to.have.class(classes.outlined); - expect(button).not.to.have.class(classes.outlinedPrimary); - expect(button).not.to.have.class(classes.outlinedSecondary); expect(button).not.to.have.class(classes.contained); - expect(button).not.to.have.class(classes.containedPrimary); - expect(button).not.to.have.class(classes.containedSecondary); - expect(button).not.to.have.class(classes.textSizeSmall); - expect(button).not.to.have.class(classes.textSizeLarge); - expect(button).not.to.have.class(classes.outlinedSizeSmall); - expect(button).not.to.have.class(classes.outlinedSizeLarge); - expect(button).not.to.have.class(classes.containedSizeSmall); - expect(button).not.to.have.class(classes.containedSizeLarge); + expect(button).not.to.have.class(classes.sizeSmall); + expect(button).not.to.have.class(classes.sizeLarge); }); it('startIcon and endIcon should have icon class', () => { @@ -106,9 +98,10 @@ describe('