[WNMGDS-2871] Adds `ds-autocomplete` component #3257

kim-cmsds · 2024-10-01T22:20:39Z

Summary

WNMGDS-2871
Adds a new ds-autocomplete web component.

How to test

Try it out in storybook
The web component has been added to the astro example project. You'll want to uncomment out L221 and comment out L222:L233. From there, run yarn build at the project root and then run yarn dev from /examples/astro

Checklist

Prefixed the PR title with the Jira ticket number as [WNMGDS-####] Title or [NO-TICKET] if this is unticketed work.
Selected appropriate Type (only one) label for this PR, if it is a breaking change, label should only be Type: Breaking
Selected appropriate Impacts, multiple can be selected.
Selected appropriate release milestone

If this is a change to code:

Created or updated unit tests to cover any new or modified code
If necessary, updated unit-test snapshots (yarn test:unit:update) and browser-test snapshots (yarn test:browser:update)

If this is a change to documentation:

Checked for spelling and grammatical errors

* Adds notes and scaffolding for ds-tabs and ds-tab-panel web components. * Adds functionalality to parse netested children into expected react node type. * Removes unnecessary recursive loop in parseChildren. * Further simplifies parseChildren implementation * Adds explicit definition of event structure for ds-change. Adds additional documentation to storybook. * Adds unit tests for ds-tabs component. * Removes an unnecessary console.log line. * Adds browser test snapshots. * Adds an entrypoint for the ds-tabs module. * Removed conflicting snapshot files * Revert "Adds browser test snapshots." This reverts commit b554c27. * Revert "Removed conflicting snapshot files" This reverts commit ae47751. * Adds ds-tabs and ds-tab-panel to web components entrypoint file. * Removes ds-tab-panel from web-components/index.ts * Adds snapshots for ds-tabs and storybook docs. * Removes debugging lines from stories.test.ts and expectNoAxeViolations.ts.

#3246) * Changed focus color from orchid to copper * reverted other token changes * Updated snapshots * Updated snapshots again * Ran yarn build:docs and reran snapshots --------- Co-authored-by: Mallory Iden <[email protected]>

jack-ryan-nava-pbc · 2024-10-02T15:37:20Z

...ages/design-system/src/components/web-components/ds-autocomplete/ds-autocomplete.stories.tsx

+    'no-results-message': 'No results',
+    name: 'ds-autocomplete',
+  },
+  argTypes: {


I think you might want to add this property table: { disable: true, }, to the following items: textFieldLabel, textFieldHint and children so they don't appear in the attributes table.

tamara-corbalt · 2024-10-02T15:50:16Z

packages/design-system/src/components/web-components/ds-autocomplete/ds-autocomplete.tsx

+      autoFocus={parseBooleanAttr(autofocus)}
+      clearSearchButton={parseBooleanAttr(clearSearchButton)}
+      id={rootId}
+      items={JSON.parse(items)}


Since items is an optional prop, I'm wondering if there's a chance this could throw an error if items is undefined. Perhaps we could add a check or a fallback value to handle that scenario?

Oh yeah it crashes hard if no items are provided. But not providing any items kinda defeats the purpose of a combobox. Is the idea that these items can be loaded in async in some cases so we don't want to provide a fallback @kim-cmsds ?

Good lines of thought. I'll take a look at this use case and push up changes.

tamara-corbalt · 2024-10-02T15:56:17Z

packages/design-system/src/components/web-components/ds-autocomplete/ds-autocomplete.test.tsx

+    expectMenuToBeClosed();
+  });
+
+  // it("calls child TextField's event handlers", () => {


Noticing that several unit tests are commented out. Is this intentional, or should we consider re-enabling or removing them?

The unit tests that are commented out correspond to how the react component's API expects a <TextField /> component to be passed in as a child. The new, simpler web component API does not currently allow for that functionality. Instead, we're "flattening" the component and passing in a far less customizable text input here:

