Add multiselect component #219

ynotdraw · 2023-07-19T17:12:23Z

🚀 Description

This PR adds the Multiselect control component.

What's next in downstream PRs:

MultiselectField
MulitselectField exposed to toucan-form
Select all support

🔬 How to Test

Visit https://5a89e728.ember-toucan-core.pages.dev/docs/components/multiselect and exercise the multiselect
(NOTE: All of the functionality described below has tests!)
You should be able to select multiple options
When an option is selected, the checkbox next to it should be checked
The popover should stay open until you click away or tab out
Filtering should work like Autocomplete
When there are selected chips, and the input is empty, pressing BACKSPACE/DELETE should delete the last selected item
Reselecting an already selected item should remove it
Keyboard interaction with arrow keys, page, home, etc. should operate the same as autocomplete
Entering garbage into the input without selecting anything and then tabbing out should make the input clear
Clicking the chevron should open the popover
Clicking a chip's X button should remove it from the list

📸 Images/Videos of Functionality

Screen.Recording.2023-07-19.at.2.05.02.PM.mov

changeset-bot · 2023-07-19T17:12:26Z

🦋 Changeset detected

Latest commit: 73ed7de

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

This PR includes changesets to release 1 package

Name	Type
@crowdstrike/ember-toucan-core	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 · 2023-07-19T17:16:07Z

Preview URLs

Env: preview
Docs: https://a98d4d82.ember-toucan-core.pages.dev

ynotdraw · 2023-07-19T17:36:09Z

docs/components/multiselect/demo/base-demo.md

This essentially matches the autocomplete demo. Almost copy/paste, with a few modifications.

ynotdraw · 2023-07-19T17:36:17Z

docs/components/multiselect/demo/base-demo.md

+    @onChange={{this.onChange}}
+    @options={{this.options}}
+    @contentClass='z-10'
+    @removeButtonLabelFunction={{this.formatRemoveButtonAriaLabelStringObject}}


More about this below!

docs/components/multiselect/index.md

packages/ember-toucan-core/src/-private/components/form/controls/multiselect/option.ts

ynotdraw · 2023-07-19T17:43:00Z

packages/ember-toucan-core/src/components/form/controls/multiselect.hbs

Most of this should resemble the autocomplete component. The difference (mostly) is how the selected items are rendered as chips.

ynotdraw · 2023-07-19T17:44:37Z

packages/ember-toucan-core/src/components/form/controls/multiselect.ts

A big chunk of this was taken from autocomplete as well. There are a few changes sprinkled throughout though. I tried to comment all of the actions and logic as best I could. Please let me know if I missed anything or if I can explain things better!

test-app/tests/integration/components/multiselect-test.gts

…ls/multiselect/option.ts

nicolechung

Reviewed just the tests for now, left a few comments - thank you for writing these exhaustive tests!

test-app/tests/integration/components/multiselect-test.gts

+
+    assert.dom('[data-multiselect-selected-option]').exists({ count: 2 });
+
+    let chips = document.querySelectorAll('[data-multiselect-selected-option]');


test-app/tests/integration/components/multiselect-test.gts

+
+    await click('[data-multiselect]');
+
+    // Since `@selected=["blue"]`, we expect it to be selected


test-app/tests/integration/components/multiselect-test.gts

+        ['b', 'c'],
+        'Expected "a" to be removed on change as it was re-selected'
+      );
+      assert.step('handleChange');


test-app/tests/integration/components/multiselect-test.gts

nicolechung · 2023-07-19T21:01:06Z

test-app/tests/integration/components/multiselect-test.gts

+    assert.dom('[role="listbox"]').exists();
+
+    // Now blur the elment
+    await click('[data-input]');


I'm confused, doesn't this focus the <input /> element?

