fix(search): update disabled state in spectrum two #3593

TarunAdobe · 2025-03-03T06:37:24Z

Description

updated disabled search background color to gray-25 and border-color to gray-300 in spectrum-two theme.
SWC-574

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:

Open the storybook for the search component:

Verify that --system-search-background-color-disabled now points to --spectrum-gray-25. [@cdransf]
Verify that --system-search-border-color-disabled now points to --spectrum-gray-300 [@cdransf]

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.

Screenshots

Old:

New:

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 · 2025-03-03T06:38:29Z

🦋 Changeset detected

Latest commit: 6ed8ac6

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/search	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

github-actions · 2025-03-03T06:43:17Z

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

github-actions · 2025-03-03T06:43:23Z

File metrics

Summary

Total size: 2.25 MB^*

Package	Size	Minified	Gzipped
search	11.70 KB	11.17 KB	1.88 KB

search

Filename	Head	Minified	Gzipped	Compared to base
index-base.css	10.40 KB	9.93 KB	1.75 KB	🟢 ⬇ 0.17 KB
index-theme.css	2.43 KB	2.35 KB	0.62 KB	🔴 ⬆ 0.40 KB
index.css	11.70 KB	11.17 KB	1.88 KB	🟢 ⬇ 0.04 KB
metadata.json	7.87 KB	-	-	🔴 ⬆ 0.18 KB
themes/express.css	2.19 KB	2.12 KB	0.65 KB	🔴 ⬆ 0.32 KB
themes/spectrum-two.css	2.05 KB	1.99 KB	0.62 KB	🔴 ⬆ 0.28 KB
themes/spectrum.css	2.10 KB	2.04 KB	0.62 KB	🔴 ⬆ 0.32 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.

TarunAdobe · 2025-03-03T10:40:37Z

https://www.chromatic.com/test?appId=64762974a45b8bc5ca1705a2&id=67c57141bb87b246e02cabfd

The changes that I did ended up affecting express theme for search - quiet and I haven't been able to figure out how to fix that :(

cdransf

Values resolve expected, but we'll need to generate an updated metadata.json file by running yarn ci.

components/search/themes/express.css

rise-erpelding

Here's my suggestion that I'm hoping will make it work in all themes:

Set the colors we want in S2:

/* spectrum-two.css */
--spectrum-search-border-color-disabled: var(--spectrum-gray-300);
--spectrum-search-background-color-disabled: var(--spectrum-gray-25);

No changes to --quiet in S2, right? I think this variant has been removed in the full S2 migration.

Maintain the property values we had in S1/Express, set properties on the quiet selector:

/* spectrum.css */
--spectrum-search-background-color-disabled: var(--spectrum-disabled-background-color);
--spectrum-search-border-color-disabled: var(--spectrum-disabled-background-color);

&.spectrum-Search--quiet {
    --spectrum-search-background-color-disabled: transparent;
    --spectrum-search-border-color-disabled: var(--spectrum-disabled-border-color);
}

Do you think this will work?

components/search/themes/express.css

components/search/themes/spectrum.css

rise-erpelding

This looks good! S2 looks as expected and there are no regressions in S1/Express. It looks like the checks are failing here because the metadata.json needs updating, once that's committed I think this is good to go!

components/search/dist/metadata.json

components/search/themes/spectrum.css

castastrophe

These updates are looking pretty good to me - I'd like to see our changesets read a little more like documentation and less like commit messages if possible.

.changeset/four-phones-agree.md

castastrophe · 2025-03-11T15:18:21Z

components/search/index.css

@@ -48,8 +48,6 @@

 	/* Disabled */
 	--spectrum-search-color-disabled: var(--spectrum-disabled-content-color);
-	--spectrum-search-background-color-disabled: var(--spectrum-disabled-background-color);


Love that you removed these as well as putting them into the theme files so that we don't have conflicting sources for the variables! Great attention to detail.

updated PR

Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>

Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>

