refactor(Pagination): to use vanilla extract (#5665)

Author: matthprost

.changeset/hungry-laws-joke.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": minor
+---
+
+Refactor `<Pagination />` to use vanilla extract

packages/ui/src/components/Pagination/PaginationButtons.tsx

@@ -1,31 +1,12 @@
 'use client'
 
-import styled from '@emotion/styled'
 import { ArrowLeftIcon, ArrowRightIcon } from '@ultraviolet/icons'
 import { useCallback, useMemo } from 'react'
 import { Button } from '../Button'
 import { Stack } from '../Stack'
 import { Text } from '../Text'
 import { getPageNumbers } from './getPageNumbers'
-
-const PageNumbersContainer = styled(Stack)`
-  margin: 0 ${({ theme }) => theme.space['1']};
-`
-
-const PageButton = styled(Button, {
-  shouldForwardProp: prop => !['width'].includes(prop),
-})<{ width: string }>`
-  width: ${({ theme, width }) => (width === 'small' ? theme.sizing[400] : theme.sizing[500])};
-`
-
-const Ellipsis = styled(Text, {
-  shouldForwardProp: prop => !['width'].includes(prop),
-})<{ size: string }>`
-  align-content: center;
-  padding: ${({ theme }) => theme.space[1]};
-  height: ${({ theme, size }) => (size === 'small' ? theme.sizing[400] : theme.sizing[500])};
-  width: ${({ theme, size }) => (size === 'small' ? theme.sizing[400] : theme.sizing[500])};
-`
+import { ellipsisClass, pageButton, pageNumbersContainer } from './styles.css'
 
 type PaginationButtonsProps = {
   page: number
@@ -56,31 +37,31 @@ const MakeButton = ({
 }: MakeButtonProps) => (
   <>
     {hasEllipsisBefore ? (
-      <Ellipsis
+      <Text
         aria-label="ellipsis"
         as="span"
+        className={ellipsisClass[perPage ? 'small' : 'medium']}
         disabled={disabled}
         placement="center"
         prominence="default"
         sentiment="neutral"
-        size={perPage ? 'small' : 'medium'}
         variant="body"
       >
         ...
-      </Ellipsis>
+      </Text>
     ) : null}
-    <PageButton
+    <Button
       aria-current={pageNumber === page}
+      className={pageButton[perPage ? 'small' : 'medium']}
       disabled={disabled}
       onClick={handlePageClick(pageNumber)}
       sentiment={pageNumber === page ? 'primary' : 'neutral'}
       size={perPage ? 'small' : 'medium'}
       type="button"
       variant={pageNumber === page ? 'filled' : 'outlined'}
-      width={perPage ? 'small' : 'medium'}
     >
       {pageNumber}
-    </PageButton>
+    </Button>
   </>
 )
 
@@ -128,7 +109,7 @@ export const PaginationButtons = ({
           <ArrowLeftIcon />
         </Button>
       </Stack>
-      <PageNumbersContainer direction="row" gap={1}>
+      <Stack className={pageNumbersContainer} direction="row" gap={1}>
         {pageNumbersToDisplay.map((pageNumber, index) => (
           <MakeButton
             disabled={disabled}
@@ -145,7 +126,7 @@ export const PaginationButtons = ({
             perPage={perPage}
           />
         ))}
-      </PageNumbersContainer>
+      </Stack>
       <Stack gap={1}>
         <Button
           aria-label="Next"

packages/ui/src/components/Pagination/PerPage.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import styled from '@emotion/styled'
 import type { Dispatch, SetStateAction } from 'react'
 import { SelectInput } from '../SelectInput'
 import { Stack } from '../Stack'
@@ -25,11 +24,6 @@ const optionsItemsPerPage = [
   },
 ]
 
-const StyledSelectInput = styled(SelectInput)`
-  width: fit-content;
-  min-width: none;
-`
-
 type PerPageProps = {
   perPage: number
   onChangePerPage?: (perPage: number) => void
@@ -60,11 +54,14 @@ export const PerPage = ({
       <Text as="span" prominence="weak" sentiment="neutral" variant="body">
         {perPageText ?? 'Items per page'}
       </Text>
-      <StyledSelectInput
+      <SelectInput
         name="select-items-per-page"
         onChange={handleChange}
         options={optionsItemsPerPage}
         size="small"
+        style={{
+          width: 'fit-content',
+        }}
         value={perPage.toString()}
       />
       <Text as="span" prominence="weak" sentiment="neutral" variant="body">