@patternfly/patternfly 5.1.0-prerelease.4 → 6.0.0-alpha.1

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 (51) hide show
  1. package/CODE_OF_CONDUCT.md +2 -1
  2. package/components/DataList/data-list-grid.css +0 -28
  3. package/components/DataList/data-list.css +0 -28
  4. package/components/FormControl/form-control.css +3 -2
  5. package/components/FormControl/form-control.scss +3 -2
  6. package/components/NumberInput/number-input.css +1 -1
  7. package/components/Pagination/pagination.css +1 -1
  8. package/components/Table/table-grid.css +0 -24
  9. package/docs/components/AppLauncher/deprecated/application-launcher.md +155 -70
  10. package/docs/components/Breadcrumb/examples/Breadcrumb.md +11 -5
  11. package/docs/components/Card/examples/Card.md +152 -64
  12. package/docs/components/ContextSelector/deprecated/context-selector.md +198 -96
  13. package/docs/components/DataList/examples/DataList.md +391 -136
  14. package/docs/components/Dropdown/deprecated/Dropdown.md +881 -367
  15. package/docs/components/DualListSelector/examples/DualListSelector.md +368 -128
  16. package/docs/components/FormControl/examples/FormControl.md +2 -1
  17. package/docs/components/Hint/examples/Hint.md +57 -24
  18. package/docs/components/InlineEdit/examples/InlineEdit.md +46 -16
  19. package/docs/components/LogViewer/examples/LogViewer.md +40 -30
  20. package/docs/components/Menu/examples/Menu.md +41 -20
  21. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -1
  22. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +619 -240
  23. package/docs/components/OptionsMenu/deprecated/options-menu.md +403 -160
  24. package/docs/components/OverflowMenu/examples/overflow-menu.md +45 -34
  25. package/docs/components/Pagination/examples/Pagination.md +195 -65
  26. package/docs/components/ProgressStepper/examples/ProgressStepper.md +50 -0
  27. package/docs/components/Select/deprecated/Select.css +3 -3
  28. package/docs/components/Select/deprecated/Select.md +40 -52
  29. package/docs/components/Table/examples/Table.md +4546 -1668
  30. package/docs/components/Tabs/examples/Tabs.md +1094 -438
  31. package/docs/components/Toolbar/examples/Toolbar.md +142 -68
  32. package/docs/components/TreeView/examples/TreeView.md +23 -8
  33. package/docs/demos/Card/examples/Card.md +46 -21
  34. package/docs/demos/CardView/examples/CardView.md +182 -74
  35. package/docs/demos/ContextSelector/examples/ContextSelector.md +95 -47
  36. package/docs/demos/Dashboard/examples/Dashboard.md +15 -6
  37. package/docs/demos/DataList/examples/DataList.md +163 -70
  38. package/docs/demos/DescriptionList/examples/DescriptionList.md +20 -9
  39. package/docs/demos/Drawer/examples/Drawer.md +20 -9
  40. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +803 -338
  41. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +241 -101
  42. package/docs/demos/Table/examples/Table.md +1422 -607
  43. package/docs/demos/Tabs/examples/Tabs.md +113 -48
  44. package/docs/demos/Toolbar/examples/Toolbar.md +318 -123
  45. package/package.json +39 -38
  46. package/patternfly-no-globals.css +4 -55
  47. package/patternfly-theme-dark-unversioned.css +4 -55
  48. package/patternfly.css +4 -55
  49. package/patternfly.min.css +1 -1
  50. package/patternfly.min.css.map +1 -1
  51. package/sass-utilities/placeholders.scss +1 -1
package/docs/components/ProgressStepper/examples/ProgressStepper.md CHANGED
@@ -10,6 +10,7 @@ cssPrefix: pf-v5-c-progress-stepper
10
10
  <ol class="pf-v5-c-progress-stepper" role="list">
11
11
  <li
12
12
  class="pf-v5-c-progress-stepper__step pf-m-success"
13
+ role="listitem"
13
14
  aria-label="completed step,"
14
15
  >
15
16
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -23,6 +24,7 @@ cssPrefix: pf-v5-c-progress-stepper
23
24
  </li>
24
25
  <li
25
26
  class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
27
+ role="listitem"
26
28
  aria-label="current step,in process step,"
27
29
  >
28
30
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -36,6 +38,7 @@ cssPrefix: pf-v5-c-progress-stepper
36
38
  </li>
37
39
  <li
