Merge pull request #69 from oasisprotocol/mz/paginationFix-2

Tweak Pagination component

Author: buberdds

src/components/pagination/index.tsx

@@ -2,9 +2,17 @@ import * as React from 'react'
 import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
 
 import { cn } from '../../lib/utils'
-import { PaginationContent, PaginationEllipsis, PaginationItem } from '../ui/pagination'
+import {
+  PaginationContent,
+  PaginationEllipsis as BasePaginationEllipsis,
+  PaginationItem,
+} from '../ui/pagination'
 import { buttonVariants } from '../ui/button'
 
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<typeof BasePaginationEllipsis>) => {
+  return <BasePaginationEllipsis className={cn('max-md:size-5', className)} {...props} />
+}
+
 type PaginationActionType = 'first' | 'last' | 'page' | 'next' | 'prev'
 
 interface PaginationItemProps {
@@ -303,6 +311,10 @@ function Pagination({
       }
     }
 
+    if (isTotalCountClipped) {
+      items.push(<PaginationEllipsis key="ellipsis-right-total-count-clipped" />)
+    }
+
     const nextItem: PaginationItemProps = {
       type: 'next',
       page: selectedPage < count ? selectedPage + 1 : undefined,
@@ -397,7 +409,7 @@ function PaginationLink<C extends React.ElementType = 'a'>({
       data-active={selected}
       data-disabled={disabled}
       className={cn(
-        'cursor-pointer',
+        'max-md:size-8',
         buttonVariants({
           variant: selected ? 'outline' : 'ghost',
           size: 'icon',

src/stories/Pagination/Pagination.stories.tsx

@@ -25,7 +25,7 @@ const meta = {
     },
     isTotalCountClipped: {
       description: 'Whether total_count is clipped for performance reasons.',
-      control: 'number',
+      control: 'boolean',
     },
     onPageChange: {
       description: 'Optional callback function that is called when a page is selected.',
@@ -58,3 +58,58 @@ export const Default: Story = {
     await expect(activePage).toHaveAttribute('aria-current', 'page')
   },
 }
+
+export const OnePage: Story = {
+  args: {
+    totalCount: 6,
+    selectedPage: 1,
+    rowsPerPage: 10,
+    showFirstPageButton: true,
+    showLastPageButton: true,
+    isTotalCountClipped: false,
+  },
+}
+
+export const TwoPages: Story = {
+  args: {
+    totalCount: 12,
+    selectedPage: 1,
+    rowsPerPage: 10,
+    showFirstPageButton: true,
+    showLastPageButton: true,
+    isTotalCountClipped: false,
+  },
+}
+
+export const FirstOfMany: Story = {
+  args: {
+    totalCount: 614,
+    selectedPage: 1,
+    rowsPerPage: 10,
+    showFirstPageButton: true,
+    showLastPageButton: true,
+    isTotalCountClipped: false,
+  },
+}
+
+export const FirstWithClippedTotal: Story = {
+  args: {
+    totalCount: 1000,
+    selectedPage: 1,
+    rowsPerPage: 10,
+    showFirstPageButton: true,
+    showLastPageButton: true,
+    isTotalCountClipped: true,
+  },
+}
+
+export const WithClippedTotalWithinRange: Story = {
+  args: {
+    totalCount: 1000,
+    selectedPage: 10,
+    rowsPerPage: 10,
+    showFirstPageButton: true,
+    showLastPageButton: true,
+    isTotalCountClipped: true,
+  },
+}