chore(search)!: core tokens migration #1761
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
BREAKING CHANGE: Changes to packages and gulpfile for the core token migration. Now uses @spectrum-css/tokens.
Set up majority of sizing and spacing tokens, in order to use new tokens for the existing CSS, with express changes. Creates a working build before adding additional tokens.
Add tokens and style overrides for focus indicator ring/underline.
- Update example docs. Added examples for help text. - Added token and CSS for help text spacing, from design. - Separate out spectrum vars that have express vars.
- Include theme CSS and 'quiet' in storybook. - Remove skin.css and integrate CSS into main index.css - Start bringing over color tokens + styles to use them
Add additional tokens to account for the rest of the tokens defined in the design. Including border color and padding on all sides. Also fixes existing bug where text within the input will go underneath the reset button (there was not enough right padding to account for the button).
Add Storybook control to search component with t-shirt size options.
Finalize forced colors for Windows High Contrast Mode support. - Using Field and FieldText system colors as recommended by spec. - Includes fix for bg color on clear button appearing over border.
Remove the backface-visibility property, as it triggers what looks like a Safari bug (16.4) where the search icon is not visible on the standard variant. This property was to help improve a minor issue with sub-pixel rendering while scrolling, noticed in Edge WHCM.
|
🚀 Deployed on https://pr-1761--spectrum-css.netlify.app |
jawinn
commented
Apr 10, 2023
pfulton
reviewed
Apr 10, 2023
mlogsdon18
reviewed
Apr 11, 2023
Include missing 'mod' prefixed custom property for this token. Co-authored-by: Patrick Fulton <360251+pfulton@users.noreply.github.com>
- Increased specificity of forced color rules, so that the values in this component override all the ones in the clearbutton sub-component. - Improved fix to background color overlap on the clear button. The previous fix of a transparent background would have created a mismatch of "system color pairings" which isn't ideal according to the spec. The modified fix pushes the edges of the button to be within the component's border.
Add missing link to the "View guidelines" page in the docs for the search component (guidelines call it "Search field").
The clear button should not display when the input is disabled.
Move out some repeated custom properties for quiet that don't need to be in the system specific theme files. Added specificity was necessary so they are not overridden by the custom properties of the same name defined in .spectrum-Search for the two system themes, since those are tacked on by the build at the end of the CSS.
|
Released: |
7 tasks
Changes one of the forced-colors (Windows high contrast) mode fixes for the overlapping close button, that was causing an issue on the SWC draft merge VRTs. This accomplishes the fix is a different way, which is simpler and does not involve any positioning changes. It now uses the forced-color-adjust none to keep the transparent background on the close button in high contrast mode.
jawinn
force-pushed
the
jawinn/css-384-search-field-core-tokens
branch
from
1b3f53c to
1449c41
Compare
Run prettier and stylelint on all search component files after a merge with --no-verify, to get everything up to date and passing the linter checks.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Core tokens migration:
Updates the
searchcomponent to use core tokens defined on the Figma design.This also includes:
Also updates the
textfieldcomponent to address the TODO comment "reevaluate icon styles when search field is migrated". The search icon related styles and story entry have been removed from the textfield component, and a couple lines of CSS brought over tosearch. These were not a part of the design of textfield and were specific tosearch.CSS-384
How and where has this been tested?
Tested on MacOS Chrome, Firefox, and Safari. Tested in Edge WHCM via AssistivTunnel.
To-do list