828185db49
* add SelectDropdown * use SelectDropdown instead of HttpRequestsDropdown * use html selector instead of class name * ensure SelectDropdown still works when rendered inside a Toolbar * add tests * remove old HttpRequests component * make SelectDropdown example easier to read in Storybook * add isFullwidth prop * add SelectDropbown inside a Toolbar story * fix tests * remove actions block and call this.onChange directly * replace dropdownLabel with label * rename SelectDropdown to SelecT * add test for onChange * remove selectedItem prop since we don't need it * make Select accept options as an array of strings or objects * Revert "remove selectedItem prop since we don't need it" This reverts commit 7278516de87bb1df60482edb005137252819931e. * use Select inside TtlPicker * remove debugger * use a test selector * fix pki test selectors * improve storybook docs * fix selected value in ttl picker * ensure httprequests dropdown updates the selected item * ensure select dropdown correctly matches selectedItem * rename selectedItem to selectedValue * remove debugger lol * update selectedItem test * add valueAttribute and labelAttribute to Storybook knobs * udpate jsdocs * remove old httprequestsdropdown component * add note that onChange will receive value of select * use Select inside AuthForm * use correct test selector
1.9 KiB
1.9 KiB
Select
Select components are used to render a dropdown.
| Param | Type | Default | Description |
|---|---|---|---|
| label | String |
|
The label for the select element. |
| options | Array |
|
A list of items that the user will select from. This can be an array of strings or objects. |
| [name] | String |
|
The name of the select, used for the test selector. |
| [selectedValue] | String |
|
The currently selected item. Can also be used to set the default selected item. This should correspond to the value of one of the <option>s. |
| [valueAttribute] | String |
value |
When options is an array objects, the key to check for when assigning the option elements value. |
| [labelAttribute] | String |
label |
When options is an array objects, the key to check for when assigning the option elements' inner text. |
| [isInline] | Bool |
false |
Whether or not the select should be displayed as inline-block or block. |
| [isFullwidth] | Bool |
false |
Whether or not the select should take up the full width of the parent element. |
| onChange | Func |
|
The action to take once the user has selected an item. This method will be passed the value of the select. |
Example
<Select
@label='Date Range'
@options={{[{ value: 'berry', label: 'Berry' }]}}
@onChange={{onChange}}/>
See