fix(colorloupe): adds correct disabled styles

[marissahuysentruyt]

Description

It was noted in #3409 that the color loupe shouldn't display when its color handle is disabled. If a user went to color handle, turned the withColorLoupe to true, then tried to disable the color handle, and the color loupe is still rendering. This PR aims to fix that by adding styles for disabled color loupes. There's also the corresponding changeset and udpates to the metadata.json.

Before 🚫 (color loupe testing grid/color handle testing grid)

After ✅ (color loupe testing grid/color handle testing grid)

Jira/Specs

CSS-1089

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 or visit the deploy preview. [@castastrophe]
  • Go to the color loupe default story
  • Toggle the disabled control to verify the color loupe isn't visible. ((it should have opacity: 0 in the inspector)
  • Turn on the Chromatic preview (and if needed reset the color loupe controls)
• Verify the Disabled test case behaves the same way and isn't visible. [@castastrophe]
• Go to the color handle default story
  • Turn on both the disabled and withColorLoupe controls. Toggle the disabled control a few times.
  • Verify the color loupe only displays when the color handle is not disabled. [@castastrophe]
  • Turn on the Chromatic preview (and if needed reset the color handle controls)
• Verify the With Color Loupe- Disabled test case behaves the same and the color loupe isn't visible. [@castastrophe]

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.
• If my change impacts other components, I have tested to make sure they don't break.
• ✨ This pull request is ready to merge. ✨

[changeset-bot]

🦋 Changeset detected

Latest commit: 2ecf9c0

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/colorloupe	Minor

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]

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

[github-actions]

File metrics

Summary

Total size: 4.27 MB^*
Total change (Δ): 🔴 ⬆ 0.15 KB (0.00%)

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

Package	Size	Δ
colorloupe	3.95 KB	🔴 ⬆ 0.05 KB

Details

colorloupe

Filename	Head	Compared to base
index-base.css	3.95 KB	🔴 ⬆ 0.05 KB (1.25%)
index-vars.css	3.95 KB	🔴 ⬆ 0.05 KB (1.25%)
index.css	3.95 KB	🔴 ⬆ 0.05 KB (1.25%)

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

[castastrophe]

Ran through the test cases and they're looking great! I am still seeing the box-shadow when activating the disabled knob but I think that's because the object maintains focus and clicking away hides the shadow. I think it's a Storybook-only issue and not necessarily something we need to fix.