DropList combobox new features HSDS-252

[tinkertrain]

Story: https://b87ad319.hsds-react.pages.dev/?path=/story/components-dropdowns-droplist--with-action-item

Emphasize string on items with input value

Filtering items

1. When filtering, do not remove the action item

   • Divider: keep it if there are items left (besides the action), remove it if only the action left

2. Leave groups if not empty after filtering

Action item

New:

1. Add a template key to your action item if you would like update the action item label with the input value, the special placeholder __inputValue__ will be replaced with the input value.

const actionItem = {
    label: 'Add tag',
    template: 'Add __inputValue__ tag',
    type: 'action',
    action: 'ADD_TAG',
  }

// ....

<DropList
  onSelect={(selection, clickedItem) => {
    if (clickedItem.type === 'action') {
      console.log('add tag clicked, do something!')
      // `clickedItem` will include the updated label and the input value in `clickedItem.inputValue`
    }
  }}
/>

2. Add a hideOnEmptyInputValue key to any item if you want them to be hidden when the input of a combobox is empty:

<DropList
        variant="combobox"
        items={regularItems
          .slice(0, 3)
          .concat({
            type: 'divider',
            hideOnEmptyInputValue: true,
          })
          .concat({
            label: 'Add tag',
            template: 'Add __inputValue__ tag',
            type: 'action',
            action: 'ADD_TAG',
            hideOnEmptyInputValue: true,
          })} 
/>

Filtered items on onInputChange

When filtering, onInputChange will return both the input value and the resulting filtered items

[cloudflare-pages[bot]]

Deploying with    Cloudflare Pages

Latest commit:	e8829e2
Status:	✅  Deploy successful!
Preview URL:	https://e945755a.hsds-react.pages.dev

View logs

[tinkertrain]

@justinwolfe Thanks for the review!

I've pushed updates that I think fix the glitches you were seeing.

As for the rest:

• I'll leave it to @digitaldesigner, but it doesn't really make sense to me to keep the divider if the only thing left is the action item, looks a bit ugly and I don't think people will be confused: "I thought I was adding the 'add er tag'"!, actually scratch that maybe someone will 😂
• The styling of the item, you have a .is-type-action class name, this item is being used in other places and I can't remember if it's the same style as yours, might as well go the safe easy route

[justinwolfe]

@tinkertrain 😹 That reasoning makes sense to me! Glitch fixes look good, except (and apologies for not articulating this more clearly before) in the state where there's no input value, shouldn't the action item be gone?

In my use case, at least, without input value, there's nothing to create with the action item. Are there other places where that might not be true and so we'd want to preserve the behavior? If so, I can override in my component and this is G2G, but wanted to check!

[tinkertrain]

@justinwolfe don't remember exactly how the tags workflow is, is it a modal to create the tag? or is it just instantly created as soon as you choose the option? my assumption was that you can create a tag always and just the name input being autofilled with the input value (which could be an empty string).

~Regardless, if you want to hide it, you might have to do it on your end (removing it by default and using onInputChange to add it to the items can be a way) because I can see the case of persisting the action item more often, for example a "reset defaults" item:~

Update: I think I can see a super easy way for you to achieve this, one sec

[tinkertrain]

@justinwolfe check item no.2 under "Action Item" in the description 👍

https://b87ad319.hsds-react.pages.dev/?path=/docs/components-dropdowns-droplist--with-action-item#hide-items-if-the-input-of-the-combobox-is-empty

[justinwolfe]

@tinkertrain 👏 PERFECT, you are the GOAT, :shipit:!