Yeah I can add a comment here, but we are blurring the input on https://github.com/CrowdStrike/ember-toucan-core/pull/219/files/16695506e740b9b0240a57b5faf3f3f14193e104#diff-136cfdc764a84882ddf48cd853edc7085a558470ed9eb3d8b4d33de1adfa8795R958 (the non-multiselect-input), not the multiselect input!

test-app/tests/integration/components/multiselect-test.gts

nicolechung · 2023-07-20T13:14:44Z

test-app/tests/integration/components/multiselect-test.gts

    assert.dom('[role="option"]').exists({ count: 2 });
+    // We can also verify our data attributes are spread to each option


Thank you! Very helpful

ynotdraw · 2023-07-20T17:27:01Z

packages/ember-toucan-core/src/components/form/controls/multiselect.ts

+    assert('The `:remove` block is required.', removeBlockExists);
+
+    if (!removeBlockExists) {
+      return false;
+    }
+
+    return true;


This gets cleaned up in the next commit

clintcs · 2023-07-20T17:27:07Z

packages/ember-toucan-core/src/components/form/controls/multiselect.hbs

+              {{yield
+                (hash
+                  option=option
+                  Remove=(component


Whose bright idea was it to name this "Remove"? 😆

clintcs · 2023-07-20T17:39:28Z

test-app/tests/integration/components/multiselect-test.gts

+    assert.dom('[data-multiselect]').hasAttribute('aria-expanded');
+  });
+
+  test('it sets `aria-controls`', async function (assert) {


I could see this test being slightly more valuable if its value were also tested for and not just its existence. Though I could also see an argument for removing this test given its minimal value.

aria-activedescendant strikes me as perhaps a better test candidate.

clintcs · 2023-07-20T17:46:42Z

packages/ember-toucan-core/src/-private/components/form/controls/multiselect/remove.hbs

+{{!  template-lint-disable no-pointer-down-event-binding }}
+<button
+  aria-label={{@label}}
+  class="focusable reset-styles p-1"


Mind dumping a copy of our reset-styles TODO here?

Great catch, thank you! Added at 73ed7de

test-app/tests/integration/components/multiselect-test.gts

ynotdraw · 2023-07-21T11:42:58Z

Going to go ahead and merge as to unblock other downstream work, but please feel free to keep commenting and reviewing! I'll also have Komal take a look over everything in the middle of next week.

ynotdraw added 8 commits July 18, 2023 15:33

Add multi-autocomplete control component

9ea808d

Rename to multiselect

daa4f7e

Add multiselect tests

d7affa4

Move Cross icon to components/icons

fd72d2b

Document data- attributes for tests

2215414

Refactor the way we look up options in selected

909b184

Add a test for re-selection

0df8ad1

Documentation updates

e40dedf

ynotdraw self-assigned this Jul 19, 2023

Make removeButtonLabelFunction required

f89df01

ynotdraw force-pushed the add-multi-autocomplete branch from 11ae9bf to f89df01 Compare July 19, 2023 17:13

github-actions bot deployed to ember-toucan-core (Preview) July 19, 2023 17:15 View deployment

ynotdraw added 3 commits July 19, 2023 13:18

Add lint ignore no-invalid-interactive ignore

622e478

Add lint ignore for mousedown

160332a

Adjust multiselect option lints

ed8c6e1

github-actions bot deployed to ember-toucan-core (Preview) July 19, 2023 17:25 View deployment

ynotdraw commented Jul 19, 2023

View reviewed changes

ynotdraw added 5 commits July 19, 2023 13:48

Update docs/components/multiselect/index.md

4d46761

Update docs/components/multiselect/index.md

f78e6cc

Update packages/ember-toucan-core/src/-private/components/form/contro…

234050c

…ls/multiselect/option.ts

Update packages/ember-toucan-core/src/-private/components/form/contro…

fa9dba7

…ls/multiselect/option.ts

Update packages/ember-toucan-core/src/-private/components/form/contro…

39e8b09

…ls/multiselect/option.ts

github-actions bot deployed to ember-toucan-core (Preview) July 19, 2023 17:51 View deployment

Add a test around selected chips

89198b4

github-actions bot deployed to ember-toucan-core (Preview) July 19, 2023 17:55 View deployment

Add a changeset

1669550

github-actions bot deployed to ember-toucan-core (Preview) July 19, 2023 18:01 View deployment

ynotdraw requested a review from nicolechung July 19, 2023 18:06

ynotdraw requested review from simonihmig and clintcs July 19, 2023 18:06

ynotdraw marked this pull request as ready for review July 19, 2023 18:06

ynotdraw marked this pull request as draft July 19, 2023 19:34

nicolechung reviewed Jul 19, 2023

View reviewed changes

ynotdraw added 2 commits July 20, 2023 08:28

Added popover open verification in test

22ee8ca

Add comments/clarifications for tests

bf89b89

github-actions bot deployed to ember-toucan-core (Preview) July 20, 2023 12:47 View deployment

nicolechung reviewed Jul 20, 2023

View reviewed changes

Use a remove named block over an arg

cad3494

github-actions bot requested a deployment to ember-toucan-core (Preview) July 20, 2023 17:11 Abandoned

Use a noResults named block over arg

3c4890e

github-actions bot deployed to ember-toucan-core (Preview) July 20, 2023 17:24 View deployment

ynotdraw commented Jul 20, 2023

View reviewed changes

clintcs approved these changes Jul 20, 2023

View reviewed changes

Add TODO about remove-styles

73ed7de

github-actions bot deployed to ember-toucan-core (Preview) July 20, 2023 18:55 View deployment

ynotdraw marked this pull request as ready for review July 20, 2023 19:07

ynotdraw merged commit 706f44e into main Jul 21, 2023
14 checks passed

ynotdraw deleted the add-multi-autocomplete branch July 21, 2023 11:43

github-actions bot mentioned this pull request Jul 21, 2023

Release Preview #213

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add multiselect component #219

Add multiselect component #219

ynotdraw commented Jul 19, 2023 •

edited

Loading

changeset-bot bot commented Jul 19, 2023 •

edited

Loading

github-actions bot commented Jul 19, 2023 •

edited

Loading

ynotdraw Jul 19, 2023

ynotdraw Jul 19, 2023

ynotdraw Jul 19, 2023

ynotdraw Jul 19, 2023

nicolechung left a comment

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

nicolechung Jul 19, 2023

ynotdraw Jul 20, 2023

nicolechung Jul 20, 2023

ynotdraw Jul 20, 2023

clintcs Jul 20, 2023 •

edited

Loading

clintcs Jul 20, 2023

clintcs Jul 20, 2023

ynotdraw Jul 20, 2023

ynotdraw commented Jul 21, 2023


		assert.dom('[data-multiselect-selected-option]').exists({ count: 2 });

		let chips = document.querySelectorAll('[data-multiselect-selected-option]');


		await click('[data-multiselect]');

		// Since `@selected=["blue"]`, we expect it to be selected

		assert.dom('[role="option"]').exists({ count: 2 });
		// We can also verify our data attributes are spread to each option

Add multiselect component #219

Add multiselect component #219

Conversation

ynotdraw commented Jul 19, 2023 • edited Loading

🚀 Description

🔬 How to Test

📸 Images/Videos of Functionality

changeset-bot bot commented Jul 19, 2023 • edited Loading

🦋 Changeset detected

github-actions bot commented Jul 19, 2023 • edited Loading

Preview URLs

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

nicolechung left a comment

Choose a reason for hiding this comment

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

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

clintcs Jul 20, 2023 • edited Loading

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

ynotdraw commented Jul 21, 2023

ynotdraw commented Jul 19, 2023 •

edited

Loading

changeset-bot bot commented Jul 19, 2023 •

edited

Loading

github-actions bot commented Jul 19, 2023 •

edited

Loading

clintcs Jul 20, 2023 •

edited

Loading