fix(progressbar): revert background-color to background

[marissahuysentruyt]

Description

For certain use cases in Express, a linear-gradient is needed within the progress bar for the fill color. According to the slack conversation, the team previously achieved this by setting the --mod-progressbar-fill-color to override --spectrum-progressbar-fill-color. With a change from background (which supported linear-gradients) to background-color (which does not), Express can no longer override the fill color (release and initial PR).

This PR should revert the background-color properties to background, and creates a Chromatic-only test for both meter and progressbar. The track-color, fill-color, and corresponding staticWhite mod values can all be a linear-gradients (as well as other values like radial-gradients or images) now.

CSS-848

Screenshots

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

• Pull down the branch and run locally.

Progress bar

• Visit the progress bar default story (/story/components-progress-bar--default)
• Turn on the Chromatic preview and verify a "Gradient support" example is present.
• In progressbar/index.css, for spectrum-ProgressBar-fill and spectrum-ProgressBar-track, create custom mod properties that test linear-gradients such as:
  • --mod-progressbar-fill-color: linear-gradient(to right, teal, purple);
  • --mod-progressbar-track-color: linear-gradient(to right, hotpink, orange);
• Verify that all of your new mod properties override their fallbacks and the fill & track colors have changed as expected
• If you change background (for either spectrum-ProgressBar-fill or spectrum-ProgressBar-track) back to background-color in the CSS, the stories should break when gradient values are resolved.

Meter

• Visit the meter docs page (/docs/components-meter--docs)
• Your new mod properties should also be in effect on this page
• Visit the meter default story (/story/components-meter--default)
• Remove the fill-color and track-color mod properties you just created in progressbar/index.css
• With the Chromatic preview still on, verify a "Gradient support" example is present with a linear-gradient fill & track, and all other Meter stories have reverted back to their default fill/track colors.
• Create new custom mod properties to test the linear-gradients for the .is-positive.spectrum-ProgressBar-fill/.is-negative .spectrum-ProgressBar-fill/.is-notice .spectrum-ProgressBar-fill fills for meter:
  • --mod-progressbar-fill-color-positive: linear-gradient(to left, hotpink, orange);
  • --mod-progressbar-fill-color-negative: linear-gradient(to left, teal, purple);
  • --mod-progressbar-fill-color-notice: linear-gradient(to left, teal, purple);
• Verify that all of your newest mod properties also override their fallback values and the fill have changed as expected
• If you chose, you can return to spectrum-ProgressBar-track and set that track mod property. It should work as before.
• If you change background back to background-color in the CSS, the stories should break when gradient values are present.

Both components

• In the controls, toggle the staticWhite variant. No modifications/gradients should be seen, and no variants should have your current mod values
• Turn on the Chromatic preview and verify the "Gradient support" example is present, but currently has the default staticColor fills (it should no longer have a gradient)
• Remove any mod properties you just created
• Create new mod properties to test linear-gradients in the staticColor variant for .spectrum-ProgressBar-fill:
  • --mod-progressbar-fill-color-white: linear-gradient(to right, hotpink, orange); (this is current behavior)
• Verify that all of your new mod properties override their fallbacks and the fill colors have changed as expected
• Turn on the Chromatic preview and verify the "Gradient support" example is present with your expected fill colors, and verify the track color has not changed.

#### Additional Validation
If you choose, you could also turn on the trackFill and progressBarFill controls that are hidden.
- [ ] In progressbar.stories.js, replace the trackFill and progressBarFill object with the following:

{  
  name: "[Track/ProgressBar] color",
  type: { name: "string" },
  table: {
    type: { summary: "string" },
    category: "Component",
    },
  control: "color",
},

- [ ] This should allow you to select the color from the color section to verify those values are getting passed to the mod properties. You can also type in the field and test your own gradients from the controls.

Regression testing

Validate:

1. The documentation pages for at least two other components are still loading, including:

• The pages render correctly, are accessible, and are responsive.

2. If components have been modified, VRTs have been run on this branch:

• VRTs have been run and looked at.
• Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

To-do list

• I have read the contribution guidelines.
• I have updated relevant storybook stories and templates.
• I have tested these changes in Windows High Contrast mode.
• If my change impacts other components, I have tested to make sure they don't break.
• If my change impacts documentation, I have updated the documentation accordingly.
• ✨ This pull request is ready to merge. ✨

[changeset-bot]

🦋 Changeset detected

Latest commit: bafdfd0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@spectrum-css/progressbar	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

🚀 Deployed on https://pr-2929--spectrum-css.netlify.app

[github-actions]

File metrics

Summary

Total size: 4.63 MB^*
Total change (Δ): ⬇ 0.13 KB (-0.00%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package	Size	Δ
progressbar	10.98 KB	⬇ 0.04 KB

Details

progressbar

File	Head	Base	Δ
index-base.css	10.98 KB	11.02 KB	⬇ 0.04 KB (-0.37%)
index-vars.css	10.98 KB	11.02 KB	⬇ 0.04 KB (-0.37%)
index.css	10.98 KB	11.02 KB	⬇ 0.04 KB (-0.37%)
metadata.json	6.03 KB	6.03 KB	-

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

[marissahuysentruyt]

Do we have "standardized" gradients or anything that I could use here instead? I saw on the spectrum-two branch that there's a specified gradient for staticWhite/staticBlack stories (https://github.com/adobe/spectrum-css/pull/2637/files), but I couldn't find anything like that in main.

[pfulton]

While walking through the validation steps and adding --mod overrides to Progress Bar and Meter, all of the variants displayed as you described they should!

But, when I got to the static white variants, it didn't seem like those examples were displaying correctly.

This screenshot shows the above --mods when visiting static white without any additional adjustments. It sounds like static white should disallow gradients, yes? Let me know if I got that wrong or if my testing was faulty!

[jawinn]

This looks great. I'm good with the CSS and what I'm seeing in Storybook. Just two minor suggestions.

[marissahuysentruyt]

@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.