refactor(opacitycheckerboard): address concerns about inclusion order

[jenndiaz]

Description

Addresses: #2139

"With both the spectrum-ColorHandle and the spectrum-OpacityCheckerboard classes applied to the host element the rules within those selectors will race depending on how CSS is deployed in a consuming application. Specifically, the size rules for .spectrum-OpacityCheckerboard
Can overwrite those of .spectrum-ColorHandle:"

Changes:

• removes "inline-size": "100%", "block-size": "100%", since the background should be used with a component with these properties already set, this is not needed with in this classes CSS
• move from components in storybook into utilities
• improve docs for component and update storybook

These changes as well as the SWC documentation improvements merged in with SWC PR 3651 addresses concerns around inclusion order when using the opacity checkerboard.

Alternative approach to now closed PR #2350

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

tested by @mdt2

On the docs site:

• opacity checkerboard displayed with no changes
• no changes to opacity checkerboard within Colorhandle, Colorslider, Swatch, or Thumbnail

In storybook:

• no changes to opacity checkerboard within Colorhandle, Colorslider, Swatch, or Thumbnail
• opacity checkerboard moved to Utilities folder in the side nav

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

[github-actions]

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

[github-actions]

File metrics

Summary

Total size: 3.91 MB^*
Total change (Δ): ⬇ 0.11 KB (-0.00%)
Table reports on changes to a package's main file. Other changes can be found in the collapsed "Details" below.

Package	Size	Δ
opacitycheckerboard	1.61 KB	⬇ 0.04 KB

Details

opacitycheckerboard

File	Head	Base	Δ
index-base.css	1.61 KB	1.64 KB	⬇ 0.04 KB (-2.20%)
index-vars.css	1.61 KB	1.64 KB	⬇ 0.04 KB (-2.20%)
index.css	1.61 KB	1.64 KB	⬇ 0.04 KB (-2.20%)
mods.json	0.18 KB	0.18 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.

[mdt2]

Seeing a couple wonkies in the components that use opacity checkerboard, thinking it's related to the custom styles at least for the storybook ones:

• Swatch in the docs site***:
• Color handle in storybook:
• Color slider in storybook:

I didn't check them all in Storybook since it seemed possible that the issue across components was related.

*** Edit: we chatted and this is a small change in the swatch.yml that will be updated in a separate PR.

[jenndiaz]

Seeing a couple wonkies in the components that use opacity checkerboard, thinking it's related to the custom styles at least for the storybook ones:

ah, yes you're right was an issue with customStyles, the 100% for inline and block size needed to be applied to just the stories for displayed opacity checkerboard not within a component. I have pushed up a fix for this.

[mdt2]

Code and example sites look good to me based on the validation steps. Curious to hear what thoughts Westbrook has.

[jawinn]

These changes look good to me. I like that this is organized into "Utilities" now in Storybook.

[castastrophe]

Let's revert the category update for now but otherwise this is looking great.

[castastrophe]

This is a good clarification but let's hold off creating new headings yet. I'd like to go through our whole list of components and determine what others can fall under this same category.

[jenndiaz]

reverted for now!

I agree that it would be useful to look at all components and see what categories make sense.

[castastrophe]

Thanks for updating this to align with the style guide!