Make the showPages prop on our Pagination components responsive

.changeset/green-rules-tickle.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': minor
+---
+
+The showPages prop on both Pagination components can now accept a responsive value.
+
+<!-- Changed components: DataTable, Pagination -->

generated/components.json

@@ -2958,7 +2958,7 @@
       "stories": [
         {
           "id": "components-pagination--default",
-          "code": "() => (\n  <Pagination\n    pageCount={15}\n    currentPage={2}\n    onPageChange={(e) => e.preventDefault()}\n  />\n)"
+          "code": "() => (\n  <Pagination\n    pageCount={15}\n    currentPage={2}\n    onPageChange={(e) => e.preventDefault()}\n    showPages={{\n      narrow: false,\n    }}\n  />\n)"
         }
       ],
       "props": [
@@ -2996,7 +2996,7 @@
         },
         {
           "name": "showPages",
-          "type": "boolean",
+          "type": "boolean | { narrow?: boolean, regular?: boolean, wide?: boolean }",
           "defaultValue": "true",
           "description": "Whether or not to show the individual page links."
         },

src/DataTable/Pagination.tsx

@@ -1,11 +1,12 @@
 import {ChevronLeftIcon, ChevronRightIcon} from '@primer/octicons-react'
-import React, {useState} from 'react'
+import React, {useCallback, 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 '../internal/components/VisuallyHidden'
 import {warning} from '../utils/warning'
+import {ResponsiveValue, viewportRanges} from '../hooks/useResponsiveValue'
 
 const StyledPagination = styled.nav`
   display: flex;
@@ -93,6 +94,29 @@ const StyledPagination = styled.nav`
     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('')
+  }
 `
 
 export type PaginationProps = Omit<React.ComponentPropsWithoutRef<'nav'>, 'onChange'> & {
@@ -123,6 +147,11 @@ export type PaginationProps = Omit<React.ComponentPropsWithoutRef<'nav'>, 'onCha
    */
   pageSize?: number
 
+  /**
+   * Whether to show the page numbers
+   */
+  showPages?: boolean | ResponsiveValue<boolean>
+
   /**
    * Specify the total number of items within the collection
    */
@@ -141,6 +170,7 @@ export function Pagination({
   id,
   onChange,
   pageSize = 25,
+  showPages = {narrow: false},
   totalCount,
 }: PaginationProps) {
   const {
@@ -171,13 +201,26 @@ export function Pagination({
   const offsetEndIndex = offsetStartIndex + truncatedPageCount - 1
   const hasLeadingTruncation = offsetStartIndex >= 2
   const hasTrailingTruncation = pageCount - 1 - offsetEndIndex > 1
+  const getViewportRangesToHidePages = useCallback(() => {
+    if (typeof showPages !== 'boolean') {
+      return Object.keys(showPages).filter(key => !showPages[key as keyof typeof viewportRanges]) as Array<
+        keyof typeof viewportRanges
+      >
+    }
+
+    if (showPages) {
+      return []
+    } else {
+      return Object.keys(viewportRanges) as Array<keyof typeof viewportRanges>
+    }
+  }, [showPages])
 
   return (
     <LiveRegion>
       <LiveRegionOutlet />
       <StyledPagination aria-label={label} className="TablePagination" id={id}>
         <Range pageStart={pageStart} pageEnd={pageEnd} totalCount={totalCount} />
-        <ol className="TablePaginationSteps">
+        <ol className="TablePaginationSteps" data-hidden-viewport-ranges={getViewportRangesToHidePages().join(' ')}>
           <Step>
             <Button
               className="TablePaginationAction"

src/Pagination/Pagination.docs.json

@@ -39,7 +39,7 @@
     },
     {
       "name": "showPages",
-      "type": "boolean",
+      "type": "boolean | { narrow?: boolean, regular?: boolean, wide?: boolean }",
       "defaultValue": "true",
       "description": "Whether or not to show the individual page links."
     },

src/Pagination/Pagination.features.stories.tsx

@@ -16,6 +16,19 @@ export const HidePageNumbers = () => (
   <Pagination pageCount={15} currentPage={5} showPages={false} onPageChange={e => e.preventDefault()} />
 )
 
+export const HidePageNumbersByViewport = () => (
+  <>
+    <Pagination pageCount={15} currentPage={5} showPages={{narrow: false}} onPageChange={e => e.preventDefault()} />
+    <p>Page numbers are hidden on narrow viewports.</p>
+  </>
+)
+
+HidePageNumbersByViewport.parameters = {
+  viewport: {
+    defaultViewport: 'small',
+  },
+}
+
 export const HigherSurroundingPageCount = () => (
   <Pagination pageCount={15} currentPage={5} surroundingPageCount={4} onPageChange={e => e.preventDefault()} />
 )

src/Pagination/Pagination.stories.tsx

@@ -8,12 +8,38 @@ export default {
   component: Pagination,
 } as Meta<ComponentProps<typeof Pagination>>
 
-export const Default = () => <Pagination pageCount={15} currentPage={2} onPageChange={e => e.preventDefault()} />
+const parseShowPagesArg = (value: boolean | string) => {
+  if (typeof value === 'boolean') {
+    return value
+  }
 
-export const Playground: Story<ComponentProps<typeof Pagination>> = args => (
-  <Pagination onPageChange={e => e.preventDefault()} {...args} />
+  if (value === 'hide at narrow') {
+    return {narrow: false}
+  }
+
+  if (value === 'hide at regular') {
+    return {regular: false}
+  }
+
+  if (value === 'hide at wide') {
+    return {wide: false}
+  }
+}
+
+export const Default = () => (
+  <Pagination pageCount={15} currentPage={2} onPageChange={e => e.preventDefault()} showPages={{narrow: false}} />
 )
 
+export const Playground: Story<ComponentProps<typeof Pagination>> = ({showPages, ...args}) => {
+  return (
+    <Pagination
+      onPageChange={e => e.preventDefault()}
+      showPages={parseShowPagesArg(showPages as boolean | string)}
+      {...args}
+    />
+  )
+}
+
 Playground.args = {
   currentPage: 5,
   marginPageCount: 1,
@@ -22,6 +48,12 @@ Playground.args = {
   surroundingPageCount: 2,
 }
 Playground.argTypes = {
+  showPages: {
+    control: {
+      type: 'radio',
+    },
+    options: [true, false, 'hide at narrow', 'hide at regular', 'hide at wide'],
+  },
   hrefBuilder: {
     control: false,
     table: {

src/Pagination/Pagination.tsx

@@ -5,6 +5,21 @@ import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import getGlobalFocusStyles from '../internal/utils/getGlobalFocusStyles'
 import {buildComponentData, buildPaginationModel} from './model'
+import {ResponsiveValue, viewportRanges} from '../hooks/useResponsiveValue'
+
+const getViewportRangesToHidePages = (showPages: PaginationProps['showPages']) => {
+  if (showPages && typeof showPages !== 'boolean') {
+    return Object.keys(showPages).filter(key => !showPages[key as keyof typeof viewportRanges]) as Array<
+      keyof typeof viewportRanges
+    >
+  }
+
+  if (showPages) {
+    return []
+  } else {
+    return Object.keys(viewportRanges) as Array<keyof typeof viewportRanges>
+  }
+}
 
 const Page = styled.a`
   display: inline-block;
