feat(pagination): enable responsive layout (#7722)

**Related Issue:** #6687 ## Summary - Makes pagination responsive - Uses resize observer - Makes ellipsis and page styles equivalent - Refactor page rendering logic to count ellipsis as well as pages. Next/previous buttons are not counted because they are always present. - Exports Breakpoints interface from helper - Modifies some e2e tests - Adds screenshot tests These are the proposed amount of items per breakpoint. (item numbers are pages + ellipsis) ```ts const maxItemBreakpoints = { large: 11, medium: 9, small: 7, xsmall: 5, }; ```
Esri · Sep 18, 2023 · 933a910 · 933a910
1 parent f4fb2f6
commit 933a910
Show file tree

Hide file tree

Showing 7 changed files with 287 additions and 118 deletions.
diff --git a/packages/calcite-components/src/components/pagination/pagination.e2e.ts b/packages/calcite-components/src/components/pagination/pagination.e2e.ts
@@ -54,7 +54,7 @@ describe("calcite-pagination", () => {
     it("should render start ellipsis when total pages is over 5 and the selected page more than 4 from the starting page", async () => {
       const page = await newE2EPage();
       await page.setContent(
-        `<calcite-pagination start-item="101" total-items="140" page-size="20"></calcite-pagination>`
+        `<calcite-pagination style="width:400px;" start-item="101" total-items="140" page-size="20"></calcite-pagination>`
       );
 
       const startEllipsis = await page.find(`calcite-pagination >>> .${CSS.ellipsis}.${CSS.ellipsisStart}`);
@@ -63,7 +63,7 @@ describe("calcite-pagination", () => {
     it("should render end ellipsis when total pages is over 5 and the selected page more than 3 from the final page", async () => {
       const page = await newE2EPage();
       await page.setContent(
-        `<calcite-pagination start-item="801" total-items="1200" page-size="100"></calcite-pagination>`
+        `<calcite-pagination style="width:400px;" start-item="801" total-items="1200" page-size="100"></calcite-pagination>`
       );
       const endEllipsis = await page.find(`calcite-pagination >>> .${CSS.ellipsis}.${CSS.ellipsisEnd}`);
       expect(endEllipsis).not.toBeNull();

diff --git a/packages/calcite-components/src/components/pagination/pagination.scss b/packages/calcite-components/src/components/pagination/pagination.scss
@@ -1,45 +1,46 @@
+:host {
+  @apply flex;
+  writing-mode: horizontal-tb;
+}
+
 :host([scale="s"]) {
-  --calcite-pagination-spacing-internal: theme("spacing.1") theme("spacing.2");
   & .previous,
   & .next,
-  & .page {
-    @apply text-n2h h-6;
-  }
-  .previous,
-  .next {
-    @apply px-1;
+  & .page,
+  & .ellipsis {
+    @apply text-n2h h-6 px-1;
+    min-inline-size: theme("width.6");
   }
 }
 
 :host([scale="m"]) {
-  --calcite-pagination-spacing-internal: theme("spacing.2") theme("spacing.3");
   & .previous,
   & .next,
-  & .page {
-    @apply text-n1h h-8;
-  }
-  .previous,
-  .next {
-    @apply px-2;
+  & .page,
+  & .ellipsis {
+    @apply text-n1h h-8 px-2;
+    min-inline-size: theme("width.8");
   }
 }
 
 :host([scale="l"]) {
-  --calcite-pagination-spacing-internal: theme("spacing.3") theme("spacing.4");
   & .previous,
   & .next,
-  & .page {
+  & .page,
+  & .ellipsis {
     @apply text-0h h-11;
+    min-inline-size: theme("width.11");
   }
-  .previous,
-  .next {
-    @apply px-4;
+
+  & .previous,
+  & .next {
+    @apply px-2.5;
   }
-}
 
-:host {
-  @apply flex;
-  writing-mode: horizontal-tb;
+  & .page,
+  & .ellipsis {
+    @apply px-3;
+  }
 }
 
 // focus styles
@@ -52,22 +53,34 @@
 
 .previous,
 .next,
-.page {
-  @apply text-0h
+.page,
+.ellipsis {
+  @apply p-0
+    m-0
+    text-0h
     text-color-3
     font-inherit
     box-border
     flex
-    cursor-pointer
     items-center
     border-none
     border-opacity-0
+    justify-center
+    align-baseline
     bg-transparent;
+}
+
+.previous,
+.next,
+.page {
+  @apply cursor-pointer;
   border-block: 2px solid transparent;
+
   &:hover {
     @apply text-color-1 transition-default;
   }
 }
+
 .page {
   &:hover {
     @apply border-b-color-2;
@@ -76,6 +89,7 @@
     @apply text-color-1 border-b-color-brand font-medium;
   }
 }
+
 .previous,
 .next {
   &:hover {
@@ -92,15 +106,5 @@
     }
   }
 }
-.next {
-  margin-inline-end: theme("spacing.0");
-}
-.page,
-.ellipsis {
-  padding: var(--calcite-pagination-spacing-internal);
-}
-.ellipsis {
-  @apply text-color-3 flex items-end;
-}
 
 @include base-component();
diff --git a/packages/calcite-components/src/components/pagination/pagination.stories.ts b/packages/calcite-components/src/components/pagination/pagination.stories.ts
@@ -1,6 +1,6 @@
 import { number, select } from "@storybook/addon-knobs";
-import { locales } from "../../utils/locale";
-import { modesDarkDefault } from "../../../.storybook/utils";
+import { locales, numberingSystems } from "../../utils/locale";
+import { createBreakpointStories, modesDarkDefault } from "../../../.storybook/utils";
 import readme from "./readme.md";
 import { html } from "../../../support/formatting";
 import { storyFilters } from "../../../.storybook/helpers";
@@ -17,16 +17,76 @@ export default {
 };
 
 export const simple = (): string => html`
+  <style>
+    .sb-show-main.sb-main-centered #root {
+      padding: 0 !important;
+      flex: 1;
+      width: 100%;
+    }
+  </style>
   <calcite-pagination
     scale="${select("scale", ["s", "m", "l"], "m")}"
     start-item="${number("start-item", 1)}"
     lang="${select("lang", locales, "en")}"
+    numbering-system="${select("numbering-system", numberingSystems, "latn")}"
     total-items="${number("total-items", 123456789)}"
     page-size="${number("page-size", 10)}"
   >
   </calcite-pagination>
 `;
 
+const getResponsiveTemplate = ({
+  totalItems,
+  pageSize,
+  type,
+}: {
+  totalItems: number;
+  pageSize: number;
+  type: "first" | "last" | "middle";
+}) => {
+  return html`
+    <calcite-pagination
+      lang="${select("locale", locales, "en")}"
+      numbering-system="${select("numbering-system", numberingSystems, "latn")}"
+      total-items="${totalItems}"
+      page-size="${pageSize}"
+      start-item="${type === "last"
+        ? totalItems - pageSize + 1
+        : type === "middle"
+        ? totalItems / 2 - Math.max(pageSize / 2, 1) + 1
+        : 1}"
+      scale="{scale}"
+    ></calcite-pagination>
+  `;
+};
+
+export const responsiveLargeNumberFirstPage_TestOnly = (): string =>
+  createBreakpointStories(getResponsiveTemplate({ totalItems: 150000, pageSize: 100, type: "first" }));
+
+export const responsiveLargeNumberMiddlePage_TestOnly = (): string =>
+  createBreakpointStories(getResponsiveTemplate({ totalItems: 150000, pageSize: 100, type: "middle" }));
+
+export const responsiveLargeNumberLastPage_TestOnly = (): string =>
+  createBreakpointStories(getResponsiveTemplate({ totalItems: 150000, pageSize: 100, type: "last" }));
+
+export const responsiveSmallNumberFirstPage_TestOnly = (): string =>
+  createBreakpointStories(getResponsiveTemplate({ totalItems: 50, pageSize: 10, type: "first" }));
+
+export const responsiveSmallNumberMiddlePage_TestOnly = (): string =>
+  createBreakpointStories(getResponsiveTemplate({ totalItems: 50, pageSize: 10, type: "middle" }));
+
+export const responsiveSmallNumberLastPage_TestOnly = (): string =>
+  createBreakpointStories(getResponsiveTemplate({ totalItems: 50, pageSize: 10, type: "last" }));
+
+export const responsiveTinyNumberFirstPage_TestOnly = (): string =>
+  createBreakpointStories(getResponsiveTemplate({ totalItems: 12, pageSize: 1, type: "first" }));
+
+export const responsiveTinyNumberMiddlePage_TestOnly = (): string =>
+  createBreakpointStories(getResponsiveTemplate({ totalItems: 12, pageSize: 1, type: "middle" }));
+
+export const responsiveTinyNumberLastPage_TestOnly = (): string =>
+  createBreakpointStories(getResponsiveTemplate({ totalItems: 12, pageSize: 1, type: "last" }));
+
 export const darkModeFrenchLocaleAndLargeScaleGetsMediumChevron_TestOnly = (): string => html`
   <calcite-pagination
     class="calcite-mode-dark"