[HSDS-205] DropList features

[tinkertrain]

Feature

https://helpscout.atlassian.net/browse/HSDS-205

To enable this workflow:

When there are no items either on the initial mount of the DropList or when in combobox mode we filter down to 0 results.

➡️

We want to show "extra" items, that enables us to perform some action

customEmptyListItems

For this, we add the new prop customEmptyListItems which accepts an array of items, any item that is accepted by DropList is valid here.

customEmptyList still exists, this customizes the rendering of an empty list, use this if what you need is to display something static

customEmptyListItems={[
  {
    label: 'No tags found',
    type: 'inert',
  },
  {
    type: 'divider',
  },
  {
    label: 'Create tag',
    type: 'action',
  },
]}

Combobox feature

On a combobox, you can customize the label of your items with the value of the input by adding a customizeLabel function on the item

customEmptyListItems={[
  {
    label: 'No tags found',
    type: 'inert',
  },
  {
    type: 'divider',
  },
  {
    label: 'Create tag',
    customizeLabel(inputValue) {
      return `Create ${inputValue} tag`
    },
    type: 'action',
  },
]}

New item type: 'action'

Some times you need an item in the list that is not "selectable" but "actionable", add a type of action. To reiterate, these items:

1. Fire onSelect
2. Are interacted with like any other DropList item (ie with keyboard)
3. Do not get added to the selection, so onSelect will fire like onSelect(null, clickedItem)

New item type: 'inert'

If you need an item that is just there and really doesn't do anything (like the "No tags Found" in the screenshot above), add an item with a type of inert. Technically similar to disabling an item, but with different semantics.

Styles

Several class names are added to the items so you can target and style yourself if you need other than the default list item styles.

Screenshots

Variant select, no items

Variant Combobox, no items on mount

Variant Combobox, filtered down to no items

Reset item

With the addition of action items, there is no need for the reset functionality previously added as this can easily be implemented with these. The Table Column Chooser has been updated to use this workflow instead and the reset options and implementation have been removed from DropList.

[netlify]

✔️ Deploy Preview for hsds-react ready!

🔨 Explore the source changes: 3f023f0

🔍 Inspect the deploy log: https://app.netlify.com/sites/hsds-react/deploys/61378db08a22f00007cc1f3f

😎 Browse the preview: https://deploy-preview-976--hsds-react.netlify.app

[tinkertrain]

@cen10 you might be interested in this, technically doesn't affect you as the column chooser works the same from the outside but you might be glad to hear that the withResetSelectionItem prop is gone and no more weird string/boolean types mixed.

@jakubjanczyk I added you because you have played extensively with DropList and reviewed several PRs and thought you'd be a great addition to catch if I broke something 😅, also these additions might be of interest to you for future work

[jakubjanczyk]

Thanks @tinkertrain, that looks great and this time I wasn't able to break it 😄
I think action might be useful for some cases in Messages - @Charca this might be handy for Dashboard/Report pages droplists.

As for this PR, I have noticed 2 things, but it might be as designed, so to be verified:

• While inert item cannot be selected, when you move mouse over it, there's a style change as if it was regular item
• On the first screenshot, the create action has different color than in storybook - would it make sense to make actions color customizable? I would assume it should be blue for tags, but for example in Messages usage, we would have regular color.

[jakubjanczyk]

Do we need to make concat here? It seems to be calling this code only if isListEmpty, so we might as well just replace the list, to not have to think here why there's concat 😄

[tinkertrain]

Ahh yeah, good catch!

[tinkertrain]

@jakubjanczyk Thanks for looking at this!

1. I have removed the inert hover styles... thanks!
2. I wasn't trying to duplicate the "tags" styles on the screenshot, this will be up to you (the user) to style (I'm sure every instance is going to differ slightly, see this vs the column chooser droplist). Styling can easily be achieved in a couple of ways, by targeting the item class name is-type-action like I do on the table column chooser's css, or by adding a class name directly on your item (see laser targeting in this section).

[TerrenceLJones]

LGTM! Thank you so much for quick turn around on this new functionality!