Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(picker): update S2 border-color [SWC-641] #3584

Merged
merged 10 commits into from
Mar 4, 2025

Conversation

blunteshwar
Copy link
Contributor

@blunteshwar blunteshwar commented Feb 27, 2025

Description

Updated border-color tokens for picker.
https://jira.corp.adobe.com/browse/SWC-641

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

Include steps for the PR reviewer that explain how they should test your PR. Example test outline:

  1. Open the storybook for the picker component:
    • Open the picker and validate that the border color is var(--spectrum-gray-800) using inspect element by searching for --system-picker-border-color-default-open
    • Click the button and validate the new default open border-color is var(--spectrum-gray-800) and applied [@castastrophe]
    • Open the picker and validate that the border-color of open not hover variant is var(--spectrum-gray-900) using inspect element by searching for --system-picker-border-color-default-open: @marissahuysentruyt
    • Open the picker and validate that the background-color of open not hover variant is var(--spectrum-gray-200) using inspect element by searching for --system-picker-background-color-default-open @marissahuysentruyt

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

The one on the top is with --system-picker-border-color-default-open: var(--spectrum-gray-800) (Desired)
The one on the bottom is with --system-picker-border-color-default-open: var(--spectrum-gray-500) (Current)
Screenshot 2025-02-27 at 4 34 22 PM
Screenshot 2025-02-27 at 4 34 30 PM

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

Copy link

changeset-bot bot commented Feb 27, 2025

🦋 Changeset detected

Latest commit: 7f4d9f8

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/picker Patch

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

Copy link
Contributor

github-actions bot commented Feb 27, 2025

File metrics

Summary

Total size: 2.25 MB*

Package Size Minified Gzipped
picker 28.19 KB 26.91 KB 3.38 KB

picker

Filename Head Minified Gzipped Compared to base
index-base.css 27.21 KB 25.98 KB 3.30 KB -
index-theme.css 1.84 KB 1.80 KB 0.57 KB -
index.css 28.19 KB 26.91 KB 3.38 KB 🔴 ⬆ 0.02 KB
metadata.json 14.93 KB - - -
themes/express.css 1.45 KB 1.41 KB 0.55 KB -
themes/spectrum-two.css 1.57 KB 1.53 KB 0.57 KB 🔴 ⬆ 0.02 KB
themes/spectrum.css 1.56 KB 1.51 KB 0.57 KB -
* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

Copy link
Contributor

github-actions bot commented Feb 27, 2025

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

@blunteshwar blunteshwar added S2 Spectrum 2 fast-follows An issue or PR that quickly follows a release ready-for-review labels Feb 27, 2025
@castastrophe castastrophe changed the title chore: upgrade picker border-color fix(picker): update border-color Feb 27, 2025
@castastrophe castastrophe changed the title fix(picker): update border-color fix(picker): update S2 border-color [SWC-641] Feb 27, 2025
Copy link
Collaborator

@castastrophe castastrophe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please update the changeset as described and update with the latest to resolve the conflict in the spectrum-two file.

"@spectrum-css/picker": patch
---

chore: upgrade picker border-color
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This needs to be more detailed about what properties were specifically updated and what the impact might be for consumers.

@castastrophe castastrophe added the run_vrt For use on PRs looking to kick off VRT label Feb 27, 2025
@castastrophe castastrophe force-pushed the pvashish/upgrade-picker branch from dc74716 to a2d64f8 Compare February 27, 2025 19:10
@Rajdeepc Rajdeepc self-assigned this Mar 3, 2025
@Rajdeepc
Copy link
Collaborator

Rajdeepc commented Mar 3, 2025

@castastrophe I have added a couple of more design review updates for background color and border color for open not hover variant added in the validation steps 4 and 5. Kindly review before merging

Copy link
Collaborator

@marissahuysentruyt marissahuysentruyt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me! Thanks 🥳

"@spectrum-css/picker": patch
---

Previously, the --spectrum-picker-border-color-default-open was gray-500, but the spec shows it as gray-800. This change aligns the component with the spec by updating the --spectrum-picker-border-color-default-open to gray-800.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Rajdeepc Should we add a quick note here about the background color update for the s2 theme?

@castastrophe castastrophe force-pushed the pvashish/upgrade-picker branch from 9707291 to 4f57a79 Compare March 4, 2025 18:21
@castastrophe castastrophe force-pushed the pvashish/upgrade-picker branch from 4f57a79 to 7f4d9f8 Compare March 4, 2025 18:39
@castastrophe castastrophe enabled auto-merge (squash) March 4, 2025 18:42
@castastrophe castastrophe merged commit f286c68 into main Mar 4, 2025
16 of 24 checks passed
@castastrophe castastrophe deleted the pvashish/upgrade-picker branch March 4, 2025 18:48
This was referenced Mar 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
fast-follows An issue or PR that quickly follows a release ready-for-review run_vrt For use on PRs looking to kick off VRT S2 Spectrum 2
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants