[Pagination] Migrate Pagination and PaginationItem to emotion (#25146)

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

@@ -23,6 +23,7 @@
  },
  "default": "'medium'"
  },
+ "sx": { "type": { "name": "object" } },
  "type": {
  "type": {
  "name": "enum",
@@ -70,6 +71,6 @@
  "filename": "/packages/material-ui/src/PaginationItem/PaginationItem.js",
  "inheritance": null,
  "demos": "<ul><li><a href=\"/components/pagination/\">Pagination</a></li></ul>",
- "styledComponent": false,
+ "styledComponent": true,
  "cssComponent": false
 }

docs/pages/api-docs/pagination.json

@@ -35,6 +35,7 @@
  },
  "default": "'medium'"
  },
+ "sx": { "type": { "name": "object" } },
  "variant": {
  "type": {
  "name": "union",
@@ -54,6 +55,6 @@
  "filename": "/packages/material-ui/src/Pagination/Pagination.js",
  "inheritance": null,
  "demos": "<ul><li><a href=\"/components/pagination/\">Pagination</a></li></ul>",
- "styledComponent": false,
+ "styledComponent": true,
  "cssComponent": false
 }

docs/translations/api-docs/pagination-item/pagination-item.json

@@ -9,6 +9,7 @@
  "selected": "If <code>true</code> the pagination item is selected.",
  "shape": "The shape of the pagination item.",
  "size": "The size of the component.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details.",
  "type": "The type of pagination item.",
  "variant": "The variant to use."
  },

docs/translations/api-docs/pagination/pagination.json

