Skip to content

Commit da88b3c

Browse files
jenndiazjenndiaz
authored
fix(meter): update layout tokens (#2080)
* chore(meter): updates tokens * chore(meter): wip add to storybook * chore(meter): wip as variant of progressbar * chore(meter): functioning storybook * feat(meter): add percent range to story controls * chore(meter): refactor to separate template * chore(meter): refactor to not use mods * chore(meter): address PR feedback * chore(meter): refactor fillColor in template * fix(meter): address indentation error * chore(meter): mods
1 parent e44e4f4 commit da88b3c

File tree

7 files changed

+240
-45
lines changed

7 files changed

+240
-45
lines changed

‎components/progressbar/index.css

Lines changed: 51 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,16 @@ governing permissions and limitations under the License.
4949
--spectrum-progressbar-label-and-value-white: var(--spectrum-white);
5050
--spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-300);
5151
--spectrum-progressbar-fill-color-white: var(--spectrum-white);
52+
53+
/* Meter */
54+
--spectrum-meter-min-width: var(--spectrum-meter-minimum-width);
55+
--spectrum-meter-max-width: var(--spectrum-meter-maximum-width);
56+
--spectrum-meter-inline-size: var(--spectrum-meter-default-width);
57+
--spectrum-meter-thickness-s: var(--spectrum-meter-thickness-small);
58+
--spectrum-meter-thickness-l: var(--spectrum-meter-thickness-large);
59+
--spectrum-meter-top-to-text: var(--spectrum-component-top-to-text);
5260
}
5361

54-
/* Meter only supports size S and L */
5562
.spectrum-ProgressBar--sizeS, .spectrum-Meter--sizeS {
5663
--spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400);
5764

@@ -70,7 +77,6 @@ governing permissions and limitations under the License.
7077
--spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
7178
}
7279

73-
/* Meter only supports size S and L */
7480
.spectrum-ProgressBar--sizeL, .spectrum-Meter--sizeL {
7581
--spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2500);
7682

@@ -89,12 +95,37 @@ governing permissions and limitations under the License.
8995
--spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-300);
9096
}
9197

92-
@media (forced-colors: active) {
93-
.spectrum-ProgressBar-track {
94-
forced-color-adjust: none;
95-
--highcontrast-progressbar-fill-color: ButtonText;
96-
--highcontrast-progressbar-track-color: ButtonFace;
97-
border: 1px solid ButtonText;
98+
.spectrum-Meter {
99+
--spectrum-progressbar-size-default: var(--mod-meter-inline-size, var(--spectrum-meter-inline-size));
100+
--spectrum-progressbar-max-size: var(--mod-meter-max-width, var(--spectrum-meter-max-width));
101+
--spectrum-progressbar-min-size: var(--mod-meter-min-width, var(--spectrum-meter-min-width));
102+
103+
/* Meter only supports size S and L */
104+
&.spectrum-Meter--sizeS {
105+
--spectrum-progressbar-thickness: var(--spectrum-meter-thickness-s);
106+
}
107+
108+
&.spectrum-Meter--sizeL {
109+
--spectrum-progressbar-thickness: var(--spectrum-meter-thickness-l);
110+
--spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
111+
}
112+
113+
&.is-positive {
114+
.spectrum-ProgressBar-fill {
115+
background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-positive, var(--spectrum-progressbar-fill-color-positive)));
116+
}
117+
}
118+
119+
&.is-notice {
120+
.spectrum-ProgressBar-fill {
121+
background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-notice, var(--spectrum-progressbar-fill-color-notice)));
122+
}
123+
}
124+
125+
&.is-negative {
126+
.spectrum-ProgressBar-fill {
127+
background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-negative, var(--spectrum-progressbar-fill-color-negative)));
128+
}
98129
}
99130
}
100131

@@ -148,31 +179,14 @@ governing permissions and limitations under the License.
148179
block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
149180
border-radius: var(--spectrum-progressbar-corner-radius);
150181

