feat(progress): add component tokens (#10267)

**Related Issue:** #7180 ## Summary Add `progress` component tokens. `--calcite-progress-background-color`: Defines the background color of the component. `--calcite-progress-fill-color`: Defines the background color of the progress bar. `--calcite-progress-text-color`: Defines the text color of the component.
Esri · Sep 12, 2024 · 8c1259f · 8c1259f
1 parent 00a78da
commit 8c1259f
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 21 deletions.
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
@@ -439,7 +439,7 @@ export namespace Components {
          */
         "expanded": boolean;
         /**
-          * Defines the available placements that can be used when a flip occurs.
+          * Specifies the component's fallback slotted content `placement` when it's initial or specified `placement` has insufficient space available.
          */
         "flipPlacements": FlipPlacement[];
         /**
@@ -1270,7 +1270,7 @@ export namespace Components {
          */
         "filteredItems": HTMLCalciteComboboxItemElement[];
         /**
-          * Defines the available placements that can be used when a flip occurs.
+          * Specifies the component's fallback slotted content placement when it's initial placement has insufficient space available.
          */
         "flipPlacements": FlipPlacement[];
         /**
@@ -1796,7 +1796,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Defines the available placements that can be used when a flip occurs.
+          * Specifies the component's fallback `calcite-dropdown-item` `placement` when it's initial or specified `placement` has insufficient space available.
          */
         "flipPlacements": FlipPlacement[];
         /**
@@ -2431,7 +2431,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Defines the available placements that can be used when a flip occurs.
+          * Specifies the component's fallback `calcite-date-picker` `placement` when it's initial or specified `placement` has insufficient space available.
          */
         "flipPlacements": FlipPlacement[];
         /**
@@ -4049,7 +4049,7 @@ export namespace Components {
          */
         "flipDisabled": boolean;
         /**
-          * Defines the available placements that can be used when a flip occurs.
+          * Specifies the component's fallback `placement` when it's initial or specified `placement` has insufficient space available.
          */
         "flipPlacements": FlipPlacement[];
         /**
@@ -4776,7 +4776,7 @@ export namespace Components {
          */
         "dropdownLabel": string;
         /**
-          * Defines the available placements that can be used when a flip occurs.
+          * Specifies the component's fallback slotted content `placement` when it's initial or specified `placement` has insufficient space available.
          */
         "flipPlacements": FlipPlacement[];
         /**
@@ -8361,7 +8361,7 @@ declare namespace LocalJSX {
          */
         "expanded"?: boolean;
         /**
-          * Defines the available placements that can be used when a flip occurs.
+          * Specifies the component's fallback slotted content `placement` when it's initial or specified `placement` has insufficient space available.
          */
         "flipPlacements"?: FlipPlacement[];
         /**
@@ -9244,7 +9244,7 @@ declare namespace LocalJSX {
          */
         "filteredItems"?: HTMLCalciteComboboxItemElement[];
         /**
-          * Defines the available placements that can be used when a flip occurs.
+          * Specifies the component's fallback slotted content placement when it's initial placement has insufficient space available.
          */
         "flipPlacements"?: FlipPlacement[];
         /**
@@ -9821,7 +9821,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Defines the available placements that can be used when a flip occurs.
+          * Specifies the component's fallback `calcite-dropdown-item` `placement` when it's initial or specified `placement` has insufficient space available.
          */
         "flipPlacements"?: FlipPlacement[];
         /**
@@ -10472,7 +10472,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Defines the available placements that can be used when a flip occurs.
+          * Specifies the component's fallback `calcite-date-picker` `placement` when it's initial or specified `placement` has insufficient space available.
          */
         "flipPlacements"?: FlipPlacement[];
         /**
@@ -12186,7 +12186,7 @@ declare namespace LocalJSX {
          */
         "flipDisabled"?: boolean;
         /**
-          * Defines the available placements that can be used when a flip occurs.
+          * Specifies the component's fallback `placement` when it's initial or specified `placement` has insufficient space available.
          */
         "flipPlacements"?: FlipPlacement[];
         /**
@@ -12949,7 +12949,7 @@ declare namespace LocalJSX {
          */
         "dropdownLabel"?: string;
         /**
-          * Defines the available placements that can be used when a flip occurs.
+          * Specifies the component's fallback slotted content `placement` when it's initial or specified `placement` has insufficient space available.
          */
         "flipPlacements"?: FlipPlacement[];
         /**

diff --git a/packages/calcite-components/src/components/progress/progress.e2e.ts b/packages/calcite-components/src/components/progress/progress.e2e.ts
@@ -1,4 +1,6 @@
-import { accessible, hidden, renders } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
+import { accessible, hidden, renders, themed } from "../../tests/commonTests";
+import { CSS } from "./resources";
 
 describe("calcite-progress", () => {
   describe("renders", () => {
@@ -16,4 +18,21 @@ describe("calcite-progress", () => {
   describe("accessible with value", () => {
     accessible(`<calcite-progress value="50" type="indeterminate" text="percentage"></calcite-progress>`);
   });
+
+  describe("theme", () => {
+    themed(html`<calcite-progress text="optional text" type="determinate" value="0.5"></calcite-progress>`, {
+      "--calcite-progress-background-color": {
+        shadowSelector: `.${CSS.track}`,
+        targetProp: "backgroundColor",
+      },
+      "--calcite-progress-fill-color": {
+        shadowSelector: `.${CSS.bar}`,
+        targetProp: "backgroundColor",
+      },
+      "--calcite-progress-text-color": {
+        shadowSelector: `.${CSS.text}`,
+        targetProp: "color",
+      },
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/progress/progress.scss b/packages/calcite-components/src/components/progress/progress.scss
@@ -1,3 +1,13 @@
+/**
+* CSS Custom Properties
+*
+* These properties can be overridden using the component's tag as selector.
+*
+* @prop --calcite-progress-background-color: Defines the background color of the component.
+* @prop --calcite-progress-fill-color: Defines the fill color of the progress bar.
+* @prop --calcite-progress-text-color: Defines the text color of the component.
+*/
+
 @import "../../assets/styles/animation";
 
 :host {
@@ -12,11 +22,13 @@
 
 .track {
   @apply z-default w-full overflow-hidden;
-  background: theme("borderColor.color.3");
+  background-color: var(--calcite-progress-background-color, var(--calcite-color-border-3));
 }
 
 .bar {
-  @apply bg-brand z-default;
+  @apply z-default;
+
+  background-color: var(--calcite-progress-fill-color, var(--calcite-color-brand));
 }
 
 @media (forced-colors: active) {
@@ -42,7 +54,7 @@
 
 .text {
   @apply text-n2h px-0 pt-4 pb-0 text-center font-medium;
-  color: var(--calcite-color-text-2);
+  color: var(--calcite-progress-text-color, var(--calcite-color-text-2));
 }
 
 @keyframes looping-progress-bar-ani {

diff --git a/packages/calcite-components/src/components/progress/resources.ts b/packages/calcite-components/src/components/progress/resources.ts
@@ -0,0 +1,5 @@
+export const CSS = {
+  track: "track",
+  bar: "bar",
+  text: "text",
+};
diff --git a/packages/calcite-components/src/custom-theme.stories.ts b/packages/calcite-components/src/custom-theme.stories.ts
@@ -24,6 +24,7 @@ import { inputText } from "./custom-theme/input-text";
 import { loader } from "./custom-theme/loader";
 import { notices } from "./custom-theme/notice";
 import { pagination } from "./custom-theme/pagination";
+import { progress, progressTokens } from "./custom-theme/progress";
 import { segmentedControl } from "./custom-theme/segmented-control";
 import { slider } from "./custom-theme/slider";
 import { calciteSwitch } from "./custom-theme/switch";
@@ -108,7 +109,8 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
           <div>${checkbox}</div>
           ${chips} ${pagination} ${slider}
         </div>
-        <div class="demo-column">${datePicker} ${tabs} ${loader} ${calciteSwitch}</div>
+        <div class="demo-column">${datePicker} ${tabs} ${loader} ${calciteSwitch} ${progress}
+        </div>
       </div>
     </div>
   </div>`;
@@ -123,6 +125,7 @@ export default {
     ...actionPadTokens,
     ...actionGroupTokens,
     ...cardTokens,
+    ...progressTokens,
     ...inputTokens,
   },
 };
@@ -140,6 +143,7 @@ export const theming_TestOnly = (): string => {
       ...actionPadTokens,
       ...actionGroupTokens,
       ...cardTokens,
+      ...progressTokens,
       ...inputTokens,
     },
     true,

diff --git a/packages/calcite-components/src/custom-theme/progress.ts b/packages/calcite-components/src/custom-theme/progress.ts
@@ -0,0 +1,9 @@
+import { html } from "../../support/formatting";
+
+export const progressTokens = {
+  calciteProgressBackgroundColor: "",
+  calciteProgressFillColor: "",
+  calciteProgressTextColor: "",
+};
+
+export const progress = html`<calcite-progress text="optional text" type="determinate" value="0.5"></calcite-progress>`;
diff --git a/packages/calcite-components/src/custom-theme/switch.ts b/packages/calcite-components/src/custom-theme/switch.ts
@@ -1,6 +1,8 @@
 import { html } from "../../support/formatting";
 
-export const calciteSwitch = html`<label>
-  <calcite-switch scale="m" checked> </calcite-switch>
-  Red switch scale medium
-</label>`;
+export const calciteSwitch = html`
+  <calcite-label layout="inline">
+    <calcite-switch scale="m" checked></calcite-switch>
+    Red switch scale medium
+  </calcite-label>
+`;