feat: add example gradients for static black and white #2637

jawinn · 2024-04-02T21:08:13Z

Description

Adds new gradient backgrounds to Storybook, that are displayed for static black and static white variants. These are used for examples only. This adds CSS custom properties available globally within Storybook and sets them on the existing decorator.

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

Static black and static white gradients are appearing for components with a staticColor control: button, close button, field label, divider, link
Gradients match the "Gradients for documentation" Figma design spec
Updated Field label stories work correctly. There are now two separate stories for static black and static white, instead of one single story.

Regression testing

Validate:

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

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

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

github-actions · 2024-04-02T21:11:00Z

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

github-actions · 2024-04-03T16:12:26Z

File metrics

Summary

Total size: 4.55 MB^*

🎉 No changes detected in any packages

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

rise-erpelding

This looks good as far as I can tell! The gradients for field label and close button work and look as expected, there are a couple of things I wanted to mention that are slightly outside of this work:

I saw at least one lint error (looking back now, I only see the one in fieldlabel/stories/template.js but I thought I'd seen more) but it's related to an unchanged file.
I noticed that in Storybook for field label, the alignment control (right/left) doesn't seem to do anything, should it? This isn't new though so if anything it'd be work that should be captured in Jira.

castastrophe · 2024-04-04T18:34:41Z

.storybook/assets/base.css

 * governing permissions and limitations under the License.
 */

+ :root {


Can you attach these to the .spectrum class? I'm working on making sure any code in storybook that should look "spectrum" is wrapped in the appropriate spectrum classes.

This is done in the latest update.

.storybook/decorators/contextsWrapper.js

jawinn · 2024-04-05T15:49:26Z

I saw at least one lint error (looking back now, I only see the one in fieldlabel/stories/template.js but I thought I'd seen more) but it's related to an unchanged file.

Thanks. It looks like the linter wanted different indentation on the switch statement in that unchanged code. I updated this and also made a PR into main to adjust that eslint setting for switch indentation.

I noticed that in Storybook for field label, the alignment control (right/left) doesn't seem to do anything, should it? This isn't new though so if anything it'd be work that should be captured in Jira.

This appears to be working correctly, but isn't super clear in just Storybook. The behavior of this setting is a bit more clarified in the YML docs for "Side label with right aligned text", and you can see the control working when there is a width on the element in the Right Aligned story. The controls, control name, and control description could use some work there to explain what it does and why it doesn't seem to do anything on the "Default" story.

Add new gradient backgrounds, displayed for static black and static white variants. These are used for examples only. This adds CSS custom properties available globally within Storybook and sets them on the existing decorator.

Change Field label stories that show static black and static white, so they work with the recently added decorator that changes the main Storybook background.

Adjust static colors template to better handle the static color decorator and gradients.

* feat: add example gradients for static black and white Add new gradient backgrounds, displayed for static black and static white variants. These are used for examples only. This adds CSS custom properties available globally within Storybook and sets them on the existing decorator. * docs(fieldlabel): support static colors decorator in storybook Change Field label stories that show static black and static white, so they work with the recently added decorator that changes the main Storybook background. * docs(button): adjust static colors template Adjust static colors template to better handle the static color decorator and gradients. * chore(fieldlabel): apply eslint indentation changes to stories

jawinn force-pushed the jawinn/feat-s2-example-gradients branch from 3a35fa4 to 9ba20a3 Compare April 2, 2024 21:29

jawinn added run_vrt For use on PRs looking to kick off VRT and removed run_vrt For use on PRs looking to kick off VRT labels Apr 3, 2024

castastrophe force-pushed the spectrum-two branch from 9b745e7 to 9c147fc Compare April 3, 2024 13:26

jawinn force-pushed the jawinn/feat-s2-example-gradients branch from 9ba20a3 to 1911633 Compare April 3, 2024 16:09

rise-erpelding approved these changes Apr 4, 2024

View reviewed changes

castastrophe suggested changes Apr 4, 2024

View reviewed changes

castastrophe force-pushed the spectrum-two branch 2 times, most recently from 0f20c5b to 9ff2a2c Compare April 5, 2024 14:36

jawinn force-pushed the jawinn/feat-s2-example-gradients branch 2 times, most recently from b1c7e58 to 5153cd4 Compare April 5, 2024 15:32

jawinn requested a review from castastrophe April 5, 2024 15:36

jawinn force-pushed the jawinn/feat-s2-example-gradients branch from 5153cd4 to f5240b8 Compare April 11, 2024 17:34

castastrophe approved these changes Apr 11, 2024

View reviewed changes

castastrophe force-pushed the spectrum-two branch from 4d9e185 to a81c712 Compare April 11, 2024 18:33

jawinn force-pushed the jawinn/feat-s2-example-gradients branch from f5240b8 to 1aa4800 Compare April 11, 2024 19:19

jawinn added 4 commits April 11, 2024 15:24

feat: add example gradients for static black and white

7edf5e1

Add new gradient backgrounds, displayed for static black and static white variants. These are used for examples only. This adds CSS custom properties available globally within Storybook and sets them on the existing decorator.

docs(fieldlabel): support static colors decorator in storybook

4485977

Change Field label stories that show static black and static white, so they work with the recently added decorator that changes the main Storybook background.

docs(button): adjust static colors template

1219ef1

Adjust static colors template to better handle the static color decorator and gradients.

chore(fieldlabel): apply eslint indentation changes to stories

b3a984e

jawinn force-pushed the jawinn/feat-s2-example-gradients branch from 1aa4800 to b3a984e Compare April 11, 2024 19:25

pfulton merged commit 7f735c3 into spectrum-two Apr 11, 2024

pfulton deleted the jawinn/feat-s2-example-gradients branch April 11, 2024 19:59

castastrophe mentioned this pull request Apr 15, 2025

feat(tokens,card): update to @adobe/spectrum-tokens@13.3.0 #3669

Merged

12 tasks

This was referenced May 16, 2025

chore(swatch,menu,swatchgroup): fix reverted metadata assets #3752

Merged

chore: merge latest updates from main #3777

Merged

castastrophe mentioned this pull request Jul 25, 2025

ci: chromatic runs for S2 [CSS-1233] #4070

Merged

3 tasks

castastrophe mentioned this pull request Aug 6, 2025

fix: minor linting updates #4113

Merged

11 tasks

This was referenced Aug 27, 2025

chore(popover): wrapper placement in story #4173

Closed

feat(storybook): chromatic a11y testing #4180

Closed

chore: updating lint-staged file inheritance order #4193

Closed

castastrophe mentioned this pull request Oct 22, 2025

feat(badge): remove modifiers from the API [SWC-1264] #4283

Merged

14 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: add example gradients for static black and white #2637

feat: add example gradients for static black and white #2637

Uh oh!

jawinn commented Apr 2, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Apr 2, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Apr 3, 2024 •

edited

Loading

Uh oh!

rise-erpelding left a comment

Uh oh!

castastrophe Apr 4, 2024

Uh oh!

jawinn Apr 5, 2024

Uh oh!

Uh oh!

jawinn commented Apr 5, 2024 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

feat: add example gradients for static black and white #2637

feat: add example gradients for static black and white #2637

Uh oh!

Conversation

jawinn commented Apr 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How and where has this been tested?

Validation steps

Regression testing

Screenshots

To-do list

Uh oh!

github-actions bot commented Apr 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Apr 3, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

File metrics

Summary

Uh oh!

rise-erpelding left a comment

Choose a reason for hiding this comment

Uh oh!

castastrophe Apr 4, 2024

Choose a reason for hiding this comment

Uh oh!

jawinn Apr 5, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jawinn commented Apr 5, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

jawinn commented Apr 2, 2024 •

edited

Loading

github-actions bot commented Apr 2, 2024 •

edited

Loading

github-actions bot commented Apr 3, 2024 •

edited

Loading

jawinn commented Apr 5, 2024 •

edited

Loading