[FX-5654] Migrate Pagination to TailwindCSS (#4496)

.changeset/nasty-avocados-shop.md

@@ -0,0 +1,6 @@
+---
+'@toptal/picasso-pagination': patch
+---
+
+- migrate Pagination to TailwindCSS
+- remove peer dependency on `@material-ui/core`

packages/base/Pagination/package.json

@@ -25,15 +25,13 @@
     "@toptal/picasso-button": "3.0.10",
     "@toptal/picasso-container": "2.0.0",
     "@toptal/picasso-typography": "3.0.0",
-    "@toptal/picasso-utils": "1.0.3",
-    "classnames": "^2.5.1"
+    "@toptal/picasso-utils": "1.0.3"
   },
   "sideEffects": [
     "**/styles.ts",
     "**/styles.js"
   ],
   "peerDependencies": {
-    "@material-ui/core": "4.12.4",
     "react": ">=16.12.0 < 19.0.0",
     "@toptal/picasso-tailwind-merge": "^1.0.1",
     "@toptal/picasso-tailwind": ">=2.7"

packages/base/Pagination/src/Pagination/Pagination.tsx

@@ -1,21 +1,14 @@
 /* eslint-disable react/no-array-index-key */
 import type { HTMLAttributes } from 'react'
 import React, { forwardRef, useMemo } from 'react'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type { BaseProps } from '@toptal/picasso-shared'
 import { Button } from '@toptal/picasso-button'
 import { Container } from '@toptal/picasso-container'
 import { Typography } from '@toptal/picasso-typography'
 
 import { getRange, ELLIPSIS } from './utils'
-import styles from './styles'
 import { PaginationButton } from '../PaginationButton'
 
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoPagination',
-})
-
 export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
   /** Value of the current highlighted page */
   activePage: number
@@ -44,7 +37,6 @@ export const Pagination = forwardRef<HTMLDivElement, Props>(function Pagination(
     variant,
     ...rest
   } = props
-  const classes = useStyles()
 
   const pages = useMemo(
     () => getRange({ activePage, totalPages, siblingCount }),
@@ -64,7 +56,7 @@ export const Pagination = forwardRef<HTMLDivElement, Props>(function Pagination(
   const pageButtons = pages.map((page, index) => {
     if (page === ELLIPSIS) {
       return (
-        <Container key={index} className={classes.ellipsis}>
+        <Container key={index} className='py-0 px-[0.5em] cursor-default'>
           <Typography size='xsmall' weight='semibold' color='black'>
             {ELLIPSIS}
           </Typography>

packages/base/Pagination/src/Pagination/__snapshots__/test.tsx.snap

@@ -38,7 +38,7 @@ exports[`Pagination renders 1`] = `
         </span>
       </button>
       <div
-        class="PicassoPagination-ellipsis"
+        class="py-0 px-[0.5em] cursor-default"
       >
         <p
           class="m-0 text-xxs text-black font-semibold"
@@ -122,7 +122,7 @@ exports[`Pagination renders 1`] = `
         </span>
       </button>
       <div
-        class="PicassoPagination-ellipsis"
+        class="py-0 px-[0.5em] cursor-default"
       >
         <p
           class="m-0 text-xxs text-black font-semibold"
@@ -204,7 +204,7 @@ exports[`Pagination renders disabled 1`] = `
         </span>
       </button>
       <div
-        class="PicassoPagination-ellipsis"
+        class="py-0 px-[0.5em] cursor-default"
       >
         <p
           class="m-0 text-xxs text-black font-semibold"
@@ -293,7 +293,7 @@ exports[`Pagination renders disabled 1`] = `
         </span>
       </button>
       <div
-        class="PicassoPagination-ellipsis"
+        class="py-0 px-[0.5em] cursor-default"
       >
         <p
           class="m-0 text-xxs text-black font-semibold"