BUX Component Development Platform

Selection Dropdown 

<!-- Primary -->
<div class="bux-selection-dropdown">

    <label class="bux-selection-dropdown__label" for="bux-selection-dropdown__selection-dropdown-70222491">
        Choose One
    </label>

    <span class="bux-selection-dropdown__helper-text" id="bux-selection-dropdown__helper-text-70222491">
        Helper Text
    </span>

    <div class="bux-selection-dropdown__input">
        <select id="bux-selection-dropdown__selection-dropdown-70222491" name="selection-dropdown-default" aria-describedby="bux-selection-dropdown__helper-text-70222491">
            <option>Choose One</option>
            <option value="Item 1">Item 1</option>
            <option value="Item 2">Item 2</option>
            <option value="Item 3">Item 3</option>
            <option value="Item 4">Item 4</option>
            <option value="Item 5">Item 5</option>
        </select>
    </div>
</div>


<!-- Required -->
<div class="bux-selection-dropdown">

    <label class="bux-selection-dropdown__label" for="bux-selection-dropdown__selection-dropdown-773694105">
        Choose One

        <span class="bux-selection-dropdown__required">
            (required)
        </span>
    </label>

    <span class="bux-selection-dropdown__helper-text" id="bux-selection-dropdown__helper-text-773694105">
        Helper Text
    </span>

    <div class="bux-selection-dropdown__input">
        <select id="bux-selection-dropdown__selection-dropdown-773694105" name="selection-dropdown-required" aria-describedby="bux-selection-dropdown__helper-text-773694105" required>
            <option>Choose One</option>
            <option value="Item 1">Item 1</option>
            <option value="Item 2">Item 2</option>
            <option value="Item 3">Item 3</option>
            <option value="Item 4">Item 4</option>
            <option value="Item 5">Item 5</option>
        </select>
    </div>
</div>


<!-- Disabled -->
<div class="bux-selection-dropdown">

    <label class="bux-selection-dropdown__label" for="bux-selection-dropdown__selection-dropdown-503748066">
        Choose One
    </label>

    <span class="bux-selection-dropdown__helper-text" id="bux-selection-dropdown__helper-text-503748066">
        Helper Text
    </span>

    <div class="bux-selection-dropdown__input bux-selection-dropdown__input--disabled">
        <select id="bux-selection-dropdown__selection-dropdown-503748066" name="selection-dropdown-disabled" aria-describedby="bux-selection-dropdown__helper-text-503748066" disabled>
            <option>Choose One</option>
            <option value="Item 1">Item 1</option>
            <option value="Item 2">Item 2</option>
            <option value="Item 3">Item 3</option>
            <option value="Item 4">Item 4</option>
            <option value="Item 5">Item 5</option>
        </select>
    </div>
</div>


<!-- Error -->
<div class="bux-selection-dropdown">

    <label class="bux-selection-dropdown__label" for="bux-selection-dropdown__selection-dropdown-1788479757">
        Choose One
    </label>

    <span class="bux-selection-dropdown__helper-text" id="bux-selection-dropdown__helper-text-1788479757">
        Helper Text
    </span>

    <span class="bux-selection-dropdown__error-message" id="bux-selection-dropdown__error-message-1788479757">
        Error Helper Text
    </span>

    <div class="bux-selection-dropdown__input bux-selection-dropdown__input--error">
        <select id="bux-selection-dropdown__selection-dropdown-1788479757" name="selection-dropdown-error" aria-describedby="bux-selection-dropdown__error-message-1788479757 bux-selection-dropdown__helper-text-1788479757" aria-invalid="true">
            <option>Choose One</option>
            <option value="Item 1">Item 1</option>
            <option value="Item 2">Item 2</option>
            <option value="Item 3">Item 3</option>
            <option value="Item 4">Item 4</option>
            <option value="Item 5">Item 5</option>
        </select>
    </div>
</div>


{# 

Selection Dropdown

Available variables:

- required:         Boolean. Set to true to require form element.
- modifier:         Sets the variant of the form item.
                    Allowed values:
                        - null, error, disabled.
- dropdown_label:   String for the form legend.
- helper_text:      String for the form helper text.
- input_name:       String for the form element name. Optional.
- items:            Array containing the form items.
- item.text:        Display text for the form item.
- error_helper_text:Content for the error helper text.

#}

{% import 'forms/_macros/attributes.twig' as Attributes %}

{% set random_seed = random() %}
{% set form_element = 'selection-dropdown' %}
{% set element_id = "bux-" ~ form_element ~ "__" ~ form_element ~ "-" ~ random_seed %}
{% set base_class = "bux-" ~ form_element ~ "__input" %}
{% set modifier_class = modifier ? ' ' ~ base_class ~ "--" ~ modifier : '' %}

{% set aria_describedby = "bux-" ~ form_element ~ "__helper-text-" ~ random_seed %}

{% if modifier == 'error' %}
    {% set aria_error_describedby = 'error' ? "bux-" ~ form_element ~ "__error-message-" ~ random_seed %}
    {% set aria_describedby = aria_error_describedby ~ ' ' ~ aria_describedby %}
{% endif %}

{% set field = {
    form_element: form_element,
    element_id: element_id,
    descriptor: {
        tag: 'label',
        text: dropdown_label
    },
    required: required,
    random_seed: random_seed,
    helper_text: helper_text,
    base_class: base_class,
    modifier_class: modifier_class,
    attributes: {
        id: element_id,
        name: input_name ?? element_id,
        'aria-describedby': helper_text ? aria_describedby : false,
        placeholder: placeholder_text,
        required: required ? true : false,
        disabled: modifier == 'disabled' ? true : false,
        'aria-invalid': modifier == 'error' ? true : false,
    },
    error_helper_text: error_helper_text
} %}

<div class="bux-{{ field.form_element }}">
    {% include '@descriptor' with field only %}

    {% if helper_text %}
        {% include '@helper' with field only %}
    {% endif %}

    {% if modifier == 'error' %}
        {% include '@error' with field only %}
    {% endif %}

	<div class="{{ field.base_class }}{{ field.modifier_class }}">
        <select {{ Attributes.render(field.attributes) }}>
            <option>{{ dropdown_label }}</option>
            {% for item in items %}
                <option value="{{ item.text }}">{{ item.text }}</option>
            {% endfor %}
        </select>
    </div>
</div>
 
/* Primary */
input_label: Form Input Label
dropdown_label: Choose One
helper_text: Helper Text
input_name: selection-dropdown-default
items:
  - text: Item 1
  - text: Item 2
  - text: Item 3
  - text: Item 4
  - text: Item 5



/* Required */
input_label: Form Input Label
required: (required)
dropdown_label: Choose One
helper_text: Helper Text
input_name: selection-dropdown-required
items:
  - text: Item 1
  - text: Item 2
  - text: Item 3
  - text: Item 4
  - text: Item 5



/* Disabled */
modifier: disabled
input_label: Form Input Label
dropdown_label: Choose One
helper_text: Helper Text
input_name: selection-dropdown-disabled
items:
  - text: Item 1
  - text: Item 2
  - text: Item 3
  - text: Item 4
  - text: Item 5



/* Error */
modifier: error
input_label: Form Input Label
dropdown_label: Choose One
helper_text: Helper Text
error_helper_text: Error Helper Text
input_name: selection-dropdown-error
items:
  - text: Item 1
  - text: Item 2
  - text: Item 3
  - text: Item 4
  - text: Item 5
  • Content: 
    .bux-selection-dropdown {
  @include form-element;

  &__input {
    position: relative;
    margin-top: $sp-8;
    margin-bottom: $sp-8;
    width: 100%;
    order: 2;

    select {
      appearance: none;
      background: $white;
      border: 2px solid $gray-dark-80;
      border-radius: 0;
      width: 100%;
      height: 44px;
      padding-left: $sp-8;

      &:focus {
        outline: 2px solid $focus;
      }

      &:focus:not(:focus-visible) {
        outline: none !important;
      }

      option {
        background-color: $white;
        padding: 15px 0;
        border: 2px solid $gray-dark-80;
      }
    }

    &:before {
      content: "\f010";
      font-size: 22px;
      font-family: "bux-icons";
      background-color: $white;
      color: $gray-dark-80;
      position: absolute;
      top: 2px;
      right: 2px;
      bottom: 2px;
      padding-right: 10px;
      padding-left: 10px;
      padding-top: 5px;
      pointer-events: none;
    }

    &--disabled select {
      color: $gray-light-40;
      border-color: $gray-light-40;
      background-color: $gray-light-80;
      cursor: not-allowed;
      opacity: 1;
    }

    &--disabled:before {
      background-color: $gray-light-80;
      color: $gray-light-40;
    }

    &--error > select {
      background: #ffeff2;
      border-color: $scarlet;
    }

    &--error:before {
      background: #ffeff2;
    }
  }

  &__error-message {
    @include form-error-message;
    margin-top: 8px;
  }
}
  • URL: /components/raw/selection-dropdown/_selection_dropdown.scss
  • Filesystem Path: src/components/forms/selection-dropdown/_selection_dropdown.scss
  • Size: 1.5 KB

No notes defined.