Skip to content

Commit 8c1259f

Browse files
ElijbetElijbet
authored
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.
1 parent 00a78da commit 8c1259f

File tree

7 files changed

+72
-21
lines changed

7 files changed

+72
-21
lines changed

‎packages/calcite-components/src/components.d.ts

+12-12
Original file line numberDiff line numberDiff line change
@@ -439,7 +439,7 @@ export namespace Components {
439439
*/
440440
"expanded": boolean;
441441
/**
442-
* Defines the available placements that can be used when a flip occurs.
442+
* Specifies the component's fallback slotted content `placement` when it's initial or specified `placement` has insufficient space available.
443443
*/
444444
"flipPlacements": FlipPlacement[];
445445
/**
@@ -1270,7 +1270,7 @@ export namespace Components {
12701270
*/
12711271
"filteredItems": HTMLCalciteComboboxItemElement[];
12721272
/**
1273-
* Defines the available placements that can be used when a flip occurs.
1273+
* Specifies the component's fallback slotted content placement when it's initial placement has insufficient space available.
12741274
*/
12751275
"flipPlacements": FlipPlacement[];
12761276
/**
@@ -1796,7 +1796,7 @@ export namespace Components {
17961796
*/
17971797
"disabled": boolean;
17981798
/**
1799-
* Defines the available placements that can be used when a flip occurs.
1799+
* Specifies the component's fallback `calcite-dropdown-item` `placement` when it's initial or specified `placement` has insufficient space available.
18001800
*/
18011801
"flipPlacements": FlipPlacement[];
18021802
/**
@@ -2431,7 +2431,7 @@ export namespace Components {
24312431
*/
24322432
"disabled": boolean;
24332433
/**
2434-
* Defines the available placements that can be used when a flip occurs.
2434+
* Specifies the component's fallback `calcite-date-picker` `placement` when it's initial or specified `placement` has insufficient space available.
24352435
*/
24362436
"flipPlacements": FlipPlacement[];
24372437
/**
@@ -4049,7 +4049,7 @@ export namespace Components {
40494049
*/
40504050
"flipDisabled": boolean;
40514051
/**
4052-
* Defines the available placements that can be used when a flip occurs.
4052+
* Specifies the component's fallback `placement` when it's initial or specified `placement` has insufficient space available.
40534053
*/
40544054
"flipPlacements": FlipPlacement[];
40554055
/**
@@ -4776,7 +4776,7 @@ export namespace Components {
47764776
*/
47774777
"dropdownLabel": string;
47784778
/**
4779-
* Defines the available placements that can be used when a flip occurs.
4779+
* Specifies the component's fallback slotted content `placement` when it's initial or specified `placement` has insufficient space available.
47804780
*/
47814781
"flipPlacements": FlipPlacement[];
47824782
/**
@@ -8361,7 +8361,7 @@ declare namespace LocalJSX {
83618361
*/
83628362
"expanded"?: boolean;
83638363
/**
8364-
* Defines the available placements that can be used when a flip occurs.
8364+
* Specifies the component's fallback slotted content `placement` when it's initial or specified `placement` has insufficient space available.
83658365
*/
83668366
"flipPlacements"?: FlipPlacement[];
83678367
/**
@@ -9244,7 +9244,7 @@ declare namespace LocalJSX {
92449244
*/
92459245
"filteredItems"?: HTMLCalciteComboboxItemElement[];
92469246
/**
9247-
* Defines the available placements that can be used when a flip occurs.
9247+
* Specifies the component's fallback slotted content placement when it's initial placement has insufficient space available.
92489248
*/
92499249
"flipPlacements"?: FlipPlacement[];
92509250
/**
@@ -9821,7 +9821,7 @@ declare namespace LocalJSX {
98219821
*/
98229822
"disabled"?: boolean;
98239823
/**
9824-
* Defines the available placements that can be used when a flip occurs.
9824+
* Specifies the component's fallback `calcite-dropdown-item` `placement` when it's initial or specified `placement` has insufficient space available.
98259825
*/
98269826
"flipPlacements"?: FlipPlacement[];
98279827
/**
@@ -10472,7 +10472,7 @@ declare namespace LocalJSX {
1047210472
*/
1047310473
"disabled"?: boolean;
1047410474
/**
10475-
* Defines the available placements that can be used when a flip occurs.
10475+
* Specifies the component's fallback `calcite-date-picker` `placement` when it's initial or specified `placement` has insufficient space available.
1047610476
*/
1047710477
"flipPlacements"?: FlipPlacement[];
1047810478
/**
@@ -12186,7 +12186,7 @@ declare namespace LocalJSX {
1218612186
*/
1218712187
"flipDisabled"?: boolean;
1218812188
/**
12189-
* Defines the available placements that can be used when a flip occurs.
12189+
* Specifies the component's fallback `placement` when it's initial or specified `placement` has insufficient space available.
1219012190
*/
1219112191
"flipPlacements"?: FlipPlacement[];
1219212192
/**
@@ -12949,7 +12949,7 @@ declare namespace LocalJSX {
1294912949
*/
1295012950
"dropdownLabel"?: string;
1295112951
/**
12952-
* Defines the available placements that can be used when a flip occurs.
12952+
* Specifies the component's fallback slotted content `placement` when it's initial or specified `placement` has insufficient space available.
1295312953
*/
1295412954
"flipPlacements"?: FlipPlacement[];
1295512955
/**

‎packages/calcite-components/src/components/progress/progress.e2e.ts

+20-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import { accessible, hidden, renders } from "../../tests/commonTests";
1+
import { html } from "../../../support/formatting";
2+
import { accessible, hidden, renders, themed } from "../../tests/commonTests";
3+
import { CSS } from "./resources";
24

35
describe("calcite-progress", () => {
46
describe("renders", () => {
@@ -16,4 +18,21 @@ describe("calcite-progress", () => {
1618
describe("accessible with value", () => {
1719
accessible(`<calcite-progress value="50" type="indeterminate" text="percentage"></calcite-progress>`);
1820
});
21+
22+
describe("theme", () => {
23+
themed(html`<calcite-progress text="optional text" type="determinate" value="0.5"></calcite-progress>`, {
24+
"--calcite-progress-background-color": {
25+
shadowSelector: `.${CSS.track}`,
26+
targetProp: "backgroundColor",
27+
},
28+
"--calcite-progress-fill-color": {
29+
shadowSelector: `.${CSS.bar}`,
30+
targetProp: "backgroundColor",
31+
},
32+
"--calcite-progress-text-color": {
33+
shadowSelector: `.${CSS.text}`,
34+
targetProp: "color",
35+
},
36+
});
37+
});
1938
});

‎packages/calcite-components/src/components/progress/progress.scss

+15-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
/**
2+
* CSS Custom Properties
3+
*
4+
* These properties can be overridden using the component's tag as selector.
5+
*
6+
* @prop --calcite-progress-background-color: Defines the background color of the component.
7+
* @prop --calcite-progress-fill-color: Defines the fill color of the progress bar.
8+
* @prop --calcite-progress-text-color: Defines the text color of the component.
9+
*/
10+
111
@import "../../assets/styles/animation";
212

313
:host {
@@ -12,11 +22,13 @@
1222

1323
.track {
1424
@apply z-default w-full overflow-hidden;
15-
background: theme("borderColor.color.3");
25+
background-color: var(--calcite-progress-background-color, var(--calcite-color-border-3));
1626
}
1727

1828
.bar {
19-
@apply bg-brand z-default;
29+
@apply z-default;
30+
31+
background-color: var(--calcite-progress-fill-color, var(--calcite-color-brand));
2032
}
2133

2234
@media (forced-colors: active) {
@@ -42,7 +54,7 @@
4254

4355
.text {
4456
@apply text-n2h px-0 pt-4 pb-0 text-center font-medium;
45-
color: var(--calcite-color-text-2);
57+
color: var(--calcite-progress-text-color, var(--calcite-color-text-2));
4658
}
4759

4860
@keyframes looping-progress-bar-ani {

‎packages/calcite-components/src/components/progress/resources.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export const CSS = {
2+
track: "track",
3+
bar: "bar",
4+
text: "text",
5+
};

‎packages/calcite-components/src/custom-theme.stories.ts

+5-1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { inputText } from "./custom-theme/input-text";
2424
import { loader } from "./custom-theme/loader";
2525
import { notices } from "./custom-theme/notice";
2626
import { pagination } from "./custom-theme/pagination";
27+
import { progress, progressTokens } from "./custom-theme/progress";
2728
import { segmentedControl } from "./custom-theme/segmented-control";
2829
import { slider } from "./custom-theme/slider";
2930
import { calciteSwitch } from "./custom-theme/switch";
@@ -108,7 +109,8 @@ const kitchenSink = (args: Record<string, string>, useTestValues = false) =>
108109
<div>${checkbox}</div>
109110
${chips} ${pagination} ${slider}
110111
</div>
111-
<div class="demo-column">${datePicker} ${tabs} ${loader} ${calciteSwitch}</div>
112+
<div class="demo-column">${datePicker} ${tabs} ${loader} ${calciteSwitch} ${progress}
113+
</div>
112114
</div>
113115
</div>
114116
</div>`;
@@ -123,6 +125,7 @@ export default {
123125
...actionPadTokens,
124126
...actionGroupTokens,
125127
...cardTokens,
128+
...progressTokens,
126129
...inputTokens,
127130
},
128131
};
@@ -140,6 +143,7 @@ export const theming_TestOnly = (): string => {
140143
...actionPadTokens,
141144
...actionGroupTokens,
142145
...cardTokens,
146+
...progressTokens,
143147
...inputTokens,
144148
},
145149
true,

‎packages/calcite-components/src/custom-theme/progress.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { html } from "../../support/formatting";
2+
3+
export const progressTokens = {
4+
calciteProgressBackgroundColor: "",
5+
calciteProgressFillColor: "",
6+
calciteProgressTextColor: "",
7+
};
8+
9+
export const progress = html`<calcite-progress text="optional text" type="determinate" value="0.5"></calcite-progress>`;

‎packages/calcite-components/src/custom-theme/switch.ts

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { html } from "../../support/formatting";
22

3-
export const calciteSwitch = html`<label>
4-
<calcite-switch scale="m" checked> </calcite-switch>
5-
Red switch scale medium
6-
</label>`;
3+
export const calciteSwitch = html`
4+
<calcite-label layout="inline">
5+
<calcite-switch scale="m" checked></calcite-switch>
6+
Red switch scale medium
7+
</calcite-label>
8+
`;

0 commit comments

Comments
 (0)