<div class="select select--search">
    <label class="
            label
            
        " for="field-id">
        Label text
    </label>
    <select id="field-id" class="select__field " name="field-name">
        <option class="" value="option1">
            Option 1
        </option>
        <option class="" value="option2">
            Option 2
        </option>
        <option class="" value="option3" disabled>
            Option 3
        </option>
        <option class="" value="option4" data-option="fallback">
            Other
        </option>
    </select>
</div>

<script src="/components/raw/select/select.js"></script>
<div class="select {{ class }}" {{{ attributes }}}>
    <label
        class="
            label
            {{ label.class }}
        "
        for="{{ field.id }}"
        {{{ label.attributes }}}
    >
        {{ label.text }}
    </label>
    <select
        id="{{ field.id }}"
        class="select__field {{ field.class }}"
        name="{{ field.name }}"
        {{{ field.attributes }}}
    >
        {{#each options}}
            <option
                class="{{ class }}"
                value="{{ value }}"
                {{{ attributes }}}
            >
                {{text}}
            </option>
        {{/each}}
    </select>
</div>

{{#if script}}
    <script src="{{ static 'select.js' }}"></script>
{{/if}}
{
  "script": true,
  "label": {
    "attributes": "",
    "text": "Label text"
  },
  "field": {
    "id": "field-id",
    "name": "field-name",
    "class": "",
    "attributes": ""
  },
  "options": [
    {
      "value": "option1",
      "text": "Option 1"
    },
    {
      "value": "option2",
      "text": "Option 2"
    },
    {
      "value": "option3",
      "text": "Option 3",
      "attributes": "disabled"
    },
    {
      "value": "option4",
      "text": "Other",
      "attributes": "data-option=\"fallback\""
    }
  ],
  "class": "select--search"
}
  • Content:
    $select__margin-bottom                   : $spacer--medium !default;
    $select__padding                         : 0 $spacer--extra-large 0 $spacer--medium !default;
    $select__border                          : $form-elements-border !default;
    $select__height                          : 48px !default;
    $select__min-width                       : 72px !default;
    $select__border-radius                   : $form-elements-radius !default;
    $select__line-height                     : $select__height !default;
    $select__font-family                     : $font-family-base !default;
    $select__field-background                : $white !default;
    $select__field-color                     : $font-color-base !default;
    $select__field-font-size                 : $font-size-base !default;
    $select__label-color-focus               : $color-primary !default;
    $select__transition                      : $transition-base !default;
    $select__background-disabled             : $gray-light !default;
    $select__white-space--inline             : nowrap !default;
    
    $select__label-margin--inline            : 0 $spacer--medium 0 0 !default;
    
    //native
    $select__field-bg-image--native          : url('../images/icons/expand-down.svg') !default;
    $select__field-bg-repeat--native         : no-repeat !default;
    $select__field-bg-position--native       : calc(100% - #{$spacer}) center !default;
    
    // Select 2
    $select__option-list-shadow              : none !default;
    $select__border-radius                   : 0 !default;
    $select__field-padding                   : 0 $spacer--extra-large 0 $spacer--medium !default;
    $select__arrow-position-top              : 0 !default;
    $select__arrow-position-right            : $spacer--small !default;
    $select__arrow-padding                   : $spacer--extra-small !default;
    $select__arrow-bg-color                  : $color-primary !default;
    $select__arrow-border-width              : 0 2px 2px 0 !default;
    $select__arrow-margin-top                : -7px !default;
    $select__arrow-transform                 : rotate(45deg) !default;
    $select__arrow-transform--open           : rotate(225deg) !default;
    $select__arrow-transition                : $transition-base !default;
    $select__option-padding                  : 0 $spacer--medium !default;
    $select__option-font-size                : $font-size-base !default;
    $select__option-color--highlighted       : $color-primary !default;
    $select__option-bg-color--highlighted    : $gray-light !default;
    $select__option-selected-bg              : $white !default;
    $select__option-overflow                 : hidden !default;
    $select__option-text-overflow            : ellipsis !default;
    $select__option-white-space              : nowrap !default;
    $select__dropdown-border-width           : 0 1px 1px 1px !default;
    
  • URL: /components/raw/select/_select-variables.scss
  • Filesystem Path: build/components/Molecules/form/select/_select-variables.scss
  • Size: 2.8 KB
  • Content:
    @import 'select-variables';
    
    .select {
        margin-bottom: $select__margin-bottom;
    
        &:focus-within {
            .label {
                color: $select__label-color-focus;
            }
        }
    
        &--native {
            select {
                position: relative;
                width: 100%;
                min-width: $select__min-width;
                height: $select__height;
                padding: $select__padding;
                border: $select__border;
                border-radius: $select__border-radius;
                appearance: none;
                transition: $select__transition;
                font-family: $select__font-family;
                line-height: $select__line-height;
                font-size: $select__field-font-size;
                background: $select__field-background;
                background-image: $select__field-bg-image--native;
                background-repeat: $select__field-bg-repeat--native;
                background-position: $select__field-bg-position--native;
                cursor: pointer;
    
                &:disabled {
                    background-color: $select__background-disabled;
                    cursor: not-allowed;
                }
    
                &.focus-visible {
                    @include focus-input();
                }
    
                &.mage-error {
                    border-color: $input__error-color;
                }
            }
        }
    
    
        &--multi {
            .select__field {
                width: 100%;
                height: auto;
            }
            option {
                display: flex;
                align-items: center;
                height: $select__height;
                line-height: $select__line-height;
                font-size: $select__field-font-size;
    
                &:hover,
                &:focus {
                    background-color: $select__option-bg-color--highlighted;
                    color: $select__option-color--highlighted;
                }
            }
        }
    
        &--inline {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
        }
    
        &--with-button {
            @include mq($screen-m) {
                display: flex;
                align-items: center;
            }
        }
    
        &--inline,
        &--with-button {
            .label {
                margin: $select__label-margin--inline;
                white-space: $select__white-space--inline;
            }
        }
    
        &--grid {
            display: grid;
        }
    
        &__button {
            flex-shrink: 0;
            margin: $spacer--medium 0 0;
    
            @include mq($screen-m) {
                margin: 0 0 0 $spacer--medium;
            }
        }
    
        &__field {
            position: relative;
            height: $select__height;
            padding: $select__padding;
            line-height: $select__line-height;
            font-size: $select__field-font-size;
            cursor: pointer;
            border: $select__border;
            border-radius: $select__border-radius;
            background: $select__field-background;
            appearance: none;
    
            &:disabled {
                background-color: $select__background-disabled;
                cursor: not-allowed;
            }
    
            &.focus-visible {
                @include focus-input();
            }
        }
    
        &__field-list {
            &--single {
                height: $select__height;
                padding: 0;
                border: $select__border;
                border-radius: $select__border-radius;
                line-height: $select__line-height;
            }
        }
    
        &__field-input {
            transition: $select__transition;
    
            &:focus {
                outline: $outline-base;
            }
        }
    }
    
    // select2 overwrite styles
    .select2-hidden-accessible {
        & + .mage-error {
            order: 1;
        }
    }
    
    .select2 {
        width: 100%;
    }
    .select2-container {
        .select2-selection--single {
            height: $select__height;
            width: 100%;
            border: $select__border;
            border-radius: $select__border-radius;
    
            .select2-selection__rendered {
                width: 100%;
                padding: $select__field-padding;
                line-height: $select__height;
                color: $select__field-color;
            }
    
            .select2-selection__arrow {
                height: $select__height;
                top: $select__arrow-position-top;
                right: $select__arrow-position-right;
                b {
                    padding: $select__arrow-padding;
                    border-color: $select__arrow-bg-color;
                    border-width: $select__arrow-border-width;
                    margin-top: $select__arrow-margin-top;
                    pointer-events: none;
                    transform: $select__arrow-transform;
                    transition: $select__arrow-transition;
                }
            }
        }
        &.select2-container--open {
            .select2-selection--single {
                @include focus-input();
                .select2-selection__arrow b {
                    border-color: $select__arrow-bg-color;
                    border-width: $select__arrow-border-width;
                    transform: $select__arrow-transform--open;
                    margin-top: 0;
                }
            }
        }
    
        .select2-results {
            &__options {
                max-height: 300px;
            }
    
            &__option {
                position: relative;
                height: $select__height;
                line-height: $select__height;
                padding: $select__option-padding;
                font-size: $select__option-font-size;
                overflow: $select__option-overflow;
                text-overflow: $select__option-text-overflow;
                white-space: $select__option-white-space;
    
                &[aria-selected=true] {
                    background-color: $select__option-selected-bg;
                }
    
                &--highlighted[aria-selected] {
                    background-color: $select__option-bg-color--highlighted;
                    color: $select__option-color--highlighted;
                }
            }
        }
    
        .select2-dropdown {
            border: $select__border;
            border-radius: $select__border-radius;
            border-width: $select__dropdown-border-width;
            box-shadow: $select__option-list-shadow;
        }
    }
    
  • URL: /components/raw/select/_select.scss
  • Filesystem Path: build/components/Molecules/form/select/_select.scss
  • Size: 5.9 KB
  • Content:
    /* global $ */
    'use strict';
    $(document).ready(function selectTwo() {
      const elem = $('.select__field');
      const isSearchable = $('.select').hasClass('select--search');
    
      function matchCustom(params, data) {
        if ($(data.element).data('option') === 'fallback') {
          return data;
        }
    
        if ($.trim(params.term) === '') {
          return data;
        }
    
        if (typeof data.text === 'undefined') {
          return null;
        }
    
        if (data.text.toLowerCase().indexOf(params.term.toLowerCase()) > -1) {
          return data;
        }
    
        return null;
      }
    
      const config = {
        minimumResultsForSearch: Infinity,
        width: null,
        position: 'bottom',
      };
    
      if (isSearchable) {
        config.minimumResultsForSearch = undefined;
        config.dropdownCssClass = 'select-dropdown--search';
        config.matcher = matchCustom;
      }
    
      elem.select2(config);
    });
    
  • URL: /components/raw/select/select.js
  • Filesystem Path: build/components/Molecules/form/select/select.js
  • Size: 849 Bytes
  • Handle: @select--search-(with-fallback)
  • Preview:
  • Filesystem Path: build/components/Molecules/form/select/select.hbs

No notes defined.