@patternfly/patternfly 6.0.0-alpha.169 → 6.0.0-alpha.170

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/components/Card/card.css +3 -3
  2. package/components/Card/card.scss +3 -3
  3. package/components/_index.css +3 -3
  4. package/docs/components/InputGroup/examples/InputGroup.md +11 -53
  5. package/docs/components/Login/examples/Login.md +11 -42
  6. package/docs/demos/Card/examples/Card.md +64 -324
  7. package/docs/demos/CardView/examples/CardView.md +11 -103
  8. package/docs/demos/Dashboard/examples/Dashboard.md +22 -128
  9. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +105 -794
  10. package/docs/demos/Table/examples/Table.md +141 -1320
  11. package/docs/demos/Tabs/examples/Tabs.md +11 -103
  12. package/package.json +1 -1
  13. package/patternfly-no-globals.css +3 -3
  14. package/patternfly.css +3 -3
  15. package/patternfly.min.css +1 -1
  16. package/patternfly.min.css.map +1 -1
  17. package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
  18. package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
  19. package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
  20. package/docs/components/ContextSelector/deprecated/context-selector.md +0 -907
  21. package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
  22. package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
  23. package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
  24. package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
  25. package/docs/components/Select/deprecated/Select.css +0 -56
  26. package/docs/components/Select/deprecated/Select.md +0 -3609
  27. package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1781
