diff --git a/docs/pages/material-ui/api/pagination-item.json b/docs/pages/material-ui/api/pagination-item.json index 9ad1ff57e903b9..68f0269d48d3bb 100644 --- a/docs/pages/material-ui/api/pagination-item.json +++ b/docs/pages/material-ui/api/pagination-item.json @@ -65,6 +65,18 @@ "import { PaginationItem } from '@mui/material';" ], "classes": [ + { + "key": "colorPrimary", + "className": "MuiPaginationItem-colorPrimary", + "description": "Styles applied to the root element if `color=\"primary\"`.", + "isGlobal": false + }, + { + "key": "colorSecondary", + "className": "MuiPaginationItem-colorSecondary", + "description": "Styles applied to the root element if `color=\"secondary\"`.", + "isGlobal": false + }, { "key": "disabled", "className": "Mui-disabled", @@ -105,13 +117,15 @@ "key": "outlinedPrimary", "className": "MuiPaginationItem-outlinedPrimary", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "outlinedSecondary", "className": "MuiPaginationItem-outlinedSecondary", "description": "Styles applied to the root element if `variant=\"outlined\"` and `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "page", @@ -165,13 +179,15 @@ "key": "textPrimary", "className": "MuiPaginationItem-textPrimary", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"primary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true }, { "key": "textSecondary", "className": "MuiPaginationItem-textSecondary", "description": "Styles applied to the root element if `variant=\"text\"` and `color=\"secondary\"`.", - "isGlobal": false + "isGlobal": false, + "isDeprecated": true } ], "spread": true, diff --git a/docs/translations/api-docs/pagination-item/pagination-item.json b/docs/translations/api-docs/pagination-item/pagination-item.json index 87ef7ed5f4a339..4184e90ba4d8e1 100644 --- a/docs/translations/api-docs/pagination-item/pagination-item.json +++ b/docs/translations/api-docs/pagination-item/pagination-item.json @@ -26,6 +26,16 @@ "variant": { "description": "The variant to use." } }, "classDescriptions": { + "colorPrimary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"primary\"" + }, + "colorSecondary": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "color=\"secondary\"" + }, "disabled": { "description": "State class applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", @@ -55,12 +65,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 .MuiPaginationItem-outlined and .MuiPaginationItem-colorPrimary classes instead." }, "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 .MuiPaginationItem-outlined and .MuiPaginationItem-colorSecondary classes instead." }, "page": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", @@ -101,12 +113,14 @@ "textPrimary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"primary\"" + "conditions": "variant=\"text\" and color=\"primary\"", + "deprecationInfo": "Combine the .MuiPaginationItem-text and .MuiPaginationItem-colorPrimary classes instead." }, "textSecondary": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the root element", - "conditions": "variant=\"text\" and color=\"secondary\"" + "conditions": "variant=\"text\" and color=\"secondary\"", + "deprecationInfo": "Combine the .MuiPaginationItem-text and .MuiPaginationItem-colorSecondary classes instead." } } } diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.js b/packages/mui-material/src/PaginationItem/PaginationItem.js index 92d630f5f8b1e6..9be03580d12ca3 100644 --- a/packages/mui-material/src/PaginationItem/PaginationItem.js +++ b/packages/mui-material/src/PaginationItem/PaginationItem.js @@ -41,6 +41,7 @@ const useUtilityClasses = (ownerState) => { `size${capitalize(size)}`, variant, shape, + color !== 'standard' && `color${capitalize(color)}`, color !== 'standard' && `${variant}${capitalize(color)}`, disabled && 'disabled', selected && 'selected', diff --git a/packages/mui-material/src/PaginationItem/PaginationItem.test.js b/packages/mui-material/src/PaginationItem/PaginationItem.test.js index c469b912380481..8b772e8596589e 100644 --- a/packages/mui-material/src/PaginationItem/PaginationItem.test.js +++ b/packages/mui-material/src/PaginationItem/PaginationItem.test.js @@ -42,6 +42,18 @@ describe('', () => { expect(getByRole('button')).to.have.class(classes.selected); }); + it('should add the `colorPrimary` class to the root element if `color="primary"`', () => { + const { getByRole } = render(); + + expect(getByRole('button')).to.have.class(classes.colorPrimary); + }); + + it('should add the `colorSecondary` class to the root element if `color="secondary"`', () => { + const { getByRole } = render(); + + expect(getByRole('button')).to.have.class(classes.colorSecondary); + }); + describe('prop: disabled', () => { it('should add the `disabled` class to the root element if `disabled={true}`', () => { const { getByRole } = render(); diff --git a/packages/mui-material/src/PaginationItem/paginationItemClasses.ts b/packages/mui-material/src/PaginationItem/paginationItemClasses.ts index 0c9a885c24fd70..c1a2ed82a4f7b8 100644 --- a/packages/mui-material/src/PaginationItem/paginationItemClasses.ts +++ b/packages/mui-material/src/PaginationItem/paginationItemClasses.ts @@ -12,15 +12,27 @@ export interface PaginationItemClasses { sizeLarge: string; /** Styles applied to the root element if `variant="text"`. */ text: string; - /** Styles applied to the root element if `variant="text"` and `color="primary"`. */ + /** Styles applied to the root element if `variant="text"` and `color="primary"`. + * @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text) + * and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead. + */ textPrimary: string; - /** Styles applied to the root element if `variant="text"` and `color="secondary"`. */ + /** Styles applied to the root element if `variant="text"` and `color="secondary"`. + * @deprecated Combine the [.MuiPaginationItem-text](/material-ui/api/pagination-item/#pagination-item-classes-text) + * and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead. + */ textSecondary: string; /** Styles applied to the root element if `variant="outlined"`. */ outlined: 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 [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined) + * and [.MuiPaginationItem-colorPrimary](/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary) classes instead. + */ 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 [.MuiPaginationItem-outlined](/material-ui/api/pagination-item/#pagination-item-classes-outlined) + * and [.MuiPaginationItem-colorSecondary](/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary) classes instead. + */ outlinedSecondary: string; /** Styles applied to the root element if `rounded="true"`. */ rounded: string; @@ -38,6 +50,10 @@ export interface PaginationItemClasses { selected: string; /** Styles applied to the icon to display. */ icon: string; + /** Styles applied to the root element if `color="primary"`. */ + colorPrimary: string; + /** Styles applied to the root element if `color="secondary"`. */ + colorSecondary: string; } export type PaginationItemClassKey = keyof PaginationItemClasses; @@ -65,6 +81,8 @@ const paginationItemClasses: PaginationItemClasses = generateUtilityClasses('Mui 'disabled', 'selected', 'icon', + 'colorPrimary', + 'colorSecondary', ]); export default paginationItemClasses;