@@ -18,6 +18,7 @@
  "showLastButton": "If <code>true</code>, show the last-page button.",
  "siblingCount": "Number of always visible pages before and after the current page.",
  "size": "The size of the component.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/basics/#the-sx-prop\">`sx` page</a> for more details.",
  "variant": "The variant to use."
  },
  "classDescriptions": {

packages/material-ui/src/Autocomplete/Autocomplete.js

@@ -15,7 +15,7 @@ import useAutocomplete, { createFilterOptions } from '../useAutocomplete';
 import useThemeProps from '../styles/useThemeProps';
 import experimentalStyled from '../styles/experimentalStyled';
 import autocompleteClasses, { getAutocompleteUtilityClass } from './autocompleteClasses';
-import { capitalize } from '../utils';
+import capitalize from '../utils/capitalize';
 
 const overridesResolver = (props, styles) => {
  const { styleProps } = props;

packages/material-ui/src/Pagination/Pagination.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { OverridableStringUnion } from '@material-ui/types';
+import { SxProps } from '@material-ui/system';
 import { InternalStandardProps as StandardProps } from '@material-ui/core';
+import { Theme } from '../styles';
 import { UsePaginationItem, UsePaginationProps } from '../usePagination/usePagination';
 
 export interface PaginationRenderItemParams extends UsePaginationItem {
@@ -67,6 +69,10 @@ export interface PaginationProps
  * @default 'medium'
  */
  size?: 'small' | 'medium' | 'large';
+ /**
+ * The system prop that allows defining system overrides as well as additional CSS styles.
+ */
+ sx?: SxProps<Theme>;
  /**
  * The variant to use.
  * @default 'text'

packages/material-ui/src/Pagination/Pagination.js

@@ -1,39 +1,71 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { withStyles, useThemeVariants } from '../styles';
+import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled';
+import { deepmerge } from '@material-ui/utils';
+import useThemeProps from '../styles/useThemeProps';
+import paginationClasses, { getPaginationUtilityClass } from './paginationClasses';
 import usePagination from '../usePagination';
 import PaginationItem from '../PaginationItem';
+import experimentalStyled from '../styles/experimentalStyled';
 
-export const styles = {
- /* Styles applied to the root element. */
- root: {},
- /* Styles applied to the ul element. */
- ul: {
- display: 'flex',
- flexWrap: 'wrap',
- alignItems: 'center',
- padding: 0,
- margin: 0,
- listStyle: 'none',
- },
- /* Styles applied to the root element if `variant="outlined"`. */
- outlined: {},
- /* Styles applied to the root element if `variant="text"`. */
- text: {},
+const overridesResolver = (props, styles) => {
+ const { styleProps } = props;
+
+ return deepmerge(styles.root || {}, {
+ ...styles[styleProps.variant],
+ [`& .${paginationClasses.ul}`]: styles.ul,
+ });
+};
+
+const useUtilityClasses = (styleProps) => {
+ const { classes, variant } = styleProps;
+
+ const slots = {
+ root: ['root', variant],
+ ul: ['ul'],
+ };
+
+ return composeClasses(slots, getPaginationUtilityClass, classes);
 };
 
+const PaginationRoot = experimentalStyled(
+ 'nav',
+ {},
+ {
+ name: 'MuiPagination',
+ slot: 'Root',
+ overridesResolver,
+ },
+)({});
+
+const PaginationUl = experimentalStyled(
+ 'ul',
+ {},
+ {
+ name: 'MuiPagination',
+ slot: 'Ul',
+ },
+)({
+ display: 'flex',
+ flexWrap: 'wrap',
+ alignItems: 'center',
+ padding: 0,
+ margin: 0,
+ listStyle: 'none',
+});
+
 function defaultGetAriaLabel(type, page, selected) {
  if (type === 'page') {
  return `${selected ? '' : 'Go to '}page ${page}`;
  }
  return `Go to ${type} page`;
 }
 
-const Pagination = React.forwardRef(function Pagination(props, ref) {
+const Pagination = React.forwardRef(function Pagination(inProps, ref) {
+ const props = useThemeProps({ props: inProps, name: 'MuiPagination' });
  const {
  boundaryCount = 1,
- classes,
  className,
  color = 'standard',
  count = 1,
@@ -56,36 +88,36 @@ const Pagination = React.forwardRef(function Pagination(props, ref) {
 
  const { items } = usePagination({ ...props, componentName: 'Pagination' });
 
- const themeVariantsClasses = useThemeVariants(
- {
- ...props,
- boundaryCount,
- color,
- count,
- defaultPage,
- disabled,
- getItemAriaLabel,
- hideNextButton,
- hidePrevButton,
- renderItem,
- shape,
- showFirstButton,
- showLastButton,
- siblingCount,
- size,
- variant,
- },
- 'MuiPaginationItem',
- );
+ const styleProps = {
+ ...props,
+ boundaryCount,
+ color,
+ count,
+ defaultPage,
+ disabled,
+ getItemAriaLabel,
+ hideNextButton,
+ hidePrevButton,
+ renderItem,
+ shape,
+ showFirstButton,
+ showLastButton,
+ siblingCount,
+ size,
+ variant,
+ };
+
+ const classes = useUtilityClasses(styleProps);
 
  return (
- <nav
+ <PaginationRoot
  aria-label="pagination navigation"
- className={clsx(classes.root, classes[variant], themeVariantsClasses, className)}
+ className={clsx(classes.root, className)}
+ styleProps={styleProps}
  ref={ref}
  {...other}
  >
- <ul className={classes.ul}>
+ <PaginationUl className={classes.ul} styleProps={styleProps}>
  {items.map((item, index) => (
  <li key={index}>
  {renderItem({
@@ -98,8 +130,8 @@ const Pagination = React.forwardRef(function Pagination(props, ref) {
  })}
  </li>
  ))}
- </ul>
- </nav>
+ </PaginationUl>
+ </PaginationRoot>
  );
 });
 
@@ -208,6 +240,10 @@ Pagination.propTypes = {
  * @default 'medium'
  */
  size: PropTypes.oneOf(['large', 'medium', 'small']),
+ /**
+ * The system prop that allows defining system overrides as well as additional CSS styles.
+ */
+ sx: PropTypes.object,
  /**
  * The variant to use.
  * @default 'text'
@@ -218,4 +254,4 @@ Pagination.propTypes = {
  ]),
 };
 
-export default withStyles(styles, { name: 'MuiPagination' })(Pagination);
+export default Pagination;

packages/material-ui/src/Pagination/Pagination.test.js

@@ -1,26 +1,25 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { getClasses, createMount, describeConformance, createClientRender } from 'test/utils';
-import { createMuiTheme, ThemeProvider } from '../styles';
-import Pagination from './Pagination';
+import { createMount, describeConformanceV5, createClientRender } from 'test/utils';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
+import Pagination, { paginationClasses as classes } from '@material-ui/core/Pagination';
 
 describe('<Pagination />', () => {
- let classes;
- const mount = createMount();
  const render = createClientRender();
+ const mount = createMount();
 
- before(() => {
- classes = getClasses(<Pagination />);
- });
-
- describeConformance(<Pagination />, () => ({
+ describeConformanceV5(<Pagination />, () => ({
  classes,
  inheritComponent: 'nav',
+ render,
  mount,
+ muiName: 'MuiPagination',
  refInstanceof: window.HTMLElement,
-
- skip: ['componentProp'],
+ testDeepOverrides: { slotName: 'ul', slotClassName: classes.ul },
+ testVariantProps: { variant: 'foo' },
+ testStateOverrides: { prop: 'variant', value: 'outlined', styleKey: 'outlined' },
+ skip: ['componentProp', 'componentsProp'],
  }));
 
  it('should render', () => {

packages/material-ui/src/Pagination/index.d.ts

@@ -1,2 +1,5 @@
 export { default } from './Pagination';
 export * from './Pagination';
+
+export { default as paginationClasses } from './paginationClasses';
+export * from './paginationClasses';

packages/material-ui/src/Pagination/index.js

@@ -1 +1,4 @@
 export { default } from './Pagination';
+
+export { default as paginationClasses } from './paginationClasses';
+export * from './paginationClasses';

packages/material-ui/src/Pagination/paginationClasses.d.ts

@@ -0,0 +1,9 @@
+import { PaginationClassKey } from './Pagination';
+
+export type PaginationClasses = Record<PaginationClassKey, string>;
+
+declare const paginationClasses: PaginationClasses;
+
+export function getPaginationUtilityClass(slot: string): string;
+
+export default paginationClasses;

packages/material-ui/src/Pagination/paginationClasses.js

@@ -0,0 +1,14 @@
+import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled';
+
+export function getPaginationUtilityClass(slot) {
+ return generateUtilityClass('MuiPagination', slot);
+}
+
+const paginationClasses = generateUtilityClasses('MuiPagination', [
+ 'root',
+ 'ul',
+ 'outlined',
+ 'text',
+]);
+
+export default paginationClasses;

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

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { OverridableStringUnion } from '@material-ui/types';
 import { OverridableComponent, OverrideProps } from '@material-ui/core/OverridableComponent';
+import { SxProps } from '@material-ui/system';
+import { Theme } from '../styles';
 import { UsePaginationItem } from '../usePagination/usePagination';
 
 export interface PaginationItemPropsVariantOverrides {}
@@ -74,6 +76,10 @@ export interface PaginationItemTypeMap<P = {}, D extends React.ElementType = 'di
  * @default 'medium'
  */
  size?: 'small' | 'medium' | 'large';
+ /**
+ * The system prop that allows defining system overrides as well as additional CSS styles.
+ */
+ sx?: SxProps<Theme>;
  /**
  * The type of pagination item.
  * @default 'page'