Remove the CSS modules feature flag from Pagination component (#5997)

Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com>

Author: 2 people

.changeset/nasty-nails-appear.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Remove CSS modules flag from Pagination.

packages/react/src/Pagination/Pagination.tsx

@@ -1,18 +1,11 @@
 import React from 'react'
-import styled from 'styled-components'
 import Box from '../Box'
-import {get} from '../constants'
-import type {SxProp} from '../sx'
-import sx from '../sx'
 import {buildComponentData, buildPaginationModel, type PageDataProps} from './model'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
 import {viewportRanges} from '../hooks/useResponsiveValue'
-import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
-import {useFeatureFlag} from '../FeatureFlags'
 import {clsx} from 'clsx'
 import classes from './Pagination.module.css'
-
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
+import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 const getViewportRangesToHidePages = (showPages: PaginationProps['showPages']) => {
   if (showPages && typeof showPages !== 'boolean') {
@@ -28,124 +21,6 @@ const getViewportRangesToHidePages = (showPages: PaginationProps['showPages']) =
   }
 }
 
-const Page = toggleStyledComponent(
-  CSS_MODULES_FEATURE_FLAG,
-  'a',
-  styled.a`
-    display: inline-block;
-    min-width: 32px; /* primer.control.medium.size */
-    height: 32px; /* primer.control.medium.size */
-    padding: 0.5rem calc((2rem - 1.25rem) / 2); /* primer.control.medium.paddingInline.condensed primer.control.medium.paddingBlock */
-    font-style: normal;
-    line-height: 1;
-    color: ${get('colors.fg.default')};
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: middle;
-    cursor: pointer;
-    user-select: none;
-    text-decoration: none;
-
-    margin-right: ${get('space.1')};
-
-    &:last-child {
-      margin-right: 0;
-    }
-
-    background-color: transparent;
-    border-radius: ${get('radii.2')};
-    transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
-
-    &:hover,
-    &:focus {
-      text-decoration: none;
-      background-color: ${get('colors.actionListItem.default.hoverBg')};
-      outline: 0;
-      transition-duration: 0.1s;
-    }
-
-    &:focus-visible {
-      outline: 2px solid ${get('colors.accent.emphasis')};
-      outline-offset: -2px;
-    }
-
-    &:active {
-      border-color: ${get('colors.border.muted')};
-    }
-
-    &[rel='prev'],
-    &[rel='next'] {
-      color: ${get('colors.accent.fg')};
-    }
-
-    &[aria-current],
-    &[aria-current]:hover {
-      color: ${get('colors.fg.onEmphasis')};
-      background-color: ${get('colors.accent.emphasis')};
-      border-color: transparent;
-    }
-
-    &[aria-current]:focus-visible {
-      outline: 2px solid ${get('colors.accent.emphasis')};
-      outline-offset: -2px;
-      box-shadow: inset 0 0 0 3px ${get('colors.fg.onEmphasis')};
-    }
-
-    &[aria-hidden],
-    &[aria-hidden]:hover,
-    &[role='presentation'],
-    &[role='presentation']:hover {
-      color: ${get('colors.primer.fg.disabled')}; // check
-      cursor: default;
-      background-color: transparent;
-    }
-
-    @supports (clip-path: polygon(50% 0, 100% 50%, 50% 100%)) {
-      &[rel='prev']::before,
-      &[rel='next']::after {
-        display: inline-block;
-        width: 16px;
-        height: 16px;
-        vertical-align: text-bottom;
-        content: '';
-        background-color: currentColor;
-      }
-
-      // chevron-left
-      &[rel='prev']::before {
-        margin-right: ${get('space.1')};
-        clip-path: polygon(
-          9.8px 12.8px,
-          8.7px 12.8px,
-          4.5px 8.5px,
-          4.5px 7.5px,
-          8.7px 3.2px,
-          9.8px 4.3px,
-          6.1px 8px,
-          9.8px 11.7px,
-          9.8px 12.8px
-        );
-      }
-
-      // chevron-right
-      &[rel='next']::after {
-        margin-left: ${get('space.1')};
-        clip-path: polygon(
-          6.2px 3.2px,
-          7.3px 3.2px,
-          11.5px 7.5px,
-          11.5px 8.5px,
-          7.3px 12.8px,
-          6.2px 11.7px,
-          9.9px 8px,
-          6.2px 4.3px,
-          6.2px 3.2px
-        );
-      }
-    }
-  `,
-)
-
 export type PageProps = {
   /* Unique key for the page number */
   key: string
@@ -182,8 +57,6 @@ function usePaginationPages({
 }: UsePaginationPagesParameters) {
   const pageChange = React.useCallback((n: number) => (e: React.MouseEvent) => onPageChange(e, n), [onPageChange])
 
-  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
-
   const model = React.useMemo(() => {
     return buildPaginationModel(pageCount, currentPage, !!showPages, marginPageCount, surroundingPageCount)
   }, [pageCount, currentPage, showPages, marginPageCount, surroundingPageCount])
@@ -196,52 +69,19 @@ function usePaginationPages({
       }
 
       return (
-        <Page {...props} key={key} theme={theme} className={clsx(enabled && classes.Page)}>
+        // @ts-ignore giving me grief about children and "as" props
+        <BoxWithFallback as="a" key={key} theme={theme} className={clsx(classes.Page)} {...props}>
           {content}
-        </Page>
+        </BoxWithFallback>
       )
     })
-  }, [model, hrefBuilder, pageChange, renderPage, theme, enabled])
+  }, [model, hrefBuilder, pageChange, renderPage, theme])
 
   return children
 }
 
