-
Notifications
You must be signed in to change notification settings - Fork 42
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weβll occasionally send you account related emails.
Already on GitHub? Sign in to your account
SuperSelect
components (HDS-3221)
#2022
Conversation
The latest updates on your projects. Learn more about Vercel for Git βοΈ
|
6117c24
to
b866594
Compare
2519bdb
to
9522bb7
Compare
The exceptions are still being worked on and need to be addressed in the main `ember-power-select` repo
The `__no-options-selected` element is now generated using the `Hds::Text::Body` component
For the style overrides where we instantiate `<PowerSelect>`
Co-authored-by: Majed Elass <majed.elass@hashicorp.com> Co-authored-by: Melanie Sumner <melanie@hashicorp.com> Co-authored-by: Jory Tindall <jory.tindall@hashicorp.com> Co-authored-by: Alex <alex-ju@users.noreply.github.com> Co-authored-by: Majed <156002572+majedelass@users.noreply.github.com> Co-authored-by: Cristiano Rastelli <cristiano.rastelli@hashicorp.com>
@KristinLBradley @didoo It turns out that the |
π Summary
If merged, this PR will add SuperSelect components to HDS.
SuperSelect
web docs (HDS-3222)Β #2026π οΈ Detailed description
API differences from PowerSelect:
@renderInPlace
is alwaysfalse
(setting it to true makes the instances non-compliant and impossible to style via overrides)Multiple
variants@closeOnSelect
is alwaysfalse
allowing users to choose multiple options without requiring them to re-open the dropdown.@searchPlaceholder
is 'Search' by defaultForm 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 thePowerSelect
.However, instantiating
SuperSelect::[Single|Multiple]::Field
components is slightly different because theHds::Form::Field
component exposes several subcomponents (Label, HelperText, Error).Note: Because the SuperSelect component doesn't use an HTML
<input>
element, the link between the label and the control is done viaariaLabelledBy
meaning small updates were required forForm::Field
andForm::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
isfalse
(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 viahds-anchored-position
to automatically determine the positioning of the list.List width
There are two arguments in
SuperSelect
:matchTriggerWidth
(defaulttrue
, similar toPowerSelect
)dropdownMaxWidth
(can be used to constrain the dropdown whenmatchTriggerWidth
isfalse
)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)false
inSingle
variantstrue
inMulti
variantsπ External links
π Component checklist
π¬ Please consider using conventional comments when reviewing this PR.