design-system/packages/design-system/src/components/web-components/ds-autocomplete/ds-autocomplete.tsx

Lines 66 to 77 in 7735a39

<Autocomplete

{...otherProps}

label={menuHeading}

labelId={menuHeadingId}

autoFocus={parseBooleanAttr(autofocus)}

clearSearchButton={parseBooleanAttr(clearSearchButton)}

id={rootId}

items={JSON.parse(items)}

loading={parseBooleanAttr(loading)}

>

<TextField label={label} hint={hint} name="autocomplete" value={value} />

</Autocomplete>

I may spin up a follow-up ticket to see if there's a need to adjust the API to "unflatten" it and have it match the React component's API more closely.

https://jira.cms.gov/browse/WNMGDS-2992

pwolfert

Everything's working really well! The only thing that is broken is the component bundle, and that's because it needs to use import to signal to webpack that it contains side effects.

packages/design-system/src/components/web-components/ds-autocomplete/index.ts

…mplete/index.ts Co-authored-by: Patrick Wolfert <[email protected]>

…coverage

tamara-corbalt

I tested it on storybook as well as the astro example, and it looks good to me!

* initial autocomplete scaffolding * speculatively check for a wc text field * flatten autocomplete wc * a more complete autocomplete example * initial autocomplete unit test, snapshot * adds to test coverage * Clarifies text field hint for "no results" story * formats autocomplete and text field astro examples * comments out custom markup example * adds additional test coverage to ds-autocomplete example * updates storybook docs snapshots * updates astro web component script srcs * remove unnecessary comment * updates snapshots * updates examples snapshots * Update packages/design-system/src/components/web-components/ds-autocomplete/index.ts Co-authored-by: Patrick Wolfert <[email protected]> * updates storybook docs table per review * more safely check for undefined in various web components; adds test coverage * updates snapshots * Removes a proof-of-concept change * updates snaps --------- Co-authored-by: Patrick Wolfert <[email protected]>

kim-cmsds and others added 21 commits August 30, 2024 08:59

initial autocomplete scaffolding

b2f216c

speculatively check for a wc text field

200b722

flatten autocomplete wc

e47bd2b

Merge branch 'main' into kniedermaier/WNMGDS-2871/autocomplete-wc

ea264d2

remove changes

0a00fb2

Merge branch 'main' into kniedermaier/WNMGDS-2871/autocomplete-wc

454cb3c

sketching

c5d3fa9

a more complete autocomplete example

5fbf0a1

initial autocomplete unit test, snapshot

416e875

adds to test coverage

1e92186

Merge branch 'main' into kniedermaier/WNMGDS-2871/autocomplete-wc

8aff619

Clarifies text field hint for "no results" story

36045da

{s}

fa7f665

formats autocomplete and text field astro examples

c66afa3

comments out custom markup example

1ea4c0d

adds additional test coverage to ds-autocomplete example

607ce70

updates storybook docs snapshots

c9da98f

updates astro web component script srcs

ff1ddb9

remove unnecessary comment

d3ff4c8

kim-cmsds added Impacts: Core Impacts the core DS primarily, changes may occur in other themes as well. Type: Added Indicates a new feature. labels Oct 1, 2024

kim-cmsds added 2 commits October 1, 2024 15:35

updates snapshots

3c0e887

updates examples snapshots

7735a39

kim-cmsds requested review from pwolfert, tamara-corbalt and jack-ryan-nava-pbc October 2, 2024 15:10

kim-cmsds added this to the 12.0.0-beta.0 milestone Oct 2, 2024

jack-ryan-nava-pbc reviewed Oct 2, 2024

View reviewed changes

tamara-corbalt reviewed Oct 2, 2024

View reviewed changes

pwolfert reviewed Oct 2, 2024

View reviewed changes

packages/design-system/src/components/web-components/ds-autocomplete/index.ts Outdated Show resolved Hide resolved

