fix(Pagination): Tighten margins and reduce pages shown to make usabl…

…e on 320px

.changeset/silly-jokes-worry.md

@@ -0,0 +1,8 @@
+---
+"@kaizen/components": patch
+---
+
+Pagination responsiveness
+
+- Margins and padding tightened up
+- Sibling pages shown drops from 1 to 0 on small viewports

packages/components/src/Pagination/Pagination.module.scss

@@ -51,15 +51,3 @@
     }
   }
 }
-
-// Truncate indicator
-.truncateIndicatorWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 36px;
-  width: 36px;
-  background-color: transparent;
-  color: rgba($color-purple-800-rgb, 0.7);
-  margin: 0 5px;
-}

packages/components/src/Pagination/Pagination.spec.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 import { render, screen, waitFor } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
+import { mockMatchMedia } from "~components/utils/useMediaQueries.spec"
 import { Pagination } from "./Pagination"
 
 const user = userEvent.setup()
@@ -15,6 +16,10 @@ const defaultProps = {
 }
 
 describe("<Pagination />", () => {
+  beforeEach(() => {
+    mockMatchMedia()
+  })
+
   it("calls onPageChange when clicking page number", async () => {
     const onPageChange = vi.fn()
 

packages/components/src/Pagination/Pagination.tsx

@@ -1,6 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import classnames from "classnames"
 import { OverrideClassName } from "~components/types/OverrideClassName"
+import { useMediaQueries } from "~components/utils"
 import { DirectionalLink } from "./subcomponents/DirectionalLink"
 import { PaginationLink } from "./subcomponents/PaginationLink"
 import { TruncateIndicator } from "./subcomponents/TruncateIndicator"
@@ -32,6 +33,8 @@ export const Pagination = ({
   classNameOverride,
   ...restProps
 }: PaginationProps): JSX.Element => {
+  const { queries } = useMediaQueries()
+
   // Click event for all pagination buttons (next, prev, and the actual numbers)
   const handleButtonClick = (newPage: number | PageAction): void => {
     if (newPage === "prev") {
@@ -55,12 +58,12 @@ export const Pagination = ({
     />
   )
 
-  const pagination = (): JSX.Element[] => {
+  const pagination = (
+    boundaryPagesRange: number,
+    siblingPagesRange: number
+  ): JSX.Element[] => {
     const items: JSX.Element[] = []
 
-    const boundaryPagesRange = 1
-    const siblingPagesRange = 1
-
     // truncateSize is 1 now but could be 0 if we add the ability to hide it.
     const truncateSize = 1
 
@@ -150,7 +153,9 @@ export const Pagination = ({
         onClick={(): void => handleButtonClick("prev")}
       />
 
-      <div className={styles.pagesIndicatorWrapper}>{pagination()}</div>
+      <div className={styles.pagesIndicatorWrapper}>
+        {pagination(1, queries.isSmall ? 0 : 1)}
+      </div>
 
       <DirectionalLink
         label={ariaLabelNextPage}

packages/components/src/Pagination/subcomponents/PaginationLink/PaginationLink.module.scss

@@ -9,7 +9,7 @@
   width: 40px;
   height: 40px;
   min-height: auto;
-  margin: 0 $spacing-xs;
+  margin: 0 var(--spacing-2);
   border-radius: 50%;
 
   &:not(:disabled) {

packages/components/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.module.scss → packages/components/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.module.css

@@ -1,11 +1,9 @@
-@import "~@kaizen/design-tokens/sass/color";
-
 .truncateIndicatorWrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   background-color: transparent;
-  color: rgba($color-purple-800-rgb, 0.7);
-  margin: 0 5px;
+  color: rgba(var(color-purple-800-rgb), 0.7);
+  margin: 0 var(--spacing-2);
 }

packages/components/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Icon } from "~components/__future__/Icon"
-import styles from "./TruncateIndicator.module.scss"
+import styles from "./TruncateIndicator.module.css"
 
 export const TruncateIndicator = (): JSX.Element => (
   <div