Skip to content

fix(progressbar): revert background-color to background #2929

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

Merged
pfulton merged 14 commits into from
Aug 23, 2024
Merged

fix(progressbar): revert background-color to background #2929

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
cd9779c
fix(progressbar): support for gradients
marissahuysentruyt Jul 24, 2024
9ed1682
docs(progressbar): add trackFill and progressBarFill
marissahuysentruyt Jul 24, 2024
735582a
fix(meter): support for gradients
marissahuysentruyt Jul 24, 2024
660dc58
docs(meter): add gradient example to chromatic preview
marissahuysentruyt Jul 24, 2024
6da16dc
chore(progressbar): create changeset
marissahuysentruyt Jul 25, 2024
d6d2490
fix(progressbar): enforce staticWhite track color
marissahuysentruyt Jul 26, 2024
a452615
fix(progressbar,meter): use background property for static white track
marissahuysentruyt Aug 6, 2024
ab523e0
docs(meter,progressbar): remove html comment in favor for JSdoc comment
marissahuysentruyt Aug 5, 2024
ab465c8
chore(progressbar,meter): use customStyles instead of new controls
marissahuysentruyt Aug 6, 2024
d2545fd
chore(progressbar): use styleMap and inline-size for width
marissahuysentruyt Aug 13, 2024
5b21db0
chore(meter,progressbar): revert customStyles to separate args
marissahuysentruyt Aug 14, 2024
d9318ee
docs(meter,progressbar): rebase fixes
marissahuysentruyt Aug 19, 2024
502b541
chore(meter): import meter.template instead of progress bar template
marissahuysentruyt Aug 19, 2024
bafdfd0
chore(progressbar): shorten trackFill and progressBarFill assignments
marissahuysentruyt Aug 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/bright-zoos-grab.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@spectrum-css/progressbar": patch
---

Reverts the `background-color` property to `background` to support the use of CSS gradients. Gradient support stories were added to the meter and progress bar components within their Chromatic testing previews to ensure that we continue to support gradients by covering them in our visual regression tests.
14 changes: 7 additions & 7 deletions components/progressbar/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,15 +117,15 @@
}

&.is-positive .spectrum-ProgressBar-fill {
background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-positive, var(--spectrum-progressbar-fill-color-positive)));
background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-positive, var(--spectrum-progressbar-fill-color-positive)));
}

&.is-notice .spectrum-ProgressBar-fill {
background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-notice, var(--spectrum-progressbar-fill-color-notice)));
background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-notice, var(--spectrum-progressbar-fill-color-notice)));
}

&.is-negative .spectrum-ProgressBar-fill {
background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-negative, var(--spectrum-progressbar-fill-color-negative)));
background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color-negative, var(--spectrum-progressbar-fill-color-negative)));
}
}

Expand Down Expand Up @@ -179,14 +179,14 @@
block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
border-radius: var(--spectrum-progressbar-corner-radius);

background-color: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color)));
background: var(--highcontrast-progressbar-track-color, var(--mod-progressbar-track-color, var(--spectrum-progressbar-track-color)));
}

.spectrum-ProgressBar-fill {
border: none;
block-size: var(--mod-progressbar-thickness, var(--spectrum-progressbar-thickness));
transition: width 1s;
background-color: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color)));
background: var(--highcontrast-progressbar-fill-color, var(--mod-progressbar-fill-color, var(--spectrum-progressbar-fill-color)));
}
}

Expand Down Expand Up @@ -226,7 +226,7 @@
.spectrum-ProgressBar.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: var(--mod-progressbar-fill-color-white, var(--spectrum-progressbar-fill-color-white));
}

.spectrum-ProgressBar-label,
Expand All @@ -235,7 +235,7 @@
}

.spectrum-ProgressBar-track {
background-color: var(--spectrum-progressbar-track-color-white);
background: var(--spectrum-progressbar-track-color-white);
}
}

Expand Down
10 changes: 9 additions & 1 deletion components/progressbar/stories/meter.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Variants } from "@spectrum-css/preview/decorators";
import { Template } from "./template.js";
import { Template } from "./meter.template.js";
Copy link
Copy Markdown
Collaborator Author

@marissahuysentruyt marissahuysentruyt Aug 19, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@pfulton - I know this encroaches on a bug card we had talked about in slack. Let me know if you'd rather me drop this.


export const MeterGroup = Variants({
Template,
Expand All @@ -20,5 +20,13 @@ export const MeterGroup = Variants({
testHeading: "Text overflow",
label: "Storage space remaining for XYZ user"
},
/* The gradient story below supports linear-gradients used by Express. For use cases that require a custom
linear-gradient for any --mod-*-{fill} properties, set those custom properties in CSS.
*/
{
testHeading: "Gradient support",
trackFill: "linear-gradient(to right, hotpink, orange)",
progressBarFill: "linear-gradient(to left, teal, purple)",
}
],
});
2 changes: 2 additions & 0 deletions components/progressbar/stories/progressbar.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,8 @@ export default {
control: { type: "range", min: 0, max: 100,},
if: { arg: "isIndeterminate", truthy: false },
},
trackFill: { table: { disable: true }},
progressBarFill: { table: { disable: true }},
staticColor: {
name: "Static color",
type: { name: "string" },
Expand Down
10 changes: 9 additions & 1 deletion components/progressbar/stories/progressbar.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,19 @@ export const ProgressBarGroup = Variants({
testHeading: "Text overflow",
label: "Storage space remaining for XYZ user"
},
/* The gradient story below supports linear-gradients used by Express. For use cases that require a custom
linear-gradient for any --mod-*-{fill} properties, set those custom properties in CSS.
*/
{
testHeading: "Gradient support",
trackFill: "linear-gradient(to right, hotpink, orange)",
progressBarFill: "linear-gradient(to left, teal, purple)",
},
],
stateData: [
{
testHeading: "Indeterminate",
indeterminate: true,
isIndeterminate: true,
Comment thread
marissahuysentruyt marked this conversation as resolved.
value: undefined,
}
],
Expand Down
10 changes: 9 additions & 1 deletion components/progressbar/stories/template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ export const Template = ({
isIndeterminate = false,
label,
value,
trackFill,
progressBarFill,
customStyles = {},
size = "m",
} = {}, context = {}) => html`
Expand All @@ -31,6 +33,8 @@ export const Template = ({
style=${styleMap({
"width": customWidth,
...customStyles,
"--mod-progressbar-track-color": trackFill,
"--mod-progressbar-fill-color": progressBarFill,
})}
value=${ifDefined(value ? `${value}%` : undefined)}
aria-valuenow=${ifDefined(value ? `${value}%` : undefined)}
Expand All @@ -48,8 +52,12 @@ export const Template = ({
label: isIndeterminate || typeof value === "undefined" ? "" : `${value}%`,
customClasses: [`${rootClass}-percentage`],
}, context)}

<div class="${rootClass}-track">
<div class="${rootClass}-fill" style="width: ${value}%;"></div>
<div
class="${rootClass}-fill"
style=${styleMap({ "inline-size": `${value}%` })}
></div>
</div>
</div>
`;