38
40
  class="pf-v5-c-progress-stepper__step pf-m-pending"
41
+ role="listitem"
39
42
  aria-label="pending step,"
40
43
  >
41
44
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -55,6 +58,7 @@ cssPrefix: pf-v5-c-progress-stepper
55
58
  <ol class="pf-v5-c-progress-stepper" role="list">
56
59
  <li
57
60
  class="pf-v5-c-progress-stepper__step pf-m-success"
61
+ role="listitem"
58
62
  aria-label="completed step,"
59
63
  >
60
64
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -71,6 +75,7 @@ cssPrefix: pf-v5-c-progress-stepper
71
75
  </li>
72
76
  <li
73
77
  class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
78
+ role="listitem"
74
79
  aria-label="current step,in process step,"
75
80
  >
76
81
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -87,6 +92,7 @@ cssPrefix: pf-v5-c-progress-stepper
87
92
  </li>
88
93
  <li
89
94
  class="pf-v5-c-progress-stepper__step pf-m-pending"
95
+ role="listitem"
90
96
  aria-label="pending step,"
91
97
  >
92
98
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -112,6 +118,7 @@ cssPrefix: pf-v5-c-progress-stepper
112
118
  >
113
119
  <li
114
120
  class="pf-v5-c-progress-stepper__step pf-m-success"
121
+ role="listitem"
115
122
  aria-label="completed step,"
116
123
  >
117
124
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -128,6 +135,7 @@ cssPrefix: pf-v5-c-progress-stepper
128
135
  </li>
129
136
  <li
130
137
  class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
138
+ role="listitem"
131
139
  aria-label="current step,in process step,"
132
140
  >
133
141
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -144,6 +152,7 @@ cssPrefix: pf-v5-c-progress-stepper
144
152
  </li>
145
153
  <li
146
154
  class="pf-v5-c-progress-stepper__step pf-m-pending"
155
+ role="listitem"
147
156
  aria-label="pending step,"
148
157
  >
149
158
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -166,6 +175,7 @@ cssPrefix: pf-v5-c-progress-stepper
166
175
  <ol class="pf-v5-c-progress-stepper pf-m-center" role="list">
167
176
  <li
168
177
  class="pf-v5-c-progress-stepper__step pf-m-success"
178
+ role="listitem"
169
179
  aria-label="completed step,"
170
180
  >
171
181
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -182,6 +192,7 @@ cssPrefix: pf-v5-c-progress-stepper
182
192
  </li>
183
193
  <li
184
194
  class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
195
+ role="listitem"
185
196
  aria-label="current step,in process step,"
186
197
  >
187
198
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -198,6 +209,7 @@ cssPrefix: pf-v5-c-progress-stepper
198
209
  </li>
199
210
  <li
200
211
  class="pf-v5-c-progress-stepper__step pf-m-pending"
212
+ role="listitem"
201
213
  aria-label="pending step,"
202
214
  >
203
215
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -220,6 +232,7 @@ cssPrefix: pf-v5-c-progress-stepper
220
232
  <ol class="pf-v5-c-progress-stepper pf-m-center pf-m-vertical" role="list">
221
233
  <li
222
234
  class="pf-v5-c-progress-stepper__step pf-m-success"
235
+ role="listitem"
223
236
  aria-label="completed step,"
224
237
  >
225
238
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -236,6 +249,7 @@ cssPrefix: pf-v5-c-progress-stepper
236
249
  </li>
237
250
  <li
238
251
  class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
252
+ role="listitem"
239
253
  aria-label="current step,in process step,"
240
254
  >
241
255
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -252,6 +266,7 @@ cssPrefix: pf-v5-c-progress-stepper
252
266
  </li>
253
267
  <li
254
268
  class="pf-v5-c-progress-stepper__step pf-m-pending"
269
+ role="listitem"
255
270
  aria-label="pending step,"
256
271
  >
257
272
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -274,6 +289,7 @@ cssPrefix: pf-v5-c-progress-stepper
274
289
  <ol class="pf-v5-c-progress-stepper pf-m-vertical" role="list">
275
290
  <li
276
291
  class="pf-v5-c-progress-stepper__step pf-m-success"
292
+ role="listitem"
277
293
  aria-label="completed step,"
278
294
  >
279
295
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -290,6 +306,7 @@ cssPrefix: pf-v5-c-progress-stepper
290
306
  </li>
291
307
  <li
292
308
  class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