* feat(actionbutton): use s2 colors in spectrum-two theme (#3606) * feat(actionbutton): use closer to s2 colors in spectrum-two theme Requested colors update for action button, aligning the colors closer to the S2 design, post-foundations. In the foundations spectrum-two theme: - Removes the border - Changes the default background colors to match s2 specs - Updates the background colors used for static black and static white SWC-497 * fix(actionbutton): fix high contrast styles for selected disabled The selected + disabled button was not showing up as the disabled colors in high contrast mode. Fixed by adjusting the source order slightly in the high contrast media query so disabled is after selected and takes precedence. * fix(search): update disabled state in spectrum two (#3593) Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com> * chore(deps): bump the npm_and_yarn group with 2 updates (#3618) Bumps the npm_and_yarn group with 2 updates: [@babel/helpers](https://github.com/babel/babel/tree/HEAD/packages/babel-helpers) and [@babel/runtime](https://github.com/babel/babel/tree/HEAD/packages/babel-runtime). Updates `@babel/helpers` from 7.26.0 to 7.26.10 - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.26.10/packages/babel-helpers) Updates `@babel/runtime` from 7.24.4 to 7.26.10 - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.26.10/packages/babel-runtime) --- updated-dependencies: - dependency-name: "@babel/helpers" dependency-type: indirect dependency-group: npm_and_yarn - dependency-name: "@babel/runtime" dependency-type: indirect dependency-group: npm_and_yarn ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore: update release script install settings * fix(button): adjust s2 static colors [SWC-496] (#3613) * chore: release (#3619) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix(slider): corrects contrast bug caused by template default arg (#3614) * fix(stepper): fast follows for focus/focus+hover/keyboardFocus borders (#3621) * fix(stepper): focus/focus+hover/keyboardFocus border colors * chore(stepper): add changeset * fix(slider): offset variant border radius bug fix (#3611) * feat(slider): offset variant border radius bug fix * feat(slider): fix range slider * fix(combobox): border color fast follows swc-582 (#3609) * fix(combobox): correct s1/legacy container variable * fix(combobox): fast follow border color remapping - add mods for s2 foundations disabled picker button BG/border colors - correct disabled+read-only border color - add read-only border custom property - fixes express read-only border from gray-500 to gray-400 - update metadata.json * chore(combobox): create changeset * chore: release (#3623) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * chore: patch tj-actions vulnerability (#3626) * fix(alertbanner): change system variable from spectrum to legacy (#3624) * fix(alertbanner): change system: spectrum to legacy * chore(alertbanner): create changeset * test(checkbox): add more coverage for checkbox (#3625) * chore(checkbox): add isHovered state to checkbox - adds isHovered shared type and control to checkbox stories - adds several isHovered test cases - updates checkbox template to include isHovered arg * chore(form): fix the fieldgroup component input and labels * chore: release (#3631) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix(checkbox): add invalid+checked+hover checkbox styles (#3617) - add missing ::before pseudo to target the before element in the invalid/checked/hover state - update metadata.json - create changeset * chore: release (#3632) * chore: release --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix: undefined and duplicated variable after merging main fix(slider): remove duplicated values Remove a large number of duplicate values causing stylelint "Unexpected duplicate" warnings. It looks like things got doubled up somehow in a previous rebase or merge. This included duplicate t-shirt size classes. Also moves root styles block under the custom property definitions to be consistent with other components. fix(combobox): fixes undefined and duplicated values --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: TaraT <ttomar@adobe.com> Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Cory Dransfeldt <cdransfeldt@adobe.com> Co-authored-by: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: aramos-adobe <abdulr@adobe.com>

Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>

TarunAdobe marked this pull request as ready for review March 3, 2025 06:38

TarunAdobe requested a review from a team March 3, 2025 09:01

TarunAdobe added the ready-for-review label Mar 3, 2025

cdransf requested changes Mar 3, 2025

View reviewed changes

rise-erpelding reviewed Mar 3, 2025

View reviewed changes

components/search/themes/express.css Outdated Show resolved Hide resolved

TarunAdobe force-pushed the ttomar/search branch from 22f5d6f to 6cc7726 Compare March 4, 2025 06:33

rise-erpelding requested changes Mar 4, 2025

View reviewed changes

components/search/themes/express.css Outdated Show resolved Hide resolved

TarunAdobe force-pushed the ttomar/search branch 2 times, most recently from e4f9c16 to 10dddc2 Compare March 5, 2025 13:07

github-actions bot reviewed Mar 5, 2025

View reviewed changes

components/search/themes/spectrum.css Outdated Show resolved Hide resolved

TarunAdobe force-pushed the ttomar/search branch from 972a401 to fd45d0b Compare March 6, 2025 07:18

rise-erpelding self-requested a review March 6, 2025 20:39

rise-erpelding previously approved these changes Mar 6, 2025

View reviewed changes

TarunAdobe requested a review from rise-erpelding March 10, 2025 13:13

castastrophe requested changes Mar 10, 2025

View reviewed changes

components/search/dist/metadata.json Outdated Show resolved Hide resolved

components/search/themes/spectrum.css Outdated Show resolved Hide resolved

TarunAdobe requested review from castastrophe and cdransf March 10, 2025 16:32

TarunAdobe changed the title ~~chore(search): update disabled state in spectrum two~~ fix(search): update disabled state in spectrum two Mar 10, 2025

castastrophe force-pushed the main branch from 416ff56 to 57706c7 Compare March 10, 2025 19:30

rise-erpelding force-pushed the ttomar/search branch 3 times, most recently from f692a5e to e3c7c43 Compare March 11, 2025 14:36

castastrophe force-pushed the main branch from 0d5bdfb to 8637d39 Compare March 11, 2025 14:54

castastrophe force-pushed the ttomar/search branch from e3c7c43 to 36e21e3 Compare March 11, 2025 15:14

castastrophe requested changes Mar 11, 2025

View reviewed changes

castastrophe added the run_vrt For use on PRs looking to kick off VRT label Mar 11, 2025

castastrophe added the fast-follows An issue or PR that quickly follows a release label Mar 11, 2025

rise-erpelding requested a review from castastrophe March 11, 2025 15:52

castastrophe approved these changes Mar 11, 2025

View reviewed changes

TarunAdobe and others added 2 commits March 12, 2025 05:46

fix(search): update disabled state in spectrum two

a043b69

Update .changeset/four-phones-agree.md

312a7f0

Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>

rise-erpelding force-pushed the ttomar/search branch from c6dde72 to 312a7f0 Compare March 12, 2025 10:46

Update changeset

6ed8ac6

cdransf approved these changes Mar 12, 2025

View reviewed changes

rise-erpelding merged commit d829abb into main Mar 12, 2025
14 checks passed

rise-erpelding deleted the ttomar/search branch March 12, 2025 19:53

castastrophe added a commit that referenced this pull request Mar 12, 2025

fix(search): update disabled state in spectrum two (#3593)

7e2624a

Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>

castastrophe added a commit that referenced this pull request Mar 12, 2025

fix(search): update disabled state in spectrum two (#3593)

c1f77f4

Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>

castastrophe added a commit that referenced this pull request Mar 12, 2025

fix(search): update disabled state in spectrum two (#3593)

2da5560

Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>

castastrophe added a commit that referenced this pull request Mar 18, 2025

fix(search): update disabled state in spectrum two (#3593)

c4d12c7

Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>

castastrophe added a commit that referenced this pull request Mar 25, 2025

fix(search): update disabled state in spectrum two (#3593)

7d6f37a

Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>

castastrophe added a commit that referenced this pull request Mar 28, 2025

fix(search): update disabled state in spectrum two (#3593)

d9db404

Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>

castastrophe added a commit that referenced this pull request Mar 31, 2025

fix(search): update disabled state in spectrum two (#3593)

ff5dbdf

Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>

castastrophe added a commit that referenced this pull request Apr 4, 2025

fix(search): update disabled state in spectrum two (#3593)

871f914

Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>

castastrophe added a commit that referenced this pull request Apr 17, 2025

fix(search): update disabled state in spectrum two (#3593)

e1b605f

Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>

castastrophe added a commit that referenced this pull request May 1, 2025

fix(search): update disabled state in spectrum two (#3593)

6241ae6

Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com> Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(search): update disabled state in spectrum two #3593

fix(search): update disabled state in spectrum two #3593

TarunAdobe commented Mar 3, 2025 •

edited by cdransf

Loading

changeset-bot bot commented Mar 3, 2025 •

edited

Loading

github-actions bot commented Mar 3, 2025 •

edited

Loading

github-actions bot commented Mar 3, 2025 •

edited

Loading

TarunAdobe commented Mar 3, 2025

cdransf left a comment

rise-erpelding left a comment •

edited

Loading

rise-erpelding left a comment

castastrophe left a comment

castastrophe Mar 11, 2025

fix(search): update disabled state in spectrum two #3593

fix(search): update disabled state in spectrum two #3593

Conversation

TarunAdobe commented Mar 3, 2025 • edited by cdransf Loading

Description

How and where has this been tested?

Validation steps

Regression testing

Screenshots

To-do list

changeset-bot bot commented Mar 3, 2025 • edited Loading

🦋 Changeset detected

github-actions bot commented Mar 3, 2025 • edited Loading

github-actions bot commented Mar 3, 2025 • edited Loading

File metrics

Summary

search

TarunAdobe commented Mar 3, 2025

cdransf left a comment

Choose a reason for hiding this comment

rise-erpelding left a comment • edited Loading

Choose a reason for hiding this comment

rise-erpelding left a comment

Choose a reason for hiding this comment

castastrophe left a comment

Choose a reason for hiding this comment

castastrophe Mar 11, 2025

Choose a reason for hiding this comment

TarunAdobe commented Mar 3, 2025 •

edited by cdransf

Loading

changeset-bot bot commented Mar 3, 2025 •

edited

Loading

github-actions bot commented Mar 3, 2025 •

edited

Loading

github-actions bot commented Mar 3, 2025 •

edited

Loading

rise-erpelding left a comment •

edited

Loading