@@ -130,7 +145,7 @@ type UsePaginationPagesParameters = {
   onPageChange: (e: React.MouseEvent, n: number) => void
   hrefBuilder: (n: number) => string
   marginPageCount: number
-  showPages?: boolean
+  showPages?: PaginationProps['showPages']
   surroundingPageCount: number
 }
 
@@ -168,6 +183,30 @@ const PaginationContainer = 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};
 `
 
@@ -178,7 +217,7 @@ export type PaginationProps = {
   onPageChange?: (e: React.MouseEvent, n: number) => void
   hrefBuilder?: (n: number) => string
   marginPageCount?: number
-  showPages?: boolean
+  showPages?: boolean | ResponsiveValue<boolean>
   surroundingPageCount?: number
 }
 
@@ -205,7 +244,12 @@ function Pagination({
   })
   return (
     <PaginationContainer aria-label="Pagination" {...rest} theme={theme}>
-      <Box display="inline-block" theme={theme}>
+      <Box
+        display="inline-block"
+        theme={theme}
+        className="TablePaginationSteps"
+        data-hidden-viewport-ranges={getViewportRangesToHidePages(showPages).join(' ')}
+      >
         {pageElements}
       </Box>
     </PaginationContainer>

src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap

@@ -127,12 +127,55 @@ exports[`Pagination renders consistently 1`] = `
   }
 }
 
+@media ((max-width:calc(768px - 0.02px))) {
+  .c0 .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:not(:first-child):not(:last-child) {
+    display: none;
+  }
+
+  .c0 .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:first-child {
+    margin-inline-end: 0;
+  }
+
+  .c0 .TablePaginationSteps[data-hidden-viewport-ranges*='narrow'] > *:last-child {
+    margin-inline-start: 0;
+  }
+}
+
+@media ((min-width:768px)) {
+  .c0 .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:not(:first-child):not(:last-child) {
+    display: none;
+  }
+
+  .c0 .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:first-child {
+    margin-inline-end: 0;
+  }
+
+  .c0 .TablePaginationSteps[data-hidden-viewport-ranges*='regular'] > *:last-child {
+    margin-inline-start: 0;
+  }
+}
+
+@media ((min-width:1400px)) {
+  .c0 .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:not(:first-child):not(:last-child) {
+    display: none;
+  }
+
+  .c0 .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:first-child {
+    margin-inline-end: 0;
+  }
+
+  .c0 .TablePaginationSteps[data-hidden-viewport-ranges*='wide'] > *:last-child {
+    margin-inline-start: 0;
+  }
+}
+
 <nav
   aria-label="Pagination"
   className="c0"
 >
   <div
-    className="c1"
+    className="c1 TablePaginationSteps"
+    data-hidden-viewport-ranges=""
     display="inline-block"
   >
     <button