package/docs/components/ContextSelector/deprecated/context-selector.md DELETED
@@ -1,907 +0,0 @@
1
- ---
2
- id: Context selector
3
- section: components
4
- subsection: menus
5
- cssPrefix: pf-v6-c-context-selector
6
- deprecated: true
7
- ---import './context-selector.css'
8
-
9
- ## Examples
10
-
11
- ### Basic
12
-
13
- ```html
14
- <div class="pf-v6-c-context-selector">
15
- <span id="context-selector-collapsed-example-label" hidden>Selected project:</span>
16
- <button
17
- class="pf-v6-c-context-selector__toggle"
18
- aria-expanded="false"
19
- id="context-selector-collapsed-example-toggle"
20
- aria-labelledby="context-selector-collapsed-example-label context-selector-collapsed-example-toggle"
21
- >
22
- <span class="pf-v6-c-context-selector__toggle-text">My project</span>
23
- <span class="pf-v6-c-context-selector__toggle-icon">
24
- <i class="fas fa-caret-down" aria-hidden="true"></i>
25
- </span>
26
- </button>
27
- <div class="pf-v6-c-context-selector__menu" hidden>
28
- <div class="pf-v6-c-context-selector__menu-search">
29
- <div class="pf-v6-c-text-input-group">
30
- <div class="pf-v6-c-text-input-group__main pf-m-icon">
31
- <span class="pf-v6-c-text-input-group__text">
32
- <span class="pf-v6-c-text-input-group__icon">
33
- <i class="fas fa-fw fa-search"></i>
34
- </span>
35
- <input
36
- class="pf-v6-c-text-input-group__text-input"
37
- type="text"
38
- placeholder="Search"
39
- value
40
- aria-label="Search input"
41
- />
42
- </span>
43
- </div>
44
- </div>
45
- </div>
46
- <ul class="pf-v6-c-context-selector__menu-list" role="menu">
47
- <li role="none">
48
- <a
49
- class="pf-v6-c-context-selector__menu-list-item"
50
- href="#"
51
- role="menuitem"
52
- >Link</a>
53
- </li>
54
- <li role="none">
55
- <button
56
- class="pf-v6-c-context-selector__menu-list-item"
57
- type="button"
58
- role="menuitem"
59
- >Action</button>
60
- </li>
61
- <li role="none">
62
- <a
63
- class="pf-v6-c-context-selector__menu-list-item pf-m-disabled"
64
- href="#"
65
- aria-disabled="true"
66
- tabindex="-1"
67
- role="menuitem"
68
- >Disabled link</a>
69
- </li>
70
- <li role="none">
71
- <button
72
- class="pf-v6-c-context-selector__menu-list-item"
73
- type="button"
74
- disabled
75
- role="menuitem"
76
- >Disabled action</button>
77
- </li>
78
- <li role="none">
79
- <button
80
- class="pf-v6-c-context-selector__menu-list-item"
81
- type="button"
82
- role="menuitem"
83
- >My project</button>
84
- </li>
85
- <li role="none">
86
- <button
87
- class="pf-v6-c-context-selector__menu-list-item"
88
- type="button"
89
- role="menuitem"
90
- >OpenShift cluster</button>
91
- </li>
92
- <li role="none">
93
- <button
94
- class="pf-v6-c-context-selector__menu-list-item"
95
- type="button"
96
- role="menuitem"
97
- >Production Ansible</button>
98
- </li>
99
- <li role="none">
100
- <button
101
- class="pf-v6-c-context-selector__menu-list-item"
102
- type="button"
103
- role="menuitem"
104
- >AWS</button>
105
- </li>
106
- <li role="none">
107
- <button
108
- class="pf-v6-c-context-selector__menu-list-item"
109
- type="button"
110
- role="menuitem"
111
- >Azure</button>
112
- </li>
113
- <li role="none">
114
- <button
115
- class="pf-v6-c-context-selector__menu-list-item"
116
- type="button"
117
- role="menuitem"
118
- >My project</button>
119
- </li>
120
- <li role="none">
121
- <button
122
- class="pf-v6-c-context-selector__menu-list-item"
123
- type="button"
124
- role="menuitem"
125
- >OpenShift cluster</button>
126
- </li>
127
- <li role="none">
128
- <button
129
- class="pf-v6-c-context-selector__menu-list-item"
130
- type="button"
131
- role="menuitem"
132
- >Production Ansible</button>
133
- </li>
134
- <li role="none">
135
- <button
136
- class="pf-v6-c-context-selector__menu-list-item"
137
- type="button"
138
- role="menuitem"
139
- >AWS</button>
140
- </li>
141
- <li role="none">
142
- <button
143
- class="pf-v6-c-context-selector__menu-list-item"
144
- type="button"
145
- role="menuitem"
146
- >Azure</button>
147
- </li>
148
- </ul>
149
- </div>
150
- </div>
151
-
152
- <div class="pf-v6-c-context-selector pf-m-expanded">
153
- <span id="context-selector-expanded-example-label" hidden>Selected Project:</span>
154
- <button
155
- class="pf-v6-c-context-selector__toggle"
156
- aria-expanded="true"
157
- id="context-selector-expanded-example-toggle"
158
- aria-labelledby="context-selector-expanded-example-label context-selector-expanded-example-toggle"
159
- >
160
- <span class="pf-v6-c-context-selector__toggle-text">My project</span>
161
- <span class="pf-v6-c-context-selector__toggle-icon">
162
- <i class="fas fa-caret-down" aria-hidden="true"></i>
163
- </span>
164
- </button>
165
- <div class="pf-v6-c-context-selector__menu">
166
- <div class="pf-v6-c-context-selector__menu-search">
167
- <div class="pf-v6-c-text-input-group">
168
- <div class="pf-v6-c-text-input-group__main pf-m-icon">
169
- <span class="pf-v6-c-text-input-group__text">
170
- <span class="pf-v6-c-text-input-group__icon">
171
- <i class="fas fa-fw fa-search"></i>
172
- </span>
173
- <input
174
- class="pf-v6-c-text-input-group__text-input"
175
- type="text"
176
- placeholder="Search"
177
- value
178
- aria-label="Search input"
179
- />
180
- </span>
181
- </div>
182
- </div>
183
- </div>
184
- <ul class="pf-v6-c-context-selector__menu-list" role="menu">
185
- <li role="none">
186
- <a
187
- class="pf-v6-c-context-selector__menu-list-item"
188
- href="#"
189
- role="menuitem"
190
- >Link</a>
191
- </li>
192
- <li role="none">
193
- <button
194
- class="pf-v6-c-context-selector__menu-list-item"
195
- type="button"
196
- role="menuitem"
197
- >Action</button>
198
- </li>
199
- <li role="none">
200
- <a
201
- class="pf-v6-c-context-selector__menu-list-item pf-m-disabled"
202
- href="#"
203
- aria-disabled="true"
204
- tabindex="-1"
205
- role="menuitem"
206
- >Disabled link</a>
207
- </li>
208
- <li role="none">
209
- <button
210
- class="pf-v6-c-context-selector__menu-list-item"
211
- type="button"
212
- disabled
213
- role="menuitem"
214
- >Disabled action</button>
215
- </li>
216
- <li role="none">
217
- <button
218
- class="pf-v6-c-context-selector__menu-list-item"
219
- type="button"
220
- role="menuitem"
221
- >My project</button>
222
- </li>
223
- <li role="none">
224
- <button
225
- class="pf-v6-c-context-selector__menu-list-item"
226
- type="button"
227
- role="menuitem"
228
- >OpenShift cluster</button>
229
- </li>
230
- <li role="none">
231
- <button
232
- class="pf-v6-c-context-selector__menu-list-item"
233
- type="button"
234
- role="menuitem"
235
- >Production Ansible</button>
236
- </li>
237
- <li role="none">
238
- <button
239
- class="pf-v6-c-context-selector__menu-list-item"
240
- type="button"
241
- role="menuitem"
242
- >AWS</button>
243
- </li>
244
- <li role="none">
245
- <button
246
- class="pf-v6-c-context-selector__menu-list-item"
247
- type="button"
248
- role="menuitem"
249
- >Azure</button>
250
- </li>
251
- <li role="none">
252
- <button
253
- class="pf-v6-c-context-selector__menu-list-item"
254
- type="button"
255
- role="menuitem"
256
- >My project</button>
257
- </li>
258
- <li role="none">
259
- <button
260
- class="pf-v6-c-context-selector__menu-list-item"
261
- type="button"
262
- role="menuitem"
263
- >OpenShift cluster</button>
264
- </li>
265
- <li role="none">
266
- <button
267
- class="pf-v6-c-context-selector__menu-list-item"
268
- type="button"
269
- role="menuitem"
270
- >Production Ansible</button>
271
- </li>
272
- <li role="none">
273
- <button
274
- class="pf-v6-c-context-selector__menu-list-item"
275
- type="button"
276
- role="menuitem"
277
- >AWS</button>
278
- </li>
279
- <li role="none">
280
- <button
281
- class="pf-v6-c-context-selector__menu-list-item"
282
- type="button"
283
- role="menuitem"
284
- >Azure</button>
285
- </li>
286
- </ul>
287
- </div>
288
- </div>
289
-
290
- ```
291
-
292
- ### Plain with text
293
-
294
- ```html
295
- <div class="pf-v6-c-context-selector">
296
- <span
297
- id="context-selector-plain-with-text-collapsed-example-label"
298
- hidden
299
- >Selected project:</span>
300
- <button
301
- class="pf-v6-c-context-selector__toggle pf-m-text pf-m-plain"
302
- aria-expanded="false"
303
- id="context-selector-plain-with-text-collapsed-example-toggle"
304
- aria-labelledby="context-selector-plain-with-text-collapsed-example-label context-selector-plain-with-text-collapsed-example-toggle"
305
- >
306
- <span class="pf-v6-c-context-selector__toggle-text">My project</span>
307
- <span class="pf-v6-c-context-selector__toggle-icon">
308
- <i class="fas fa-caret-down" aria-hidden="true"></i>
309
- </span>
310
- </button>
311
- <div class="pf-v6-c-context-selector__menu" hidden>
312
- <div class="pf-v6-c-context-selector__menu-search">
313
- <div class="pf-v6-c-text-input-group">
314
- <div class="pf-v6-c-text-input-group__main pf-m-icon">
315
- <span class="pf-v6-c-text-input-group__text">
316
- <span class="pf-v6-c-text-input-group__icon">
317
- <i class="fas fa-fw fa-search"></i>
318
- </span>
319
- <input
320
- class="pf-v6-c-text-input-group__text-input"
321
- type="text"
322
- placeholder="Search"
323
- value
324
- aria-label="Search input"
325
- />
326
- </span>
327
- </div>
328
- </div>
329
- </div>
330
- <ul class="pf-v6-c-context-selector__menu-list" role="menu">
331
- <li role="none">
332
- <a
333
- class="pf-v6-c-context-selector__menu-list-item"
334
- href="#"
335
- role="menuitem"
336
- >Link</a>
337
- </li>
338
- <li role="none">
339
- <button
340
- class="pf-v6-c-context-selector__menu-list-item"
341
- type="button"
342
- role="menuitem"
343
- >Action</button>
344
- </li>
345
- <li role="none">
346
- <a
347
- class="pf-v6-c-context-selector__menu-list-item pf-m-disabled"
348
- href="#"
349
- aria-disabled="true"
350
- tabindex="-1"
351
- role="menuitem"
352
- >Disabled link</a>
353
- </li>
354
- <li role="none">
355
- <button
356
- class="pf-v6-c-context-selector__menu-list-item"
357
- type="button"
358
- disabled
359
- role="menuitem"
360
- >Disabled action</button>
361
- </li>
362
- <li role="none">
363
- <button
364
- class="pf-v6-c-context-selector__menu-list-item"
365
- type="button"
366
- role="menuitem"
367
- >My project</button>
368
- </li>
369
- <li role="none">
370
- <button
371
- class="pf-v6-c-context-selector__menu-list-item"
372
- type="button"
373
- role="menuitem"
374
- >OpenShift cluster</button>
375
- </li>
376
- <li role="none">
377
- <button
378
- class="pf-v6-c-context-selector__menu-list-item"
379
- type="button"
380
- role="menuitem"
381
- >Production Ansible</button>
382
- </li>
383
- <li role="none">
384
- <button
385
- class="pf-v6-c-context-selector__menu-list-item"
386
- type="button"
387
- role="menuitem"
388
- >AWS</button>
389
- </li>
390
- <li role="none">
391
- <button
392
- class="pf-v6-c-context-selector__menu-list-item"
393
- type="button"
394
- role="menuitem"
395
- >Azure</button>
396
- </li>
397
- <li role="none">
398
- <button
399
- class="pf-v6-c-context-selector__menu-list-item"
400
- type="button"
401
- role="menuitem"
402
- >My project</button>
403
- </li>
404
- <li role="none">
405
- <button
406
- class="pf-v6-c-context-selector__menu-list-item"
407
- type="button"
408
- role="menuitem"
409
- >OpenShift cluster</button>
410
- </li>
411
- <li role="none">
412
- <button
413
- class="pf-v6-c-context-selector__menu-list-item"
414
- type="button"
415
- role="menuitem"
416
- >Production Ansible</button>
417
- </li>
418
- <li role="none">
419
- <button
420
- class="pf-v6-c-context-selector__menu-list-item"
421
- type="button"
422
- role="menuitem"
423
- >AWS</button>
424
- </li>
425
- <li role="none">
426
- <button
427
- class="pf-v6-c-context-selector__menu-list-item"
428
- type="button"
429
- role="menuitem"
430
- >Azure</button>
431
- </li>
432
- </ul>
433
- </div>
434
- </div>
435
-
436
- <div class="pf-v6-c-context-selector pf-m-expanded">
437
- <span
438
- id="context-selector-plain-with-text-expanded-example-label"
439
- hidden
440
- >Selected Project:</span>
441
- <button
442
- class="pf-v6-c-context-selector__toggle pf-m-text pf-m-plain"
443
- aria-expanded="true"
444
- id="context-selector-plain-with-text-expanded-example-toggle"
445
- aria-labelledby="context-selector-plain-with-text-expanded-example-label context-selector-plain-with-text-expanded-example-toggle"
446
- >
447
- <span class="pf-v6-c-context-selector__toggle-text">My project</span>
448
- <span class="pf-v6-c-context-selector__toggle-icon">
449
- <i class="fas fa-caret-down" aria-hidden="true"></i>
450
- </span>
451
- </button>
452
- <div class="pf-v6-c-context-selector__menu">
453
- <div class="pf-v6-c-context-selector__menu-search">
454
- <div class="pf-v6-c-text-input-group">
455
- <div class="pf-v6-c-text-input-group__main pf-m-icon">
456
- <span class="pf-v6-c-text-input-group__text">
457
- <span class="pf-v6-c-text-input-group__icon">
458
- <i class="fas fa-fw fa-search"></i>
459
- </span>
460
- <input
461
- class="pf-v6-c-text-input-group__text-input"
462
- type="text"
463
- placeholder="Search"
464
- value
465
- aria-label="Search input"
466
- />
467
- </span>
468
- </div>
469
- </div>
470
- </div>
471
- <ul class="pf-v6-c-context-selector__menu-list" role="menu">
472
- <li role="none">
473
- <a
474
- class="pf-v6-c-context-selector__menu-list-item"
475
- href="#"
476
- role="menuitem"
477
- >Link</a>
478
- </li>
479
- <li role="none">
480
- <button
481
- class="pf-v6-c-context-selector__menu-list-item"
482
- type="button"
483
- role="menuitem"
484
- >Action</button>
485
- </li>
486
- <li role="none">
487
- <a
488
- class="pf-v6-c-context-selector__menu-list-item pf-m-disabled"
489
- href="#"
490
- aria-disabled="true"
491
- tabindex="-1"
492
- role="menuitem"
493
- >Disabled link</a>
494
- </li>
495
- <li role="none">
496
- <button
497
- class="pf-v6-c-context-selector__menu-list-item"
498
- type="button"
499
- disabled
500
- role="menuitem"
501
- >Disabled action</button>
502
- </li>
503
- <li role="none">
504
- <button
505
- class="pf-v6-c-context-selector__menu-list-item"
506
- type="button"
507
- role="menuitem"
508
- >My project</button>
509
- </li>
510
- <li role="none">
511
- <button
512
- class="pf-v6-c-context-selector__menu-list-item"
513
- type="button"
514
- role="menuitem"
515
- >OpenShift cluster</button>
516
- </li>
517
- <li role="none">
518
- <button
519
- class="pf-v6-c-context-selector__menu-list-item"
520
- type="button"
521
- role="menuitem"
522
- >Production Ansible</button>
523
- </li>
524
- <li role="none">
525
- <button
526
- class="pf-v6-c-context-selector__menu-list-item"
527
- type="button"
528
- role="menuitem"
529
- >AWS</button>
530
- </li>
531
- <li role="none">
532
- <button
533
- class="pf-v6-c-context-selector__menu-list-item"
534
- type="button"
535
- role="menuitem"
536
- >Azure</button>
537
- </li>
538
- <li role="none">
539
- <button
540
- class="pf-v6-c-context-selector__menu-list-item"
541
- type="button"
542
- role="menuitem"
543
- >My project</button>
544
- </li>
545
- <li role="none">
546
- <button
547
- class="pf-v6-c-context-selector__menu-list-item"
548
- type="button"
549
- role="menuitem"
550
- >OpenShift cluster</button>
551
- </li>
552
- <li role="none">
553
- <button
554
- class="pf-v6-c-context-selector__menu-list-item"
555
- type="button"
556
- role="menuitem"
557
- >Production Ansible</button>
558
- </li>
559
- <li role="none">
560
- <button
561
- class="pf-v6-c-context-selector__menu-list-item"
562
- type="button"
563
- role="menuitem"
564
- >AWS</button>
565
- </li>
566
- <li role="none">
567
- <button
568
- class="pf-v6-c-context-selector__menu-list-item"
569
- type="button"
570
- role="menuitem"
571
- >Azure</button>
572
- </li>
573
- </ul>
574
- </div>
575
- </div>
576
-
577
- ```
578
-
579
- ### With footer
580
-
581
- ```html
582
- <div class="pf-v6-c-context-selector pf-m-expanded">
583
- <span id="context-selector-with-footer-example-label" hidden>Selected Project:</span>
584
- <button
585
- class="pf-v6-c-context-selector__toggle"
586
- aria-expanded="true"
587
- id="context-selector-with-footer-example-toggle"
588
- aria-labelledby="context-selector-with-footer-example-label context-selector-with-footer-example-toggle"
589
- >
590
- <span class="pf-v6-c-context-selector__toggle-text">My project</span>
591
- <span class="pf-v6-c-context-selector__toggle-icon">
592
- <i class="fas fa-caret-down" aria-hidden="true"></i>
593
- </span>
594
- </button>
595
- <div class="pf-v6-c-context-selector__menu">
596
- <div class="pf-v6-c-context-selector__menu-search">
597
- <div class="pf-v6-c-text-input-group">
598
- <div class="pf-v6-c-text-input-group__main pf-m-icon">
599
- <span class="pf-v6-c-text-input-group__text">
600
- <span class="pf-v6-c-text-input-group__icon">
601
- <i class="fas fa-fw fa-search"></i>
602
- </span>
603
- <input
604
- class="pf-v6-c-text-input-group__text-input"
605
- type="text"
606
- placeholder="Search"
607
- value
608
- aria-label="Search input"
609
- />
610
- </span>
611
- </div>
612
- </div>
613
- </div>
614
- <ul class="pf-v6-c-context-selector__menu-list" role="menu">
615
- <li role="none">
616
- <a
617
- class="pf-v6-c-context-selector__menu-list-item"
618
- href="#"
619
- role="menuitem"
620
- >Link</a>
621
- </li>
622
- <li role="none">
623
- <button
624
- class="pf-v6-c-context-selector__menu-list-item"
625
- type="button"
626
- role="menuitem"
627
- >Action</button>
628
- </li>
629
- <li role="none">
630
- <a
631
- class="pf-v6-c-context-selector__menu-list-item pf-m-disabled"
632
- href="#"
633
- aria-disabled="true"
634
- tabindex="-1"
635
- role="menuitem"
636
- >Disabled link</a>
637
- </li>
638
- <li role="none">
639
- <button
640
- class="pf-v6-c-context-selector__menu-list-item"
641
- type="button"
642
- disabled
643
- role="menuitem"
644
- >Disabled action</button>
645
- </li>
646
- <li role="none">
647
- <button
648
- class="pf-v6-c-context-selector__menu-list-item"
649
- type="button"
650
- role="menuitem"
651
- >My project</button>
652
- </li>
653
- <li role="none">
654
- <button
655
- class="pf-v6-c-context-selector__menu-list-item"
656
- type="button"
657
- role="menuitem"
658
- >OpenShift cluster</button>
659
- </li>
660
- <li role="none">
661
- <button
662
- class="pf-v6-c-context-selector__menu-list-item"
663
- type="button"
664
- role="menuitem"
665
- >Production Ansible</button>
666
- </li>
667
- <li role="none">
668
- <button
669
- class="pf-v6-c-context-selector__menu-list-item"
670
- type="button"
671
- role="menuitem"
672
- >AWS</button>
673
- </li>
674
- <li role="none">
675
- <button
676
- class="pf-v6-c-context-selector__menu-list-item"
677
- type="button"
678
- role="menuitem"
679
- >Azure</button>
680
- </li>
681
- <li role="none">
682
- <button
683
- class="pf-v6-c-context-selector__menu-list-item"
684
- type="button"
685
- role="menuitem"
686
- >My project</button>
687
- </li>
688
- <li role="none">
689
- <button
690
- class="pf-v6-c-context-selector__menu-list-item"
691
- type="button"
692
- role="menuitem"
693
- >OpenShift cluster</button>
694
- </li>
695
- <li role="none">
696
- <button
697
- class="pf-v6-c-context-selector__menu-list-item"
698
- type="button"
699
- role="menuitem"
700
- >Production Ansible</button>
701
- </li>
702
- <li role="none">
703
- <button
704
- class="pf-v6-c-context-selector__menu-list-item"
705
- type="button"
706
- role="menuitem"
707
- >AWS</button>
708
- </li>
709
- <li role="none">
710
- <button
711
- class="pf-v6-c-context-selector__menu-list-item"
712
- type="button"
713
- role="menuitem"
714
- >Azure</button>
715
- </li>
716
- </ul>
717
-
718
- <div class="pf-v6-c-context-selector__menu-footer">
719
- <button class="pf-v6-c-button pf-m-secondary" type="button">
720
- <span class="pf-v6-c-button__text">Manage projects</span>
721
- </button>
722
- </div>
723
- </div>
724
- </div>
725
-
726
- <div class="pf-v6-c-context-selector pf-m-expanded">
727
- <span
728
- id="context-selector-with-footer-example-two-label"
729
- hidden
730
- >Selected Project:</span>
731
- <button
732
- class="pf-v6-c-context-selector__toggle"
733
- aria-expanded="true"
734
- id="context-selector-with-footer-example-two-toggle"
735
- aria-labelledby="context-selector-with-footer-example-two-label context-selector-with-footer-example-two-toggle"
736
- >
737
- <span class="pf-v6-c-context-selector__toggle-text">My project</span>
738
- <span class="pf-v6-c-context-selector__toggle-icon">
739
- <i class="fas fa-caret-down" aria-hidden="true"></i>
740
- </span>
741
- </button>
742
- <div class="pf-v6-c-context-selector__menu">
743
- <div class="pf-v6-c-context-selector__menu-search">
744
- <div class="pf-v6-c-text-input-group">
745
- <div class="pf-v6-c-text-input-group__main pf-m-icon">
746
- <span class="pf-v6-c-text-input-group__text">
747
- <span class="pf-v6-c-text-input-group__icon">
748
- <i class="fas fa-fw fa-search"></i>
749
- </span>
750
- <input
751
- class="pf-v6-c-text-input-group__text-input"
752
- type="text"
753
- placeholder="Search"
754
- value
755
- aria-label="Search input"
756
- />
757
- </span>
758
- </div>
759
- </div>
760
- </div>
761
- <ul class="pf-v6-c-context-selector__menu-list" role="menu">
762
- <li role="none">
763
- <a
764
- class="pf-v6-c-context-selector__menu-list-item"
765
- href="#"
766
- role="menuitem"
767
- >Link</a>
768
- </li>
769
- <li role="none">
770
- <button
771
- class="pf-v6-c-context-selector__menu-list-item"
772
- type="button"
773
- role="menuitem"
774
- >Action</button>
775
- </li>
776
- <li role="none">
777
- <a
778
- class="pf-v6-c-context-selector__menu-list-item pf-m-disabled"
779
- href="#"
780
- aria-disabled="true"
781
- tabindex="-1"
782
- role="menuitem"
783
- >Disabled link</a>
784
- </li>
785
- <li role="none">
786
- <button
787
- class="pf-v6-c-context-selector__menu-list-item"
788
- type="button"
789
- disabled
790
- role="menuitem"
791
- >Disabled action</button>
792
- </li>
793
- <li role="none">
794
- <button
795
- class="pf-v6-c-context-selector__menu-list-item"
796
- type="button"
797
- role="menuitem"
798
- >My project</button>
799
- </li>
800
- <li role="none">
801
- <button
802
- class="pf-v6-c-context-selector__menu-list-item"
803
- type="button"
804
- role="menuitem"
805
- >OpenShift cluster</button>
806
- </li>
807
- <li role="none">
808
- <button
809
- class="pf-v6-c-context-selector__menu-list-item"
810
- type="button"
811
- role="menuitem"
812
- >Production Ansible</button>
813
- </li>
814
- <li role="none">
815
- <button
816
- class="pf-v6-c-context-selector__menu-list-item"
817
- type="button"
818
- role="menuitem"
819
- >AWS</button>
820
- </li>
821
- <li role="none">
822
- <button
823
- class="pf-v6-c-context-selector__menu-list-item"
824
- type="button"
825
- role="menuitem"
826
- >Azure</button>
827
- </li>
828
- <li role="none">
829
- <button
830
- class="pf-v6-c-context-selector__menu-list-item"
831
- type="button"
832
- role="menuitem"
833
- >My project</button>
834
- </li>
835
- <li role="none">
836
- <button
837
- class="pf-v6-c-context-selector__menu-list-item"
838
- type="button"
839
- role="menuitem"
840
- >OpenShift cluster</button>
841
- </li>
842
- <li role="none">
843
- <button
844
- class="pf-v6-c-context-selector__menu-list-item"
845
- type="button"
846
- role="menuitem"
847
- >Production Ansible</button>
848
- </li>
849
- <li role="none">
850
- <button
851
- class="pf-v6-c-context-selector__menu-list-item"
852
- type="button"
853
- role="menuitem"
854
- >AWS</button>
855
- </li>
856
- <li role="none">
857
- <button
858
- class="pf-v6-c-context-selector__menu-list-item"
859
- type="button"
860
- role="menuitem"
861
- >Azure</button>
862
- </li>
863
- </ul>
864
-
865
- <div class="pf-v6-c-context-selector__menu-footer">
866
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
867
- <span class="pf-v6-c-button__text">Manage projects</span>
868
- </button>
869
- </div>
870
- </div>
871
- </div>
872
-
873
- ```
874
-
875
- ## Documentation
876
-
877
- ### Accessibility
878
-
879
- | Class | Applied to | Outcome |
880
- | -- | -- | -- |
881
- | `aria-expanded="false"` | `.pf-v6-c-context-selector__toggle` | Indicates that the menu is hidden. |
882
- | `aria-expanded="true"` | `.pf-v6-c-context-selector__toggle` | Indicates that the menu is visible. |
883
- | `aria-hidden="true"` | `.pf-v6-c-context-selector__toggle-icon > *` | Hides the icon from assistive technologies. |
884
- | `disabled` | `button.pf-v6-c-context-selector__menu-item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
885
- | `aria-disabled="true"` | `a.pf-v6-c-context-selector__menu-item` | When the menu item uses a link element, indicates that it is unavailable. |
886
- | `tabindex="-1"` | `a.pf-v6-c-context-selector__menu-item` | When the menu item uses a link element, removes it from keyboard focus. |
887
-
888
- ### Usage
889
-
890
- | Class | Applied to | Outcome |
891
- | -- | -- | -- |
892
- | `.pf-v6-c-context-selector` | `<div>` | Initiates a context selector.|
893
- | `.pf-v6-c-context-selector__toggle` | `<button>` | Initiates a toggle. |
894
- | `.pf-v6-c-context-selector__toggle-text` | `<span>` | Initiates text inside the toggle. |
895
- | `.pf-v6-c-context-selector__toggle-icon` | `<span>` | Inititiates the toggle icon wrapper. |
896
- | `.pf-v6-c-context-selector__menu` | `<div>` | Initiaties a menu. |
897
- | `.pf-v6-c-context-selector__menu-search` | `<div>` | Initiates a container for the search input group. |
898
- | `.pf-v6-c-context-selector__menu-list` | `<ul>` | Initiaties an unordered list of menu items that sits under the input container. |
899
- | `.pf-v6-c-context-selector__menu-footer` | `<div>` | Initiaties a menu footer. |
900
- | `.pf-v6-c-context-selector__menu-list-item` | `<li>` | Initiaties a menu item. |
901
- | `.pf-m-expanded` | `.pf-v6-c-context-selector` | Modifies for the expanded state. |
902
- | `.pf-m-active` | `.pf-v6-c-context-selector__toggle` | Forces display of the active state of the toggle. |
903
- | `.pf-m-plain.pf-m-text` | `.pf-v6-c-context-selector__toggle` | Modifies the context selector toggle for plain text styles. |
904
- | `.pf-m-disabled` | `a.pf-v6-c-context-selector__menu-list-item` | Modifies an item for the disabled state.|
905
- | `.pf-m-full-height` | `.pf-v6-c-context-selector` | Modifies a context selector to full height of parent. See masthead for use. |
906
- | `.pf-m-large` | `.pf-v6-c-context-selector` | Modifies toggle height to be large. |
907
- | `.pf-m-page-insets` | `.pf-v6-c-context-selector` | Modifies toggle and menu insets to match the responsive page chrome insets. |