Skip to content

Commit 5e8b7d9

Browse files
ednihs-yahskaednihs-yahska
authored
docs(listbox, listbox-button): adding dom examples with group titles for options (#136)
1 parent f68870b commit 5e8b7d9

File tree

2 files changed

+532
-23
lines changed

2 files changed

+532
-23
lines changed

‎_input/listbox-button/index.html‎

Lines changed: 289 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,55 @@
44
---
55

66
<style>
7-
.listbox-button {
8-
width: 250px;
7+
.listbox-button__group-title {
8+
font-size: 12px;
9+
font-weight: bold;
10+
padding: 8px 15px 2px 15px;
11+
}
12+
13+
/* columns should be equal to or less than number of groups */
14+
.listbox-button--responsive-columns [role="listbox"] {
15+
columns: 2;
16+
column-rule: 1px solid #9a9a9a;
17+
width: 300px;
18+
}
19+
20+
.listbox-button--responsive-columns .listbox-button__group-title {
21+
break-before: column;
22+
}
23+
24+
.listbox-button--fixed-columns {
25+
width: 300px;
26+
}
27+
28+
.listbox-button--fixed-columns [role="listbox"] {
29+
display: flex;
30+
}
31+
32+
.column {
33+
display: flex;
34+
flex-direction: column;
35+
}
36+
37+
.column:first-of-type {
38+
border-right: 1px solid #9a9a9a;
39+
}
40+
41+
div.listbox-button__option svg.icon--amex-18-colored,
42+
div.listbox-button__option svg.icon--mastercard-18-colored,
43+
div.listbox-button__option svg.icon--visa-18-colored {
44+
margin: 0 4px 0 0;
45+
opacity: 1;
46+
vertical-align: text-bottom;
947
}
1048
div.listbox-button__listbox {
1149
top: auto;
1250
}
1351
</style>
1452

1553
<h1>{{ page.title }}</h1>
16-
<p>A button that expands to reveal a listbox in a flyout. <a href={{ "input/listbox-button" | prepend: site.patterns_baseurl | prepend: site.patterns_url }}>Read more</a>.</p>
54+
<p>A button that expands to reveal a listbox in a flyout. <a href={{ "input/listbox-button" | prepend:
55+
site.patterns_baseurl | prepend: site.patterns_url }}>Read more</a>.</p>
1756

1857
<hr />
1958

@@ -22,8 +61,9 @@ <h2>Example 1: Manual Selection</h2>
2261

2362
<h3>Unselected</h3>
2463

25-
<div class="listbox-button" data-makeup-auto-select="false">
26-
<button class="btn btn--primary" style="min-width: 175px" aria-expanded="false" aria-haspopup="listbox" data-listbox-button-prefix="Color: ">
64+
<span class="listbox-button" data-makeup-auto-select="false">
65+
<button class="btn btn--primary" style="min-width: 175px" aria-expanded="false" aria-haspopup="listbox"
66+
data-listbox-button-prefix="Color: ">
2767
<span class="btn__cell">
2868
<span class="btn__text">Color: -</span>
2969
<svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
@@ -59,12 +99,13 @@ <h3>Unselected</h3>
5999
</div>
60100
</div>
61101
</div>
62-
</div>
102+
</span>
63103

64104
<h3>Selected</h3>
65105

66-
<div class="listbox-button" data-makeup-auto-select="false">
67-
<button class="btn btn--primary" style="min-width: 175px" aria-expanded="false" aria-haspopup="listbox" data-listbox-button-prefix="Color: ">
106+
<span class="listbox-button" data-makeup-auto-select="false">
107+
<button class="btn btn--primary" style="min-width: 175px" aria-expanded="false" aria-haspopup="listbox"
108+
data-listbox-button-prefix="Color: ">
68109
<span class="btn__cell">
69110
<span class="btn__text">Color: Blue</span>
70111
<svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
@@ -100,17 +141,19 @@ <h3>Selected</h3>
100141
</div>
101142
</div>
102143
</div>
103-
</div>
144+
</span>
104145

105146
<hr />
106147

107148
<h2>Example 2: Automatic Selection</h2>
108-
<p>ARROW keys move the active descendant <em>and</em> automatically updated the selected state. This behaviour is similar to a radio button group.</p>
149+
<p>ARROW keys move the active descendant <em>and</em> automatically updated the selected state. This behaviour is
150+
similar to a radio button group.</p>
109151

110152
<h3>Unselected</h3>
111153

112-
<div class="listbox-button" data-makeup-auto-select="true">
113-
<button class="btn btn--primary" style="min-width: 175px" aria-expanded="false" aria-haspopup="listbox" data-listbox-button-prefix="Color: ">
154+
<span class="listbox-button" data-makeup-auto-select="true">
155+
<button class="btn btn--primary" style="min-width: 175px" aria-expanded="false" aria-haspopup="listbox"
156+
data-listbox-button-prefix="Color: ">
114157
<span class="btn__cell">
115158
<span class="btn__text">Color: -</span>
116159
<svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
@@ -146,12 +189,13 @@ <h3>Unselected</h3>
146189
</div>
147190
</div>
148191
</div>
149-
</div>
192+
</span>
150193

151194
<h3>Selected</h3>
152195

153-
<div class="listbox-button" data-makeup-auto-select="true">
154-
<button class="btn btn--primary" style="min-width: 175px" aria-expanded="false" aria-haspopup="listbox" data-listbox-button-prefix="Color: ">
196+
<span class="listbox-button" data-makeup-auto-select="true">
197+
<button class="btn btn--primary" style="min-width: 175px" aria-expanded="false" aria-haspopup="listbox"
198+
data-listbox-button-prefix="Color: ">
155199
<span class="btn__cell">
156200
<span class="btn__text">Color: Blue</span>
157201
<svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
@@ -187,8 +231,235 @@ <h3>Selected</h3>
187231
</div>
188232
</div>
189233
</div>
190-
</div>
191-
234+
</span>
192235
<hr />
236+
<h2>Example 3: Listbox with group headers</h2>
237+
<h3>Groups</h3>
238+
<span class="listbox-button" id="groups" data-makeup-auto-select="true">
239+
<button class="btn btn--primary" style="min-width: 175px" aria-expanded="false" aria-haspopup="listbox"
240+
data-listbox-button-prefix="Color: ">
241+
<span class="btn__cell">
242+
<span class="btn__text">Color: -</span>
243+
<svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
244+
<use xlink:href="../../static/icons.svg#icon-chevron-down-12"></use>
245+
</svg>
246+
</span>
247+
</button>
248+
<div class="listbox-button__listbox" hidden>
249+
<div class="listbox-button__options" role="listbox">
250+
<div id="warm-color-group-title" role="presentation" class="listbox-button__group-title">
251+
<span class="listbox-button_header">Warm Colors</span>
252+
</div>
253+
<div class="listbox-button__option" aria-describedby="warm-color-group-title" role="option"
254+
aria-selected="true">
255+
<span class="listbox-button__value">Red</span>
256+
<svg class="icon icon--16" focusable="false" height="10" width="14">
257+
<use xlink:href="../../static/icons.svg#icon-tick-16"></use>
258+
</svg>
259+
</div>
260+
<div class="listbox-button__option" aria-describedby="warm-color-group-title" role="option">
261+
<span class="listbox-button__value">Orange</span>
262+
<svg class="icon icon--16" focusable="false" height="10" width="14">
263+
<use xlink:href="../../static/icons.svg#icon-tick-16"></use>
264+
</svg>
265+
</div>
266+
<div id="cool-color-group-title" role="presentation" class="listbox-button__group-title">
267+
<span class="listbox-button_header">Cool Colors</span>
268+
</div>
269+
<div class="listbox-button__option" aria-describedby="cool-color-group-title" role="option">
270+
<span class="listbox-button__value">Violet</span>
271+
<svg class="icon icon--16" focusable="false" height="10" width="14">
272+
<use xlink:href="../../static/icons.svg#icon-tick-16"></use>
273+
</svg>
274+
</div>
275+
<div class="listbox-button__option" aria-describedby="cool-color-group-title" role="option"
276+
aria-selected="false">
277+
<span class="listbox-button__value">Blue</span>
278+
<svg class="icon icon--16" focusable="false" height="10" width="14">
279+
<use xlink:href="../../static/icons.svg#icon-tick-16"></use>
280+
</svg>
281+
</div>
282+
<div class="listbox-button__option" aria-describedby="cool-color-group-title" role="option">
283+
<span class="listbox-button__value">Green</span>
284+
<svg class="icon icon--16" focusable="false" height="10" width="14">
285+
<use xlink:href="../../static/icons.svg#icon-tick-16"></use>
286+
</svg>
287+
</div>
288+
</div>
289+
</div>
290+
</span>
291+
<h3>Layouts</h3>
292+
<h3>Groups as Responsive Columns (flat DOM)</h3>
293+
<span class="listbox-button listbox-button--responsive-columns" id="responsive-columns" data-makeup-auto-select="true">
294+
<button class="btn btn--primary" style="min-width: 175px" aria-expanded="false" aria-haspopup="listbox"
295+
data-listbox-button-prefix="Color: ">
296+
<span class="btn__cell">
297+
<span class="btn__text">Color: -</span>
298+
<svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
299+
<use xlink:href="../../static/icons.svg#icon-chevron-down-12"></use>
300+
</svg>
301+
</span>
302+
</button>
303+
<div class="listbox-button__listbox column-container" hidden>
304+
<div class="listbox-button__options" role="listbox">
305+
<div id="warm-color-group-title" role="presentation" class="listbox-button__group-title">
306+
<span class="listbox-button_header">Warm Colors</span>
307+
</div>
308+
<div class="listbox-button__option" aria-describedby="warm-color-group-title" role="option"
309+
aria-selected="true">
310+
<span class="listbox-button__value">Red</span>
311+
<span class="listbox-button__description">
312+
<span class="clipped" aria-hidden="true"> - </span>
313+
Lorem ipsum dolor sit amet
314+
</span>
315+
<svg class="icon icon--16" focusable="false" height="10" width="14">
316+
<use xlink:href="../../static/icons.svg#icon-tick-16"></use>
317+
</svg>
318+
</div>
319+
<div class="listbox-button__option" aria-describedby="warm-color-group-title" role="option">
320+
<span class="listbox-button__value">Orange</span>
321+
<span class="listbox-button__description">
322+
<span class="clipped" aria-hidden="true">.</span>
323+
Lorem ipsum dolor sit amet
324+
</span>
325+
<svg class="icon icon--16" focusable="false" height="10" width="14">
326+
<use xlink:href="../../static/icons.svg#icon-tick-16"></use>
327+
</svg>
328+
</div>
329+
<div class="listbox-button__option" aria-describedby="warm-color-group-title" role="option"
330+
aria-selected="false">
331+
<span class="listbox-button__value">Brown</span>
332+
<span class="listbox-button__description">
333+
<span class="clipped" aria-hidden="true"> - </span>
334+
Lorem ipsum dolor sit amet
335+
</span>
336+
<svg class="icon icon--16" focusable="false" height="10" width="14">
337+
<use xlink:href="../../static/icons.svg#icon-tick-16"></use>
338+
</svg>
339+
</div>
340+
<div id="cool-color-group-title" role="presentation" class="listbox-button__group-title">
341+
<span class="listbox-button_header">Cool Colors</span>
342+
</div>
343+
<div class="listbox-button__option" aria-describedby="cool-color-group-title" role="option">
344+
<span class="listbox-button__value">Violet</span>
345+
<span class="listbox-button__description">
346+
<span class="clipped" aria-hidden="true">.</span>
347+
Lorem ipsum dolor sit amet
348+
</span>
349+
<svg class="icon icon--16" focusable="false" height="10" width="14">
350+
<use xlink:href="../../static/icons.svg#icon-tick-16"></use>
351+
</svg>
352+
</div>
353+
<div class="listbox-button__option" aria-describedby="cool-color-group-title" role="option">
354+
<span class="listbox-button__value">Blue</span>
355+
<span class="listbox-button__description">
356+
<span class="clipped" aria-hidden="true"> - </span>
357+
Lorem ipsum dolor sit amet
358+
</span>
359+
<svg class="icon icon--16" focusable="false" height="10" width="14">
360+
<use xlink:href="../../static/icons.svg#icon-tick-16"></use>
361+
</svg>
362+
</div>
363+
<div class="listbox-button__option" aria-describedby="cool-color-group-title" role="option">
364+
<span class="listbox-button__value">Green</span>
365+
<span class="listbox-button__description">
366+
<span class="clipped" aria-hidden="true">.</span>
367+
Lorem ipsum dolor sit amet
368+
</span>
369+
<svg class="icon icon--16" focusable="false" height="10" width="14">
370+
<use xlink:href="../../static/icons.svg#icon-tick-16"></use>
371+
</svg>
372+
</div>
373+
</div>
374+
</div>
375+
</span>
193376

194-
<p><i>Updated: Aug 20th, 2021</i></p>
377+
<h3>Groups as Fixed Columns (nested DOM)</h3>
378+
<span class="listbox-button listbox-button--fixed-columns" id="fixed-columns" data-makeup-auto-select="true">
379+
<button class="btn btn--primary" style="min-width: 175px" aria-expanded="false" aria-haspopup="listbox"
380+
data-listbox-button-prefix="Color: ">
381+
<span class="btn__cell">
382+
<span class="btn__text">Color: -</span>
383+
<svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
384+
<use xlink:href="../../static/icons.svg#icon-chevron-down-12"></use>
385+
</svg>
386+
</span>
387+
</button>
388+
<div class="listbox-button__listbox column-container" hidden>
389+
<div class="listbox-button__options" role="listbox">
390+
<div class="column">
391+
<div id="warm-color-group-title" role="presentation" class="listbox-button__group-title">
392+
<span class="listbox-button_header">Warm Colors</span>
393+
</div>
394+
<div class="listbox-button__option" aria-describedby="warm-color-group-title" role="option"
395+
aria-selected="true">
396+
<span class="listbox-button__value">Red</span>
397+
<span class="listbox-button__description">
398+
<span class="clipped" aria-hidden="true"> - </span>
399+
Lorem ipsum dolor sit amet
400+
</span>
401+
<svg class="icon icon--16" focusable="false" height="10" width="14">
402+
<use xlink:href="../../static/icons.svg#icon-tick-16"></use>
403+
</svg>
404+
</div>
405+
<div class="listbox-button__option" aria-describedby="warm-color-group-title" role="option">
406+
<span class="listbox-button__value">Orange</span>
407+
<span class="listbox-button__description">
408+
<span class="clipped" aria-hidden="true">.</span>
409+
Lorem ipsum dolor sit amet
410+
</span>
411+
<svg class="icon icon--16" focusable="false" height="10" width="14">
412+
<use xlink:href="../../static/icons.svg#icon-tick-16"></use>
413+
</svg>
414+
</div>
415+
<div class="listbox-button__option" aria-describedby="warm-color-group-title" role="option"
416+
aria-selected="false">
417+
<span class="listbox-button__value">Brown</span>
418+
<span class="listbox-button__description">
419+
<span class="clipped" aria-hidden="true"> - </span>
420+
Lorem ipsum dolor sit amet
421+
</span>
422+
<svg class="icon icon--16" focusable="false" height="10" width="14">
423+
<use xlink:href="../../static/icons.svg#icon-tick-16"></use>
424+
</svg>
425+
</div>
426+
</div>
427+
<div class="column">
428+
<div id="cool-color-group-title" role="presentation" class="listbox-button__group-title">
429+
<span class="listbox-button_header">Cool Colors</span>
430+
</div>
431+
<div class="listbox-button__option" aria-describedby="cool-color-group-title" role="option">
432+
<span class="listbox-button__value">Violet</span>
433+
<span class="listbox-button__description">
434+
<span class="clipped" aria-hidden="true">.</span>
435+
Lorem ipsum dolor sit amet
436+
</span>
437+
<svg class="icon icon--16" focusable="false" height="10" width="14">
438+
<use xlink:href="../../static/icons.svg#icon-tick-16"></use>
439+
</svg>
440+
</div>
441+
<div class="listbox-button__option" aria-describedby="cool-color-group-title" role="option">
442+
<span class="listbox-button__value">Blue</span>
443+
<span class="listbox-button__description">
444+
<span class="clipped" aria-hidden="true"> - </span>
445+
Lorem ipsum dolor sit amet
446+
</span>
447+
<svg class="icon icon--16" focusable="false" height="10" width="14">
448+
<use xlink:href="../../static/icons.svg#icon-tick-16"></use>
449+
</svg>
450+
</div>
451+
<div class="listbox-button__option" aria-describedby="cool-color-group-title" role="option">
452+
<span class="listbox-button__value">Green</span>
453+
<span class="listbox-button__description">
454+
<span class="clipped" aria-hidden="true">.</span>
455+
Lorem ipsum dolor sit amet
456+
</span>
457+
<svg class="icon icon--16" focusable="false" height="10" width="14">
458+
<use xlink:href="../../static/icons.svg#icon-tick-16"></use>
459+
</svg>
460+
</div>
461+
</div>
462+
</div>
463+
</div>
464+
</span>
465+
<p><i>Updated: April 18th, 2025</i></p>

0 commit comments

Comments
 (0)