Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(progressbar): s2 migration #2659

Merged
merged 1 commit into from
May 8, 2024
Merged

feat(progressbar): s2 migration #2659

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/proud-jokes-rule.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@spectrum-css/progressbar": major
---

feat(progressbar): S2 migration

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).
4 changes: 2 additions & 2 deletions .storybook/decorators/contextsWrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,14 +58,14 @@ export const withContextWrapper = makeDecorator({
if (args.staticColor === "black") {
container.style.background = "var(--spectrum-examples-gradient-static-black)";
}
else if (args.staticColor === "white") {
else if (args.staticColor === "white" || args.isStaticWhite === true) {
container.style.background = "var(--spectrum-examples-gradient-static-white)";
}
else {
container.style.removeProperty("background");
}
}
}, [color, scale, isExpress, args.staticColor]);
}, [color, scale, isExpress, args.staticColor, args.isStaticWhite]);

return StoryFn(context);
},
Expand Down
41 changes: 19 additions & 22 deletions components/progressbar/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ governing permissions and limitations under the License.
/* Static tokens */
--spectrum-progressbar-animation-ease-in-out-indeterminate: var(--spectrum-animation-ease-in-out);
--spectrum-progressbar-animation-duration-indeterminate: var(--spectrum-animation-duration-2000);
--spectrum-progressbar-corner-radius: var(--spectrum-corner-radius-100);
--spectrum-progressbar-corner-radius: var(--spectrum-corner-radius-full);

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

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

/* Size */
--spectrum-progressbar-font-size: var(--spectrum-font-size-75);
--spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400);

--spectrum-progressbar-font-size: var(--spectrum-font-size-100);
--spectrum-progressbar-line-height: var(--spectrum-line-height-100);
--spectrum-progressbar-line-height-cjk: var(--spectrum-cjk-line-height-100);

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

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

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

/* Color */
--spectrum-progressbar-text-color: var(--spectrum-neutral-content-color-default);
--spectrum-progressbar-track-color: var(--spectrum-gray-200);
--spectrum-progressbar-fill-color: var(--spectrum-accent-color-900);
--spectrum-progressbar-text-color: var(--spectrum-neutral-subdued-content-color-default);
--spectrum-progressbar-track-color: var(--spectrum-gray-300);
--spectrum-progressbar-fill-color: var(--spectrum-accent-content-color-default);
--spectrum-progressbar-fill-color-positive: var(--spectrum-positive-visual-color);
--spectrum-progressbar-fill-color-notice: var(--spectrum-notice-visual-color);
--spectrum-progressbar-fill-color-negative: var(--spectrum-negative-visual-color);
--spectrum-progressbar-label-and-value-white: var(--spectrum-white);
--spectrum-progressbar-label-and-value-white: var(--spectrum-transparent-white-700);
--spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-300);
--spectrum-progressbar-fill-color-white: var(--spectrum-white);
--spectrum-progressbar-fill-color-white: var(--spectrum-transparent-white-900);

/* Meter */
--spectrum-meter-min-width: var(--spectrum-meter-minimum-width);
--spectrum-meter-max-width: var(--spectrum-meter-maximum-width);
--spectrum-meter-inline-size: var(--spectrum-meter-default-width);
--spectrum-meter-thickness-s: var(--spectrum-meter-thickness-small);
--spectrum-meter-thickness-l: var(--spectrum-meter-thickness-large);
--spectrum-meter-top-to-text: var(--spectrum-component-top-to-text);
}

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

.spectrum-ProgressBar--sizeM {
--spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2400);

--spectrum-progressbar-font-size: var(--spectrum-font-size-75);
--spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large);

--spectrum-progressbar-spacing-top-to-text: var(--spectrum-component-top-to-text-75);
}

.spectrum-ProgressBar--sizeL, .spectrum-Meter--sizeL {
--spectrum-progressbar-size-default: var(--spectrum-progressbar-size-2500);

--spectrum-progressbar-font-size: var(--spectrum-font-size-100);
--spectrum-progressbar-font-size: var(--spectrum-font-size-200);
--spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-large);

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

--spectrum-progressbar-font-size: var(--spectrum-font-size-200);
--spectrum-progressbar-font-size: var(--spectrum-font-size-300);
--spectrum-progressbar-thickness: var(--spectrum-progress-bar-thickness-extra-large);

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


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

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

/* Track */
Expand Down Expand Up @@ -201,6 +194,7 @@ governing permissions and limitations under the License.
display: inline-flex;
flex-flow: row;
justify-content: space-between;
word-break: normal;

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

.spectrum-ProgressBar-percentage {
order: 3;
text-align: end;
margin-inline-start: var(--mod-spacing-progressbar-label-to-text, var(--spectrum-progressbar-spacing-label-to-text));
margin-block-end: 0;
margin-block-start: 0;
}
}

/* Static White */
.spectrum-ProgressBar--staticWhite {
.spectrum-ProgressBar-fill {
color: var(--mod-progressbar-label-and-value-white, var(--spectrum-progressbar-label-and-value-white));
background-color: var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white));
background-color: var(--highcontrast-progressbar-fill-color-white, var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white)));
}

.spectrum-ProgressBar-label,
Expand Down Expand Up @@ -275,6 +271,7 @@ governing permissions and limitations under the License.
forced-color-adjust: none;
--highcontrast-progressbar-fill-color: ButtonText;
--highcontrast-progressbar-track-color: ButtonFace;
--highcontrast-progressbar-fill-color-white: ButtonText;
border: 1px solid ButtonText;
}
}
14 changes: 10 additions & 4 deletions components/progressbar/metadata/progressbar.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,27 @@ id: progressbar-m
sections:
- name: Migration Guide
description: |
### Component renamed
### Version 4.0.0
#### Spectrum 2 release
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).

### Version 1.0.0-beta.3
#### Component renamed
Bar loader is now known as Progress bar. Replace all `.spectrum-BarLoader*` classnames with `.spectrum-ProgressBar*`.

### T-shirt sizing
#### T-shirt sizing
Progress bar now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-ProgressBar--size*` class.

### Size classnames changed

#### Size classnames changed
Previous size classnames map as follows:

| Previous size classname | New size classname |
| ------------------------------- | --------------------------------- |
| `.spectrum-ProgressBar--small` | `.spectrum-ProgressBar--sizeS` |
| `.spectrum-ProgressBar--large` | `.spectrum-ProgressBar--sizeM` |

### Label and percentage now use Field Label
#### Label and percentage now use Field Label
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.
examples:
- id: progressbar-m
Expand Down
2 changes: 1 addition & 1 deletion components/progressbar/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
],
"peerDependencies": {
"@spectrum-css/fieldlabel": ">=7",
"@spectrum-css/tokens": ">=14.0.0-next.3"
"@spectrum-css/tokens": ">=14.0.0-next.6"
},
"peerDependenciesMeta": {
"@spectrum-css/fieldlabel": {
Expand Down