Skip to content

Commit 64f8c1b

Browse files
Melissa Thompsonpfulton
Melissa Thompson
authored and
pfulton
committed
feat(progressbar): s2 migration (#2659)
1 parent c41975c commit 64f8c1b

File tree

8 files changed

+250
-68
lines changed

8 files changed

+250
-68
lines changed

‎.changeset/proud-jokes-rule.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@spectrum-css/progressbar": major
3+
---
4+
5+
feat(progressbar): S2 migration
6+
7+
Progress bar now uses Spectrum 2 tokens and specifications. This migration includes updated colors, font sizes, and spacing. No mods were harmed in the migration of this component (all `--mod` properties remain the same).

‎.storybook/decorators/contextsWrapper.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -58,14 +58,14 @@ export const withContextWrapper = makeDecorator({
5858
if (args.staticColor === "black") {
5959
container.style.background = "var(--spectrum-examples-gradient-static-black)";
6060
}
61-
else if (args.staticColor === "white") {
61+
else if (args.staticColor === "white" || args.isStaticWhite === true) {
6262
container.style.background = "var(--spectrum-examples-gradient-static-white)";
6363
}
6464
else {
6565
container.style.removeProperty("background");
6666
}
6767
}
68-
}, [color, scale, isExpress, args.staticColor]);
68+
}, [color, scale, isExpress, args.staticColor, args.isStaticWhite]);
6969

7070
return StoryFn(context);
7171
},

‎components/progressbar/index.css

+19-22
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ governing permissions and limitations under the License.
1414
/* Static tokens */
1515
--spectrum-progressbar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out);
1616
--spectrum-progressbar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000);
17-
--spectrum-progressbar-corner-radius: var(--spectrum-corner-radius-100);
17+
--spectrum-progressbar-corner-radius: var(--spectrum-corner-radius-full);
1818

1919
--spectrum-progressbar-fill-size-indeterminate: 70%;
2020

@@ -28,38 +28,39 @@ governing permissions and limitations under the License.
2828
--spectrum-progressbar-size-2800: 224px;
2929

3030
/* Size */
31-
--spectrum-progressbar-font-size: var(--spectrum-font-size-75);
31+
--spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400);
32+
33+
--spectrum-progressbar-font-size: var(--spectrum-font-size-100);
34+
--spectrum-progressbar-line-height: var(--spectrum-line-height-100);
3235
--spectrum-progressbar-line-height-cjk: var(--spectrum-cjk-line-height-100);
3336

3437
--spectrum-progressbar-min-size: var(--spectrum-progress-bar-minimum-width);
3538
--spectrum-progressbar-max-size: var(--spectrum-progress-bar-maximum-width);
3639

3740
--spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-medium);
38-
--spectrum-progressbar-line-height: var(--spectrum-line-height-100);
3941

4042
/* Spacing */
4143
--spectrum-progressbar-spacing-label-to-progressbar: var(--spectrum-spacing-75);
4244
--spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-100);
4345
--spectrum-progressbar-spacing-label-to-text: var(--spectrum-spacing-200);
4446

4547
/* Color */
46-
--spectrum-progressbar-text-color: var(--spectrum-neutral-content-color-default);
47-
--spectrum-progressbar-track-color: var(--spectrum-gray-200);
48-
--spectrum-progressbar-fill-color: var(--spectrum-accent-color-900);
48+
--spectrum-progressbar-text-color: var(--spectrum-neutral-subdued-content-color-default);
49+
--spectrum-progressbar-track-color: var(--spectrum-gray-300);
50+
--spectrum-progressbar-fill-color: var(--spectrum-accent-content-color-default);
4951
--spectrum-progressbar-fill-color-positive: var(--spectrum-positive-visual-color);
5052
--spectrum-progressbar-fill-color-notice: var(--spectrum-notice-visual-color);
5153
--spectrum-progressbar-fill-color-negative: var(--spectrum-negative-visual-color);
52-
--spectrum-progressbar-label-and-value-white: var(--spectrum-white);
54+
--spectrum-progressbar-label-and-value-white: var(--spectrum-transparent-white-700);
5355
--spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-300);
54-
--spectrum-progressbar-fill-color-white: var(--spectrum-white);
56+
--spectrum-progressbar-fill-color-white: var(--spectrum-transparent-white-900);
5557

5658
/* Meter */
5759
--spectrum-meter-min-width: var(--spectrum-meter-minimum-width);
5860
--spectrum-meter-max-width: var(--spectrum-meter-maximum-width);
5961
--spectrum-meter-inline-size: var(--spectrum-meter-default-width);
6062
--spectrum-meter-thickness-s: var(--spectrum-meter-thickness-small);
6163
--spectrum-meter-thickness-l: var(--spectrum-meter-thickness-large);
62-
--spectrum-meter-top-to-text: var(--spectrum-component-top-to-text);
6364
}
6465

6566
.spectrum-ProgressBar--sizeS, .spectrum-Meter--sizeS {
@@ -71,19 +72,10 @@ governing permissions and limitations under the License.
7172
--spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
7273
}
7374

74-
.spectrum-ProgressBar--sizeM {
75-
--spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400);
76-
77-
--spectrum-progressbar-font-size: var(--spectrum-font-size-75);
78-
--spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large);
79-
80-
--spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
81-
}
82-
8375
.spectrum-ProgressBar--sizeL, .spectrum-Meter--sizeL {
8476
--spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2500);
8577