151-
background: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color)));
152-
}
153-
154-
/* Fill variants */
155-
&.is-positive {
156-
.spectrum-ProgressBar-fill {
157-
background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-positive, var(--spectrum-progressbar-fill-color-positive)));
158-
}
159-
}
160-
&.is-notice {
161-
.spectrum-ProgressBar-fill {
162-
background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-notice, var(--spectrum-progressbar-fill-color-notice)));
163-
}
164-
}
165-
&.is-negative {
166-
.spectrum-ProgressBar-fill {
167-
background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-negative, var(--spectrum-progressbar-fill-color-negative)));
168-
}
182+
background-color: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color)));
169183
}
170184

171185
.spectrum-ProgressBar-fill {
172186
border: none;
173187
block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
174188
transition: width 1s;
175-
background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color)));
189+
background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color)));
176190
}
177191

178192
&--indeterminate .spectrum-ProgressBar-fill {
@@ -211,7 +225,7 @@ governing permissions and limitations under the License.
211225
&--staticWhite {
212226
.spectrum-ProgressBar-fill {
213227
color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white));
214-
background: var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white));
228+
background-color: var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white));
215229
}
216230

217231
.spectrum-ProgressBar-label,
@@ -255,3 +269,12 @@ governing permissions and limitations under the License.
255269
transform: translate(calc(-1 * var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default))));
256270
}
257271
}
272+
273+
@media (forced-colors: active) {
274+
.spectrum-ProgressBar-track {
275+
forced-color-adjust: none;
276+
--highcontrast-progressbar-fill-color: ButtonText;
277+
--highcontrast-progressbar-track-color: ButtonFace;
278+
border: 1px solid ButtonText;
279+
}
280+
}

