feat(thumbnail-opacity-checkboard): S2 migration

[cdransf]

Description

CSS-1056

This is a follow up to CSS-1023, implementing the thumbnail-opacity-checkerboard-square-size that is specific to the thumbnail component but targeted at the opacity-checkerboard.

Adds thumbnail specific --spectrum-opacity-checkerboard-size token. This impacts the display of the opacity-checkerboard when used within the thumbnail component.

Validation steps

1. Run Storybook locally or open the link for the PR.
2. Navigate to the thumbnail component.
3. Verify that no regressions are visible.

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.

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: cdeaa8f

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

This PR includes changesets to release 10 packages

Name	Type
@spectrum-css/opacitycheckerboard	Major
@spectrum-css/thumbnail	Major
@spectrum-css/colorhandle	Major
@spectrum-css/colorslider	Major
@spectrum-css/swatch	Major
@spectrum-css/table	Major
@spectrum-css/treeview	Major
@spectrum-css/colorarea	Major
@spectrum-css/colorwheel	Major
@spectrum-css/swatchgroup	Major

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]

File metrics

Summary

Total size: 4.29 MB^*
Total change (Δ): ⬆ 0.56 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	Δ
opacitycheckerboard	1.83 KB	⬆ 0.15 KB
thumbnail	7.67 KB	⬇ 0.01 KB

Details

opacitycheckerboard

File	Head	Base	Δ
index-base.css	1.83 KB	1.68 KB	⬆ 0.15 KB (8.95%)
index-vars.css	1.83 KB	1.68 KB	⬆ 0.15 KB (8.95%)
index.css	1.83 KB	1.68 KB	⬆ 0.15 KB (8.95%)
metadata.json	0.85 KB	0.73 KB	⬆ 0.12 KB (16.14%)

thumbnail

File	Head	Base	Δ
index-base.css	7.67 KB	7.67 KB	⬇ 0.01 KB (-0.08%)
index-vars.css	7.67 KB	7.67 KB	⬇ 0.01 KB (-0.08%)
index.css	7.67 KB	7.67 KB	⬇ 0.01 KB (-0.08%)
metadata.json	3.54 KB	3.55 KB	⬇ 0.01 KB (-0.17%)

* 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-3394--spectrum-css.netlify.app

[marissahuysentruyt]

Nice work. I did have a question about where you might think that thumbnail-specific opacity checkerboard token should go. And I left a real weird video I took in Chrome of the checkerboard changing the square sizes. 🤷‍♀️

[marissahuysentruyt]

There is a quick typo in the changeset, and we just noticed the border token was missing. I checked out a few of the other components that use opacity checkerboard (color slider, color handle, swatch) and I think things are looking good! Most of the opacity checkerboard instances have the 8px squares, but the thumbnails have the 4px.

[marissahuysentruyt]

Phew- glad we caught the border on the thumbnail! A couple of remaining thoughts:

• If it were me, I'd probably do a patch I think (or maybe minor 🤷‍♀️ ) for the thumbnail, instead of major. We just fixed the token name, so I don't think we introduced any breaking changes.
• I'd also probably mention that fix in the changeset itself.

Nice work!

[jawinn]

I think this adjustment belongs within the Thumbnail component CSS instead of the Opacity Checkerboard CSS. SWC would likely have trouble converting this as well.