[PaginationItem] Custom variant (#22220)

[PaginationItem] Custom variant

docs/pages/api-docs/pagination-item.md

@@ -37,7 +37,7 @@ The `MuiPaginationItem` name can be used for providing [default props](/customiz
 | <span class="prop-name">shape</span> | <span class="prop-type">'circular'<br>&#124;&nbsp;'rounded'</span> | <span class="prop-default">'circular'</span> | The shape of the pagination item. |
 | <span class="prop-name">size</span> | <span class="prop-type">'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'</span> | <span class="prop-default">'medium'</span> | The size of the pagination item. |
 | <span class="prop-name">type</span> | <span class="prop-type">'end-ellipsis'<br>&#124;&nbsp;'first'<br>&#124;&nbsp;'last'<br>&#124;&nbsp;'next'<br>&#124;&nbsp;'page'<br>&#124;&nbsp;'previous'<br>&#124;&nbsp;'start-ellipsis'</span> | <span class="prop-default">'page'</span> | The type of pagination item. |
-| <span class="prop-name">variant</span> | <span class="prop-type">'outlined'<br>&#124;&nbsp;'text'</span> | <span class="prop-default">'text'</span> | The pagination item variant. |
+| <span class="prop-name">variant</span> | <span class="prop-type">'outlined'<br>&#124;&nbsp;'text'<br>&#124;&nbsp;string</span> | <span class="prop-default">'text'</span> | The pagination item variant. |
 
 The `ref` is forwarded to the root element.
 
@@ -51,9 +51,10 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">page</span> | <span class="prop-name">.MuiPaginationItem-page</span> | Styles applied to the root element if `type="page"`.
 | <span class="prop-name">sizeSmall</span> | <span class="prop-name">.MuiPaginationItem-sizeSmall</span> | Styles applied applied to the root element if `size="small"`.
 | <span class="prop-name">sizeLarge</span> | <span class="prop-name">.MuiPaginationItem-sizeLarge</span> | Styles applied applied to the root element if `size="large"`.
+| <span class="prop-name">text</span> | <span class="prop-name">.MuiPaginationItem-text</span> | Styles applied to the root element if `variant="text"`.
 | <span class="prop-name">textPrimary</span> | <span class="prop-name">.MuiPaginationItem-textPrimary</span> | Styles applied to the root element if `variant="text"` and `color="primary"`.
 | <span class="prop-name">textSecondary</span> | <span class="prop-name">.MuiPaginationItem-textSecondary</span> | Styles applied to the root element if `variant="text"` and `color="secondary"`.
-| <span class="prop-name">outlined</span> | <span class="prop-name">.MuiPaginationItem-outlined</span> | Styles applied to the root element if `outlined="true"`.
+| <span class="prop-name">outlined</span> | <span class="prop-name">.MuiPaginationItem-outlined</span> | Styles applied to the root element if `variant="outlined"`.
 | <span class="prop-name">outlinedPrimary</span> | <span class="prop-name">.MuiPaginationItem-outlinedPrimary</span> | Styles applied to the root element if `variant="outlined"` and `color="primary"`.
 | <span class="prop-name">outlinedSecondary</span> | <span class="prop-name">.MuiPaginationItem-outlinedSecondary</span> | Styles applied to the root element if `variant="outlined"` and `color="secondary"`.
 | <span class="prop-name">rounded</span> | <span class="prop-name">.MuiPaginationItem-rounded</span> | Styles applied to the root element if `rounded="true"`.

packages/material-ui-lab/src/PaginationItem/PaginationItem.d.ts

@@ -1,7 +1,11 @@
 import * as React from 'react';
+import { OverridableStringUnion } from '@material-ui/types';
 import { OverridableComponent, OverrideProps } from '@material-ui/core/OverridableComponent';
 import { UsePaginationItem } from '../Pagination/usePagination';
 
+export interface PaginationItemPropsVariantOverrides {}
+export type PaginationItemVariantDefaults = Record<'text' | 'outlined', true>;
+
 export interface PaginationItemTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P & {
     /**
@@ -35,7 +39,10 @@ export interface PaginationItemTypeMap<P = {}, D extends React.ElementType = 'di
     /**
      * The pagination item variant.
      */
-    variant?: 'text' | 'outlined';
+    variant?: OverridableStringUnion<
+      PaginationItemVariantDefaults,
+      PaginationItemPropsVariantOverrides
+    >;
   };
   defaultComponent: D;
   classKey: PaginationItemClassKey;
@@ -58,6 +65,7 @@ export type PaginationItemClassKey =
   | 'page'
   | 'sizeSmall'
   | 'sizeLarge'
+  | 'text'
   | 'textPrimary'
   | 'textSecondary'
   | 'outlined'

packages/material-ui-lab/src/PaginationItem/PaginationItem.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { useThemeVariants } from '@material-ui/styles';
 import { fade, useTheme, withStyles } from '@material-ui/core/styles';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import { capitalize } from '@material-ui/core/utils';
@@ -87,6 +88,8 @@ export const styles = (theme) => ({
       fontSize: theme.typography.pxToRem(22),
     },
   },
+  /* Styles applied to the root element if `variant="text"`. */
+  text: {},
   /* Styles applied to the root element if `variant="text"` and `color="primary"`. */
   textPrimary: {
     '&$selected': {
@@ -121,7 +124,7 @@ export const styles = (theme) => ({
       },
     },
   },
-  /* Styles applied to the root element if `outlined="true"`. */
+  /* Styles applied to the root element if `variant="outlined"`. */
   outlined: {
     border: `1px solid ${
       theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
@@ -214,6 +217,20 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) {
     ...other
   } = props;
 
+  const themeVariantsClasses = useThemeVariants(
+    {
+      ...props,
+      color,
+      disabled,
+      selected,
+      shape,
+      size,
+      type,
+      variant,
+    },
+    'MuiPaginationItem',
+  );
+
   const theme = useTheme();
 
   const normalizedIcons =
@@ -260,6 +277,7 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) {
           [classes.selected]: selected,
           [classes[`size${capitalize(size)}`]]: size !== 'medium',
         },
+        themeVariantsClasses,
         className,
       )}
       {...other}
@@ -332,7 +350,10 @@ PaginationItem.propTypes = {
   /**
    * The pagination item variant.
    */
-  variant: PropTypes.oneOf(['outlined', 'text']),
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['outlined', 'text']),
+    PropTypes.string,
+  ]),
 };
 
 export default withStyles(styles, { name: 'MuiPaginationItem' })(PaginationItem);

packages/material-ui-styles/src/makeStyles/makeStyles.js

@@ -255,6 +255,7 @@ export default function makeStyles(stylesOrCreator, options = {}) {
         'MuiTypography',
         'MuiAlert',
         'MuiPagination',
+        'MuiPaginationItem',
       ];
 
       if (