SearchField: Add validation props and refine states #2363

beaesguerra · 2024-11-18T20:16:47Z

Summary:

To make the SearchField component more consistent with other form field components like TextField and TextArea, we add validation related props to the component. See LabeledField Implementation Spec for more details!

The changes include:

Add error, instantValidation, validate, onValidate props to SearchField
Minor tweaks
- Hide clear icon button if the field is disabled
- Refine magnifying glass icon styling to make it match Figma component more (smaller, bold icon, spacing, update disabled state)
Storybook:
- Add error and validation stories for SearchField
- Add variant stories for SearchField states

Issue: WB-1761

Test plan:

Review Storybook docs for Error and Validation stories
- ?path=/docs/packages-searchfield--docs#error
- ?path=/docs/packages-searchfield--docs#validation
Review prop documentation for SearchField (?path=/docs/packages-searchfield--docs)
Review new Search Field All Variants stories (?path=/docs/packages-searchfield-all-variants--docs)
Review Chromatic diff for styling updates (left some comments in the UI Tests!)

… on TextField styles

changeset-bot · 2024-11-18T20:16:52Z

🦋 Changeset detected

Latest commit: d2a4cd5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@khanacademy/wonder-blocks-search-field	Minor
@khanacademy/wonder-blocks-dropdown	Patch
@khanacademy/wonder-blocks-birthday-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

github-actions · 2024-11-18T20:18:46Z

Size Change: +85 B (+0.08%)

Total Size: 101 kB

Filename	Size	Change
`packages/wonder-blocks-search-field/dist/es/index.js`	1.39 kB	+85 B (+6.52%)	🔍

ℹ️ View Unchanged

Filename	Size
`packages/wonder-blocks-accordion/dist/es/index.js`	3.78 kB
`packages/wonder-blocks-banner/dist/es/index.js`	1.53 kB
`packages/wonder-blocks-birthday-picker/dist/es/index.js`	1.77 kB
`packages/wonder-blocks-breadcrumbs/dist/es/index.js`	887 B
`packages/wonder-blocks-button/dist/es/index.js`	4.04 kB
`packages/wonder-blocks-cell/dist/es/index.js`	2.01 kB
`packages/wonder-blocks-clickable/dist/es/index.js`	3.06 kB
`packages/wonder-blocks-core/dist/es/index.js`	3.44 kB
`packages/wonder-blocks-data/dist/es/index.js`	6.24 kB
`packages/wonder-blocks-dropdown/dist/es/index.js`	18.2 kB
`packages/wonder-blocks-form/dist/es/index.js`	6.28 kB
`packages/wonder-blocks-grid/dist/es/index.js`	1.36 kB
`packages/wonder-blocks-i18n/dist/es/index.js`	4.76 kB
`packages/wonder-blocks-icon-button/dist/es/index.js`	3 kB
`packages/wonder-blocks-icon/dist/es/index.js`	871 B
`packages/wonder-blocks-labeled-field/dist/es/index.js`	72 B
`packages/wonder-blocks-layout/dist/es/index.js`	1.82 kB
`packages/wonder-blocks-link/dist/es/index.js`	2.28 kB
`packages/wonder-blocks-modal/dist/es/index.js`	5.36 kB
`packages/wonder-blocks-pill/dist/es/index.js`	1.65 kB
`packages/wonder-blocks-popover/dist/es/index.js`	4.87 kB
`packages/wonder-blocks-progress-spinner/dist/es/index.js`	1.52 kB
`packages/wonder-blocks-switch/dist/es/index.js`	1.94 kB
`packages/wonder-blocks-testing-core/dist/es/index.js`	3.74 kB
`packages/wonder-blocks-testing/dist/es/index.js`	1.07 kB
`packages/wonder-blocks-theming/dist/es/index.js`	693 B
`packages/wonder-blocks-timing/dist/es/index.js`	1.8 kB
`packages/wonder-blocks-tokens/dist/es/index.js`	2.36 kB
`packages/wonder-blocks-toolbar/dist/es/index.js`	905 B
`packages/wonder-blocks-tooltip/dist/es/index.js`	7.08 kB
`packages/wonder-blocks-typography/dist/es/index.js`	1.23 kB

