From 8c1259f4310b930a6c2b46abe5ebaf7722f36b2c Mon Sep 17 00:00:00 2001 From: Eliza Khachatryan Date: Thu, 12 Sep 2024 16:40:34 -0700 Subject: [PATCH] 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. --- .../calcite-components/src/components.d.ts | 24 +++++++++---------- .../src/components/progress/progress.e2e.ts | 21 +++++++++++++++- .../src/components/progress/progress.scss | 18 +++++++++++--- .../src/components/progress/resources.ts | 5 ++++ .../src/custom-theme.stories.ts | 6 ++++- .../src/custom-theme/progress.ts | 9 +++++++ .../src/custom-theme/switch.ts | 10 ++++---- 7 files changed, 72 insertions(+), 21 deletions(-) create mode 100644 packages/calcite-components/src/components/progress/resources.ts create mode 100644 packages/calcite-components/src/custom-theme/progress.ts diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 718aac02da7..b1ec6c03be5 100644 --- 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 index 17b795cc4fe..6691c949ece 100644 --- 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(``); }); + + describe("theme", () => { + themed(html``, { + "--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 index 4d31103557d..50877482ce2 100644 --- 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 new file mode 100644 index 00000000000..4a814c136dd --- /dev/null +++ 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 index e055b02f598..00e59a0a5a1 100644 --- 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, useTestValues = false) =>
${checkbox}
${chips} ${pagination} ${slider} -
${datePicker} ${tabs} ${loader} ${calciteSwitch}
+
${datePicker} ${tabs} ${loader} ${calciteSwitch} ${progress} +
`; @@ -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 new file mode 100644 index 00000000000..1697f2e7d26 --- /dev/null +++ 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``; diff --git a/packages/calcite-components/src/custom-theme/switch.ts b/packages/calcite-components/src/custom-theme/switch.ts index 2293379f7ef..994002603ef 100644 --- 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``; +export const calciteSwitch = html` + + + Red switch scale medium + +`;