kim-cmsds and others added 4 commits October 2, 2024 10:40

Update packages/design-system/src/components/web-components/ds-autoco…

8d801ef

…mplete/index.ts Co-authored-by: Patrick Wolfert <[email protected]>

Merge branch 'main' into kniedermaier/WNMGDS-2871/autocomplete-wc

02c2817

updates storybook docs table per review

365c40a

more safely check for undefined in various web components; adds test …

4fd0851

…coverage

kim-cmsds requested review from pwolfert, jack-ryan-nava-pbc and tamara-corbalt October 2, 2024 21:11

kim-cmsds added 5 commits October 3, 2024 08:54

Merge branch 'main' into kniedermaier/WNMGDS-2871/autocomplete-wc

744f0c8

updates snapshots

0a53014

Removes a proof-of-concept change

c6ea35b

updates snaps

2fbc37e

Merge branch 'main' into kniedermaier/WNMGDS-2871/autocomplete-wc

77aed7f

tamara-corbalt approved these changes Oct 4, 2024

View reviewed changes

updates snaps

9e61181

kim-cmsds merged commit bcd3710 into main Oct 4, 2024
1 check passed

kim-cmsds deleted the kniedermaier/WNMGDS-2871/autocomplete-wc branch October 4, 2024 17:03

kim-cmsds modified the milestones: 12.0.0-beta.0, 11.1.0 Oct 9, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WNMGDS-2871] Adds `ds-autocomplete` component #3257

[WNMGDS-2871] Adds `ds-autocomplete` component #3257

kim-cmsds commented Oct 1, 2024

jack-ryan-nava-pbc Oct 2, 2024

kim-cmsds Oct 2, 2024

tamara-corbalt Oct 2, 2024 •

edited

Loading

jack-ryan-nava-pbc Oct 2, 2024

kim-cmsds Oct 2, 2024

tamara-corbalt Oct 2, 2024 •

edited

Loading

kim-cmsds Oct 2, 2024

kim-cmsds Oct 2, 2024

pwolfert left a comment

tamara-corbalt left a comment

	<Autocomplete
	{...otherProps}
	label={menuHeading}
	labelId={menuHeadingId}
	autoFocus={parseBooleanAttr(autofocus)}
	clearSearchButton={parseBooleanAttr(clearSearchButton)}
	id={rootId}
	items={JSON.parse(items)}
	loading={parseBooleanAttr(loading)}
	>
	<TextField label={label} hint={hint} name="autocomplete" value={value} />
	</Autocomplete>

[WNMGDS-2871] Adds ds-autocomplete component #3257

[WNMGDS-2871] Adds ds-autocomplete component #3257

Conversation

kim-cmsds commented Oct 1, 2024

Summary

How to test

Checklist

If this is a change to code:

If this is a change to documentation:

jack-ryan-nava-pbc Oct 2, 2024

Choose a reason for hiding this comment

kim-cmsds Oct 2, 2024

Choose a reason for hiding this comment

tamara-corbalt Oct 2, 2024 • edited Loading

Choose a reason for hiding this comment

jack-ryan-nava-pbc Oct 2, 2024

Choose a reason for hiding this comment

kim-cmsds Oct 2, 2024

Choose a reason for hiding this comment

tamara-corbalt Oct 2, 2024 • edited Loading

Choose a reason for hiding this comment

kim-cmsds Oct 2, 2024

Choose a reason for hiding this comment

kim-cmsds Oct 2, 2024

Choose a reason for hiding this comment

pwolfert left a comment

Choose a reason for hiding this comment

tamara-corbalt left a comment

Choose a reason for hiding this comment

[WNMGDS-2871] Adds `ds-autocomplete` component #3257

[WNMGDS-2871] Adds `ds-autocomplete` component #3257

tamara-corbalt Oct 2, 2024 •

edited

Loading

tamara-corbalt Oct 2, 2024 •

edited

Loading