feat(colorwheel): S2 migration #3390

cdransf · 2024-11-12T19:43:17Z

Description

CSS-1020

This change migrates the colorwheel component to S2. It adds the --spectrum-colorwheel-border-color-rgb and --spectrum-colorwheel-border-opacity custom properties. It updates --spectrum-colorwheel-border-color to leverage these tokens in an rgba(...) function.

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

Run Storybook locally or open the link for the PR.
Navigate to the colorwheel 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-12T19:43:22Z

🦋 Changeset detected

Latest commit: f3be898

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

This PR includes changesets to release 1 package

Name	Type
@spectrum-css/colorwheel	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-12T19:46:18Z

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

github-actions · 2024-11-12T19:49:09Z

File metrics

Summary

Total size: 4.29 MB^*
Total change (Δ): ⬆ 0.60 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	Δ
colorwheel	4.95 KB	⬆ 0.17 KB

Details

colorwheel

File	Head	Base	Δ
index-base.css	4.95 KB	4.79 KB	⬆ 0.17 KB (3.53%)
index-vars.css	4.95 KB	4.79 KB	⬆ 0.17 KB (3.53%)
index.css	4.95 KB	4.79 KB	⬆ 0.17 KB (3.53%)
metadata.json	2.05 KB	1.97 KB	⬆ 0.08 KB (4.06%)

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

marissahuysentruyt

A few questions for you, as usual!

I wonder if we need to refactor the color-wheel-width and color-wheel-minimum-width tokens from our custom tokens/dist. Those values change based on the platform (desktop/mobile), but the designs don't say anything about any size changes between desktop and mobile. In other components, they have noted the size differences. It might be something worth checking with design on. 🤷‍♀️
Do we need to adjust .spectrum-ColorWheel-border at all so that our border is actually transparent, against the color wheel, instead of outside of the color wheel? I'm not sure if the clip path is the right place, but maybe that custom property needs some tweaking? I think S2 would be the place to fix this! (because it's also not like that in main, but looking at S1 designs, it should have been).

Ours (effectively, has a gray border):

In Figma (where the border is "on top" of the color wheel):

Happy to pair on any of my comments if two heads are better than one! 👍

components/colorwheel/index.css

marissahuysentruyt · 2024-11-13T20:09:24Z

components/colorwheel/index.css

+	--spectrum-colorwheel-width: var(--spectrum-color-wheel-width);
+	--spectrum-colorwheel-min-width: var(--spectrum-color-wheel-minimum-width);
+	--spectrum-colorwheel-height: var(--spectrum-color-wheel-width);
+	--spectrum-colorwheel-border-color-rgb: var(--spectrum-gray-1000-rgb);


The designs are looking for gray-1000 as opposed to gray-1000-rgb. I'm curious if, when this is design reviewed, the design team will be looking for gray-1000. If we have a comment that we're using gray-1000-rgb in its place for a while, at least we can point to that right away. We know they're basically the same values, so can we interchange these tokens without the need for a comment? We might have a lot of these comments, so it would be awesome if we got confirmation to use them interchangeably (although I don't totally know how we'd know where/what to refactor once the tokens are updated if we don't have a comment 🤔🤦‍♀️ )

I'm only going off of what I've seen in other components (asset card has one as does tooltip) where there's a little callout about the "correct" token not being used purposely, because of whatever reason.

I just pushed up a change with a comment to address this — the way the designs call for it to be implemented I don't think we can use the specified token while also setting the opacity properly. 🫠

marissahuysentruyt · 2024-11-13T21:08:44Z

components/colorwheel/index.css

+	--spectrum-colorwheel-min-width: var(--spectrum-color-wheel-minimum-width);
+	--spectrum-colorwheel-height: var(--spectrum-color-wheel-width);
+	--spectrum-colorwheel-border-color-rgb: var(--spectrum-gray-1000-rgb);
+	--spectrum-colorwheel-border-opacity: 0.1;


Is the color-wheel-border-opacity token undefined? Should we leave a note to Garth about that? Or a comment here about it being undefined?

It is! I left him a note, but I'll add a todo as well. cc @GarthDB

marissahuysentruyt · 2024-11-13T21:27:36Z

components/colorwheel/index.css

+	--spectrum-colorwheel-border-color-rgb: var(--spectrum-gray-1000-rgb);
+	--spectrum-colorwheel-border-opacity: 0.1;
+	--spectrum-colorwheel-border-color: rgba(var(--spectrum-colorwheel-border-color-rgb), var(--spectrum-colorwheel-border-opacity));
+	--spectrum-colorwheel-border-width: var(--spectrum-border-width-100);


