feat(pagination): update css token names and add e2e tests

Esri · Jan 4, 2025 · 019c5c5 · 019c5c5
1 parent 51156ff
commit 019c5c5
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 48 deletions.
diff --git a/packages/calcite-components/src/components/pagination/pagination.e2e.ts b/packages/calcite-components/src/components/pagination/pagination.e2e.ts
@@ -368,35 +368,105 @@ describe("calcite-pagination", () => {
   });
 
   describe("theme", () => {
-    themed(html`<calcite-pagination total-items="1200" page-size="100" start-item="1"></calcite-pagination>`, {
-      /*"--calcite-pagination-spacing": {
-        shadowSelector: `.${CSS.list}`,
-        targetProp: "columnGap",
-      },*/
-      "--calcite-pagination-width": [
-        {
-          shadowSelector: `.${CSS.chevron}`,
-          targetProp: "minInlineSize",
-        },
-        {
+    describe("default", () => {
+      themed(html`<calcite-pagination total-items="1200" page-size="100" start-item="1"></calcite-pagination>`, {
+        /*"--calcite-pagination-spacing": {
+          shadowSelector: `.${CSS.list}`,
+          targetProp: "columnGap",
+        },*/
+        "--calcite-pagination-size": [
+          {
+            shadowSelector: `.${CSS.chevron}`,
+            targetProp: "minInlineSize",
+          },
+          {
+            shadowSelector: `.${CSS.page}`,
+            targetProp: "minInlineSize",
+          },
+          {
+            shadowSelector: `.${CSS.ellipsis}`,
+            targetProp: "minInlineSize",
+          },
+        ],
+        "--calcite-pagination-color": [
+          {
+            shadowSelector: `.${CSS.chevron}`,
+            targetProp: "color",
+          },
+          /*{
           shadowSelector: `.${CSS.page}`,
-          targetProp: "minInlineSize",
-        },
-        {
-          shadowSelector: `.${CSS.ellipsis}`,
-          targetProp: "minInlineSize",
-        },
-      ],
-      "--calcite-pagination-color": [
-        {
+          targetProp: "color",
+        },*/
+          {
+            shadowSelector: `.${CSS.ellipsis}`,
+            targetProp: "color",
+          },
+        ],
+      });
+    });
+    describe("hover", () => {
+      themed(html`<calcite-pagination total-items="1200" page-size="100" start-item="1"></calcite-pagination>`, {
+        "--calcite-pagination-color-hover": [
+          /*{
+            shadowSelector: `.${CSS.chevron}`,
+            targetProp: "color",
+            state: "hover",
+          },*/
+          {
+            shadowSelector: `.${CSS.page}`,
+            targetProp: "color",
+            state: "hover",
+          },
+        ],
+        /*"--calcite-pagination-color-border-hover": {
+          shadowSelector: `.${CSS.page}`,
+          targetProp: "borderBlockEndColor",
+          state: "hover",
+        },*/
+        /*"--calcite-pagination-chevron-color-background-hover": {
           shadowSelector: `.${CSS.chevron}`,
+          targetProp: "backgroundColor",
+          state: "hover",
+        },*/
+      });
+    });
+    describe("active", () => {
+      themed(html`<calcite-pagination total-items="1200" page-size="100" start-item="1"></calcite-pagination>`, {
+        "--calcite-pagination-color-hover": [
+          /*{
+            shadowSelector: `.${CSS.chevron}`,
+            targetProp: "color",
+          },*/
+          {
+            shadowSelector: `.${CSS.page}`,
+            targetProp: "color",
+          },
+        ],
+        /*"--calcite-pagination-color-background": [
+          {
+            shadowSelector: `.${CSS.page}`,
+            targetProp: "backgroundColor",
+          },
+          {
+            shadowSelector: `.${CSS.chevron}`,
+            targetProp: "backgroundColor",
+          },
+        ],*/
+      });
+    });
+    describe("selected", () => {
+      themed(html`<calcite-pagination total-items="1200" page-size="100" start-item="1"></calcite-pagination>`, {
+        "--calcite-pagination-color-hover": {
+          shadowSelector: `.${CSS.page}`,
           targetProp: "color",
+          state: "focus",
         },
-        {
-          shadowSelector: `.${CSS.ellipsis}`,
-          targetProp: "color",
+        "--calcite-pagination-color-border-active": {
+          shadowSelector: `.${CSS.page}`,
+          targetProp: "borderBlockEndColor",
+          state: "focus",
         },
-      ],
+      });
     });
   });
 });
diff --git a/packages/calcite-components/src/components/pagination/pagination.scss b/packages/calcite-components/src/components/pagination/pagination.scss
@@ -4,13 +4,13 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-pagination-spacing: Specifies the amount of left and right margin spacing between each item.
- * @prop --calcite-pagination-width: Specifies the width of each item.
+ * @prop --calcite-pagination-size: Specifies the width of each item.
  * @prop --calcite-pagination-color: Specifies the component's item color.
- * @prop --calcite-pagination-selected-color-hover: Specifies the component's item color when hovered or selected.
- * @prop --calcite-pagination-hover-bottom-border-color: Specifies the component's item bottom border color when hovered.
- * @prop --calcite-pagination-selected-bottom-border-color: Specifies the component's item bottom border color when selected.
- * @prop --calcite-pagination-active-background-color: Specifies the component's item background color when active.
- * @prop --calcite-pagination-hover-chevron-background-color: Specifies the component's chevron item background color when hovered.
+ * @prop --calcite-pagination-color-hover: Specifies the component's item color when hovered or selected.
+ * @prop --calcite-pagination-color-border-hover: Specifies the component's item bottom border color when hovered.
+ * @prop --calcite-pagination-color-border-active: Specifies the component's item bottom border color when selected.
+ * @prop --calcite-pagination-color-background: Specifies the component's item background color when active.
+ * @prop --calcite-pagination-chevron-color-background-hover: Specifies the component's chevron item background color when hovered.
  */
 
 :host {
@@ -36,7 +36,7 @@
   & .page,
   & .ellipsis {
     @apply text-n2h h-6 px-1;
-    --width: theme("width.6");
+    --calcite-internal-pagination-width: theme("width.6");
   }
 }
 
@@ -45,7 +45,7 @@
   & .page,
   & .ellipsis {
     @apply text-n1h h-8 px-2;
-    --width: theme("width.8");
+    --calcite-internal-pagination-width: theme("width.8");
   }
 }
 
@@ -54,7 +54,7 @@
   & .page,
   & .ellipsis {
     @apply text-0h h-11;
-    --width: theme("width.11");
+    --calcite-internal-pagination-width: theme("width.11");
   }
 
   & .chevron {
@@ -91,7 +91,7 @@
     align-baseline
     bg-transparent;
 
-  min-inline-size: var(--calcite-pagination-width, var(--width));
+  min-inline-size: var(--calcite-pagination-size, var(--calcite-internal-pagination-width));
   color: var(--calcite-pagination-color, var(--calcite-color-text-3));
 }
 
@@ -103,25 +103,25 @@
   &:hover {
     @apply transition-default;
 
-    color: var(--calcite-pagination-selected-color-hover, var(--calcite-color-text-1));
+    color: var(--calcite-pagination-color-hover, var(--calcite-color-text-1));
   }
   &:active {
-    color: var(--calcite-pagination-selected-color-hover, var(--calcite-color-text-1));
+    color: var(--calcite-pagination-color-hover, var(--calcite-color-text-1));
   }
 }
 
 .page {
   &:hover {
-    border-block-end-color: var(--calcite-pagination-hover-bottom-border-color, var(--calcite-color-border-2));
+    border-block-end-color: var(--calcite-pagination-color-border-hover, var(--calcite-color-border-2));
   }
   &:active {
-    background-color: var(--calcite-pagination-active-background-color, var(--calcite-color-foreground-3));
+    background-color: var(--calcite-pagination-color-background, var(--calcite-color-foreground-3));
   }
   &.selected {
     @apply font-medium;
 
-    color: var(--calcite-pagination-selected-color-hover, var(--calcite-color-text-1));
-    border-block-end-color: var(--calcite-pagination-selected-bottom-border-color, var(--calcite-color-brand));
+    color: var(--calcite-pagination-color-hover, var(--calcite-color-text-1));
+    border-block-end-color: var(--calcite-pagination-color-border-active, var(--calcite-color-brand));
 
     &:focus {
       border-block-end-width: var(--calcite-spacing-xxs);
@@ -132,10 +132,10 @@
 
 .chevron {
   &:hover {
-    background-color: var(--calcite-pagination-hover-chevron-background-color, var(--calcite-color-foreground-2));
+    background-color: var(--calcite-pagination-chevron-color-background-hover, var(--calcite-color-foreground-2));
   }
   &:active {
-    background-color: var(--calcite-pagination-active-background-color, var(--calcite-color-foreground-3));
+    background-color: var(--calcite-pagination-color-background, var(--calcite-color-foreground-3));
   }
   &.disabled {
     @apply pointer-events-none bg-transparent;

diff --git a/packages/calcite-components/src/custom-theme/pagination.ts b/packages/calcite-components/src/custom-theme/pagination.ts
@@ -2,13 +2,13 @@ import { html } from "../../support/formatting";
 
 export const paginationTokens = {
   calcitePaginationSpacing: "",
-  calcitePaginationWidth: "",
+  calcitePaginationSize: "",
   calcitePaginationColor: "",
-  calcitePaginationSelectedColorHover: "",
-  calcitePaginationHoverBottomBorderColor: "",
-  calcitePaginationSelectedBottomBorderColor: "",
-  calcitePaginationActiveBackgroundColor: "",
-  calcitePaginationHoverChevronBackgroundColor: "",
+  calcitePaginationColorHover: "",
+  calcitePaginationColorBorderHover: "",
+  calcitePaginationColorBorderActive: "",
+  calcitePaginationColorBackground: "",
+  calcitePaginationChevronColorBackgroundHover: "",
 };
 
 export const pagination = html`<calcite-pagination