[material-ui][PaginationItem] Deprecate classes for v6 (#40673)

mui · Jan 18, 2024 · 290f06e · 290f06e
1 parent 334f6c4
commit 290f06e
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 12 deletions.
diff --git 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
@@ -26,6 +26,16 @@
     "variant": { "description": "The variant to use." }
   },
   "classDescriptions": {
+    "colorPrimary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"primary\"</code>"
+    },
+    "colorSecondary": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>color=\"secondary\"</code>"
+    },
     "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": "<code>variant=\"outlined\"</code> and <code>color=\"primary\"</code>"
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"primary\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-outlined\">.MuiPaginationItem-outlined</a> and <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary\">.MuiPaginationItem-colorPrimary</a> classes instead."
     },
     "outlinedSecondary": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"secondary\"</code>"
+      "conditions": "<code>variant=\"outlined\"</code> and <code>color=\"secondary\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-outlined\">.MuiPaginationItem-outlined</a> and <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary\">.MuiPaginationItem-colorSecondary</a> 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": "<code>variant=\"text\"</code> and <code>color=\"primary\"</code>"
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"primary\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-text\">.MuiPaginationItem-text</a> and <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-colorPrimary\">.MuiPaginationItem-colorPrimary</a> classes instead."
     },
     "textSecondary": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"text\"</code> and <code>color=\"secondary\"</code>"
+      "conditions": "<code>variant=\"text\"</code> and <code>color=\"secondary\"</code>",
+      "deprecationInfo": "Combine the <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-text\">.MuiPaginationItem-text</a> and <a href=\"/material-ui/api/pagination-item/#pagination-item-classes-colorSecondary\">.MuiPaginationItem-colorSecondary</a> classes instead."
     }
   }
 }
diff --git 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
@@ -42,6 +42,18 @@ describe('<PaginationItem />', () => {
     expect(getByRole('button')).to.have.class(classes.selected);
   });
 
+  it('should add the `colorPrimary` class to the root element if `color="primary"`', () => {
+    const { getByRole } = render(<PaginationItem color="primary" />);
+
+    expect(getByRole('button')).to.have.class(classes.colorPrimary);
+  });
+
+  it('should add the `colorSecondary` class to the root element if `color="secondary"`', () => {
+    const { getByRole } = render(<PaginationItem color="secondary" />);
+
+    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(<PaginationItem disabled />);

diff --git 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;