[material-ui][TablePagination] Add ability to change icons in TablePaginationActions using slots and slotProps (#33797)

pratikkarad · ZeeshanTamboli · web-flow · commit a5d6da7490c9 · 2023-12-14T10:25:06.000+05:30
Co-authored-by: ZeeshanTamboli &lt;zeeshan.tamboli@gmail.com&gt;
diff --git a/docs/pages/material-ui/api/table-pagination.json b/docs/pages/material-ui/api/table-pagination.json
@@ -60,7 +60,14 @@
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ actions?: { firstButton?: object, lastButton?: object, nextButton?: object, previousButton?: object }, select?: object }"
+        "description": "{ actions?: { firstButton?: object, firstButtonIcon?: object, lastButton?: object, lastButtonIcon?: object, nextButton?: object, nextButtonIcon?: object, previousButton?: object, previousButtonIcon?: object }, select?: object }"
+      },
+      "default": "{}"
+    },
+    "slots": {
+      "type": {
+        "name": "shape",
+        "description": "{ actions?: { firstButton?: elementType, firstButtonIcon?: elementType, lastButton?: elementType, lastButtonIcon?: elementType, nextButton?: elementType, nextButtonIcon?: elementType, previousButton?: elementType, previousButtonIcon?: elementType } }"
       },
       "default": "{}"
     },
diff --git a/docs/translations/api-docs/table-pagination/table-pagination.json b/docs/translations/api-docs/table-pagination/table-pagination.json
@@ -54,6 +54,9 @@
     "showFirstButton": { "description": "If <code>true</code>, show the first-page button." },
     "showLastButton": { "description": "If <code>true</code>, show the last-page button." },
     "slotProps": { "description": "The props used for each slot inside the TablePagination." },
+    "slots": {
+      "description": "The components used for each slot inside the TablePagination. Either a string to use a HTML element or a component."
+    },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     }
diff --git a/packages/mui-material/src/TablePagination/TablePagination.d.ts b/packages/mui-material/src/TablePagination/TablePagination.d.ts
@@ -142,6 +142,14 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
     actions?: TablePaginationActionsProps['slotProps'];
     select?: Partial<SelectProps>;
   };
