183 lines
10 KiB
YAML
183 lines
10 KiB
YAML
name: Combobox
|
|
SpectrumSiteSlug: https://spectrum.adobe.com/page/combo-box/
|
|
sections:
|
|
- name: Migration Guide
|
|
description: |
|
|
### New Picker markup
|
|
Instead of a `.spectrum-FieldButton`, Combobox now uses `.spectrum-Picker`. See [Picker migration guide](picker.html#migrationguide) for details.
|
|
|
|
### New Textfield markup
|
|
InputGroup now uses the new Textfield markup. See the [Textfield migration guide](textfield.html#migrationguide) for more information.
|
|
|
|
### Additional clases
|
|
The following classes must be added:
|
|
|
|
* `.spectrum-InputGroup-textfield` is now required on the Textfield outer element (`.spectrum-Textfield`)
|
|
* `.spectrum-InputGroup-input` is now required on the `<input>` element inside of Textfields (`.spectrum-Textfield-input`)
|
|
* `.spectrum-InputGroup-button` is now required on the FieldButton (`.spectrum-ActionButton spectrum-ActionButton--sizeM`)
|
|
|
|
### Renamed classes
|
|
|
|
* `.spectrum-Datepicker--rangeDash` renamed to `.spectrum-Datepicker-rangeDash`
|
|
|
|
### Removed elements
|
|
|
|
* `.spectrum-Datepicker-focusRing` is no longer required and should be removed
|
|
|
|
### Indicating validity and focus
|
|
Validity and focus must be bubbled up to the parent so descendants siblings can be styled.
|
|
|
|
Thus, implementations must add the following classes in the following situations:
|
|
|
|
* `.spectrum-InputGroup.is-focused` - when the input or button is focused with the mouse
|
|
* `.spectrum-InputGroup.is-keyboardFocused` - when the input or button is focused with the keyboard
|
|
* `.spectrum-InputGroup.is-valid` - when the input has an explicit valid state
|
|
* `.spectrum-InputGroup.is-invalid` - when the input has an explicit invalid state
|
|
* `.spectrum-InputGroup.is-disabled` - when the control is disabled. You must also add `.is-disabled` to the `.spectrum-InputGroup-textfield` and `[disabled]` to the `.spectrum-InputGroup-button`.
|
|
|
|
examples:
|
|
- id: combobox
|
|
name: Standard
|
|
markup: |
|
|
<h4>Default</h4>
|
|
<div class="spectrum-InputGroup">
|
|
<div class="spectrum-Textfield spectrum-InputGroup-textfield">
|
|
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
|
|
</div>
|
|
<button class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
|
|
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-Chevron100" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<h4>Open</h4>
|
|
<div class="spectrum-InputGroup is-open">
|
|
<div class="spectrum-Textfield spectrum-InputGroup-textfield">
|
|
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
|
|
</div>
|
|
<button class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button is-open" tabindex="-1" aria-haspopup="true">
|
|
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-Chevron100" />
|
|
</svg>
|
|
</button>
|
|
<div class="spectrum-Popover spectrum-Popover--bottom is-open" style="position: absolute; top: 100%; left: 0; width: 100%">
|
|
<ul class="spectrum-Menu" role="listbox">
|
|
<li class="spectrum-Menu-item is-selected" role="option" tabindex="0">
|
|
<span class="spectrum-Menu-itemLabel">Ballard</span>
|
|
</li>
|
|
<li class="spectrum-Menu-item" role="option" tabindex="0">
|
|
<span class="spectrum-Menu-itemLabel">Fremont</span>
|
|
</li>
|
|
<li class="spectrum-Menu-item" role="option" tabindex="0">
|
|
<span class="spectrum-Menu-itemLabel">Greenwood</span>
|
|
</li>
|
|
<li class="spectrum-Menu-divider" role="separator"></li>
|
|
<li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
|
|
<span class="spectrum-Menu-itemLabel">United States of America</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dummy-spacing"></div>
|
|
|
|
<h4>Disabled</h4>
|
|
<div class="spectrum-InputGroup is-disabled">
|
|
<div class="spectrum-Textfield spectrum-InputGroup-textfield is-disabled">
|
|
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input" disabled>
|
|
</div>
|
|
<button class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button" aria-haspopup="true" disabled>
|
|
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-Chevron100" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<h4>Invalid</h4>
|
|
<div class="spectrum-InputGroup is-invalid">
|
|
<div class="spectrum-Textfield is-invalid spectrum-InputGroup-textfield">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-icon-18-Alert" />
|
|
</svg>
|
|
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
|
|
</div>
|
|
<button class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
|
|
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-Chevron100" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
- id: combobox-quiet
|
|
name: Quiet
|
|
markup: |
|
|
<h4>Default</h4>
|
|
<div class="spectrum-InputGroup spectrum-InputGroup--quiet">
|
|
<div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
|
|
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
|
|
</div>
|
|
<button class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button" tabindex="-1" aria-haspopup="true">
|
|
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-Chevron100" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<h4>Open</h4>
|
|
<div class="spectrum-InputGroup spectrum-InputGroup--quiet is-open">
|
|
<div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield">
|
|
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
|
|
</div>
|
|
<button class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button is-open" tabindex="-1" aria-haspopup="true">
|
|
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-Chevron100" />
|
|
</svg>
|
|
</button>
|
|
<div class="spectrum-Popover spectrum-Popover--bottom is-open" style="position: absolute; top: 100%; width: 100%">
|
|
<ul class="spectrum-Menu" role="listbox">
|
|
<li class="spectrum-Menu-item is-selected" role="option" tabindex="0">
|
|
<span class="spectrum-Menu-itemLabel">Ballard</span>
|
|
</li>
|
|
<li class="spectrum-Menu-item" role="option" tabindex="0">
|
|
<span class="spectrum-Menu-itemLabel">Fremont</span>
|
|
</li>
|
|
<li class="spectrum-Menu-item" role="option" tabindex="0">
|
|
<span class="spectrum-Menu-itemLabel">Greenwood</span>
|
|
</li>
|
|
<li class="spectrum-Menu-divider" role="separator"></li>
|
|
<li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
|
|
<span class="spectrum-Menu-itemLabel">United States of America</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dummy-spacing"></div>
|
|
|
|
<h4>Disabled</h4>
|
|
<div class="spectrum-InputGroup spectrum-InputGroup--quiet is-disabled">
|
|
<div class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-textfield is-disabled">
|
|
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input" disabled>
|
|
</div>
|
|
<button class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button" aria-haspopup="true" disabled>
|
|
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-Chevron100" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<h4>Invalid</h4>
|
|
<div class="spectrum-InputGroup spectrum-InputGroup--quiet is-invalid">
|
|
<div class="spectrum-Textfield spectrum-Textfield--quiet is-invalid spectrum-InputGroup-textfield">
|
|
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-icon-18-Alert" />
|
|
</svg>
|
|
<input type="text" placeholder="Type here" name="field" value="" class="spectrum-Textfield-input spectrum-InputGroup-input">
|
|
</div>
|
|
<button class="spectrum-Picker spectrum-Picker--sizeM spectrum-Picker--quiet spectrum-InputGroup-button is-invalid" tabindex="-1" aria-haspopup="true">
|
|
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon" focusable="false" aria-hidden="true">
|
|
<use xlink:href="#spectrum-css-icon-Chevron100" />
|
|
</svg>
|
|
</button>
|
|
</div>
|