309
+ role="listitem"
293
310
  aria-label="current step,in process step,"
294
311
  >
295
312
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -306,6 +323,7 @@ cssPrefix: pf-v5-c-progress-stepper
306
323
  </li>
307
324
  <li
308
325
  class="pf-v5-c-progress-stepper__step pf-m-pending"
326
+ role="listitem"
309
327
  aria-label="pending step,"
310
328
  >
311
329
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -328,6 +346,7 @@ cssPrefix: pf-v5-c-progress-stepper
328
346
  <ol class="pf-v5-c-progress-stepper pf-m-compact" role="list">
329
347
  <li
330
348
  class="pf-v5-c-progress-stepper__step pf-m-success"
349
+ role="listitem"
331
350
  aria-label="completed step,"
332
351
  >
333
352
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -344,6 +363,7 @@ cssPrefix: pf-v5-c-progress-stepper
344
363
  </li>
345
364
  <li
346
365
  class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
366
+ role="listitem"
347
367
  aria-label="current step,in process step,"
348
368
  >
349
369
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -360,6 +380,7 @@ cssPrefix: pf-v5-c-progress-stepper
360
380
  </li>
361
381
  <li
362
382
  class="pf-v5-c-progress-stepper__step pf-m-pending"
383
+ role="listitem"
363
384
  aria-label="pending step,"
364
385
  >
365
386
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -382,6 +403,7 @@ cssPrefix: pf-v5-c-progress-stepper
382
403
  <ol class="pf-v5-c-progress-stepper pf-m-vertical pf-m-compact" role="list">
383
404
  <li
384
405
  class="pf-v5-c-progress-stepper__step pf-m-success"
406
+ role="listitem"
385
407
  aria-label="completed step,"
386
408
  >
387
409
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -398,6 +420,7 @@ cssPrefix: pf-v5-c-progress-stepper
398
420
  </li>
399
421
  <li
400
422
  class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
423
+ role="listitem"
401
424
  aria-label="current step,in process step,"
402
425
  >
403
426
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -414,6 +437,7 @@ cssPrefix: pf-v5-c-progress-stepper
414
437
  </li>
415
438
  <li
416
439
  class="pf-v5-c-progress-stepper__step pf-m-pending"
440
+ role="listitem"
417
441
  aria-label="pending step,"
418
442
  >
419
443
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -439,6 +463,7 @@ cssPrefix: pf-v5-c-progress-stepper
439
463
  >
440
464
  <li
441
465
  class="pf-v5-c-progress-stepper__step pf-m-success"
466
+ role="listitem"
442
467
  aria-label="completed step,"
443
468
  >
444
469
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -455,6 +480,7 @@ cssPrefix: pf-v5-c-progress-stepper
455
480
  </li>
456
481
  <li
457
482
  class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
483
+ role="listitem"
458
484
  aria-label="current step,in process step,"
459
485
  >
460
486
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -471,6 +497,7 @@ cssPrefix: pf-v5-c-progress-stepper
471
497
  </li>
472
498
  <li
473
499
  class="pf-v5-c-progress-stepper__step pf-m-pending"
500
+ role="listitem"
474
501
  aria-label="pending step,"
475
502
  >
476
503
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -496,6 +523,7 @@ cssPrefix: pf-v5-c-progress-stepper
496
523
  >
497
524
  <li
498
525
  class="pf-v5-c-progress-stepper__step pf-m-success"
526
+ role="listitem"
499
527
  aria-label="completed step,"
500
528
  >
501
529
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -512,6 +540,7 @@ cssPrefix: pf-v5-c-progress-stepper
512
540
  </li>
513
541
  <li
514
542
  class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
543
+ role="listitem"
515
544
  aria-label="current step,in process step,"
516
545
  >
517
546
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -528,6 +557,7 @@ cssPrefix: pf-v5-c-progress-stepper
528
557
  </li>
529
558
  <li
530
559
  class="pf-v5-c-progress-stepper__step pf-m-pending"
560
+ role="listitem"
531
561
  aria-label="pending step,"
532
562
  >
533
563
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -550,6 +580,7 @@ cssPrefix: pf-v5-c-progress-stepper
550
580
  <ol class="pf-v5-c-progress-stepper pf-m-center pf-m-compact" role="list">
551
581
  <li
552
582
  class="pf-v5-c-progress-stepper__step pf-m-success"
583
+ role="listitem"
553
584
  aria-label="completed step,"
