Merge branch 'dev' into dris0000/sort-handle-firefox-fix

Esri · Jan 14, 2025 · 123194f · 123194f
2 parents 665fd29 + 94ab2a5
commit 123194f
Show file tree

Hide file tree

Showing 9 changed files with 355 additions and 159 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,9 +35,9 @@
   },
   "devDependencies": {
     "@arcgis/lumina-compiler": "^4.32.0-next.75",
-    "@cspell/dict-gis": "1.0.0",
-    "@cspell/dict-pokemon": "1.0.0",
-    "@cspell/dict-scientific-terms-us": "3.0.5",
+    "@cspell/dict-gis": "1.0.1",
+    "@cspell/dict-pokemon": "1.0.1",
+    "@cspell/dict-scientific-terms-us": "3.0.6",
     "@cspell/eslint-plugin": "8.17.1",
     "@eslint/js": "9.17.0",
     "@esri/calcite-base": "1.2.0",
@@ -80,7 +80,7 @@
     "change-case": "5.4.4",
     "cheerio": "1.0.0",
     "chokidar": "4.0.3",
-    "chromatic": "11.22.0",
+    "chromatic": "11.22.2",
     "concurrently": "9.1.2",
     "conventional-changelog-conventionalcommits": "7.0.2",
     "cpy": "11.1.0",
@@ -106,7 +106,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rimraf": "6.0.1",
-    "rollup": "4.29.1",
+    "rollup": "4.30.1",
     "semver": "7.6.3",
     "shell-quote": "1.8.2",
     "storybook": "8.4.7",
@@ -133,8 +133,8 @@
     "patch-package": "8.0.0"
   },
   "optionalDependencies": {
-    "@nx/nx-darwin-arm64": "20.3.0",
-    "@nx/nx-linux-x64-gnu": "20.3.0",
-    "@nx/nx-win32-x64-msvc": "20.3.0"
+    "@nx/nx-darwin-arm64": "20.3.1",
+    "@nx/nx-linux-x64-gnu": "20.3.1",
+    "@nx/nx-win32-x64-msvc": "20.3.1"
   }
 }
diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
@@ -52,10 +52,10 @@
     "screenshot-tests": "npm run build-storybook",
     "screenshot-tests:preview": "npm run util:prep-build-reqs && NODE_OPTIONS=--openssl-legacy-provider STORYBOOK_SCREENSHOT_LOCAL_BUILD=true storybook dev",
     "screenshot-tests:publish": "npm run screenshot-tests && storybook-to-ghpages --existing-output-dir=docs",
-    "start": "npm run util:clean-js-files && concurrently --kill-others --raw \"tsc --project ./tsconfig-demos.json --watch\" \"npm run build:watch-dev\"",
+    "start": "npm run util:clean-js-files && concurrently --kill-others --raw \"trap 'npm run util:clean-js-files' INT TERM EXIT && tsc --project ./tsconfig-demos.json --watch\" \"npm run build:watch-dev\"",
     "test": "vitest run",
     "test:watch": "vitest",
-    "util:clean-js-files": "rimraf --glob -- *.js {src,.storybook,support}/**.js",
+    "util:clean-js-files": "rimraf --glob -- *.js {src,.storybook,support}/**/*.js",
     "util:clean-readmes": "git restore src/components/*/readme.md",
     "util:clean-tested-build": "npm ci && npm test && npm run build",
     "util:copy-legacy-vscode-data": "cpy \"./dist/docs/vscode.html-custom-data.json\" \"./dist/extras/\" --rename=vscode-data.json --flat",

diff --git a/packages/calcite-components/src/components/pagination/pagination.e2e.ts b/packages/calcite-components/src/components/pagination/pagination.e2e.ts
@@ -2,7 +2,7 @@
 import { newE2EPage, E2EPage, E2EElement } from "@arcgis/lumina-compiler/puppeteerTesting";
 import { describe, expect, it, beforeEach } from "vitest";
 import { html } from "../../../support/formatting";