Hm...so everything checks out right now. The border width is 1px, and if I inspect the Figma component, it also has a 1px border.

However, I read the blurb in the desktop file, and it says that the color wheel is supposed to have a 2px border? You may have already done this, but I was going to suggest we double check this with design. This change isn't listed in the changelog in Figma, so I think maybe this is outdated information. Maybe design would want to correct that 2px thing? Or update border-width-100?

I went ahead and added a comment about this to the thread I dropped into the implementations channel. I'll get both updated pending some clarification. ✨

cdransf · 2024-11-14T00:11:58Z

A few questions for you, as usual!

I wonder if we need to refactor the color-wheel-width and color-wheel-minimum-width tokens from our custom tokens/dist. Those values change based on the platform (desktop/mobile), but the designs don't say anything about any size changes between desktop and mobile. In other components, they have noted the size differences. It might be something worth checking with design on. 🤷‍♀️

Do we need to adjust .spectrum-ColorWheel-border at all so that our border is actually transparent, against the color wheel, instead of outside of the color wheel? I'm not sure if the clip path is the right place, but maybe that custom property needs some tweaking? I think S2 would be the place to fix this! (because it's also not like that in main, but looking at S1 designs, it should have been).

Ours (effectively, has a gray border):

In Figma (where the border is "on top" of the color wheel): ...

Happy to pair on any of my comments if two heads are better than one! 👍

I started a thread in the implementations channel about the first question — I'll go ahead and run with design's preference.

Since the border is rendered by the clip path but is associated with the div that wraps the color wheel node, I'm not sure we can fix it by adjusting the clip path (to your point). If we reduce the dimensions of the div or reduce the size of the clip path the "border" would disappear since it would render behind the color wheel. Could we render an inset border and attach it to the color wheel node directly? (Pending design approval and input.) ✨

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 pfulton, castastrophe, rise-erpelding and marissahuysentruyt November 12, 2024 19:43

cdransf self-assigned this Nov 12, 2024

cdransf changed the title ~~feat(colorwheel): s2 migration~~ feat(colorwheel): S2 migration Nov 12, 2024

marissahuysentruyt reviewed Nov 13, 2024

View reviewed changes

cdransf force-pushed the cdransf/s2-colorwheel-migration branch from eaf2611 to 3a12421 Compare November 14, 2024 00:15

cdransf added the blocked See description and comments for what is blocking this issue label Nov 14, 2024

cdransf force-pushed the cdransf/s2-colorwheel-migration branch from 3a12421 to 99a6ad6 Compare November 18, 2024 23:51

cdransf added 2 commits November 20, 2024 14:30

feat(colorwheel): s2 migration

ca65bbb

feat(colorwheel): address undefined tokens

f3be898

cdransf force-pushed the cdransf/s2-colorwheel-migration branch from 99a6ad6 to f3be898 Compare November 20, 2024 22:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(colorwheel): S2 migration #3390

feat(colorwheel): S2 migration #3390

cdransf commented Nov 12, 2024

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

colorwheel

marissahuysentruyt left a comment

marissahuysentruyt Nov 13, 2024

cdransf Nov 13, 2024

marissahuysentruyt Nov 13, 2024

cdransf Nov 13, 2024

marissahuysentruyt Nov 13, 2024

cdransf Nov 14, 2024

cdransf commented Nov 14, 2024 •

edited

Loading

feat(colorwheel): S2 migration #3390

Are you sure you want to change the base?

feat(colorwheel): S2 migration #3390

Conversation

cdransf commented Nov 12, 2024

Description

How and where has this been tested?

Validation steps

Regression testing

To-do list

changeset-bot bot commented Nov 12, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Nov 12, 2024 • edited Loading

github-actions bot commented Nov 12, 2024 • edited Loading

File metrics

Summary

colorwheel

marissahuysentruyt left a comment

Choose a reason for hiding this comment

marissahuysentruyt Nov 13, 2024

Choose a reason for hiding this comment

cdransf Nov 13, 2024

Choose a reason for hiding this comment

marissahuysentruyt Nov 13, 2024

Choose a reason for hiding this comment

cdransf Nov 13, 2024

Choose a reason for hiding this comment

marissahuysentruyt Nov 13, 2024

Choose a reason for hiding this comment

cdransf Nov 14, 2024

Choose a reason for hiding this comment

cdransf commented Nov 14, 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

cdransf commented Nov 14, 2024 •

edited

Loading