feat(pagination): Introduce responsive design for xxsmall breakpoint (#…

…8150) **Related Issue:** #7856 ## Summary - Refactors & renames CSS to reduce common css classes and remove unused classes. - Adds message strings for First/Last buttons - Supports xxs breakpoint design - Refactors some logic into `@State()` variables - Cleanup - Cleanup tests - Update storybook breakpoint util to handle screenshot test
Esri · Nov 14, 2023 · ab20eb0 · ab20eb0
1 parent f131218
commit ab20eb0
Show file tree

Hide file tree

Showing 9 changed files with 193 additions and 100 deletions.
diff --git a/packages/calcite-components/.storybook/utils.tsx b/packages/calcite-components/.storybook/utils.tsx
@@ -157,6 +157,7 @@ export function createBreakpointStories(
   // we hard-code breakpoint values because we can't read them directly from the page when setting up a story
   // based on https://github.com/Esri/calcite-design-tokens/blob/2e8fc1b8f410b5443fa53ca1c12ceef71e651b9a/tokens/core.json#L1533-L1553
   const widthBreakpoints: { name: keyof Breakpoints["width"]; maxWidth: number }[] = [
+    { name: "xxsmall", maxWidth: 320 },
     { name: "xsmall", maxWidth: 476 },
     { name: "small", maxWidth: 768 },
     { name: "medium", maxWidth: 1152 },

diff --git a/packages/calcite-components/src/components/pagination/assets/pagination/t9n/messages.json b/packages/calcite-components/src/components/pagination/assets/pagination/t9n/messages.json
@@ -1,4 +1,6 @@
 {
   "next": "Next",
-  "previous": "Previous"
+  "previous": "Previous",
+  "first": "First",
+  "last": "Last"
 }
diff --git a/packages/calcite-components/src/components/pagination/assets/pagination/t9n/messages_en.json b/packages/calcite-components/src/components/pagination/assets/pagination/t9n/messages_en.json
@@ -1,4 +1,6 @@
 {
   "next": "Next",
-  "previous": "Previous"
+  "previous": "Previous",
+  "first": "First",
+  "last": "Last"
 }
diff --git a/packages/calcite-components/src/components/pagination/pagination.e2e.ts b/packages/calcite-components/src/components/pagination/pagination.e2e.ts
@@ -10,7 +10,7 @@ describe("calcite-pagination", () => {
 
   describe("focuses previous button when not on the first page", () => {
     focusable('<calcite-pagination page-size="1" start-item="2" total-items="10"></calcite-pagination>', {
-      shadowFocusTargetSelector: `.${CSS.previous}`,
+      shadowFocusTargetSelector: `[data-test-chevron="previous"]`,
     });
   });
 
@@ -46,8 +46,8 @@ describe("calcite-pagination", () => {
       const page = await newE2EPage();
       await page.setContent(`<calcite-pagination total-items="80"></calcite-pagination>`);
 
-      const startEllipsis = await page.find(`calcite-pagination >>> .${CSS.ellipsis}.${CSS.ellipsisStart}`);
-      const endEllipsis = await page.find(`calcite-pagination >>> .${CSS.ellipsis}.${CSS.ellipsisEnd}`);
+      const startEllipsis = await page.find(`calcite-pagination >>> [data-test-ellipsis="start"]`);
+      const endEllipsis = await page.find(`calcite-pagination >>> [data-test-ellipsis="end"]`);
       expect(startEllipsis).toBeNull();
       expect(endEllipsis).toBeNull();
     });
@@ -57,15 +57,15 @@ describe("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}`);
+      const startEllipsis = await page.find(`calcite-pagination >>> [data-test-ellipsis="start"]`);
       expect(startEllipsis).not.toBeNull();
     });
     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 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}`);
+      const endEllipsis = await page.find(`calcite-pagination >>> [data-test-ellipsis="end"]`);
       expect(endEllipsis).not.toBeNull();
     });
   });
@@ -81,7 +81,7 @@ describe("calcite-pagination", () => {
     });
     it("next button should increase selected page by 1 when clicked", async () => {
       const toggleSpy = await pagination.spyOnEvent("calcitePaginationChange");
-      const nextButton = await page.find(`calcite-pagination >>> .${CSS.next}`);
+      const nextButton = await page.find(`calcite-pagination >>> [data-test-chevron="next"]`);
       await nextButton.click();
       await page.waitForChanges();
 
@@ -91,18 +91,18 @@ describe("calcite-pagination", () => {
     });
     it("previous button should be disabled when selected page equals the starting page", async () => {
       const toggleSpy = await pagination.spyOnEvent("calcitePaginationChange");
-      const previousButton = await page.find(`calcite-pagination >>> .${CSS.previous}`);
+      const previousButton = await page.find(`calcite-pagination >>> [data-test-chevron="previous"]`);
       await previousButton.click();
       await page.waitForChanges();
 
       expect(toggleSpy).toHaveReceivedEventTimes(0);
     });
     it("previous button should decrease selected page by 1", async () => {
-      await pagination.setAttribute("start-item", "21");
+      pagination.setAttribute("start-item", "21");
       await page.waitForChanges();
 
       const toggleSpy = await pagination.spyOnEvent("calcitePaginationChange");
-      const previousButton = await page.find(`calcite-pagination >>> .${CSS.previous}`);
+      const previousButton = await page.find(`calcite-pagination >>> [data-test-chevron="previous"]`);
       await previousButton.click();
       await page.waitForChanges();
 
@@ -111,24 +111,24 @@ describe("calcite-pagination", () => {
       expect(toggleSpy).toHaveReceivedEventTimes(1);
     });
     it("next button should be disabled on last page", async () => {
-      await pagination.setAttribute("start-item", "121");
+      pagination.setAttribute("start-item", "121");
       await page.waitForChanges();
 
       const toggleSpy = await pagination.spyOnEvent("calcitePaginationChange");
-      const nextButton = await page.find(`calcite-pagination >>> .${CSS.next}`);
+      const nextButton = await page.find(`calcite-pagination >>> [data-test-chevron="next"]`);
       await nextButton.click();
       await page.waitForChanges();
 
       expect(toggleSpy).toHaveReceivedEventTimes(0);
     });
     it("next button should be enabled if last page has only 1 result", async () => {
-      await pagination.setAttribute("total-items", "11");
-      await pagination.setAttribute("page-size", "10");
-      await pagination.setAttribute("start-item", "1");
+      pagination.setAttribute("total-items", "11");
+      pagination.setAttribute("page-size", "10");
+      pagination.setAttribute("start-item", "1");
       await page.waitForChanges();
 
       const toggleSpy = await pagination.spyOnEvent("calcitePaginationChange");
-      const nextButton = await page.find(`calcite-pagination >>> .${CSS.next}`);
+      const nextButton = await page.find(`calcite-pagination >>> [data-test-chevron="next"]`);
       await nextButton.click();
       await page.waitForChanges();
 
@@ -170,18 +170,18 @@ describe("calcite-pagination", () => {
     });
     it("previous button should be disabled when selected page equals the starting page", async () => {
       const toggleSpy = await pagination.spyOnEvent("calcitePaginationChange");
-      const previousButton = await page.find(`calcite-pagination >>> .${CSS.previous}`);
+      const previousButton = await page.find(`calcite-pagination >>> [data-test-chevron="previous"]`);
       await previousButton.click();
       await page.waitForChanges();
 
       expect(toggleSpy).toHaveReceivedEventTimes(0);
     });
     it("next button should be disabled on last page", async () => {
-      await pagination.setAttribute("start-item", "5");
+      pagination.setAttribute("start-item", "5");
       await page.waitForChanges();
 
       const toggleSpy = await pagination.spyOnEvent("calcitePaginationChange");
-      const nextButton = await page.find(`calcite-pagination >>> .${CSS.next}`);
+      const nextButton = await page.find(`calcite-pagination >>> [data-test-chevron="next"]`);
       await nextButton.click();
       await page.waitForChanges();
 

diff --git a/packages/calcite-components/src/components/pagination/pagination.scss b/packages/calcite-components/src/components/pagination/pagination.scss
@@ -4,8 +4,7 @@
 }
 
 :host([scale="s"]) {
-  & .previous,
-  & .next,
+  & .chevron,
   & .page,
   & .ellipsis {
     @apply text-n2h h-6 px-1;
@@ -14,8 +13,7 @@
 }
 
 :host([scale="m"]) {
-  & .previous,
-  & .next,
+  & .chevron,
   & .page,
   & .ellipsis {
     @apply text-n1h h-8 px-2;
@@ -24,16 +22,14 @@
 }
 
 :host([scale="l"]) {
-  & .previous,
-  & .next,
+  & .chevron,
   & .page,
   & .ellipsis {
     @apply text-0h h-11;
     min-inline-size: theme("width.11");
   }
 
-  & .previous,
-  & .next {
+  & .chevron {
     @apply px-2.5;
   }
 
@@ -51,8 +47,7 @@
   }
 }
 
-.previous,
-.next,
+.chevron,
 .page,
 .ellipsis {
   @apply p-0
@@ -70,8 +65,7 @@
     bg-transparent;
 }
 
-.previous,
-.next,
+.chevron,
 .page {
   @apply cursor-pointer;
   border-block: 2px solid transparent;
@@ -85,21 +79,20 @@
   &:hover {
     @apply border-b-color-2;
   }
-  &.is-selected {
+  &.selected {
     @apply text-color-1 border-b-color-brand font-medium;
   }
 }
 
-.previous,
-.next {
+.chevron {
   &:hover {
     @apply bg-foreground-2;
     color: theme("backgroundColor.brand");
   }
   &:active {
     @apply bg-foreground-3;
   }
-  &.is-disabled {
+  &.disabled {
     @apply pointer-events-none bg-transparent;
     & > calcite-icon {
       @apply opacity-disabled;