+  /**
+   * The components used for each slot inside the TablePagination.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots?: {
+    actions?: TablePaginationActionsProps['slots'];
+  };
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
diff --git a/packages/mui-material/src/TablePagination/TablePagination.js b/packages/mui-material/src/TablePagination/TablePagination.js
@@ -158,7 +158,8 @@ const TablePagination = React.forwardRef(function TablePagination(inProps, ref)
     SelectProps = {},
     showFirstButton = false,
     showLastButton = false,
-    slotProps,
+    slotProps = {},
+    slots = {},
     ...other
   } = props;
 
@@ -253,7 +254,8 @@ const TablePagination = React.forwardRef(function TablePagination(inProps, ref)
           rowsPerPage={rowsPerPage}
           showFirstButton={showFirstButton}
           showLastButton={showLastButton}
-          slotProps={slotProps?.actions}
+          slotProps={slotProps.actions}
+          slots={slots.actions}
           getItemAriaLabel={getItemAriaLabel}
           disabled={disabled}
         />
@@ -423,12 +425,33 @@ TablePagination.propTypes /* remove-proptypes */ = {
   slotProps: PropTypes.shape({
     actions: PropTypes.shape({
       firstButton: PropTypes.object,
+      firstButtonIcon: PropTypes.object,
       lastButton: PropTypes.object,
+      lastButtonIcon: PropTypes.object,
       nextButton: PropTypes.object,
+      nextButtonIcon: PropTypes.object,
       previousButton: PropTypes.object,
+      previousButtonIcon: PropTypes.object,
     }),
     select: PropTypes.object,
   }),
+  /**
+   * The components used for each slot inside the TablePagination.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    actions: PropTypes.shape({
+      firstButton: PropTypes.elementType,
+      firstButtonIcon: PropTypes.elementType,
+      lastButton: PropTypes.elementType,
+      lastButtonIcon: PropTypes.elementType,
+      nextButton: PropTypes.elementType,
+      nextButtonIcon: PropTypes.elementType,
+      previousButton: PropTypes.elementType,
+      previousButtonIcon: PropTypes.elementType,
+    }),
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
diff --git a/packages/mui-material/src/TablePagination/TablePagination.spec.tsx b/packages/mui-material/src/TablePagination/TablePagination.spec.tsx
@@ -1,5 +1,24 @@
 import * as React from 'react';
 import TablePagination from '@mui/material/TablePagination';
+import SvgIcon from '@mui/material/SvgIcon';
+import IconButton, { IconButtonProps } from '@mui/material/IconButton';
+
+function SampleIcon() {
+  return (
+    <SvgIcon>
+      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+    </SvgIcon>
+  );
+}
+
+function CustomIconButton(props: IconButtonProps) {
+  const { children, ...other } = props;
+  return (
+    <IconButton {...other} color="secondary" size="large">
+      {children}
+    </IconButton>
+  );
+}
 
 function classesTest() {
   const defaultProps = {
@@ -13,3 +32,57 @@ function classesTest() {
   // @ts-expect-error desired
   <TablePagination classes={{ alignCenter: 'center' }} {...defaultProps} />;
 }
+
+// slots and slotProps type test
+<TablePagination
+  rowsPerPageOptions={[10, 25, 100]}
+  component="div"
+  count={1}
+  rowsPerPage={1}
+  page={1}
+  onPageChange={() => {}}
+  showFirstButton
+  showLastButton
+  slots={{
+    actions: {
+      firstButton: CustomIconButton,
+      lastButton: CustomIconButton,
+      nextButton: CustomIconButton,
+      previousButton: CustomIconButton,
+
+      firstButtonIcon: SampleIcon,
+      lastButtonIcon: SampleIcon,
+      nextButtonIcon: SampleIcon,
+      previousButtonIcon: SampleIcon,
+    },
+  }}
+  slotProps={{
+    actions: {
+      firstButton: {
+        disableFocusRipple: true,
+      },
+      lastButton: {
+        disableTouchRipple: true,
+      },
+      nextButton: {
+        disableRipple: true,
+      },
+      previousButton: {
+        centerRipple: true,
+      },
+
+      firstButtonIcon: {
+        fontSize: 'small',
+      },
+      lastButtonIcon: {
+        color: 'success',
+      },
+      nextButtonIcon: {
+        inheritViewBox: true,
+      },
+      previousButtonIcon: {
+        fill: 'currentColor',
+      },
+    },
+  }}
+/>;
diff --git a/packages/mui-material/src/TablePagination/TablePagination.test.js b/packages/mui-material/src/TablePagination/TablePagination.test.js
@@ -10,6 +10,12 @@ import TablePagination, { tablePaginationClasses as classes } from '@mui/materia
 import { inputClasses } from '@mui/material/Input';
 import { outlinedInputClasses } from '@mui/material/OutlinedInput';
 import { filledInputClasses } from '@mui/material/FilledInput';
+import IconButton, { iconButtonClasses } from '@mui/material/IconButton';
+import { svgIconClasses } from '@mui/material/SvgIcon';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import KeyboardDoubleArrowLeftRoundedIcon from '@mui/icons-material/KeyboardDoubleArrowLeftRounded';
+import KeyboardDoubleArrowRightRoundedIcon from '@mui/icons-material/KeyboardDoubleArrowRightRounded';
 
 describe('<TablePagination />', () => {
   const noop = () => {};
@@ -629,6 +635,44 @@ describe('<TablePagination />', () => {
           expect(nextButton).to.have.property('disabled', slotPropsDisabled);
         });
       });
+
+      it('should pass props to button icons', () => {
+        const { getByTestId } = render(
+          <table>
+            <TableFooter>
+              <TableRow>
+                <TablePagination
+                  count={1}
+                  page={0}
+                  onPageChange={noop}
+                  onRowsPerPageChange={noop}
+                  rowsPerPage={10}
+                  showFirstButton
+                  showLastButton
+                  slotProps={{
+                    actions: {
+                      firstButtonIcon: {
+                        fontSize: 'small',
+                      },
+                      lastButtonIcon: {
+                        fontSize: 'large',
+                      },
+                      previousButtonIcon: {
+                        fontSize: 'inherit',
+                      },
+                    },
+                  }}
+                />
+              </TableRow>
+            </TableFooter>
+          </table>,
+        );
+
+        expect(getByTestId('FirstPageIcon')).to.have.class(svgIconClasses.fontSizeSmall);
+        expect(getByTestId('LastPageIcon')).to.have.class(svgIconClasses.fontSizeLarge);
+        expect(getByTestId('KeyboardArrowLeftIcon')).to.have.class(svgIconClasses.fontSizeInherit);
+        expect(getByTestId('KeyboardArrowRightIcon')).to.have.class(svgIconClasses.fontSizeMedium);
+      });
     });
 
     describe('select', () => {
@@ -661,6 +705,88 @@ describe('<TablePagination />', () => {
     });
   });
 
+  describe('prop: slots', () => {
+    it('should render custom action buttons', () => {
+      function CustomIconButton(props) {
+        const { children, ...other } = props;
+        return (
+          <IconButton {...other} color="secondary">
+            {children}
+          </IconButton>
+        );
+      }
+
+      const { getByRole } = render(
+        <table>
+          <TableFooter>
+            <TableRow>
+              <TablePagination
+                count={1}
+                page={0}
+                onPageChange={noop}
+                onRowsPerPageChange={noop}
+                rowsPerPage={10}
+                showFirstButton
+                showLastButton
+                slots={{
+                  actions: {
+                    firstButton: CustomIconButton,
+                    lastButton: CustomIconButton,
+                    nextButton: CustomIconButton,
+                    previousButton: CustomIconButton,
+                  },
+                }}
+              />
+            </TableRow>
+          </TableFooter>
+        </table>,
+      );
+
+      const firstButton = getByRole('button', { name: 'Go to first page' });
+      const lastButton = getByRole('button', { name: 'Go to last page' });
+      const nextButton = getByRole('button', { name: 'Go to next page' });
+      const previousButton = getByRole('button', { name: 'Go to previous page' });
+
+      expect(firstButton).to.have.class(iconButtonClasses.colorSecondary);
+      expect(lastButton).to.have.class(iconButtonClasses.colorSecondary);
+      expect(nextButton).to.have.class(iconButtonClasses.colorSecondary);
+      expect(previousButton).to.have.class(iconButtonClasses.colorSecondary);
+    });
+
+    it('should render custom action button icons', () => {
+      const { getByTestId } = render(
+        <table>
+          <TableFooter>
+            <TableRow>
+              <TablePagination
+                count={1}
+                page={0}
+                onPageChange={noop}
+                onRowsPerPageChange={noop}
+                rowsPerPage={10}
+                showFirstButton
+                showLastButton
+                slots={{
+                  actions: {
+                    firstButtonIcon: KeyboardDoubleArrowLeftRoundedIcon,
+                    lastButtonIcon: KeyboardDoubleArrowRightRoundedIcon,
+                    previousButtonIcon: ArrowBackIcon,
+                    nextButtonIcon: ArrowForwardIcon,
+                  },
+                }}
+              />
+            </TableRow>
+          </TableFooter>
+        </table>,
+      );
+
+      expect(getByTestId('KeyboardDoubleArrowLeftRoundedIcon')).not.to.equal(null);
+      expect(getByTestId('KeyboardDoubleArrowRightRoundedIcon')).not.to.equal(null);
+      expect(getByTestId('ArrowBackIcon')).not.to.equal(null);
+      expect(getByTestId('ArrowForwardIcon')).not.to.equal(null);
+    });
+  });
+
   describe('duplicated keys', () => {
     it('should not raise a warning due to duplicated keys', () => {
       render(
diff --git a/packages/mui-material/src/TablePagination/TablePaginationActions.d.ts b/packages/mui-material/src/TablePagination/TablePaginationActions.d.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { IconButtonProps } from '../IconButton/IconButton';
+import { SvgIconProps } from '../SvgIcon';
 
 export interface TablePaginationActionsProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -41,7 +42,55 @@ export interface TablePaginationActionsProps extends React.HTMLAttributes<HTMLDi
     lastButton?: Partial<IconButtonProps>;
     nextButton?: Partial<IconButtonProps>;
     previousButton?: Partial<IconButtonProps>;
+    firstButtonIcon?: Partial<SvgIconProps>;
+    lastButtonIcon?: Partial<SvgIconProps>;
+    nextButtonIcon?: Partial<SvgIconProps>;
+    previousButtonIcon?: Partial<SvgIconProps>;
   };
+  slots?: TablePaginationActionsSlots;
+}
+
+export interface TablePaginationActionsSlots {
+  /**
+   * The component that renders the first button.
+   * @default IconButton
+   */
+  firstButton?: React.ElementType;
+  /**
+   * The component that renders the last button.
+   * @default IconButton
+   */
+  lastButton?: React.ElementType;
+  /**
+   * The component that renders the next button.
+   * @default IconButton
+   */
+  nextButton?: React.ElementType;
+  /**
+   * The component that renders the previous button.
+   * @default IconButton
+   */
+  previousButton?: React.ElementType;
+  /**
+   * The component that renders the first button icon.
+   * @default FirstPageIcon
+   */
+  firstButtonIcon?: React.ElementType;
+  /**
+   * The component that renders the last button icon.
+   * @default LastPageIcon
+   */
+  lastButtonIcon?: React.ElementType;
+  /**
+   * The component that renders the next button icon.
+   * @default KeyboardArrowRight
+   */
+  nextButtonIcon?: React.ElementType;
+  /**
+   * The component that renders the previous button icon.
+   * @default KeyboardArrowLeft
+   */
+  previousButtonIcon?: React.ElementType;
 }
 
 declare const TablePaginationActions: React.JSXElementConstructor<TablePaginationActionsProps>;
diff --git a/packages/mui-material/src/TablePagination/TablePaginationActions.js b/packages/mui-material/src/TablePagination/TablePaginationActions.js
