`SuperSelect` components (HDS-3221)

[KristinLBradley]

:pushpin: Summary

If merged, this PR will add SuperSelect components to HDS.

• Showcase Preview: https://hds-showcase-git-hds-3221-super-select-component-hashicorp.vercel.app/components/form/super-select
• Related PR (docs): https://github.com/hashicorp/design-system/pull/2026

:hammer_and_wrench: Detailed description

API differences from PowerSelect:

• @renderInPlace is always false (setting it to true makes the instances non-compliant and impossible to style via overrides)
• On Multiple variants @closeOnSelect is always false allowing users to choose multiple options without requiring them to re-open the dropdown.
• @searchPlaceholder is 'Search' by default

Form components

The following components will be available to our consumers:

• Hds::Form::SuperSelect::Single::Base
• Hds::Form::SuperSelect::Single::Field
• Hds::Form::SuperSelect::Multiple::Base
• Hds::Form::SuperSelect::Multiple::Field

The instantiation of SuperSelect::[Single|Multiple]::Base components is similar to the PowerSelect.

<Hds::Form::SuperSelect::Single::Base @ariaLabel="Label" as |option|>
  {{option}}
</Hds::Form::SuperSelect::Single::Base>

However, instantiating SuperSelect::[Single|Multiple]::Field components is slightly different because the Hds::Form::Field component exposes several subcomponents (Label, HelperText, Error).

<Hds::Form::SuperSelect::Single::Field as |F|>
  <F.Label>Label</F.Label>
  <F.Options>
    {{F.options}}
  </F.Options>
</Hds::Form::SuperSelect::Single::Field>

Note: Because the SuperSelect component doesn't use an HTML <input> element, the link between the label and the control is done via ariaLabelledBy meaning small updates were required for Form::Field and Form::Label components.

List positioning

There are two arguments related to positioning in PowerSelect:

• @verticalPosition (unspecified/auto, below, above)
• @horizontalPosition (left, center, right)

We tried to preserve PowerSelect's behavior for positioning as much as possible. Unfortunately, auto-positioning is only possible if the @renderInPlace is false (where the dropdown is placed at the root of the document, which is not a compliant option). For this reason, if no @verticalPosition is explicitly defined we rely on Floating UI via hds-anchored-position to automatically determine the positioning of the list.

List width

There are two arguments in SuperSelect:

• matchTriggerWidth (default true, similar to PowerSelect)
• dropdownMaxWidth (can be used to constrain the dropdown when matchTriggerWidth is false)

After options

Aside from PowerSelect's @afterOptionsComponent we added:

• @afterOptionsContent (a way to provide custom content in the 'after options' section without requiring a component to be passed in)
• @showAfterOptions (determines whether to display or not the 'after options' section)
  • default false in Single variants
  • default true in Multi variants

---

:link: External links

• Jira ticket: HDS-3221
• Figma file: https://www.figma.com/file/noyY6dUMDYjmySpHcMjhkN/branch/4YzTB6cZr0TVLpq6Paqgee/HDS-Product---Components?type=design&node-id=55311-15030&mode=design&t=4hf6sjjlzJEnjKot-0
• CRD: https://docs.google.com/document/d/1PODpqzEqc4HeGYje-iWsAAOteQ3pq7ypxfsfPlqmLEs/edit#heading=h.l1a0tu6601l4
• RFC: https://docs.google.com/document/d/1HP3yivHgTbHrDyLJNE3257LMUljo04sukwjfWJwmae4/edit?pli=1

---

👀 Component checklist

• [x] Percy was checked for any visual regression
• [x] A changelog entry was added via Changesets if needed (see templates here)

:speech_balloon: Please consider using conventional comments when reviewing this PR.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	May 17, 2024 10:12am
hds-website	✅ Ready (Inspect)	Visit Preview	May 17, 2024 10:12am

[KristinLBradley]

@majedelass I think we have enough that you could start reviewing the design implementations so far and letting us know your feedback when you have time: SuperSelect Showcase Preview

[KristinLBradley]

@didoo I tried rebasing this branch onto main but was getting conflicts in packages/components/src/modifiers/hds-anchored-position.js that I wasn't sure about. Could you please take a look?

[alex-ju]

@didoo I tried rebasing this branch onto main but was getting conflicts in packages/components/src/modifiers/hds-anchored-position.js that I wasn't sure about. Could you please take a look?

No need to, I'll take care of the rebase as I'm familiar with the change.

[alex-ju]

I pushed a couple of changes intended to address feedback comments around Label and Form

I plan to look into the after-options-related feedback, but I want to note that we have not accounted for all possible combinations because we are programmatically controlling most of the arguments for this subcomponent (@showAll, @showSelected, @clearSelected, @showOnlySelected, @selectedCount) and don't expect this component to be used in isolation (it's only for us to avoid code repetition and share it between single and multi variants).

Hopefully, Kristin will be able to address some of the feedback when she's back.

[didoo]

@alex-ju @KristinLBradley @MelSumner I've noticed that many (most?) of my comments now that the branch has been rebased are "lost" in the "Files changed" tab, so if you want to see them unfortunately you have to check in this main page (not sure how it's possible that GitHub haven't solved this problem yet 🤷‍♂️)

[alex-ju]

Rebased to resolve conflicts with the main branch.

[alex-ju]

I see all the comments (at least mines) have been resolved so I did a high-level pass, and didn't notice anything out of place (just a few issues in the showcase, but easy to fix I think) so I am approving the PR. If you want me to have another more in-depth final pass, let me know.

Thanks @didoo! Yes, when you have the time it would be good to get a final pass on this. On our side, I'm going to re-test this in products to make sure the changes we made are not introducing any regression.

[alex-ju]

@KristinLBradley @didoo It turns out that the <BasicDropdownWormhole /> is required even if we calculate the dropdown position using floating-ui, so I added a banner at the top highlighting this ember-power-select requirement in f54c713. Some products (such as Vault) already have it, but some don't so it's important to flag it upfront.