PowerSelect

PowerSelect is a popular Ember add-on aiming to overcome some limitations of the <select> tag. The design system only provides style overrides for this add-on to keep it in line with other form components.

To use this component in your application follow the getting started guide on the add-on website, then add the PowerSelect overrides.

Overrides import

If you are already using design-system-components in your project the overrides import would look like this:

@import "@hashicorp/design-system-components";
@import "@hashicorp/design-system-power-select-overrides";

If you are not yet using design-system-components in your project but you want to use these PowerSelect custom styles you will need to add design-system-tokens to your project.

How to use these overrides

As these overrides rely on specificity, to apply them you need to wrap each PowerSelect instance in an element with hds-power-select class applied to it.

Invocation of the component with overrides would look like this:

<div class="hds-power-select">
  <PowerSelect
    @options={{this.OPTIONS}}
    @selected={{this.SELECTED}}
    @onChange={{this.noop}}
    @renderInPlace={{true}}
    as |option|
  >
    {{option}}
  </PowerSelect>
</div>

Search enabled

When used with the @searchEnabled argument, the input is automatically styled to resemble the Form::TextInput component.

<div class="hds-power-select">
  <PowerSelect
    @options={{this.OPTIONS}}
    @selected={{this.SELECTED}}
    @onChange={{this.noop}}
    @renderInPlace={{true}}
    @searchEnabled={{true}}
    as |option|
  >
    {{option}}
  </PowerSelect>
</div>

After options block

To consistently style the @afterOptionsComponent use the hds-power-select__after-options class on the outermost element of the after options component.

<div class="hds-power-select">
  <PowerSelect
    @options={{this.OPTIONS}}
    @selected={{this.SELECTED}}
    @afterOptionsComponent={{"power-select/after-options"}}
    @onChange={{this.noop}}
    @renderInPlace={{true}}
    as |option|
  >
    {{option}}
  </PowerSelect>
</div>

Where power-select/after-options.hbs would look like this:

<div class="hds-power-select__after-options">
  5 results
</div>

Multiple selection

When multiple options are allowed the selected items are automatically styled to resemble the Tag component.

<div class="hds-power-select">
  <PowerSelectMultiple
    @options={{this.OPTIONS}}
    @selected={{this.SELECTEDMULTIPLE}}
    @onChange={{this.noop}}
    @renderInPlace={{true}}
    as |option|
  >
    {{option}}
  </PowerSelectMultiple>
</div>