‎components/progressbar/metadata/meter.yml

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,17 @@ sections:
1212
- name: Custom Properties API
1313
description: |
1414
This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a href="https://github.com/adobe/spectrum-css/tree/main/components/progressbar/metadata/mods.md">here</a>.
15+
- name: Migration Guide
16+
description: |
17+
### spectrum-Meter class
18+
Meter now uses the class `spectrum-Meter` on the parent `div`
1519
examples:
1620
- id: meter-sizes
1721
name: Sizing
1822
markup: |
1923
<div class="spectrum-Examples" style="flex-direction: column;">
2024
<div class="spectrum-Examples-item">
21-
<div class="spectrum-ProgressBar spectrum-Meter--sizeS is-positive" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 200px;">
25+
<div class="spectrum-ProgressBar spectrum-Meter spectrum-Meter--sizeS is-positive" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
2226
<div class="spectrum-FieldLabel spectrum-FieldLabel--sizeS spectrum-ProgressBar-label">Storage Space</div>
2327
<div class="spectrum-FieldLabel spectrum-FieldLabel--sizeS spectrum-ProgressBar-percentage">50%</div>
2428
<div class="spectrum-ProgressBar-track">
@@ -28,7 +32,7 @@ examples:
2832
</div>
2933
</br>
3034
<div class="spectrum-Examples-item" style="margin-bottom: 20px;">
31-
<div class="spectrum-ProgressBar spectrum-Meter--sizeL is-notice" value="80" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 200px;">
35+
<div class="spectrum-ProgressBar spectrum-Meter spectrum-Meter--sizeL is-notice" value="80" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
3236
<div class="spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-ProgressBar-label">Storage Space</div>
3337
<div class="spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-ProgressBar-percentage">80%</div>
3438
<div class="spectrum-ProgressBar-track">
@@ -39,7 +43,7 @@ examples:
3943
name: Colors
4044
markup: |
4145
<div style="margin: 20px 0;">
42-
<div class="spectrum-ProgressBar spectrum-Meter--sizeL is-positive" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
46+
<div class="spectrum-ProgressBar spectrum-Meter spectrum-Meter--sizeL is-positive" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
4347
<div class="spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-ProgressBar-label">Storage Space</div>
4448
<div class="spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-ProgressBar-percentage">50%</div>
4549
<div class="spectrum-ProgressBar-track">
@@ -48,7 +52,7 @@ examples:
4852
</div>
4953
</div>
5054
<div style="margin: 20px 0;">
51-
<div class="spectrum-ProgressBar spectrum-Meter--sizeL is-notice" value="80" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
55+
<div class="spectrum-ProgressBar spectrum-Meter spectrum-Meter--sizeL is-notice" value="80" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
5256
<div class="spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-ProgressBar-label">Storage Space</div>
5357
<div class="spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-ProgressBar-percentage">80%</div>
5458
<div class="spectrum-ProgressBar-track">
@@ -57,15 +61,15 @@ examples:
5761
</div>
5862
</div>
5963
<div style="margin: 20px 0;">
60-
<div class="spectrum-ProgressBar spectrum-Meter--sizeL is-negative" value="90" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
64+
<div class="spectrum-ProgressBar spectrum-Meter spectrum-Meter--sizeL is-negative" value="90" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
6165
<div class="spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-ProgressBar-label">Storage Space</div>
6266
<div class="spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-ProgressBar-percentage">90%</div>
6367
<div class="spectrum-ProgressBar-track">
6468
<div class="spectrum-ProgressBar-fill" style="width: 90%;"></div>
6569
</div>
6670
</div>
6771
<div style="margin: 20px 0;">
68-
<div class="spectrum-ProgressBar spectrum-Meter--sizeL" value="40" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
72+
<div class="spectrum-ProgressBar spectrum-Meter spectrum-Meter--sizeL" value="40" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
6973
<div class="spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-ProgressBar-label">Storage Space</div>
7074
<div class="spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-ProgressBar-percentage">40%</div>
7175
<div class="spectrum-ProgressBar-track">
@@ -77,7 +81,7 @@ examples:
7781
name: Neutral
7882
markup: |
7983
<div style="margin: 20px 0;">
80-
<div class="spectrum-ProgressBar spectrum-Meter--sizeL is-positive" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
84+
<div class="spectrum-ProgressBar spectrum-Meter spectrum-Meter--sizeL is-positive" value="50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
8185
<div class="spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-ProgressBar-label">Storage Space</div>
8286
<div class="spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-ProgressBar-percentage">50%</div>
8387
<div class="spectrum-ProgressBar-track">
@@ -89,7 +93,7 @@ examples:
8993
name: Notice
9094
markup: |
9195
<div style="margin: 20px 0;">
92-
<div class="spectrum-ProgressBar spectrum-Meter--sizeL is-notice" value="80" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
96+
<div class="spectrum-ProgressBar spectrum-Meter spectrum-Meter--sizeL is-notice" value="80" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
9397
<div class="spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-ProgressBar-label">Storage Space</div>
9498
<div class="spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-ProgressBar-percentage">80%</div>
9599
<div class="spectrum-ProgressBar-track">
@@ -101,7 +105,7 @@ examples:
101105
name: Negative
102106
markup: |
103107
<div style="margin: 20px 0;">
104-
<div class="spectrum-ProgressBar spectrum-Meter--sizeL is-negative" value="90" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
108+
<div class="spectrum-ProgressBar spectrum-Meter spectrum-Meter--sizeL is-negative" value="90" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
105109
<div class="spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-ProgressBar-label">Storage Space</div>
106110
<div class="spectrum-FieldLabel spectrum-FieldLabel--sizeL spectrum-ProgressBar-percentage">90%</div>
107111
<div class="spectrum-ProgressBar-track">

‎components/progressbar/metadata/mods.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
| Modifiable Custom Properties |
22
| ------------------------------------------------------- |
3+
| `--mod-meter-inline-size` |
4+
| `--mod-meter-max-width` |
5+
| `--mod-meter-min-width` |
36
| `--mod-progressbar-animation-duration-indeterminate` |
47
| `--mod-progressbar-animation-ease-in-out-indeterminate` |
58
| `--mod-progressbar-fill-color` |

