chore(search): add missing size-specific CSS properties

[rubencarvalho]

Description

Added missing size-specific CSS custom properties to the Search component in both Spectrum 2 and Express themes. These properties are required by downstream consumers (like Spectrum Web Components) to properly render the component across different sizes.

How and where has this been tested?

Even though this change is not reflected in this project (no VRT changes), it will cascade and fix undefined variables in Spectrum Web Components

You can see the properties not defined on the initial runs of adobe/spectrum-web-components#5085, resulting in a broken component design. This change makes it so the CSS properties are defined in the SWC's #textfield element which will then render it correctly (tested manually by overriding the local CSS in SWC).

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

1. Check out the SWC PR.
2. Manually copy the produced CSS artifacts from this PR to respective SWC's node_modules
3. Run yarn start and verify the http://localhost:8080/storybook/index.html?path=/story/search-sizes--xl renders correctly.

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

Broken component in SWC:

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]

⚠️ No Changeset found

Latest commit: c90bfbb

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

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

[github-actions]

File metrics

Summary

Total size: 2.25 MB^*

Package	Size	Minified	Gzipped
search	12.34 KB	11.78 KB	1.87 KB

search

Filename	Head	Minified	Gzipped	Compared to base
index-base.css	10.57 KB	10.09 KB	1.76 KB	-
index-theme.css	2.68 KB	2.58 KB	0.64 KB	🔴 ⬆ 0.65 KB
index.css	12.34 KB	11.78 KB	1.87 KB	🔴 ⬆ 0.62 KB
metadata.json	8.05 KB	-	-	🔴 ⬆ 0.38 KB
themes/express.css	2.53 KB	2.44 KB	0.68 KB	🔴 ⬆ 0.67 KB
themes/spectrum-two.css	2.43 KB	2.35 KB	0.65 KB	🔴 ⬆ 0.67 KB
themes/spectrum.css	2.44 KB	2.37 KB	0.65 KB	🔴 ⬆ 0.67 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.

[rubencarvalho]

I am getting a Typography regression in VRT which seems flaky (?), not sure if this is known / how to proceed here!

https://www.chromatic.com/build?appId=64762974a45b8bc5ca1705a2&number=4191

[rise-erpelding]

Looks good - just leaving a quick question here for you!

[rise-erpelding]

The addition of --spectrum-search-block-size, --spectrum-search-icon-size, and --spectrum-search-text-to-icon seem a little repetitive here in Express, on the CSS side of things as far as I can tell, those custom properties look like they're being inherited in Express from where they're set in spectrum-two.css, would things still work as you'd want them in SWC if we removed the extra code you added here in express.css?

[Rajdeepc]

express.css inherits spectrum.css if I am not wrong! Can you please check @rise-erpelding

[rise-erpelding]

Correct, spectrum-two.css imports spectrum.css, and express.css imports spectrum.css.

You can set, for instance, --spectrum-foo: var(--spectrum-bar) in spectrum-two.css and still see that being applied in Express if it's not been overridden in spectrum or express. Unless we need to leave it in to avoid an issue in SWC, I think we could probably remove the custom properties that are redefined in express.css since those tokens are the same for all themes.

[Rajdeepc]

Yes this make sense. Thanks

[jawinn]

I'm wondering why this is needed in SWC, when those same values for S/L/XL are already being set in the index.css, which should apply to all themes?
http://github.com/adobe/spectrum-css/blob/main/components/search/index.css#L93-L109

If an increase in specificity is needed, would that be done in the linked section above instead?

Do you have a testing link where the screenshotted issue is present? When I go to the Storybook at the linked PR 5085, I do not see that issue appearing.