Skip to content

Commit

Permalink
feat(progressbar): s2 migration
Browse files Browse the repository at this point in the history
  • Loading branch information
@mdt2
mdt2 committed Apr 16, 2024
1 parent b3b3aa5 commit 55fb881
Show file tree
Hide file tree
Showing 6 changed files with 236 additions and 99 deletions.
4 changes: 2 additions & 2 deletions .storybook/decorators/contextsWrapper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,12 @@ export const withContextWrapper = makeDecorator({
// Change background color when demonstrating static color options.
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
38 changes: 15 additions & 23 deletions components/progressbar/index.css
View file
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-track-color-white: var(--spectrum-transparent-white-300);
--spectrum-progressbar-fill-color-white: var(--spectrum-white);
--spectrum-progressbar-label-and-value-white: var(--spectrum-transparent-white-700);
--spectrum-progressbar-track-color-white: var(--spectrum-transparent-white-100);
--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 Down Expand Up @@ -224,7 +215,7 @@ governing permissions and limitations under the License.
.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 +266,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
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
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"main": "dist/index.css",
"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
188 changes: 169 additions & 19 deletions components/progressbar/stories/progressbar.stories.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
// Import the component markup template
import { html } from "lit";

import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
import { styleMap } from "lit/directives/style-map.js";
import { Template } from "./template";

export default {
Expand All @@ -8,8 +11,15 @@ export default {
component: "ProgressBar",
argTypes: {
customWidth: { table: { disable: true } },
staticWhite: { table: { disable: true } },
indeterminate: { table: { disable: true } },
isIndeterminate: {
name: "Indeterminate",
type: { name: "boolean" },
table: {
type: { summary: "boolean" },
category: "State",
},
control: "boolean",
},
size: {
name: "Size",
type: { name: "string", required: true },
Expand Down Expand Up @@ -49,13 +59,24 @@ export default {
control: { type: "range", min: 0, max: 100,},
if: { arg: "indeterminate", truthy: false },
},
isStaticWhite: {
name: "Static White",
type: { name: "boolean" },
table: {
type: { summary: "boolean" },
category: "Advanced",
},
control: "boolean",
},
},
args: {
rootClass: "spectrum-ProgressBar",
size: "m",
labelPosition: "top",
label: "Loading",
value: 50,
isStaticWhite: false,
isIndeterminate: false,
},
parameters: {
actions: {
Expand All @@ -65,24 +86,153 @@ export default {
type: "migrated",
},
},
decorators: [
(Story, context) => html`
<style>
.spectrum-Detail { display: inline-block; }
.spectrum-Typography > div {
border: 1px solid var(--spectrum-gray-200);
border-radius: 4px;
padding: 0 1em 1em;
/* Why seafoam? Because it separates it from the component styles. */
--mod-detail-font-color: var(--spectrum-seafoam-900);
}
</style>
<div
style=${styleMap({
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
gap: "1rem",
"--mod-detail-margin-end": ".3rem",
})}
>
${Story(context)}
</div>
`,
],
};

export const Default = Template.bind({});
Default.args = {};
const States = (args) =>
html`
<div>
${Typography({
semantics: "detail",
size: "s",
content: ["Default"],
})}
${Template(args)}
</div>
<div>
${Typography({
semantics: "detail",
size: "s",
content: ["Side label"],
})}
${Template({
...args,
labelPosition: "side",
})}
</div>
<div>
${Typography({
semantics: "detail",
size: "s",
content: ["Indeterminate"],
})}
${Template({
...args,
isIndeterminate: true,
})}
</div>
<div>
${Typography({
semantics: "detail",
size: "s",
content: ["Custom width"],
})}
${Template({
...args,
customWidth: "500px",
})}
</div>
<div>
${Typography({
semantics: "detail",
size: "s",
content: ["Static white"],
})}
<div style=${styleMap({
background: "var(--spectrum-examples-gradient-static-white)",
padding: "1rem",
})}
>
${Template({
...args,
isStaticWhite: true,
label: "Loading your fonts, images, and icons",
})}
</div>
</div>
`;

export const CustomWidth = Template.bind({});
CustomWidth.args = {
customWidth: "500px",
};
const Sizes = (args) =>
html` ${["s", "m", "l", "xl"].map((size) => {
return html` <div>
${Typography({
semantics: "detail",
size: "s",
content: [
{
s: "Small",
m: "Medium",
l: "Large",
xl: "Extra-large",
}[size],
],
})}
${Template({
...args,
size,
})}
</div>`;
})}`;

export const Indeterminate = Template.bind({});
Indeterminate.args = {
indeterminate: "indeterminate",
};
const Variants = (args) =>
html` ${window.isChromatic()
? html` <div class="spectrum-Typography">
${Typography({
semantics: "detail",
size: "l",
content: ["Standard"],
})}
<div
style=${styleMap({
display: "flex",
flexDirection: "column",
gap: ".3rem",
})}
>
${States(args)}
</div>
</div>
<div class="spectrum-Typography">
${Typography({
semantics: "detail",
size: "l",
content: ["Sizing"],
})}
<div
style=${styleMap({
display: "flex",
flexDirection: "column",
gap: ".3rem",
})}
>
${Sizes(args)}
</div>
</div>`
: Template(args)}`;

export const StaticWhite = Template.bind({});
StaticWhite.args = {
backgroundColor: "rgb(15, 121, 125)",
staticWhite: "staticWhite",
label: "Loading your fonts, images, and icons"
};
export const Default = Variants.bind({});
Default.args = {};

0 comments on commit 55fb881

Please sign in to comment.