SuperSelect components (HDS-3221)

[KristinLBradley]

📌 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): SuperSelect web docs (HDS-3222) #2026

🛠️ 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

---

🔗 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

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

💬 Please consider using conventional comments when reviewing this PR.

[vercel]

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

[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.