feat(search): s2 migration #2673
Open
Conversation
This file contains 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
🦋 Changeset detectedLatest commit: cc78761 The changes in this PR will be included in the next version bump. This PR includes changesets to release 7 packages
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 |
|
🚀 Deployed on https://pr-2673--spectrum-css.netlify.app |
File metricsSummaryTotal size: 4.54 MB* Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.
Detailssearch
textfield
* Results are not gzipped or minified. * An ASCII character in UTF-8 is 8 bits or 1 byte. |
mdt2
commented
Apr 18, 2024
Comment on lines
+31
to
+34
| isFocused: { | ||
| table: { disable: true }, | ||
| type: { name: "boolean" }, | ||
| }, |
There was a problem hiding this comment.
I added this because TextField uses this class in it's Storybook, so we can use this arg to pass through to TextField to show the focus state in our Chromatic testing preview for Search.
pfulton
force-pushed
the
spectrum-two
branch
2 times, most recently
from
f3dd9ff
to
9931a8e
Compare
rise-erpelding
requested changes
Apr 19, 2024
There was a problem hiding this comment.
The CSS for this is looking so much cleaner and the testing preview matches several of the others that we've done! ✨ Here are a few visual things I noticed when going through this PR that might need some changes:
- The border for the disabled state is transparent but should have a gray color, it looks like there wasn't a
--modforborder-colorever set on the disabled state for textfield:
- I'm wondering if this might need an
.is-keyboardFocused:hoverselector, this hover state looks like it might be unintentional (it goes gray from black):
Other questions I have that were carryover from how the component was before:
- Is there a way to preview the search field with the help text? I know there's a spec for spacing the help text from the component, and I see that it's being used in the code, but I didn't see a way to view it in Storybook.
- Would it be helpful at all to have a control to show/not show the clear button? I was thinking if it wasn't showing by default I could check the
pill-edge-to-textspacing but then I realized that anytime it'd be used, the text would always be the placeholder "Search" text and the spacing between the end of that text box and the edge of the text field is a bit irrelevant. But is there any reason why anyone might want to look at the search field without the clear button instead of it always being there? - In WHCM, there's a clear color difference between the text color of the placeholder text and the text color when there's a value, it was like this before, and it's probably not a big deal, but it seemed a little odd to me so I thought I'd call it out:
components/search/index.css
Outdated
| @@ -298,6 +325,18 @@ governing permissions and limitations under the License. | |||
| var(--mod-search-bottom-to-text, var(--spectrum-search-bottom-to-text)) - | |||
| var(--mod-search-border-width, var(--spectrum-search-border-width)) | |||
| ); | |||
| padding-inline-start: calc( | |||
| var(--mod-search-edge-to-text, var(--spectrum-search-edge-to-text)) - | |||
There was a problem hiding this comment.
Is there a reason for using edge-to-text rather than edge-to-visual here?
There was a problem hiding this comment.
Great catch, I missed this one.
jawinn
reviewed
Apr 25, 2024
There was a problem hiding this comment.
One thing I am wondering about is the focus and focus indicator on the clear button. In our Storybook, you can tab focus the field and then tab focus the clear button, which shows a rounded focus indicator:
I didn't see a design for that focus on the clear button to reference, and also took a look at the SWC search, which doesn't have it tab focusable (the field clears with the Esc key it seems). Is the intention for us to not have it as a tab stop?
castastrophe
force-pushed
the
spectrum-two
branch
4 times, most recently
from
8f768fd
to
8768360
Compare
Includes new color values for Spectrum 2
BREAKING CHANGE: migrates `Action Group` to Spectrum 2, Removes some mod properties
BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes
BREAKING CHANGE: uses Spectrum 2 tokens
- @spectrum-css/preview@7.4.2-next.0 - @spectrum-css/actiongroup@5.0.0-next.0 - @spectrum-css/buttongroup@7.0.0-next.0 - @spectrum-css/tokens@14.0.0-next.0 - @spectrum-css/bundle-builder@6.3.1-next.0 - @spectrum-css/component-builder-simple@5.0.1-next.0 - @spectrum-css/component-builder@6.0.1-next.0
BREAKING CHANGE: migrates Close Button to Spectrum 2 Additionally: * test: increase chromatic coverage * fix(closebutton): pass staticColor as arg for SB display * chore(closebutton): remove themes dir * docs(closebutton): adds s2 migration notes * chore(closebutton): specify s2 tokens release for dependency --------- Co-authored-by: Patrick Fulton <pfulton@adobe.com>
* chore: migrate gray-50 to gray-25 Migrates any instance of `--spectrum-gray-50` to use `--spectrum-gray-25` as per the S2 migration guide * chore: migrate gray-75 to gray-50 Migrates usages of `--spectrum-gray-75` to use `--spectrum-gray-50` as per the s2 migration guide. * chore: migrate gray-100 to gray-75 Migrates usages of `--spectrum-gray-100` to use `--spectrum-gray-75` as per the s2 migration guide * chore: migrate gray-200 to gray-100 Migrates usages of `--spectrum-gray-200` to use `--spectrum-gray-100` as per the s2 migration guide * chore: migrate gray-300 to gray-200 Migrates usages of `--spectrum-gray-300` to use `spectrum-gray-200` as per the s2 migration guide * chore(infieldbutton): gray-300 to gray-200
* fix(commons): remove renamed mods marked for deprecation Remove mods that were renamed and previously marked for deprecation, and regenerate mods lists. This will help in reviewing the accuracy of other components' mods lists as they are being migrated to s2. * docs: migration guide notes for mod property deprecations Add notes to components affected by mod property changes in the commons basebutton. * docs(closebutton): updated docs for migration guide and icon size - Removes the "Icon size" variant options, as noted in the closebutton PR. Per Figma changelog "removed icon size as a property". - Updates migration guide with a more organized history. * fix(commons): remove another mod referencing global token Deprecates an additional mod name that was referencing a global token, and updates migration notes for all affected components.
BREAKING CHANGE: uses Spectrum 2 tokens Also: * feat(fieldlabel): medium as default and 100 sizing tokens - Use the correct "100" sized tokens for medium. - Make medium styles the default, to conform with existing pattern. .spectrum-FieldLabel--sizeM class removed as it is no longer necessary. * feat(fieldlabel): use correct font size tokens The font-size tokens used for large and extra large needed to be shifted up to match the s2 spec. * refactor(fieldlabel): remove deprecated mods Remove renamed mods marked as deprecated for S2 release. * docs(fieldlabel): spectrum 2 noted in migration notes Updates some docs and adds migration notes. Clarifies some docs around "left" and "right", and fixes duplicate ID warnings from examples code. * docs(fieldlabel): form - docs update and regenerate mods Add migration guide section to "Form", that currently lives within the Field label component. Regenerates mods to include the removal of deprecated renamed mods. * fix(fieldlabel): rename mod property referencing global token A mod custom property was referencing a global token instead of the component itself. Renames this and adds a note to the migration guide. * feat(fieldlabel): use correct sizing tokens Use correct tokens for some large and extra large custom properties, to matching with design. * style(fieldlabel): applying linter formatting adjustments Run linter fix on the fieldlabel component, which rearranges a few declarations. * docs(fieldlabel): document asterisk icon size Add documentation about asterisk UI icon sizes specified on the design. These sizes are already handled in the Storybook template, but were not really explained to the user. * feat(fieldlabel): black and white static color variants Add classes for static colors, as defined on the designs. And adds examples of these variants to the documentation. * build(fieldlabel): specify s2 tokens release for dependency Use Spectrum 2 version of tokens package in dependencies list.
* feat(switch): s2 migration * chore: remove themes * fix: animation * fix: whcm light mode unchecked handle shows * docs(storybook): align chromatic setup with new standard * fix: checked corners for non-retina display * fix: whcm handle selected color * fix: namespace mods, use semantic tokens instead of global * fix: handle state colors
* chore(tokens): use spectrum-tokens@13.0.0-beta.30 * chore: add changeset
* chore: release (next) * docs: reset changes to changelog --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Patrick Fulton <pfulton@adobe.com>
* feat(fieldlabel)!: s2 migration (#2569) BREAKING CHANGE: uses Spectrum 2 tokens Also: * feat(fieldlabel): medium as default and 100 sizing tokens - Use the correct "100" sized tokens for medium. - Make medium styles the default, to conform with existing pattern. .spectrum-FieldLabel--sizeM class removed as it is no longer necessary. * feat(fieldlabel): use correct font size tokens The font-size tokens used for large and extra large needed to be shifted up to match the s2 spec. * refactor(fieldlabel): remove deprecated mods Remove renamed mods marked as deprecated for S2 release. * docs(fieldlabel): spectrum 2 noted in migration notes Updates some docs and adds migration notes. Clarifies some docs around "left" and "right", and fixes duplicate ID warnings from examples code. * docs(fieldlabel): form - docs update and regenerate mods Add migration guide section to "Form", that currently lives within the Field label component. Regenerates mods to include the removal of deprecated renamed mods. * fix(fieldlabel): rename mod property referencing global token A mod custom property was referencing a global token instead of the component itself. Renames this and adds a note to the migration guide. * feat(fieldlabel): use correct sizing tokens Use correct tokens for some large and extra large custom properties, to matching with design. * style(fieldlabel): applying linter formatting adjustments Run linter fix on the fieldlabel component, which rearranges a few declarations. * docs(fieldlabel): document asterisk icon size Add documentation about asterisk UI icon sizes specified on the design. These sizes are already handled in the Storybook template, but were not really explained to the user. * feat(fieldlabel): black and white static color variants Add classes for static colors, as defined on the designs. And adds examples of these variants to the documentation. * build(fieldlabel): specify s2 tokens release for dependency Use Spectrum 2 version of tokens package in dependencies list. * chore: rebase against main and update components to use prerelease tokens * chore: run branch through format; update pathing and fix errors * chore: add changeset for css update --------- Co-authored-by: Josh Winn <965114+jawinn@users.noreply.github.com> Co-authored-by: Patrick Fulton <pfulton@adobe.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
castastrophe
force-pushed
the
spectrum-two
branch
from
6dbc850
to
ae7aedd
Compare
mdt2
force-pushed
the
mdt2/css-713-s2-search
branch
from
0871d58
to
2be2d4c
Compare
|
Thanks for the feedback! Some responses for Rise:
And a response for Josh:
|
Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>
Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>
pfulton
force-pushed
the
spectrum-two
branch
2 times, most recently
from
e0e0fd2
to
698e904
Compare
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
I believe this is blocked until we get the S2 icons.
S2 migration of Search to align with design specs. On top of the migration work, this PR includes:
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
Regression testing
Validate:
To-do list