From ed7c805fc61fa9b66fe30568098d8586d047822e Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 2 Jul 2025 20:51:12 +0000 Subject: [PATCH 1/7] Convert DataTable.Pagination to CSS modules --- .../react/src/DataTable/Pagination.module.css | 135 ++++++++++++++++ packages/react/src/DataTable/Pagination.tsx | 146 ++---------------- .../components/ButtonReset.module.css | 17 ++ .../src/internal/components/ButtonReset.tsx | 37 ++--- 4 files changed, 181 insertions(+), 154 deletions(-) create mode 100644 packages/react/src/DataTable/Pagination.module.css create mode 100644 packages/react/src/internal/components/ButtonReset.module.css diff --git a/packages/react/src/DataTable/Pagination.module.css b/packages/react/src/DataTable/Pagination.module.css new file mode 100644 index 00000000000..7c5efd4ff33 --- /dev/null +++ b/packages/react/src/DataTable/Pagination.module.css @@ -0,0 +1,135 @@ +.TablePagination { + display: flex; + align-items: center; + justify-content: space-between; + column-gap: 1rem; + width: 100%; + grid-area: footer; + padding: var(--base-size-8) var(--base-size-16); + border: var(--borderWidth-thin) solid var(--borderColor-default); + border-top-width: 0; + border-end-start-radius: var(--borderRadius-medium); + border-end-end-radius: var(--borderRadius-medium); +} + +@media ((max-width: calc(768px - 0.02px))) { + .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:not(:first-child):not(:last-child) { + display: none; + } + + .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:first-child { + margin-inline-end: 0; + } + + .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:last-child { + margin-inline-start: 0; + } +} + +@media ((min-width: 768px)) { + .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:not(:first-child):not(:last-child) { + display: none; + } + + .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:first-child { + margin-inline-end: 0; + } + + .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:last-child { + margin-inline-start: 0; + } +} + +@media ((min-width: 1400px)) { + .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:not(:first-child):not(:last-child) { + display: none; + } + + .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:first-child { + margin-inline-end: 0; + } + + .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:last-child { + margin-inline-start: 0; + } +} + +.TablePaginationRange { + color: var(--fgColor-muted); + font-size: var(--text-body-size-small); + margin: 0; +} + +.TablePaginationSteps { + display: flex; + align-items: center; + flex-wrap: wrap; + list-style: none; + color: var(--fgColor-default); + font-size: var(--text-body-size-medium); + margin: 0; + padding: 0; +} + +.TablePaginationStep:first-of-type { + margin-right: var(--base-size-16); +} + +.TablePaginationStep:last-of-type { + margin-left: var(--base-size-16); +} + +.TablePaginationAction { + display: flex; + align-items: center; + color: var(--fgColor-muted); + font-size: var(--text-body-size-medium); + line-height: calc(20 / 14); + user-select: none; + padding: var(--base-size-8); + border-radius: var(--borderRadius-medium); +} + +.TablePaginationAction[data-has-page] { + color: var(--fgColor-accent); +} + +.TablePaginationPage { + min-width: 2rem; + min-height: 2rem; + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-body-size-medium); + line-height: calc(20 / 14); + user-select: none; + border-radius: var(--borderRadius-medium); + padding: var(--base-size-8) calc((var(--base-size-32) - var(--base-size-20)) / 2); /* primer.control.medium.paddingInline.condensed primer.control.medium.paddingBlock */ +} + +.TablePaginationAction[data-has-page]:hover, +.TablePaginationAction[data-has-page]:focus, +.TablePaginationPage:hover, +.TablePaginationPage:focus { + background-color: var(--control-transparent-bgColor-hover); +} + +.TablePaginationPage[data-active='true'] { + background-color: var(--bgColor-accent-emphasis); + color: var(--fgColor-onEmphasis); +} + +.TablePaginationPage[data-active='true']:focus-visible { + outline: 2px solid var(--bgColor-accent-emphasis); + outline-offset: -2px; + box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis); +} + +.TablePaginationTruncationStep { + display: flex; + align-items: center; + justify-content: center; + min-width: 2rem; + min-height: 2rem; + user-select: none; +} diff --git a/packages/react/src/DataTable/Pagination.tsx b/packages/react/src/DataTable/Pagination.tsx index 7be60fba550..c58bf6375ec 100644 --- a/packages/react/src/DataTable/Pagination.tsx +++ b/packages/react/src/DataTable/Pagination.tsx @@ -1,8 +1,6 @@ import {ChevronLeftIcon, ChevronRightIcon} from '@primer/octicons-react' import type React from 'react' import {useCallback, useMemo, useState} from 'react' -import styled from 'styled-components' -import {get} from '../constants' import {Button} from '../internal/components/ButtonReset' import {LiveRegion, LiveRegionOutlet, Message} from '../internal/components/LiveRegion' import {VisuallyHidden} from '../VisuallyHidden' @@ -10,123 +8,8 @@ import {warning} from '../utils/warning' import type {ResponsiveValue} from '../hooks/useResponsiveValue' import {viewportRanges} from '../hooks/useResponsiveValue' import {buildPaginationModel} from '../Pagination/model' - -const StyledPagination = styled.nav` - display: flex; - align-items: center; - justify-content: space-between; - column-gap: 1rem; - width: 100%; - grid-area: footer; - padding: 0.5rem 1rem; - border: 1px solid ${get('colors.border.default')}; - border-top-width: 0; - border-end-start-radius: 6px; - border-end-end-radius: 6px; - - .TablePaginationRange { - color: ${get('colors.fg.muted')}; - font-size: 0.75rem; - margin: 0; - } - - .TablePaginationSteps { - display: flex; - align-items: center; - flex-wrap: wrap; - list-style: none; - color: ${get('colors.fg.default')}; - font-size: 0.875rem; - margin: 0; - padding: 0; - } - - .TablePaginationStep:first-of-type { - margin-right: 1rem; - } - - .TablePaginationStep:last-of-type { - margin-left: 1rem; - } - - .TablePaginationAction { - display: flex; - align-items: center; - color: ${get('colors.fg.muted')}; - font-size: 0.875rem; - line-height: calc(20 / 14); - user-select: none; - padding: 0.5rem; - border-radius: 6px; - } - - .TablePaginationAction[data-has-page] { - color: ${get('colors.accent.fg')}; - } - - .TablePaginationPage { - min-width: 2rem; - min-height: 2rem; - display: flex; - align-items: center; - justify-content: center; - font-size: 0.875rem; - line-height: calc(20 / 14); - user-select: none; - border-radius: 6px; - padding: 0.5rem calc((2rem - 1.25rem) / 2); /* primer.control.medium.paddingInline.condensed primer.control.medium.paddingBlock */ - } - - .TablePaginationAction[data-has-page]:hover, - .TablePaginationAction[data-has-page]:focus, - .TablePaginationPage:hover, - .TablePaginationPage:focus { - background-color: ${get('colors.actionListItem.default.hoverBg')}; - } - - .TablePaginationPage[data-active='true'] { - background-color: ${get('colors.accent.emphasis')}; - color: ${get('colors.fg.onEmphasis')}; - } - - .TablePaginationPage[data-active='true']:focus-visible { - outline: 2px solid var(--bgColor-accent-emphasis); - outline-offset: -2px; - box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis); - } - - .TablePaginationTruncationStep { - display: flex; - align-items: center; - justify-content: center; - min-width: 2rem; - min-height: 2rem; - user-select: none; - } - - ${ - // 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('') - } -` +import classes from './Pagination.module.css' +import {clsx} from 'clsx' export type PaginationProps = Omit, 'onChange'> & { /** @@ -218,12 +101,15 @@ export function Pagination({ return ( - + ) } @@ -294,7 +180,7 @@ function Range({pageStart, pageEnd, totalCount}: RangeProps) { return ( <> -

+

{start}  through  @@ -306,14 +192,14 @@ function Range({pageStart, pageEnd, totalCount}: RangeProps) { function TruncationStep() { return ( -

) } function Step({children}: React.PropsWithChildren) { - return
  • {children}
    • + return
  • {children}
    • } type PageProps = React.PropsWithChildren<{ @@ -324,7 +210,7 @@ type PageProps = React.PropsWithChildren<{ function Page({active, children, onClick}: PageProps) { return ( + ) +} From a9015bce9d47ff0c6f141418ccfa09e58a3d28e3 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 2 Jul 2025 13:52:32 -0700 Subject: [PATCH 2/7] Create polite-pandas-tie.md --- .changeset/polite-pandas-tie.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/polite-pandas-tie.md diff --git a/.changeset/polite-pandas-tie.md b/.changeset/polite-pandas-tie.md new file mode 100644 index 00000000000..749a4f82ae0 --- /dev/null +++ b/.changeset/polite-pandas-tie.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +chore(DataTable.Pagination): Convert DataTable.Pagination to CSS modules From 2c1d39a91f4169605271871fff63f9626f74ee3e Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 2 Jul 2025 20:57:02 +0000 Subject: [PATCH 3/7] Disabling lint errors --- packages/react/src/DataTable/Pagination.module.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react/src/DataTable/Pagination.module.css b/packages/react/src/DataTable/Pagination.module.css index 7c5efd4ff33..e56f7f787b2 100644 --- a/packages/react/src/DataTable/Pagination.module.css +++ b/packages/react/src/DataTable/Pagination.module.css @@ -84,6 +84,7 @@ align-items: center; color: var(--fgColor-muted); font-size: var(--text-body-size-medium); + /* stylelint-disable-next-line primer/typography */ line-height: calc(20 / 14); user-select: none; padding: var(--base-size-8); @@ -101,6 +102,7 @@ align-items: center; justify-content: center; font-size: var(--text-body-size-medium); + /* stylelint-disable-next-line primer/typography */ line-height: calc(20 / 14); user-select: none; border-radius: var(--borderRadius-medium); @@ -122,6 +124,7 @@ .TablePaginationPage[data-active='true']:focus-visible { outline: 2px solid var(--bgColor-accent-emphasis); outline-offset: -2px; + /* stylelint-disable-next-line primer/box-shadow */ box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis); } From 478a7b875fa9eaa4e9a1ce8de0c0c8876d8e1f45 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 2 Jul 2025 14:02:18 -0700 Subject: [PATCH 4/7] change to minor --- .changeset/polite-pandas-tie.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/polite-pandas-tie.md b/.changeset/polite-pandas-tie.md index 749a4f82ae0..bf6ff995e6c 100644 --- a/.changeset/polite-pandas-tie.md +++ b/.changeset/polite-pandas-tie.md @@ -1,5 +1,5 @@ --- -"@primer/react": patch +"@primer/react": minor --- chore(DataTable.Pagination): Convert DataTable.Pagination to CSS modules From 7b856aff2d37fa01fde746369082ef920e48aaa7 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Thu, 3 Jul 2025 09:24:48 -0700 Subject: [PATCH 5/7] Update packages/react/src/internal/components/ButtonReset.tsx Co-authored-by: Josh Black --- packages/react/src/internal/components/ButtonReset.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/internal/components/ButtonReset.tsx b/packages/react/src/internal/components/ButtonReset.tsx index d0429fb5a5f..ccf9b3dc5b3 100644 --- a/packages/react/src/internal/components/ButtonReset.tsx +++ b/packages/react/src/internal/components/ButtonReset.tsx @@ -8,7 +8,7 @@ export const Button = ({ children, className, ...rest -}: React.PropsWithChildren & React.ButtonHTMLAttributes) => { +}: React.ComponentPropsWithoutRef<'button'>) => { return (