Merge branch 'development' into DSD-1924/heading-line-height

Author: bigfishdesign13

CHANGELOG.md

@@ -10,6 +10,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ### Updates
 
+- Updates the `Pagination` component to handle 4 digit page counts.
 - Updates the `Heading` component to add `line-height` styles for mobile.
 
 ## 3.5.2 (January 16, 2025)

src/components/Pagination/Pagination.mdx

@@ -9,10 +9,10 @@ import Link from "../Link/Link";
 
 # Pagination
 
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `0.0.10`   |
-| Latest            | `3.5.2`    |
+| Component Version | DS Version   |
+| ----------------- | ------------ |
+| Added             | `0.0.10`     |
+| Latest            | `Prerelease` |
 
 ## Table of Contents
 

src/components/Pagination/Pagination.tsx

@@ -298,7 +298,12 @@ export const Pagination: ChakraComponent<
         Math.min(
           // If the current page is in the middle, start the range
           // one number before the current page.
-          selected - 1,
+          // But if page number has 4 digits and is fourth from the end,
+          // start the range at that number.
+          // Ex. 1 ... 1998, 1999, 2000, 2001
+          pageCount > 999 && selected === pageCount - 3
+            ? selected
+            : selected - 1,
           // If the current page is near the end, show the last five items.
           // If the page number has 4 digits, show only the last four items.
           pageCount > 999 ? pageCount - 3 : pageCount - 4

src/components/Pagination/paginationChangelogData.ts

@@ -9,6 +9,13 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Functionality"],
+    notes: ["Handling for 4 digit page counts"],
+  },
   {
     date: "2025-01-16",
     version: "3.5.2",

src/theme/components/pagination.ts

@@ -13,7 +13,7 @@ const Pagination = defineMultiStyleConfig({
     minWidth: { base: "320px", md: "unset" },
     width: "100%",
     link: {
-      lineHeight: "1.15",
+      lineHeight: "1",
       textDecoration: "none",
       _hover: {
         textDecoration: "none",