554
585
  >
555
586
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -566,6 +597,7 @@ cssPrefix: pf-v5-c-progress-stepper
566
597
  </li>
567
598
  <li
568
599
  class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
600
+ role="listitem"
569
601
  aria-label="current step,in process step,"
570
602
  >
571
603
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -582,6 +614,7 @@ cssPrefix: pf-v5-c-progress-stepper
582
614
  </li>
583
615
  <li
584
616
  class="pf-v5-c-progress-stepper__step pf-m-pending"
617
+ role="listitem"
585
618
  aria-label="pending step,"
586
619
  >
587
620
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -604,6 +637,7 @@ cssPrefix: pf-v5-c-progress-stepper
604
637
  <ol class="pf-v5-c-progress-stepper" role="list">
605
638
  <li
606
639
  class="pf-v5-c-progress-stepper__step pf-m-success"
640
+ role="listitem"
607
641
  aria-label="completed step,"
608
642
  >
609
643
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -617,6 +651,7 @@ cssPrefix: pf-v5-c-progress-stepper
617
651
  </li>
618
652
  <li
619
653
  class="pf-v5-c-progress-stepper__step pf-m-success"
654
+ role="listitem"
620
655
  aria-label="completed step,"
621
656
  >
622
657
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -630,6 +665,7 @@ cssPrefix: pf-v5-c-progress-stepper
630
665
  </li>
631
666
  <li
632
667
  class="pf-v5-c-progress-stepper__step pf-m-warning"
668
+ role="listitem"
633
669
  aria-label="step with issue,"
634
670
  >
635
671
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -643,6 +679,7 @@ cssPrefix: pf-v5-c-progress-stepper
643
679
  </li>
644
680
  <li
645
681
  class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
682
+ role="listitem"
646
683
  aria-label="current step,in process step,"
647
684
  >
648
685
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -656,6 +693,7 @@ cssPrefix: pf-v5-c-progress-stepper
656
693
  </li>
657
694
  <li
658
695
  class="pf-v5-c-progress-stepper__step pf-m-pending"
696
+ role="listitem"
659
697
  aria-label="pending step,"
660
698
  >
661
699
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -675,6 +713,7 @@ cssPrefix: pf-v5-c-progress-stepper
675
713
  <ol class="pf-v5-c-progress-stepper" role="list">
676
714
  <li
677
715
  class="pf-v5-c-progress-stepper__step pf-m-success"
716
+ role="listitem"
678
717
  aria-label="completed step,"
679
718
  >
680
719
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -688,6 +727,7 @@ cssPrefix: pf-v5-c-progress-stepper
688
727
  </li>
689
728
  <li
690
729
  class="pf-v5-c-progress-stepper__step pf-m-success"
730
+ role="listitem"
691
731
  aria-label="completed step,"
692
732
  >
693
733
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -701,6 +741,7 @@ cssPrefix: pf-v5-c-progress-stepper
701
741
  </li>
702
742
  <li
703
743
  class="pf-v5-c-progress-stepper__step pf-m-success"
744
+ role="listitem"
704
745
  aria-label="completed step,"
705
746
  >
706
747
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -714,6 +755,7 @@ cssPrefix: pf-v5-c-progress-stepper
714
755
  </li>
715
756
  <li
716
757
  class="pf-v5-c-progress-stepper__step pf-m-current pf-m-danger"
758
+ role="listitem"
717
759
  aria-label="current step,step with failure,"
718
760
  >
719
761
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -727,6 +769,7 @@ cssPrefix: pf-v5-c-progress-stepper
727
769
  </li>
728
770
  <li
729
771
  class="pf-v5-c-progress-stepper__step pf-m-pending"
772
+ role="listitem"
730
773
  aria-label="pending step,"
731
774
  >
732
775
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -746,6 +789,7 @@ cssPrefix: pf-v5-c-progress-stepper
746
789
  <ol class="pf-v5-c-progress-stepper" role="list">
747
790
  <li
748
791
  class="pf-v5-c-progress-stepper__step pf-m-success"
792
+ role="listitem"
749
793
  aria-label="completed step,"
750
794
  >
751
795
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -759,6 +803,7 @@ cssPrefix: pf-v5-c-progress-stepper
759
803
  </li>
760
804
  <li
761
805
  class="pf-v5-c-progress-stepper__step pf-m-current"
806
+ role="listitem"
762
807
  aria-label="current step,in process step,"