86-
--spectrum-progressbar-font-size: var(--spectrum-font-size-100);
78+
--spectrum-progressbar-font-size: var(--spectrum-font-size-200);
8779
--spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large);
8880

8981
--spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-200);
@@ -92,7 +84,7 @@ governing permissions and limitations under the License.
9284
.spectrum-ProgressBar--sizeXL {
9385
--spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2800);
9486

95-
--spectrum-progressbar-font-size: var(--spectrum-font-size-200);
87+
--spectrum-progressbar-font-size: var(--spectrum-font-size-300);
9688
--spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-extra-large);
9789

9890
--spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-300);
@@ -126,7 +118,6 @@ governing permissions and limitations under the License.
126118
}
127119
}
128120

129-
130121
.spectrum-ProgressBar {
131122
position: relative;
132123
display: inline-flex;
@@ -135,6 +126,7 @@ governing permissions and limitations under the License.
135126
align-items: center;
136127
font-size: var(--mod-progressbar-font-size, var(--spectrum-progressbar-font-size));
137128
vertical-align: top;
129+
word-break: break-word;
138130

139131
inline-size: var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default));
140132
max-inline-size: var(--mod-progressbar-max-size, var(--spectrum-progressbar-max-size));
@@ -167,6 +159,7 @@ governing permissions and limitations under the License.
167159
.spectrum-ProgressBar-percentage {
168160
align-self: flex-start;
169161
margin-inline-start: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
162+
word-break: normal;
170163
}
171164

172165
/* Track */
@@ -201,6 +194,7 @@ governing permissions and limitations under the License.
201194
display: inline-flex;
202195
flex-flow: row;
203196
justify-content: space-between;
197+
word-break: normal;
204198

205199
.spectrum-ProgressBar-track {
206200
flex: 1 1 var(--mod-progressbar-size-default, var(--spectrum-progressbar-size-default));
@@ -210,21 +204,23 @@ governing permissions and limitations under the License.
210204
flex-grow: 0;
211205
margin-inline-end: var(--mod-progressbar-spacing-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
212206
margin-block-end: 0;
207+
margin-block-start: 0;
213208
}
214209

215210
.spectrum-ProgressBar-percentage {
216211
order: 3;
217212
text-align: end;
218213
margin-inline-start: var(--mod-spacing-progressbar-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
219214
margin-block-end: 0;
215+
margin-block-start: 0;
220216
}
221217
}
222218

223219
/* Static White */
224220
.spectrum-ProgressBar--staticWhite {
225221
.spectrum-ProgressBar-fill {
226222
color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white));
227-
background-color: var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white));
223+
background-color: var(--highcontrast-progressbar-fill-color-white, var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white)));
228224
}
229225

230226
.spectrum-ProgressBar-label,
@@ -275,6 +271,7 @@ governing permissions and limitations under the License.
275271
forced-color-adjust: none;
276272
--highcontrast-progressbar-fill-color: ButtonText;
277273
--highcontrast-progressbar-track-color: ButtonFace;
274+
--highcontrast-progressbar-fill-color-white: ButtonText;
278275
border: 1px solid ButtonText;
279276
}
280277
}

‎components/progressbar/metadata/progressbar.yml

+10-4
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,27 @@ id: progressbar-m
55
sections:
66
- name: Migration Guide
77
description: |
8-
### Component renamed
8+
### Version 4.0.0
9+
#### Spectrum 2 release
10+
Progress bar now uses Spectrum 2 tokens and specifications. This migration includes updated colors, font sizes, and spacing. No mods were harmed in the migration of this component (all `--mod` properties remain the same).
11+
12+
### Version 1.0.0-beta.3
13+
#### Component renamed
914
Bar loader is now known as Progress bar. Replace all `.spectrum-BarLoader*` classnames with `.spectrum-ProgressBar*`.
1015
11-
### T-shirt sizing
16+
#### T-shirt sizing
1217
Progress bar now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-ProgressBar--size*` class.
1318
14-
### Size classnames changed
19+
20+
#### Size classnames changed
1521
Previous size classnames map as follows:
1622
1723
| Previous size classname | New size classname |
1824
| ------------------------------- | --------------------------------- |
1925
| `.spectrum-ProgressBar--small` | `.spectrum-ProgressBar--sizeS` |
2026
| `.spectrum-ProgressBar--large` | `.spectrum-ProgressBar--sizeM` |
2127
22-
### Label and percentage now use Field Label
28+
#### Label and percentage now use Field Label
2329
Progress bar now uses [Field label](fieldlabel.html) for its label and percentage. Add the appropriately sized Field label to match the t-shirt size of the Progress bar.
2430
examples:
2531
- id: progressbar-m

‎components/progressbar/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
],
2424
"peerDependencies": {
2525
"@spectrum-css/fieldlabel": ">=8",
26-
"@spectrum-css/tokens": ">=14.0.0-next.3"
26+
"@spectrum-css/tokens": ">=14.0.0-next.6"
2727
},
2828
"peerDependenciesMeta": {
2929
"@spectrum-css/fieldlabel": {

0 commit comments

Comments
 (0)