fix(swatch): prepares swatch for new stories

[marissahuysentruyt]

Description

As documentation migration work occurred on #2925, it was noted that adding certain swatch and/or swatch group stories would not be functional without additional CSS. For stories found on the swatch docs page, like image and gradient, a background property would need to be added to the shared .is-image class. For the mixed value variant, adding a z-index: 2 (mirroring the disabled icon variant) should allow an icon to sit "on top" of the swatch. Both approaches mimic CSS strategies in place for other classes and/or stories.

Jira CSS-854

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 to run locally
• Visit the swatch docs page (/docs/components-swatch--docs) and confirm only the Default story is displayed currently
• In your terminal, run git checkout 538be42a54b396fc767f461d1c8ea5dbf945b2a7 to view the branch with temporary changes to the template (the changes you see in this commit are purposely reverted for the purposes of validation, and should be added in docs(swatch,swatchgroup,table,tabs): docs migrations to storybook #2925)
• In swatch/stories/swatch.stories.js, add the following code:

import { Template } from "./template";

...

export const MixedValue = Template.bind({});
MixedValue.args = {
	isMixedValue: true,
	swatchColor: "var(--spectrum-gray-50)",
};

export const Gradient = Template.bind({});
Gradient.args = {
	isGradient: true,
	gradient: "linear-gradient(to right, rgba(0, 0, 0, 88%), rgb(174, 216, 230))",
};

export const Image = Template.bind({});
Image.args = {
	isImage: true,
	imageUrl: "example-ava@2x.png",
};

• Verify the new stories now appear on the docs page. These new stories should be parodies of the same variants found on the static swatch page
• Feel free to toggle any controls to confirm they work as expected on the new stories
• You may also change the gradient value, the imageUrl, or turn off the isMixedValue arg to verify the new CSS changes are responding
• In swatch/index.css, comment out the following lines (approx. lines 154-156) for .spectrum-Swatch { &.is-image { .spectrum-Swatch-fill

background: center / cover no-repeat var(--spectrum-background, transparent), var(--spectrum-gradient, transparent);

• The gradient and image stories should be broken, only showing an opacitycheckboard component

• Discard those changes to the background property
• Comment out the following line for .spectrum-Swatch-mixedValueIcon (approx. line 292)

z-index: 2;

• The mixed value icon should not be visible

• Discard those changes to the z-index property
• Run git switch - in your terminal to return to the tip of this branch and discard your changes. The temporary stories are no long appearing on the docs page

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]

⚠️ No Changeset found

Latest commit: c30f8a3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[github-actions]

File metrics

Summary

Total size: 4.63 MB^*
Total change (Δ): ⬆ 0.66 KB (0.01%)

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

Package	Size	Δ
swatch	11.23 KB	⬆ 0.18 KB

Details

swatch

File	Head	Base	Δ
index-base.css	11.23 KB	11.05 KB	⬆ 0.18 KB (1.63%)
index-vars.css	11.23 KB	11.05 KB	⬆ 0.18 KB (1.63%)
index.css	11.23 KB	11.05 KB	⬆ 0.18 KB (1.63%)
metadata.json	5.62 KB	5.51 KB	⬆ 0.11 KB (1.97%)

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

[github-actions]

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

[rise-erpelding]

Thanks for walking me through the changes with your validation instructions! This looks pretty good but I had a few follow-up questions/comments:

• I can't use the controls to switch the gradient on/off or adjust the gradient colors because they weren't added as argTypes. The stories also display in the sidebar, and I'm not sure that's necessarily what we want to do. But these are temporary changes added in the validation anyway, so I'm not sure if that's relevant here, but I wanted to note it anyway in case the same code is being used in a different PR.
• Everything seems to work as expected, except that I don't see the opacity checkerboard in the background if I set gradient stops to transparent. Is there a reason the background property isn't set on the ::before element since that's where the background-color was set before?
  

[rise-erpelding]

Suggested change

	/* Undefined variables allows custom stylesheet or JS to pass the value to this element */
	/* Undefined variables allow custom stylesheet or JS to pass the value to this element */

[marissahuysentruyt]

During review, we found I was misusing the is-image class in #2925, and completely missing .spectrum-Swatch-image. After correcting the template in that branch, these CSS changes were no longer necessary.