763
808
  >
764
809
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -772,6 +817,7 @@ cssPrefix: pf-v5-c-progress-stepper
772
817
  </li>
773
818
  <li
774
819
  class="pf-v5-c-progress-stepper__step pf-m-pending"
820
+ role="listitem"
775
821
  aria-label="pending step,"
776
822
  >
777
823
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -793,6 +839,7 @@ cssPrefix: pf-v5-c-progress-stepper
793
839
  <ol class="pf-v5-c-progress-stepper" role="list">
794
840
  <li
795
841
  class="pf-v5-c-progress-stepper__step pf-m-success"
842
+ role="listitem"
796
843
  aria-label="completed step,"
797
844
  >
798
845
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -809,6 +856,7 @@ cssPrefix: pf-v5-c-progress-stepper
809
856
  </li>
810
857
  <li
811
858
  class="pf-v5-c-progress-stepper__step pf-m-danger"
859
+ role="listitem"
812
860
  aria-label="step with failure,"
813
861
  >
814
862
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -825,6 +873,7 @@ cssPrefix: pf-v5-c-progress-stepper
825
873
  </li>
826
874
  <li
827
875
  class="pf-v5-c-progress-stepper__step pf-m-current pf-m-info"
876
+ role="listitem"
828
877
  aria-label="current step,in process step,"
829
878
  >
830
879
  <div class="pf-v5-c-progress-stepper__step-connector">
@@ -841,6 +890,7 @@ cssPrefix: pf-v5-c-progress-stepper
841
890
  </li>
842
891
  <li
843
892
  class="pf-v5-c-progress-stepper__step pf-m-pending"
893
+ role="listitem"
844
894
  aria-label="pending step,"
845
895
  >
846
896
  <div class="pf-v5-c-progress-stepper__step-connector">
package/docs/components/Select/deprecated/Select.css CHANGED
@@ -30,7 +30,8 @@
30
30
  }
31
31
 
32
32
  #ws-html-deprecated-c-select-multi-with-typeahead-chip-group-expanded,
33
- #ws-html-deprecated-c-select-menu-footer {
33
+ #ws-html-deprecated-c-select-menu-footer,
34
+ #ws-html-deprecated-c-select-checkbox-item-description {
34
35
  min-height: 365px;
35
36
  }
36
37
 
@@ -46,8 +47,7 @@
46
47
  min-height: 120px;
47
48
  }
48
49
 
49
- #ws-html-deprecated-c-select-item-description,
50
- #ws-html-deprecated-c-select-checkbox-item-description {
50
+ #ws-html-deprecated-c-select-item-description {
51
51
  min-height: 400px;
52
52
  }
53
53
 
package/docs/components/Select/deprecated/Select.md CHANGED
@@ -533,6 +533,7 @@ The single select should be used when the user is selecting an option from a lis
533
533
  type="text"
534
534
  id="select-single-typeahead-typeahead"
535
535
  aria-label="Type to filter"
536
+ value
536
537
  placeholder="Choose a state"
537
538
  />
538
539
  </span>
@@ -602,7 +603,7 @@ The single select should be used when the user is selecting an option from a lis
602
603
 
603
604
  ```html
604
605
  <div class="pf-v5-c-select pf-m-expanded">
605
- <span id="select-single-typeahead-expanded-label" hidden>New</span>
606
+ <span id="select-single-typeahead-expanded-label" hidden>Choose a state</span>
606
607
 
607
608
  <div class="pf-v5-c-select__toggle pf-m-typeahead">
608
609
  <div class="pf-v5-c-select__toggle-wrapper">
@@ -611,7 +612,8 @@ The single select should be used when the user is selecting an option from a lis
611
612
  type="text"
612
613
  id="select-single-typeahead-expanded-typeahead"
613
614
  aria-label="Type to filter"
614
- placeholder="New"
615
+ value="New"
616
+ placeholder="Choose a state"
615
617
  />
616
618
  </span>
617
619
  </div>
@@ -677,7 +679,10 @@ The single select should be used when the user is selecting an option from a lis
677
679
 
678
680
  ```html
679
681
  <div class="pf-v5-c-select pf-m-expanded">
680
- <span id="select-single-typeahead-expanded-selected-label" hidden>New Mexico</span>
682
+ <span
683
+ id="select-single-typeahead-expanded-selected-label"
684
+ hidden
685
+ >Choose a state</span>
681
686
 