_{compressed-size-action}

github-actions · 2024-11-18T20:19:26Z

A new build was pushed to Chromatic! 🚀

https://5e1bf4b385e3fb0020b7073c-wqaepcqqyj.chromatic.com/

Chromatic results:

Metric	Total
Captured snapshots	99
Tests with visual changes	15
Total stories	510
Inherited (not captured) snapshots [TurboSnap]	275
Tests on the build	374

… some issues with text alignment

beaesguerra · 2024-11-18T20:26:45Z

packages/wonder-blocks-search-field/src/components/search-field.tsx

@@ -146,7 +174,7 @@ const SearchField: React.ForwardRefExoticComponent<

    // @ts-expect-error [FEI-5019] - TS2322 - Type '() => JSX.Element | null' is not assignable to type '() => ReactElement<any, string | JSXElementConstructor<any>>'.
    const maybeRenderClearIconButton: () => React.ReactElement = () => {
-        if (!value.length) {
+        if (!value.length || disabled) {


Now that we have the Search Field Variants stories, addressed a small bug where we were showing the clear button when the field is disabled!

beaesguerra · 2024-11-18T20:28:48Z

packages/wonder-blocks-search-field/src/components/search-field.tsx

@@ -223,18 +255,11 @@ const styles = StyleSheet.create({
        margin: 0,
        position: "absolute",
        right: 0,
-        ":hover": {


This was causing an issue where the focus outline would not be shown if the clear button was hovered and focused. Also, the hover state of the clear button doesn't have a border so this isn't needed!

beaesguerra · 2024-11-18T20:29:26Z

packages/wonder-blocks-search-field/src/components/search-field.tsx

    },
    inputStyleReset: {
        display: "flex",
        flex: 1,
-        "::placeholder": {


We can rely on the styles from TextField so it is consistent!

beaesguerra · 2024-11-18T21:20:00Z

packages/wonder-blocks-search-field/src/components/search-field.tsx

@@ -167,8 +195,14 @@ const SearchField: React.ForwardRefExoticComponent<
                <View onClick={onClick} style={[styles.inputContainer, style]}>
                    <PhosphorIcon
                        icon={magnifyingGlassIcon}
-                        size="medium"
-                        color={color.offBlack64}
+                        size="small"


Applying some styling updates to make the search field look more like the Figma component! It also addresses the disabled and light states

Before (left) and After (right):

khan-actions-bot · 2024-11-18T21:55:20Z

Gerald

Required Reviewers

@Khan/wonder-blocks for changes to .changeset/breezy-bears-teach.md, __docs__/wonder-blocks-search-field/search-field-variants.stories.tsx, __docs__/wonder-blocks-search-field/search-field.stories.tsx, packages/wonder-blocks-search-field/src/components/search-field.tsx, packages/wonder-blocks-search-field/src/components/__tests__/search-field.test.tsx

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

github-actions · 2024-11-18T21:55:59Z

npm Snapshot: Published

🎉 Good news!! We've packaged up the latest commit from this PR (33b95e2) and published all packages with changesets to npm.

You can install the packages in webapp by running:

./services/static/dev/tools/deploy_wonder_blocks.js --tag="PR2363"

Packages can also be installed manually by running:

yarn add @khanacademy/wonder-blocks-<package-name>@PR2363

jandrade

This is looking great! left a couple of nit/non-blocking suggestions before giving final approval.

jandrade · 2024-11-20T15:44:04Z

__docs__/wonder-blocks-search-field/search-field-variants.stories.tsx

+        padding: spacing.medium_16,
+    },
+    scenarios: {
+        display: "flex",


super-nit: View provides flex by default.

Removed! (🦸 super-nit 😄)

jandrade · 2024-11-20T15:46:34Z

__docs__/wonder-blocks-search-field/search-field.stories.tsx

+            />
+            {(errorMessage || args.error) && (
+                <>
+                    <Strut size={spacing.xSmall_8} />


suggestion: I guess you could also set gap: spacing.xSmall_8 in the parent View container. This approach works well too if you want to keep it.

On a side note, I feel that Strut and Spring were created in times where we didn't have so many CSS flex and grid goodies to solve these kind of issues. The more I think, the more I'm convinced that we should recommend using gap instead of these components. What do you think about that? (not that we have to migrate existing uses, but more that we should recommend this approach from now on if it makes sense).

That makes sense! I wonder if it would be helpful to add a gap or space prop to View. What do you think?

Also, is it preferred we inline the aphrodite styles or create styles in a stylesheet for things like this?

<View style={{ gap: spacing.xSmall_8 }} />

or

<View style={styles.container} /> ... const styles = StyleSheet.create({ container: { gap: spacing.xSmall_8, } });

Is one more performant? One nice thing about inlining the styles is that if the styling gets removed, it's removed! Unlike the other way, there's a chance we forget to remove the unused style from the stylesheet! This may also change depending on our css approach, curious if anyone has thoughts on this :)

beaesguerra · 2024-11-20T18:04:17Z

packages/wonder-blocks-search-field/src/components/search-field.tsx

            return null;
        }

        return (
            <IconButton
                icon={xIcon}
+                size="xsmall"


I also updated the dismiss icon styling (bold icon, smaller, spacing!). Thanks for catching this @jandrade!

Since IconButton is smaller now, this addresses the issue where the focus outline on the dismiss button can be cropped out if an ancestor element has overflow: hidden (see Chromatic comment)

The hit area seems too small though for accessibility. I wonder if all sizes of the IconButton component should all have the same minimum hit area?

I think we should probably use size="small" instead, as it keeps the same icon size (16x16) but the hit area is slightly bigger (32 instead of 24), which would improve a11y in that regard. We'd still fail to achieve AAA, but I think it would be a good compromise for the mid-term.

And I like the suggestion about revisiting the hit areas of all IconButton variants. I think this is something worth exploring and documenting in the WB audit that we are doing for the new experience.

size="small" for IconButton uses a 24x24 icon, which is different from size="small" for PhosphorIcon! I'll update this to size="small" and have the icon be a bit bigger so it is more usable!

I'll also update it back to the regular icon weight, I think when it's bold and 24x24, the dismiss icon is too prominent!

Update: I've updated this!

Thanks for trying this out. The last iteration makes sense to me.

For context, I got a big confused as I saw that the designs apparently used an icon of 24x24 but in reality the icon was 16x16

https://www.figma.com/design/VbVu3h2BpBhH80niq101MHHE/%F0%9F%92%A0-Main-Components?node-id=13843-9211&t=nNY8Jl9Ah253UTqj-4

Ahh yes that is confusing! I added a note in WB-1792 to document tips for developers around icons once we work with design to make the translation easier!

I also updated the audit spreadsheet to include notes about the IconButton hit area and IconButton/PhosphorIcon size consistency!

…e regular icon again so the bold icon isn't too prominent

jandrade

Looks awesome! thanks for adding these changes and for getting more consistency across our form fields 👏 🚀

beaesguerra added 11 commits November 13, 2024 16:42

SearchField: Add error prop and update icon styling

db91d02

SearchField: Add variants story and address styling issues by relying…

e6a0a31

… on TextField styles

SearchField: Don't render clear icon button if the field is disabled

5be918d

Add instantValidation, validate, onValidate props to SearchField

9a012f2

add tests

9981f8e

fix styling so hover + focus state doesn't remove the focus outline

96337dc

Disable chromatic snapshots

133be86

update docs

173aaf5

add changeset

519c6a7

add test for hiding clear button when field is disabled

f7ca531

update changeset

38d94fc

beaesguerra self-assigned this Nov 18, 2024

add test

ce89fc7

beaesguerra force-pushed the search-field-updates branch from ba4067b to 41702d7 Compare November 18, 2024 20:44

remove icon styling changes to revert to original styling. there were…

5f9f586

… some issues with text alignment

beaesguerra force-pushed the search-field-updates branch from 41702d7 to 5f9f586 Compare November 18, 2024 20:47

beaesguerra added 2 commits November 18, 2024 14:15

Fix up magnifying icon styling

7898c96

Update validation story

e0569b1

beaesguerra commented Nov 18, 2024

View reviewed changes

beaesguerra marked this pull request as ready for review November 18, 2024 21:55

khan-actions-bot requested a review from a team November 18, 2024 21:55

beaesguerra mentioned this pull request Nov 18, 2024

WB-1779: Add startIcon prop to Combobox #2364

Open

jandrade reviewed Nov 20, 2024

View reviewed changes

beaesguerra added 2 commits November 20, 2024 10:29

address PR comments: clean up styling

9151f56

update clear icon button: bold icon, smaller, spacing

d2e3190

khan-actions-bot requested a review from a team November 20, 2024 17:40

fix lint

b286e3a

beaesguerra commented Nov 20, 2024

View reviewed changes

Use small size for dismiss button so it has a bigger hit area. Use th…

d2a4cd5

…e regular icon again so the bold icon isn't too prominent

jandrade approved these changes Nov 20, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SearchField: Add validation props and refine states #2363

SearchField: Add validation props and refine states #2363

beaesguerra commented Nov 18, 2024 •

edited

Loading

changeset-bot bot commented Nov 18, 2024 •

edited

Loading

github-actions bot commented Nov 18, 2024 •

edited

Loading

github-actions bot commented Nov 18, 2024 •

edited

Loading

beaesguerra Nov 18, 2024

beaesguerra Nov 18, 2024

beaesguerra Nov 18, 2024

beaesguerra Nov 18, 2024

khan-actions-bot commented Nov 18, 2024

github-actions bot commented Nov 18, 2024 •

edited

Loading

jandrade left a comment

jandrade Nov 20, 2024

beaesguerra Nov 20, 2024

jandrade Nov 20, 2024

beaesguerra Nov 20, 2024

beaesguerra Nov 20, 2024

jandrade Nov 20, 2024

beaesguerra Nov 20, 2024

beaesguerra Nov 20, 2024 •

edited

Loading

jandrade Nov 20, 2024

beaesguerra Nov 20, 2024

jandrade left a comment

SearchField: Add validation props and refine states #2363

Are you sure you want to change the base?

SearchField: Add validation props and refine states #2363

Conversation

beaesguerra commented Nov 18, 2024 • edited Loading

Summary:

Test plan:

changeset-bot bot commented Nov 18, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Nov 18, 2024 • edited Loading

github-actions bot commented Nov 18, 2024 • edited Loading

A new build was pushed to Chromatic! 🚀

Chromatic results:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

khan-actions-bot commented Nov 18, 2024

Gerald

github-actions bot commented Nov 18, 2024 • edited Loading

npm Snapshot: Published

jandrade left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

beaesguerra Nov 20, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jandrade left a comment

Choose a reason for hiding this comment

beaesguerra commented Nov 18, 2024 •

edited

Loading

changeset-bot bot commented Nov 18, 2024 •

edited

Loading

github-actions bot commented Nov 18, 2024 •

edited

Loading

github-actions bot commented Nov 18, 2024 •

edited

Loading

github-actions bot commented Nov 18, 2024 •

edited

Loading

beaesguerra Nov 20, 2024 •

edited

Loading