Skip to content

Commit a031728

Browse files
jenndiazjenndiaz
authored
docs(picker): update markup for menu (#2226)
* docs(picker): update docs site to use workflow icon class * docs(picker): adds is-selectable class to menu
1 parent 8b13743 commit a031728

File tree

1 file changed

+14
-14
lines changed

1 file changed

+14
-14
lines changed

‎components/picker/metadata/picker.yml‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ examples:
7676
</svg>
7777
</button>
7878
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" style="width: 240px;">
79-
<ul class="spectrum-Menu" role="listbox">
79+
<ul class="spectrum-Menu is-selectable" role="listbox">
8080
<li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
8181
<span class="spectrum-Menu-itemLabel">Donaudampfschifffahrtsgesellschaftskapitän</span>
8282
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
@@ -135,9 +135,9 @@ examples:
135135
</svg>
136136
</button>
137137
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" style="width: 240px">
138-
<ul class="spectrum-Menu" role="listbox">
138+
<ul class="spectrum-Menu is-selectable" role="listbox">
139139
<li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
140-
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
140+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Image">
141141
<use xlink:href="#spectrum-icon-18-Image" />
142142
</svg>
143143
<span class="spectrum-Menu-itemLabel">Donaudampfschifffahrtsgesellschaftskapitän</span>
@@ -146,7 +146,7 @@ examples:
146146
</svg>
147147
</li>
148148
<li class="spectrum-Menu-item" role="option" tabindex="0">
149-
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
149+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Image">
150150
<use xlink:href="#spectrum-icon-18-Image" />
151151
</svg>
152152
<span class="spectrum-Menu-itemLabel">Some long value that should be cut off</span>
@@ -155,7 +155,7 @@ examples:
155155
</svg>
156156
</li>
157157
<li class="spectrum-Menu-item" role="option" tabindex="0">
158-
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
158+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Image">
159159
<use xlink:href="#spectrum-icon-18-Image" />
160160
</svg>
161161
<span class="spectrum-Menu-itemLabel">Very long text with hyphens-between-words</span>
@@ -165,7 +165,7 @@ examples:
165165
</li>
166166
<li class="spectrum-Menu-divider" role="separator"></li>
167167
<li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
168-
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
168+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Image">
169169
<use xlink:href="#spectrum-icon-18-Image" />
170170
</svg>
171171
<span class="spectrum-Menu-itemLabel">United States of America</span>
@@ -268,7 +268,7 @@ examples:
268268
</svg>
269269
</button>
270270
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" style="width: 240px">
271-
<ul class="spectrum-Menu" role="listbox">
271+
<ul class="spectrum-Menu is-selectable" role="listbox">
272272
<li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
273273
<span class="spectrum-Menu-itemLabel">Ballard</span>
274274
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
@@ -371,7 +371,7 @@ examples:
371371
</svg>
372372
</button>
373373
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open">
374-
<ul class="spectrum-Menu" role="listbox">
374+
<ul class="spectrum-Menu is-selectable" role="listbox">
375375
<li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
376376
<span class="spectrum-Menu-itemLabel">Ballard</span>
377377
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
@@ -413,9 +413,9 @@ examples:
413413
</svg>
414414
</button>
415415
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open">
416-
<ul class="spectrum-Menu" role="listbox">
416+
<ul class="spectrum-Menu is-selectable" role="listbox">
417417
<li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
418-
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
418+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon" focusable="false" aria-hidden="true" aria-label="Image">
419419
<use xlink:href="#spectrum-icon-18-Image" />
420420
</svg>
421421
<span class="spectrum-Menu-itemLabel">Ballard</span>
@@ -424,7 +424,7 @@ examples:
424424
</svg>
425425
</li>
426426
<li class="spectrum-Menu-item" role="option" tabindex="0">
427-
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
427+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon"" focusable="false" aria-hidden="true" aria-label="Image">
428428
<use xlink:href="#spectrum-icon-18-Image" />
429429
</svg>
430430
<span class="spectrum-Menu-itemLabel">Fremont</span>
@@ -433,7 +433,7 @@ examples:
433433
</svg>
434434
</li>
435435
<li class="spectrum-Menu-item" role="option" tabindex="0">
436-
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
436+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon"" focusable="false" aria-hidden="true" aria-label="Image">
437437
<use xlink:href="#spectrum-icon-18-Image" />
438438
</svg>
439439
<span class="spectrum-Menu-itemLabel">Greenwood</span>
@@ -443,7 +443,7 @@ examples:
443443
</li>
444444
<li class="spectrum-Menu-divider" role="separator"></li>
445445
<li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
446-
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
446+
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon spectrum-Menu-itemIcon--workflowIcon"" focusable="false" aria-hidden="true" aria-label="Image">
447447
<use xlink:href="#spectrum-icon-18-Image" />
448448
</svg>
449449
<span class="spectrum-Menu-itemLabel">United States of America</span>
@@ -496,7 +496,7 @@ examples:
496496
</svg>
497497
</button>
498498
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open">
499-
<ul class="spectrum-Menu" role="listbox">
499+
<ul class="spectrum-Menu is-selectable" role="listbox">
500500
<li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
501501
<span class="spectrum-Menu-itemLabel">Ballard</span>
502502
<svg class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">

0 commit comments

Comments
 (0)