682
687
  <div class="pf-v5-c-select__toggle pf-m-typeahead">
683
688
  <div class="pf-v5-c-select__toggle-wrapper">
@@ -686,7 +691,8 @@ The single select should be used when the user is selecting an option from a lis
686
691
  type="text"
687
692
  id="select-single-typeahead-expanded-selected-typeahead"
688
693
  aria-label="Type to filter"
689
- placeholder="New Mexico"
694
+ value="New Mexico"
695
+ placeholder="Choose a state"
690
696
  />
691
697
  </span>
692
698
  </div>
@@ -962,6 +968,7 @@ The single select typeahead should be used when the user is selecting one option
962
968
  type="text"
963
969
  id="select-multi-typeahead-typeahead"
964
970
  aria-label="Type to filter"
971
+ value
965
972
  placeholder="Choose states"
966
973
  />
967
974
  </span>
@@ -1142,6 +1149,7 @@ The single select typeahead should be used when the user is selecting one option
1142
1149
  type="text"
1143
1150
  id="select-multi-typeahead-expanded-typeahead"
1144
1151
  aria-label="Type to filter"
1152
+ value
1145
1153
  placeholder="Choose states"
1146
1154
  />
1147
1155
  </span>
@@ -1204,7 +1212,7 @@ The single select typeahead should be used when the user is selecting one option
1204
1212
 
1205
1213
  ```html
1206
1214
  <div class="pf-v5-c-select pf-m-expanded">
1207
- <span id="select-multi-typeahead-expanded-selected-label" hidden>New</span>
1215
+ <span id="select-multi-typeahead-expanded-selected-label" hidden>Choose states</span>
1208
1216
 
1209
1217
  <div class="pf-v5-c-select__toggle pf-m-typeahead">
1210
1218
  <div class="pf-v5-c-select__toggle-wrapper">
@@ -1293,7 +1301,8 @@ The single select typeahead should be used when the user is selecting one option
1293
1301
  type="text"
1294
1302
  id="select-multi-typeahead-expanded-selected-typeahead"
1295
1303
  aria-label="Type to filter"
1296
- placeholder="New"
1304
+ value="New"
1305
+ placeholder="Choose states"
1297
1306
  />
1298
1307
  </span>
1299
1308
  </div>
@@ -1564,7 +1573,7 @@ The multiselect should be used when the user is selecting multiple items from a
1564
1573
 
1565
1574
  ```html
1566
1575
  <div class="pf-v5-c-select">
1567
- <span id="select-checkbox-label" hidden>Choose one</span>
1576
+ <span id="select-checkbox-label" hidden>Choose many</span>
1568
1577
 
1569
1578
  <button
1570
1579
  class="pf-v5-c-select__toggle"
@@ -1663,7 +1672,7 @@ The multiselect should be used when the user is selecting multiple items from a
1663
1672
 
1664
1673
  ```html
1665
1674
  <div class="pf-v5-c-select pf-m-expanded">
1666
- <span id="select-checkbox-expanded-label" hidden>Choose one</span>
1675
+ <span id="select-checkbox-expanded-label" hidden>Choose many</span>
1667
1676
 
1668
1677
  <button
1669
1678
  class="pf-v5-c-select__toggle"
@@ -1761,7 +1770,7 @@ The multiselect should be used when the user is selecting multiple items from a
1761
1770
 
1762
1771
  ```html
1763
1772
  <div class="pf-v5-c-select pf-m-expanded">
1764
- <span id="select-checkbox-expanded-selected-label" hidden>Choose one</span>
1773
+ <span id="select-checkbox-expanded-selected-label" hidden>Choose many</span>
1765
1774
 
1766
1775
  <button
1767
1776
  class="pf-v5-c-select__toggle"
@@ -1924,7 +1933,7 @@ The multiselect should be used when the user is selecting multiple items from a
1924
1933
  <span
1925
1934
  id="select-checkbox-expanded-selected-filter-example-label"
1926
1935
  hidden
1927
- >Choose one</span>
1936
+ >Choose many</span>
1928
1937
 
1929
1938
  <button
1930
1939
  class="pf-v5-c-select__toggle"
@@ -2103,7 +2112,7 @@ The multiselect should be used when the user is selecting multiple items from a
2103
2112
 