‎components/progressbar/stories/meter.stories.js

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
// Import the component markup template
2+
import { Template } from "./metertemplate";
3+
4+
export default {
5+
title: "Components/Meter",
6+
description:
7+
"The meter component is a visual representations of a quantity or an achievement. Their progress is determined by user actions, rather than system actions.",
8+
component: "ProgressBar",
9+
argTypes: {
10+
label: {
11+
name: "Label",
12+
type: { name: "string" },
13+
table: {
14+
type: { summary: "string" },
15+
category: "Content",
16+
},
17+
control: "text",
18+
},
19+
value: {
20+
name: "Percent value for fill",
21+
type: { name: "number" },
22+
table: {
23+
type: { summary: "number" },
24+
category: "Content",
25+
},
26+
control: { type: "range", min: 0, max: 100,},
27+
},
28+
meterFill: {
29+
name: "Meter fill color",
30+
type: { name: "string" },
31+
table: {
32+
type: { summary: "string" },
33+
category: "Component",
34+
},
35+
options: ["notice", "positive", "negative", "default"],
36+
control: "select",
37+
},
38+
size: {
39+
name: "Meter size",
40+
type: { name: "string" },
41+
table: {
42+
type: { summary: "string" },
43+
category: "Component",
44+
},
45+
options: ["s", "l"],
46+
control: "select",
47+
},
48+
},
49+
args: {
50+
rootClass: "spectrum-ProgressBar",
51+
label: "Storage Space",
52+
size: "s",
53+
value: 50,
54+
},
55+
parameters: {
56+
actions: {
57+
handles: [],
58+
},
59+
status: {
60+
type: process.env.MIGRATED_PACKAGES.includes("progressbar")
61+
? "migrated"
62+
: undefined,
63+
},
64+
},
65+
};
66+
67+
export const Default = Template.bind({});
68+
Default.args = {
69+
meterFill: "default",
70+
};
71+
72+
export const Large = Template.bind({});
73+
Large.args = {
74+
meterFill: "default",
75+
size: "l",
76+
};
77+
78+
79+
export const Postive = Template.bind({});
80+
Postive.args = {
81+
meterFill: "positive",
82+
};
83+
84+
export const Negative = Template.bind({});
85+
Negative.args = {
86+
meterFill: "negative",
87+
};
88+
89+
export const Notice = Template.bind({});
90+
Notice.args = {
91+
meterFill: "notice",
92+
};

‎components/progressbar/stories/metertemplate.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { html } from "lit";
2+
import { classMap } from "lit/directives/class-map.js";
3+
import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
4+
5+
import "../index.css";
6+
7+
export const Template = ({
8+
rootClass = "spectrum-ProgressBar",
9+
customClasses = [],
10+
label,
11+
value,
12+
meterFill,
13+
size = "s",
14+
...globals
15+
}) => {
16+
17+
return html`
18+
<div
19+
class=${classMap({
20+
[rootClass]: true,
21+
["spectrum-Meter"]: true,
22+
[`spectrum-Meter--size${size?.toUpperCase()}`]: size,
23+
[`is-${meterFill}`]: meterFill !== "default",
24+
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
25+
})}
26+
value="${value}%"
27+
role="progressbar"
28+
aria-valuenow="${value}%"
29+
aria-valuemin="0"
30+
aria-valuemax="100"
31+
>
32+
${FieldLabel({
33+
...globals,
34+
size,
35+
label,
36+
alignment: "",
37+
customClasses: [`${rootClass}-label`],
38+
})}
39+
${FieldLabel({
40+
...globals,
41+
size,
42+
label: `${value}%`,
43+
alignment: "",
44+
customClasses: [`${rootClass}-percentage`],
45+
})}
46+
<div class="${rootClass}-track">
47+
<div class="${rootClass}-fill" style="width: ${value}%;"></div>
48+
</div>
49+
</div>
50+
`;
51+
};

0 commit comments

Comments
 (0)