-import { accessible, focusable, hidden, renders, t9n } from "../../tests/commonTests";
+import { accessible, focusable, hidden, renders, t9n, themed } from "../../tests/commonTests";
 import { CSS } from "./resources";
 
 describe("calcite-pagination", () => {
@@ -366,4 +366,93 @@ describe("calcite-pagination", () => {
       expect(hiddenChevrons.length).toBe(0);
     });
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed(html`<calcite-pagination total-items="1200" page-size="100" start-item="1"></calcite-pagination>`, {
+        "--calcite-pagination-color": [
+          {
+            shadowSelector: `.${CSS.chevron}`,
+            targetProp: "color",
+          },
+          {
+            shadowSelector: `.${CSS.page}:not(.${CSS.selected})`,
+            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}:not(.${CSS.disabled})`,
+            targetProp: "color",
+            state: "hover",
+          },
+          {
+            shadowSelector: `.${CSS.page}`,
+            targetProp: "color",
+            state: "hover",
+          },
+        ],
+        "--calcite-pagination-color-border-hover": {
+          shadowSelector: `.${CSS.page}:not(.${CSS.selected})`,
+          targetProp: "borderBlockEndColor",
+          state: "hover",
+        },
+        "--calcite-pagination-icon-color-background-hover": {
+          shadowSelector: `.${CSS.chevron}:not(.${CSS.disabled})`,
+          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}:not(.${CSS.disabled})`,
+            targetProp: "color",
+            state: { press: { attribute: "class", value: `${CSS.chevron}` } },
+          },
+          {
+            shadowSelector: `.${CSS.page}`,
+            targetProp: "color",
+            state: { press: { attribute: "class", value: `${CSS.page}` } },
+          },
+        ],
+        "--calcite-pagination-background-color": [
+          {
+            shadowSelector: `.${CSS.page}:not(.${CSS.selected})`,
+            targetProp: "backgroundColor",
+            state: { press: { attribute: "class", value: `${CSS.page}` } },
+          },
+          {
+            shadowSelector: `.${CSS.chevron}:not(.${CSS.disabled})`,
+            targetProp: "backgroundColor",
+            state: { press: { attribute: "class", value: `${CSS.chevron}` } },
+          },
+        ],
+      });
+    });
+    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",
+        },
+        "--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
@@ -1,3 +1,16 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-pagination-color: Specifies the component's item color.
+ * @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-background-color: Specifies the component's item background color when active.
+ * @prop --calcite-pagination-icon-color-background-hover: Specifies the component's chevron item background color when hovered.
+ */
+
 :host {
   @apply flex;
   writing-mode: horizontal-tb;
@@ -66,7 +79,6 @@
   @apply p-0
     m-0
     text-0h
-    text-color-3
     font-inherit
     box-border
     flex
@@ -76,6 +88,8 @@
     justify-center
     align-baseline
     bg-transparent;
+
+  color: var(--calcite-pagination-color, var(--calcite-color-text-3));
 }
 
 .chevron,