2104
2113
  ```html
2105
2114
  <div class="pf-v5-c-select pf-m-expanded">
2106
- <span id="select-checkbox-without-badge-label" hidden>Choose one</span>
2115
+ <span id="select-checkbox-without-badge-label" hidden>Choose many</span>
2107
2116
 
2108
2117
  <button
2109
2118
  class="pf-v5-c-select__toggle"
@@ -2201,7 +2210,7 @@ The multiselect should be used when the user is selecting multiple items from a
2201
2210
 
2202
2211
  ```html
2203
2212
  <div class="pf-v5-c-select pf-m-expanded">
2204
- <span id="select-checkbox-counts-label" hidden>Choose one</span>
2213
+ <span id="select-checkbox-counts-label" hidden>Choose many</span>
2205
2214
 
2206
2215
  <button
2207
2216
  class="pf-v5-c-select__toggle"
@@ -2630,18 +2639,6 @@ The plain select variation should be used when you do not want a border applied
2630
2639
  <li role="presentation">
2631
2640
  <button class="pf-v5-c-select__menu-item" role="option">Menu item</button>
2632
2641
  </li>
2633
- <li role="presentation">
2634
- <button
2635
- class="pf-v5-c-select__menu-item pf-m-selected"
2636
- role="option"
2637
- aria-selected="true"
2638
- >
2639
- Menu item selected
2640
- <span class="pf-v5-c-select__menu-item-icon">
2641
- <i class="fas fa-check" aria-hidden="true"></i>
2642
- </span>
2643
- </button>
2644
- </li>
2645
2642
  <li role="presentation">
2646
2643
  <button class="pf-v5-c-select__menu-item pf-m-description" role="option">
2647
2644
  <span class="pf-v5-c-select__menu-item-main">Menu item description</span>
@@ -2686,19 +2683,8 @@ The plain select variation should be used when you do not want a border applied
2686
2683
  </button>
2687
2684
  </li>
2688
2685
  <li role="presentation">
2689
- <button
2690
- class="pf-v5-c-select__menu-item pf-m-selected pf-m-description"
2691
- role="option"
2692
- aria-selected="true"
2693
- >
2694
- <span class="pf-v5-c-select__menu-item-main">
2695
- Menu item long description
2696
- <span
2697
- class="pf-v5-c-select__menu-item-icon"
2698
- >
2699
- <i class="fas fa-check" aria-hidden="true"></i>
2700
- </span>
2701
- </span>
2686
+ <button class="pf-v5-c-select__menu-item pf-m-description" role="option">
2687
+ <span class="pf-v5-c-select__menu-item-main">Menu item long description</span>
2702
2688
  <span
2703
2689
  class="pf-v5-c-select__menu-item-description"
2704
2690
  >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
@@ -2713,7 +2699,7 @@ The plain select variation should be used when you do not want a border applied
2713
2699
 
2714
2700
  ```html
2715
2701
  <div class="pf-v5-c-select pf-m-expanded">
2716
- <span id="select-checkbox-description-label" hidden>Choose one</span>
2702
+ <span id="select-checkbox-description-label" hidden>Choose many</span>
2717
2703
 
2718
2704
  <button
2719
2705
  class="pf-v5-c-select__toggle"
@@ -3178,20 +3164,22 @@ The plain select variation should be used when you do not want a border applied
3178
3164
  <button class="pf-v5-c-select__menu-item" role="option">Needs maintenance</button>
3179
3165
  </li>
3180
3166
  <li role="presentation" class="pf-v5-c-select__list-item pf-m-loading">
3181
- <svg
3182
- class="pf-v5-c-spinner pf-m-lg"
3183
- role="progressbar"
3184
- viewBox="0 0 100 100"
3185
- aria-label="Loading items"
3186
- >
3187
- <circle
3188
- class="pf-v5-c-spinner__path"
3189
- cx="50"
3190
- cy="50"
3191
- r="45"
3192
- fill="none"
3193
- />
3194
- </svg>
3167
+ <button class="pf-v5-c-select__menu-item" role="option">
3168
+ <svg
3169
+ class="pf-v5-c-spinner pf-m-lg"
3170
+ role="progressbar"
3171
+ viewBox="0 0 100 100"
3172
+ aria-label="Loading items"
3173
+ >
3174
+ <circle
3175
+ class="pf-v5-c-spinner__path"
3176
+ cx="50"
3177
+ cy="50"
3178
+ r="45"
3179
+ fill="none"
3180
+ />
3181
+ </svg>
3182
+ </button>
3195
3183
  </li>
3196
3184
  </ul>
3197
3185
  </div>