Skip to content

Commit 2cee45d

Browse files
lazdlazd
authored
Spectrum Tokens 17 picker (#920)
* build: fix renamed component names, duplicates * docs: fix icon size in Picker, delete duplicate example * build: fix Dropdown -> Picker naming issues, version numbers * docs: add Picker migration guide * docs: fix migration guide wording * build: show "Unreleased" for renamed components instead of blank
1 parent 347b74e commit 2cee45d

File tree

12 files changed

+74
-449
lines changed

12 files changed

+74
-449
lines changed

‎components/fieldlabel/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"devDependencies": {
2323
"@spectrum-css/checkbox": "^3.0.0-beta.3",
2424
"@spectrum-css/component-builder": "^1.2.0",
25-
"@spectrum-css/picker": "^3.0.0-beta.3",
25+
"@spectrum-css/picker": "^1.0.0-beta.0",
2626
"@spectrum-css/icon": "^2.1.1",
2727
"@spectrum-css/radio": "^3.0.0-beta.2",
2828
"@spectrum-css/stepper": "^3.0.0-beta.4",

‎components/picker/metadata/dropdown.yml

Lines changed: 0 additions & 383 deletions
This file was deleted.

‎components/picker/metadata/picker.yml

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
name: Picker
22
status: Verified
33
SpectrumSiteSlug: https://spectrum.adobe.com/page/picker/
4+
sections:
5+
- name: Migration Guide
6+
description: |
7+
### Component renamed
8+
Dropdown is now known as Picker. Replace all `.spectrum-Dropdown*` classnames with `.spectrum-Picker*`.
9+
10+
### Change workflow icon size to medium
11+
If you use icon in your markup, please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
412
examples:
513
- id: picker
614
name: Standard
@@ -59,7 +67,7 @@ examples:
5967
<h4>With Thumbnails</h4>
6068
<div class="spectrum-Picker is-open" style="width: 240px;">
6169
<button class="spectrum-FieldButton spectrum-Picker-trigger is-selected" aria-haspopup="listbox">
62-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
70+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Image">
6371
<use xlink:href="#spectrum-icon-18-Image" />
6472
</svg>
6573
<span class="spectrum-Picker-label">Donaudampfschifffahrtsgesellschaftskapitän</span>
@@ -70,7 +78,7 @@ examples:
7078
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" style="width: 100%">
7179
<ul class="spectrum-Menu" role="listbox">
7280
<li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
73-
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
81+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
7482
<use xlink:href="#spectrum-icon-18-Image" />
7583
</svg>
7684
<span class="spectrum-Menu-itemLabel">Donaudampfschifffahrtsgesellschaftskapitän</span>
@@ -79,7 +87,7 @@ examples:
7987
</svg>
8088
</li>
8189
<li class="spectrum-Menu-item" role="option" tabindex="0">
82-
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
90+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
8391
<use xlink:href="#spectrum-icon-18-Image" />
8492
</svg>
8593
<span class="spectrum-Menu-itemLabel">Some long value that should be cut off</span>
@@ -88,7 +96,7 @@ examples:
8896
</svg>
8997
</li>
9098
<li class="spectrum-Menu-item" role="option" tabindex="0">
91-
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
99+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
92100
<use xlink:href="#spectrum-icon-18-Image" />
93101
</svg>
94102
<span class="spectrum-Menu-itemLabel">Very long text with hyphens-between-words</span>
@@ -98,7 +106,7 @@ examples:
98106
</li>
99107
<li class="spectrum-Menu-divider" role="separator"></li>
100108
<li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
101-
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
109+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
102110
<use xlink:href="#spectrum-icon-18-Image" />
103111
</svg>
104112
<span class="spectrum-Menu-itemLabel">United States of America</span>
@@ -126,7 +134,7 @@ examples:
126134
<div class="spectrum-Picker is-invalid" style="width: 240px;">
127135
<button class="spectrum-FieldButton spectrum-Picker-trigger is-invalid" aria-haspopup="listbox">
128136
<span class="spectrum-Picker-label is-placeholder">Select a Country</span>
129-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
137+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
130138
<use xlink:href="#spectrum-icon-18-Alert" />
131139
</svg>
132140
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Picker-icon" focusable="false" aria-hidden="true">
@@ -139,7 +147,7 @@ examples:
139147
<div class="spectrum-Picker is-open is-invalid" style="width: 240px;">
140148
<button class="spectrum-FieldButton spectrum-Picker-trigger is-invalid is-selected" aria-haspopup="listbox">
141149
<span class="spectrum-Picker-label">Ballard</span>
142-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
150+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
143151
<use xlink:href="#spectrum-icon-18-Alert" />
144152
</svg>
145153
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Picker-icon" focusable="false" aria-hidden="true">
@@ -183,7 +191,7 @@ examples:
183191
<div class="spectrum-Picker is-invalid is-disabled" style="width: 240px;">
184192
<button class="spectrum-FieldButton spectrum-Picker-trigger is-invalid" disabled aria-haspopup="listbox">
185193
<span class="spectrum-Picker-label is-placeholder">Select a Country</span>
186-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
194+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
187195
<use xlink:href="#spectrum-icon-18-Alert" />
188196
</svg>
189197
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Picker-icon" focusable="false" aria-hidden="true">
@@ -249,7 +257,7 @@ examples:
249257
<h4>With Thumbnails</h4>
250258
<div class="spectrum-Picker spectrum-Picker--quiet is-open">
251259
<button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Picker-trigger is-selected" aria-haspopup="listbox">
252-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
260+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Image">
253261
<use xlink:href="#spectrum-icon-18-Image" />
254262
</svg>
255263
<span class="spectrum-Picker-label">Ballard</span>
@@ -261,7 +269,7 @@ examples:
261269
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover spectrum-Picker-popover--quiet is-open" style="display: block;">
262270
<ul class="spectrum-Menu" role="listbox">
263271
<li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
264-
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
272+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
265273
<use xlink:href="#spectrum-icon-18-Image" />
266274
</svg>
267275
<span class="spectrum-Menu-itemLabel">Ballard</span>
@@ -270,7 +278,7 @@ examples:
270278
</svg>
271279
</li>
272280
<li class="spectrum-Menu-item" role="option" tabindex="0">
273-
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
281+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
274282
<use xlink:href="#spectrum-icon-18-Image" />
275283
</svg>
276284
<span class="spectrum-Menu-itemLabel">Fremont</span>
@@ -279,7 +287,7 @@ examples:
279287
</svg>
280288
</li>
281289
<li class="spectrum-Menu-item" role="option" tabindex="0">
282-
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
290+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
283291
<use xlink:href="#spectrum-icon-18-Image" />
284292
</svg>
285293
<span class="spectrum-Menu-itemLabel">Greenwood</span>
@@ -289,7 +297,7 @@ examples:
289297
</li>
290298
<li class="spectrum-Menu-divider" role="separator"></li>
291299
<li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
292-
<svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
300+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
293301
<use xlink:href="#spectrum-icon-18-Image" />
294302
</svg>
295303
<span class="spectrum-Menu-itemLabel">United States of America</span>
@@ -316,7 +324,7 @@ examples:
316324
<div class="spectrum-Picker spectrum-Picker--quiet is-invalid">
317325
<button class="spectrum-FieldButton spectrum-FieldButton--quiet is-invalid spectrum-Picker-trigger" aria-haspopup="listbox">
318326
<span class="spectrum-Picker-label is-placeholder">Select a Country</span>
319-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
327+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
320328
<use xlink:href="#spectrum-icon-18-Alert" />
321329
</svg>
322330
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Picker-icon" focusable="false" aria-hidden="true">
@@ -329,7 +337,7 @@ examples:
329337
<div class="spectrum-Picker spectrum-Picker--quiet is-open is-invalid">
330338
<button class="spectrum-FieldButton spectrum-FieldButton--quiet is-invalid spectrum-Picker-trigger" aria-haspopup="listbox">
331339
<span class="spectrum-Picker-label">Ballard</span>
332-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
340+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
333341
<use xlink:href="#spectrum-icon-18-Alert" />
334342
</svg>
335343
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Picker-icon" focusable="false" aria-hidden="true">
@@ -373,7 +381,7 @@ examples:
373381
<div class="spectrum-Picker spectrum-Picker--quiet is-invalid is-disabled">
374382
<button class="spectrum-FieldButton spectrum-FieldButton--quiet is-invalid spectrum-Picker-trigger" disabled aria-haspopup="listbox">
375383
<span class="spectrum-Picker-label is-placeholder">Select a Country</span>
376-
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
384+
<svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
377385
<use xlink:href="#spectrum-icon-18-Alert" />
378386
</svg>
379387
<svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Picker-icon" focusable="false" aria-hidden="true">

‎components/picker/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@spectrum-css/picker",
3-
"version": "3.0.0-beta.3",
3+
"version": "1.0.0-beta.0",
44
"description": "The Spectrum CSS picker component",
55
"license": "Apache-2.0",
66
"main": "dist/index-vars.css",

‎components/searchwithin/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
},
1818
"dependencies": {
1919
"@spectrum-css/button": "^3.0.0-beta.3",
20-
"@spectrum-css/picker": "^3.0.0-beta.3",
20+
"@spectrum-css/picker": "^1.0.0-beta.0",
2121
"@spectrum-css/icon": "^2.1.1",
2222
"@spectrum-css/textfield": "^3.0.0-beta.3",
2323
"@spectrum-css/vars": "^2.3.0"

‎components/tabs/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
},
2323
"devDependencies": {
2424
"@spectrum-css/component-builder": "^1.2.0",
25-
"@spectrum-css/picker": "^3.0.0-beta.3",
25+
"@spectrum-css/picker": "^1.0.0-beta.0",
2626
"@spectrum-css/icon": "^2.1.1",
2727
"@spectrum-css/menu": "^3.0.0-beta.2",
2828
"@spectrum-css/vars": "^2.3.0",

‎site/resources/js/enhancement.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -158,8 +158,8 @@ governing permissions and limitations under the License.
158158

159159
function toggleOpen(dropdown, force) {
160160
var isOpen = force !== undefined ? force : !dropdown.classList.contains('is-open');
161-
var fieldButton = dropdown.querySelector('.spectrum-Dropdown-trigger');
162-
var popover = dropdown.querySelector('.spectrum-Dropdown-popover');
161+
var fieldButton = dropdown.querySelector('.spectrum-Picker-trigger');
162+
var popover = dropdown.querySelector('.spectrum-Picker-popover');
163163

164164
dropdown[isOpen ? 'setAttribute' : 'removeAttribute']('aria-expanded', 'true');
165165
dropdown.classList[isOpen ? 'add' : 'remove']('is-open');
@@ -178,7 +178,7 @@ governing permissions and limitations under the License.
178178
function closeAndFocusDropdown(dropdown) {
179179
if (dropdown) {
180180
toggleOpen(dropdown, false);
181-
var fieldButton = dropdown.querySelector('.spectrum-Dropdown-trigger');
181+
var fieldButton = dropdown.querySelector('.spectrum-Picker-trigger');
182182
if (fieldButton) {
183183
fieldButton.focus();
184184
}
@@ -202,12 +202,12 @@ governing permissions and limitations under the License.
202202
} else if (event.key === 'End') {
203203
newItemIndex = items.length - 1;
204204
} else if (event.key === 'Escape') {
205-
var dropdown = event.target.closest('.spectrum-Dropdown');
205+
var dropdown = event.target.closest('.spectrum-Picker');
206206
closeAndFocusDropdown(dropdown);
207207
} else if (event.key === 'Enter') {
208208
handleMenuChange(menu, menuItem);
209209

210-
var dropdown = event.target.closest('.spectrum-Dropdown');
210+
var dropdown = event.target.closest('.spectrum-Picker');
211211
closeAndFocusDropdown(dropdown);
212212
event.preventDefault();
213213
}
@@ -220,7 +220,7 @@ governing permissions and limitations under the License.
220220
}
221221
} else {
222222
if (event.key === 'ArrowDown') {
223-
var dropdown = event.target.closest('.spectrum-Dropdown');
223+
var dropdown = event.target.closest('.spectrum-Picker');
224224
if (dropdown) {
225225
var menu = dropdown.querySelector('.spectrum-Menu');
226226
if (menu) {
@@ -258,9 +258,9 @@ governing permissions and limitations under the License.
258258
}
259259

260260
dropdown.setAttribute('value', value);
261-
var fieldButton = dropdown.querySelector('.spectrum-Dropdown-trigger');
261+
var fieldButton = dropdown.querySelector('.spectrum-Picker-trigger');
262262
if (fieldButton && label) {
263-
var dropdownLabel = fieldButton.querySelector('.spectrum-Dropdown-label');
263+
var dropdownLabel = fieldButton.querySelector('.spectrum-Picker-label');
264264
if (dropdownLabel) {
265265
dropdownLabel.innerHTML = label;
266266
}
@@ -282,25 +282,25 @@ governing permissions and limitations under the License.
282282
var menuLabel = menuItem.querySelector('.spectrum-Menu-itemLabel');
283283
var label = menuLabel.innerHTML;
284284

285-
var dropdown = menu.closest('.spectrum-Dropdown');
285+
var dropdown = menu.closest('.spectrum-Picker');
286286
if (dropdown) {
287287
toggleOpen(dropdown, false);
288288
setDropdownValue(dropdown, value, label);
289289
}
290290
}
291291

292292
window.addEventListener('click', function(event) {
293-
var dropdown = event.target.closest('.spectrum-Dropdown');
293+
var dropdown = event.target.closest('.spectrum-Picker');
294294

295295
if (dropdown) {
296296
toggleOpen(dropdown);
297297

298298
var menuItem = event.target.closest('.spectrum-Menu-item');
299299
if (menuItem) {
300-
var fieldButton = dropdown.querySelector('.spectrum-Dropdown-trigger');
300+
var fieldButton = dropdown.querySelector('.spectrum-Picker-trigger');
301301
var menuLabel = menuItem.querySelector('.spectrum-Menu-itemLabel');
302302
if (menuLabel) {
303-
var dropdownLabel = fieldButton.querySelector('.spectrum-Dropdown-label');
303+
var dropdownLabel = fieldButton.querySelector('.spectrum-Picker-label');
304304
if (dropdownLabel) {
305305
dropdownLabel.innerHTML = menuLabel.innerHTML;
306306

‎site/templates/halo-focus.pug

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@ button.spectrum-ActionButton
5555
button.spectrum-ActionButton.spectrum-ActionButton--quiet
5656
span.spectrum-ActionButton-label Download
5757

58-
div(class="spectrum-Dropdown")
59-
button(class="spectrum-FieldButton spectrum-Dropdown-trigger" aria-haspopup="listbox")
60-
span(class="spectrum-Dropdown-label is-placeholder") Select a Country
61-
svg(class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true")
58+
div(class="spectrum-Picker")
59+
button(class="spectrum-FieldButton spectrum-Picker-trigger" aria-haspopup="listbox")
60+
span(class="spectrum-Picker-label is-placeholder") Select a Country
61+
svg(class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Picker-icon" focusable="false" aria-hidden="true")
6262
use(xlink:href="#spectrum-css-icon-ChevronDownMedium")

0 commit comments

Comments
 (0)