-const PaginationContainer = toggleStyledComponent(
-  CSS_MODULES_FEATURE_FLAG,
-  'nav',
-  styled.nav<SxProp>`
-    margin-top: 20px;
-    margin-bottom: 15px;
-    text-align: center;
-
-    ${
-      // Hides pages based on the viewport range passed to `showPages`
-      Object.keys(viewportRanges)
-        .map(viewportRangeKey => {
-          return `
-      @media (${viewportRanges[viewportRangeKey as keyof typeof viewportRanges]}) {
-        .TablePaginationSteps[data-hidden-viewport-ranges*='${viewportRangeKey}'] > *:not(:first-child):not(:last-child) {
-          display: none;
-        }
-
-        .TablePaginationSteps[data-hidden-viewport-ranges*='${viewportRangeKey}'] > *:first-child {
-          margin-inline-end: 0;
-        }
-
-        .TablePaginationSteps[data-hidden-viewport-ranges*='${viewportRangeKey}'] > *:last-child {
-          margin-inline-start: 0;
-        }
-      }
-    `
-        })
-        .join('')
-    }
-
-    ${sx};
-  `,
-)
-
 export type PaginationProps = {
+  className?: string
   theme?: Record<string, unknown>
   pageCount: number
   currentPage: number
@@ -254,7 +94,8 @@ export type PaginationProps = {
 }
 
 function Pagination({
-  theme,
+  className,
+  theme: _theme,
   pageCount,
   currentPage,
   onPageChange = noop,
@@ -266,7 +107,7 @@ function Pagination({
   ...rest
 }: PaginationProps) {
   const pageElements = usePaginationPages({
-    theme,
+    theme: _theme,
     pageCount,
     currentPage,
     onPageChange,
@@ -277,24 +118,21 @@ function Pagination({
     renderPage,
   })
 
-  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
-
   return (
-    <PaginationContainer
-      className={clsx(enabled && classes.PaginationContainer)}
+    <BoxWithFallback
+      as="nav"
+      className={clsx(classes.PaginationContainer, className)}
       aria-label="Pagination"
       {...rest}
-      theme={theme}
     >
       <Box
         display="inline-block"
-        theme={theme}
         className={classes.TablePaginationSteps}
         data-hidden-viewport-ranges={getViewportRangesToHidePages(showPages).join(' ')}
       >
         {pageElements}
       </Box>
-    </PaginationContainer>
+    </BoxWithFallback>
   )
 }