@@ -84,19 +98,27 @@
   border-block: 2px solid transparent;
 
   &:hover {
-    @apply text-color-1 transition-default;
+    @apply transition-default;
+
+    color: var(--calcite-pagination-color-hover, var(--calcite-color-text-1));
+  }
+  &:active {
+    color: var(--calcite-pagination-color-hover, var(--calcite-color-text-1));
   }
 }
 
 .page {
   &:hover {
-    @apply border-b-color-2;
+    border-block-end-color: var(--calcite-pagination-color-border-hover, var(--calcite-color-border-2));
   }
   &:active {
-    @apply bg-foreground-3 text-color-1;
+    background-color: var(--calcite-pagination-background-color, var(--calcite-color-foreground-3));
   }
   &.selected {
-    @apply text-color-1 border-b-color-brand font-medium;
+    @apply font-medium;
+
+    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);
@@ -107,10 +129,10 @@
 
 .chevron {
   &:hover {
-    @apply bg-foreground-2 text-color-1;
+    background-color: var(--calcite-pagination-icon-color-background-hover, var(--calcite-color-foreground-2));
   }
   &:active {
-    @apply bg-foreground-3 text-color-1;
+    background-color: var(--calcite-pagination-background-color, var(--calcite-color-foreground-3));
   }
   &.disabled {
     @apply pointer-events-none bg-transparent;

diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss
@@ -69,6 +69,7 @@ calcite-link {
 .content-container {
   flex-direction: column;
   @include word-break();
+  inline-size: var(--calcite-container-size-content-fluid);
 }
 
 .text-content-container {

diff --git a/packages/calcite-components/src/components/tile/tile.stories.ts b/packages/calcite-components/src/components/tile/tile.stories.ts
@@ -957,6 +957,58 @@ export const contentTopButton_TestOnly = (): string => html`
   </calcite-tile>
 `;
 
+export const contentTopFullWidth_TestOnly = (): string => html`
+  <style>
+    .slotted {
+      display: inline-flex;
+      justify-content: space-between;
+    }
+    .full-width {
+      inline-size: 100%;
+    }
+  </style>
+  <calcite-tile
+    icon="rangefinder"
+    heading="Field operator"
+    description="This role allows users in the field to create new Reports, and view and edit existing Reports and Attachments"
+  >
+    <div slot="content-top" class="slotted full-width">
+      <div>left side</div>
+      <div>right side</div>
+    </div>
+    <div slot="content-bottom" class="slotted">
+      <div>left side</div>
+      <div>right side</div>
+    </div>
+  </calcite-tile>
+`;
+
+export const contentBottomFullWidth_TestOnly = (): string => html`
+  <style>
+    .slotted {
+      display: inline-flex;
+      justify-content: space-between;
+    }
+    .full-width {
+      inline-size: 100%;
+    }
+  </style>
+  <calcite-tile
+    icon="rangefinder"
+    heading="Field operator"
+    description="This role allows users in the field to create new Reports, and view and edit existing Reports and Attachments"
+  >
+    <div slot="content-top" class="slotted">
+      <div>left side</div>
+      <div>right side</div>
+    </div>
+    <div slot="content-bottom" class="slotted full-width">
+      <div>left side</div>
+      <div>right side</div>
+    </div>
+  </calcite-tile>
+`;
+
 export const contentStartRTL_TestOnly = (): string => html`
   <calcite-tile description="polygon layer" heading="Percent of population that carpool to work" dir="rtl">
     <calcite-icon scale="s" slot="content-start" icon="polygon"></calcite-icon>

diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
@@ -34,7 +34,7 @@ import { link, linkTokens } from "./custom-theme/link";
 import { list, listTokens } from "./custom-theme/list";
 import { loader, loaderTokens } from "./custom-theme/loader";
 import { notice, noticeTokens } from "./custom-theme/notice";
-import { pagination } from "./custom-theme/pagination";
+import { pagination, paginationTokens } from "./custom-theme/pagination";
 import { popover, popoverTokens } from "./custom-theme/popover";
 import { progress, progressTokens } from "./custom-theme/progress";
 import { segmentedControl } from "./custom-theme/segmented-control";
@@ -171,6 +171,7 @@ const componentTokens = {
   ...navigationTokens,
   ...navigationUserTokens,
   ...noticeTokens,
+  ...paginationTokens,
   ...popoverTokens,
   ...progressTokens,
   ...ratingTokens,

diff --git a/packages/calcite-components/src/custom-theme/pagination.ts b/packages/calcite-components/src/custom-theme/pagination.ts
@@ -1,5 +1,14 @@
 import { html } from "../../support/formatting";
 
+export const paginationTokens = {
+  calcitePaginationColor: "",
+  calcitePaginationColorHover: "",
+  calcitePaginationColorBorderHover: "",
+  calcitePaginationColorBorderActive: "",
+  calcitePaginationBackgroundColor: "",
+  calcitePaginationIconColorBackgroundHover: "",
+};
+
 export const pagination = html`<calcite-pagination
   total-items="1200"
   page-size="100"