What the heck happened to the rest of the UIF documentation?

All the CSS-only components have been moved across to the Storybook version of our UIF docs.

The jQuery dependent components are considered legacy, and while still currently available, are not going to be actively developed upon any longer. Also, it's a schlep trying to get jQuery to work within webpack/storybook, so they can stay here.

Please consider using CSS-only components for maximum ongoing happiness. 💖

Select

<select id="select-example-enhanced" name="select-example-enhanced" data-js="enhance-select" tabindex="0" >
      <option value="1">An option - number 1</option>
      <option value="2">An option - number 2</option>
      <option value="3">An option - number 3</option>
</select>

This component is now deprecated and will be removed/refactored in v3.0.0 

  <p class="notice notice--error">
    This component is now deprecated and will be removed/refactored in v3.0.0
  </p>
<select id="select-example-boxed-enhanced" name="select-example-boxed-enhanced" data-js="enhance-select" tabindex="1" class="enhanced-select--box">
      <option value="1">An option - number 1</option>
      <option value="2">An option - number 2</option>
      <option value="3">An option - number 3</option>
</select>

This component is now deprecated and will be removed/refactored in v3.0.0 

  <p class="notice notice--error">
    This component is now deprecated and will be removed/refactored in v3.0.0
  </p>
<select id="select-example-boxed-enhanced" name="select-example-boxed-enhanced" data-js="enhance-select" disabled="" tabindex="2" class="enhanced-select--box">
      <option value="1">An option - number 1</option>
      <option value="2">An option - number 2</option>
      <option value="3">An option - number 3</option>
</select>

This component is now deprecated and will be removed/refactored in v3.0.0 

  <p class="notice notice--error">
    This component is now deprecated and will be removed/refactored in v3.0.0
  </p>
<select id="select-example-filter" name="select-example-filter" data-js="enhance-select" data-select-filter="true" tabindex="3" >
      <option value="1">ZAR - Rands</option>
      <option value="2">ZRR - Randy Rands</option>
      <option value="3">ZIR - Royals</option>
      <option value="4">GBP - Pound Sterling</option>
      <option value="5">GBP - Pound Jerkling</option>
      <option value="6">GBP - Dog Pound</option>
      <option value="7">GAP - Pounded Clothes</option>
</select>

This component is now deprecated and will be removed/refactored in v3.0.0 

  <p class="notice notice--error">
    This component is now deprecated and will be removed/refactored in v3.0.0
  </p>
<select id="select-example-filter-2" name="select-example-filter-2" data-js="enhance-select" data-select-filter="true" tabindex="4" >
      <optgroup label="Recent currencies">
          <option value="1" data-display="ZAR">ZAR - Rands</option>
          <option value="2" data-display="ZRR">ZRR - Randy Rands</option>
          <option value="3" data-display="ZIR">ZIR - Royals</option>
      </optgroup>
      <optgroup label="All currencies">
          <option value="1" data-display="ZAR">ZAR - Rands</option>
          <option value="2" data-display="ZRR">ZRR - Randy Rands</option>
          <option value="3" data-display="ZIR">ZIR - Royals</option>
          <option value="4" data-display="GBP">GBP - Pound Sterling</option>
          <option value="5" data-display="GBJ">GBP - Pound Jerkling</option>
          <option value="6" data-display="DP">GBP - Dog Pound</option>
          <option value="7" data-display="GAP">GAP - Pounded Clothes</option>
      </optgroup>
</select>

Introduction

A default <select> element that can be enhanced with JavaScript to allow for both custom styling and an input bar to filter options.

Source files

Markup
src/html/components/select.hbs
Styling
src/styles/components/elements/_select.scss
Script
src/scripts/modules/jquery.pfSelect.js

Usage

JavaScript hooks/values Effect Required
data-js=enhance-select Placed on any select that you want to be enhanced with custom styling. Optional
data-select-filter=true Placed on any [data-js=enhance-select] element to include a filter input bar. Optional
data-select-filter=true Placed on any [data-js=enhance-select] element to include a filter input bar. Optional
data-display=[DISPLAY-TEXT] Placed on any option element where you want the selected text to be different to the text shown in the dropdown. Optional
.enhanced-select--box When placed on the select element will render a boxed select element. Optional
[disabled] Adding this attribute to the select will disable the select and add a .enhanded-select--disabled class to the wrapper. Optional