feat(thumbnail-opacity-checkboard): S2 migration by cdransf · Pull Request #3394 · adobe/spectrum-css

cdransf · 2024-11-12T22:59:34Z

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

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

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.

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 · 2024-11-12T22:59:40Z

🦋 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 · 2024-11-12T23:02:29Z

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 · 2024-11-12T23:02:39Z

🚀 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. 🤷‍♀️

…rule

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 · 2024-11-20T15:26:50Z

+	.spectrum-Thumbnail & {
+		--spectrum-opacity-checkerboard-size: var(--spectrum-thumbnail-opacity-checkerboard-square-size);
+	}


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.

* feat(thumbnail-opacity-checkboard): s2 migration * feat(thumbnail-opacity-checkboard): fix token rule * feat(thumbnail-opacity-checkboard): fix typo, update changeset, move rule * feat(thumbnail-opacity-checkboard): drop unnecessary styles * feat(thumbnail-opacity-checkboard): update token * feat(thumbnail-opacity-checkboard): update changeset

cdransf added size-2 S ~6-18hrs; not hard or time consuming, one or two work days to complete. skip_vrt Add to a PR to skip running VRT (but still pass the action) ready-for-review labels Nov 12, 2024

cdransf requested review from 5t3ph, castastrophe, marissahuysentruyt and pfulton November 12, 2024 22:59

cdransf self-assigned this Nov 12, 2024

cdransf force-pushed the cdransf/s2-opacity-checkerboard-migration branch from 87bbb9c to b05d5ed Compare November 19, 2024 14:22

marissahuysentruyt reviewed Nov 19, 2024

View reviewed changes

Comment thread .changeset/afraid-ladybugs-smile.md Outdated

Comment thread components/thumbnail/index.css Outdated

feat(thumbnail-opacity-checkboard): s2 migration

a11f87f

cdransf force-pushed the cdransf/s2-opacity-checkerboard-migration branch 2 times, most recently from 94bc2dd to 57cfb75 Compare November 19, 2024 15:37

feat(thumbnail-opacity-checkboard): fix token rule

1e7042e

cdransf force-pushed the cdransf/s2-opacity-checkerboard-migration branch from 57cfb75 to 1e7042e Compare November 19, 2024 15:41

marissahuysentruyt reviewed Nov 19, 2024

View reviewed changes

Comment thread components/opacitycheckerboard/index.css

marissahuysentruyt reviewed Nov 19, 2024

View reviewed changes

Comment thread components/thumbnail/index.css Outdated

marissahuysentruyt reviewed Nov 19, 2024

View reviewed changes

Comment thread .changeset/afraid-ladybugs-smile.md Outdated

feat(thumbnail-opacity-checkboard): fix typo, update changeset, move …

fe7f457

…rule

cdransf force-pushed the cdransf/s2-opacity-checkerboard-migration branch 2 times, most recently from 4b512aa to 04a0bca Compare November 19, 2024 16:45

marissahuysentruyt requested changes Nov 19, 2024

View reviewed changes

Comment thread .changeset/twenty-tables-know.md Outdated

feat(thumbnail-opacity-checkboard): drop unnecessary styles

6577d13

cdransf force-pushed the cdransf/s2-opacity-checkerboard-migration branch from 04a0bca to 6577d13 Compare November 19, 2024 17:28

feat(thumbnail-opacity-checkboard): update token

0b71b80

cdransf requested a review from marissahuysentruyt November 19, 2024 18:45

marissahuysentruyt approved these changes Nov 19, 2024

View reviewed changes

cdransf merged commit eda9897 into spectrum-two Nov 19, 2024

cdransf deleted the cdransf/s2-opacity-checkerboard-migration branch November 19, 2024 19:56

github-actions Bot mentioned this pull request Nov 15, 2024

chore: release (next) #3379

Merged

jawinn reviewed Nov 20, 2024

View reviewed changes

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

feat(thumbnail-opacity-checkboard): S2 migration#3394

feat(thumbnail-opacity-checkboard): S2 migration#3394
cdransf merged 6 commits into
spectrum-twofrom
cdransf/s2-opacity-checkerboard-migration

cdransf commented Nov 12, 2024 •

edited

Loading

Uh oh!

changeset-bot Bot commented Nov 12, 2024 •

edited

Loading

Uh oh!

github-actions Bot commented Nov 12, 2024 •

edited

Loading

opacitycheckerboard

thumbnail

Uh oh!

github-actions Bot commented Nov 12, 2024 •

edited

Loading

Uh oh!

marissahuysentruyt left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

marissahuysentruyt left a comment

Uh oh!

Uh oh!

marissahuysentruyt left a comment

Uh oh!

jawinn Nov 20, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

cdransf commented Nov 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Validation steps

Regression testing

To-do list

Uh oh!

changeset-bot Bot commented Nov 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Nov 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

File metrics

Summary

opacitycheckerboard

thumbnail

Uh oh!

github-actions Bot commented Nov 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Uh oh!

jawinn Nov 20, 2024

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

cdransf commented Nov 12, 2024 •

edited

Loading

changeset-bot Bot commented Nov 12, 2024 •

edited

Loading

github-actions Bot commented Nov 12, 2024 •

edited

Loading

github-actions Bot commented Nov 12, 2024 •

edited

Loading