@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/AppLauncher/deprecated/application-launcher.md CHANGED
@@ -28,19 +28,24 @@ deprecated: true
28
28
  <ul
29
29
  class="pf-v5-c-app-launcher__menu"
30
30
  aria-labelledby="application-launcher-collapsed-button"
31
- role="list"
31
+ role="menu"
32
32
  hidden
33
33
  >
34
- <li>
35
- <a class="pf-v5-c-app-launcher__menu-item" href="#">Link</a>
34
+ <li role="none">
35
+ <a class="pf-v5-c-app-launcher__menu-item" role="menuitem" href="#">Link</a>
36
36
  </li>
37
- <li>
38
- <button class="pf-v5-c-app-launcher__menu-item" type="button">Action</button>
37
+ <li role="none">
38
+ <button
39
+ class="pf-v5-c-app-launcher__menu-item"
40
+ role="menuitem"
41
+ type="button"
42
+ >Action</button>
39
43
  </li>
40
44
  <li class="pf-v5-c-divider" role="separator"></li>
41
- <li>
45
+ <li role="none">
42
46
  <a
43
47
  class="pf-v5-c-app-launcher__menu-item pf-m-disabled"
48
+ role="menuitem"
44
49
  href="#"
45
50
  aria-disabled="true"
46
51
  tabindex="-1"
@@ -72,19 +77,24 @@ deprecated: true
72
77
  <ul
73
78
  class="pf-v5-c-app-launcher__menu"
74
79
  aria-labelledby="application-launcher-disabled-button"
75
- role="list"
80
+ role="menu"
76
81
  hidden
77
82
  >
78
- <li>
79
- <a class="pf-v5-c-app-launcher__menu-item" href="#">Link</a>
83
+ <li role="none">
84
+ <a class="pf-v5-c-app-launcher__menu-item" role="menuitem" href="#">Link</a>
80
85
  </li>
81
- <li>
82
- <button class="pf-v5-c-app-launcher__menu-item" type="button">Action</button>
86
+ <li role="none">
87
+ <button
88
+ class="pf-v5-c-app-launcher__menu-item"
89
+ role="menuitem"
90
+ type="button"
91
+ >Action</button>
83
92
  </li>
84
93
  <li class="pf-v5-c-divider" role="separator"></li>
85
- <li>
94
+ <li role="none">
86
95
  <a
87
96
  class="pf-v5-c-app-launcher__menu-item pf-m-disabled"
97
+ role="menuitem"
88
98
  href="#"
89
99
  aria-disabled="true"
90
100
  tabindex="-1"
@@ -115,18 +125,23 @@ deprecated: true
115
125
  <ul
116
126
  class="pf-v5-c-app-launcher__menu"
117
127
  aria-labelledby="application-launcher-expanded-button"
118
- role="list"
128
+ role="menu"
119
129
  >
120
- <li>
121
- <a class="pf-v5-c-app-launcher__menu-item" href="#">Link</a>
130
+ <li role="none">
131
+ <a class="pf-v5-c-app-launcher__menu-item" role="menuitem" href="#">Link</a>
122
132
  </li>
123
- <li>
124
- <button class="pf-v5-c-app-launcher__menu-item" type="button">Action</button>
133
+ <li role="none">
134
+ <button
135
+ class="pf-v5-c-app-launcher__menu-item"
136
+ role="menuitem"
137
+ type="button"
138
+ >Action</button>
125
139
  </li>
126
140
  <li class="pf-v5-c-divider" role="separator"></li>
127
- <li>
141
+ <li role="none">
128
142
  <a
129
143
  class="pf-v5-c-app-launcher__menu-item pf-m-disabled"
144
+ role="menuitem"
130
145
  href="#"
131
146
  aria-disabled="true"
132
147
  tabindex="-1"
@@ -157,18 +172,23 @@ deprecated: true
157
172
  <ul
158
173
  class="pf-v5-c-app-launcher__menu pf-m-align-right"
159
174
  aria-labelledby="application-launcher-aligned-right-button"
160
- role="list"
175
+ role="menu"
161
176
  >
162
- <li>
163
- <a class="pf-v5-c-app-launcher__menu-item" href="#">Link</a>
177
+ <li role="none">
178
+ <a class="pf-v5-c-app-launcher__menu-item" role="menuitem" href="#">Link</a>
164
179
  </li>
165
- <li>
166
- <button class="pf-v5-c-app-launcher__menu-item" type="button">Action</button>
180
+ <li role="none">
181
+ <button
182
+ class="pf-v5-c-app-launcher__menu-item"
183
+ role="menuitem"
184
+ type="button"
185
+ >Action</button>
167
186
  </li>
168
187
  <li class="pf-v5-c-divider" role="separator"></li>
169
- <li>
188
+ <li role="none">
170
189
  <a
171
190
  class="pf-v5-c-app-launcher__menu-item pf-m-disabled"
191
+ role="menuitem"
172
192
  href="#"
173
193
  aria-disabled="true"
174
194
  tabindex="-1"
@@ -199,18 +219,23 @@ deprecated: true
199
219
  <ul
200
220
  class="pf-v5-c-app-launcher__menu"
201
221
  aria-labelledby="application-launcher-aligned-top-button"
202
- role="list"
222
+ role="menu"
203
223
  >
204
- <li>
205
- <a class="pf-v5-c-app-launcher__menu-item" href="#">Link</a>
224
+ <li role="none">
225
+ <a class="pf-v5-c-app-launcher__menu-item" role="menuitem" href="#">Link</a>
206
226
  </li>
207
- <li>
208
- <button class="pf-v5-c-app-launcher__menu-item" type="button">Action</button>
227
+ <li role="none">
228
+ <button
229
+ class="pf-v5-c-app-launcher__menu-item"
230
+ role="menuitem"
231
+ type="button"
232
+ >Action</button>
209
233
  </li>
210
234
  <li class="pf-v5-c-divider" role="separator"></li>
211
- <li>
235
+ <li role="none">
212
236
  <a
213
237
  class="pf-v5-c-app-launcher__menu-item pf-m-disabled"
238
+ role="menuitem"
214
239
  href="#"
215
240
  aria-disabled="true"
216
241
  tabindex="-1"
@@ -240,33 +265,53 @@ deprecated: true
240
265
  </button>
241
266
  <div class="pf-v5-c-app-launcher__menu">
242
267
  <section class="pf-v5-c-app-launcher__group">
243
- <ul role="list">
244
- <li>
245
- <a class="pf-v5-c-app-launcher__menu-item" href="#">Link not in group</a>
268
+ <ul role="menu">
269
+ <li role="none">
270
+ <a
271
+ class="pf-v5-c-app-launcher__menu-item"
272
+ role="menuitem"
273
+ href="#"
274
+ >Link not in group</a>
246
275
  </li>
247
276
  </ul>
248
277
  </section>
249
278
  <hr class="pf-v5-c-divider" />
250
279
  <section class="pf-v5-c-app-launcher__group">
251
280
  <h1 class="pf-v5-c-app-launcher__group-title">Group 1</h1>
252
- <ul role="list">
253
- <li>
254
- <a class="pf-v5-c-app-launcher__menu-item" href="#">Group 1 link</a>
281
+ <ul role="menu">
282
+ <li role="none">
283
+ <a
284
+ class="pf-v5-c-app-launcher__menu-item"
285
+ role="menuitem"
286
+ href="#"
287
+ >Group 1 link</a>
255
288
  </li>
256
- <li>
257
- <a class="pf-v5-c-app-launcher__menu-item" href="#">Group 1 link</a>
289
+ <li role="none">
290
+ <a
291
+ class="pf-v5-c-app-launcher__menu-item"
292
+ role="menuitem"
293
+ href="#"
294
+ >Group 1 link</a>
258
295
  </li>
259
296
  </ul>
260
297
  </section>
261
298
  <hr class="pf-v5-c-divider" />
262
299
  <section class="pf-v5-c-app-launcher__group">
263
300
  <h1 class="pf-v5-c-app-launcher__group-title">Group 2</h1>
264
- <ul role="list">
265
- <li>
266
- <a class="pf-v5-c-app-launcher__menu-item" href="#">Group 2 link</a>
301
+ <ul role="menu">
302
+ <li role="none">
303
+ <a
304
+ class="pf-v5-c-app-launcher__menu-item"
305
+ role="menuitem"
306
+ href="#"
307
+ >Group 2 link</a>
267
308
  </li>
268
- <li>
269
- <a class="pf-v5-c-app-launcher__menu-item" href="#">Group 2 link</a>
309
+ <li role="none">
310
+ <a
311
+ class="pf-v5-c-app-launcher__menu-item"
312
+ role="menuitem"
313
+ href="#"
314
+ >Group 2 link</a>
270
315
  </li>
271
316
  </ul>
272
317
  </section>
@@ -294,33 +339,53 @@ deprecated: true
294
339
  </button>
295
340
  <div class="pf-v5-c-app-launcher__menu">
296
341
  <section class="pf-v5-c-app-launcher__group">
297
- <ul role="list">
298
- <li>
299
- <a class="pf-v5-c-app-launcher__menu-item" href="#">Link not in group</a>
342
+ <ul role="menu">
343
+ <li role="none">
344
+ <a
345
+ class="pf-v5-c-app-launcher__menu-item"
346
+ role="menuitem"
347
+ href="#"
348
+ >Link not in group</a>
300
349
  </li>
301
350
  <li class="pf-v5-c-divider" role="separator"></li>
302
351
  </ul>
303
352
  </section>
304
353
  <section class="pf-v5-c-app-launcher__group">
305
354
  <h1 class="pf-v5-c-app-launcher__group-title">Group 1</h1>
306
- <ul role="list">
307
- <li>
308
- <a class="pf-v5-c-app-launcher__menu-item" href="#">Group 1 link</a>
355
+ <ul role="menu">
356
+ <li role="none">
357
+ <a
358
+ class="pf-v5-c-app-launcher__menu-item"
359
+ role="menuitem"
360
+ href="#"
361
+ >Group 1 link</a>
309
362
  </li>
310
- <li>
311
- <a class="pf-v5-c-app-launcher__menu-item" href="#">Group 1 link</a>
363
+ <li role="none">
364
+ <a
365
+ class="pf-v5-c-app-launcher__menu-item"
366
+ role="menuitem"
367
+ href="#"
368
+ >Group 1 link</a>
312
369
  </li>
313
370
  <li class="pf-v5-c-divider" role="separator"></li>
314
371
  </ul>
315
372
  </section>
316
373
  <section class="pf-v5-c-app-launcher__group">
317
374
  <h1 class="pf-v5-c-app-launcher__group-title">Group 2</h1>
318
- <ul role="list">
319
- <li>
320
- <a class="pf-v5-c-app-launcher__menu-item" href="#">Group 2 link</a>
375
+ <ul role="menu">
376
+ <li role="none">
377
+ <a
378
+ class="pf-v5-c-app-launcher__menu-item"
379
+ role="menuitem"
380
+ href="#"
381
+ >Group 2 link</a>
321
382
  </li>
322
- <li>
323
- <a class="pf-v5-c-app-launcher__menu-item" href="#">Group 2 link</a>
383
+ <li role="none">
384
+ <a
385
+ class="pf-v5-c-app-launcher__menu-item"
386
+ role="menuitem"
387
+ href="#"
388
+ >Group 2 link</a>
324
389
  </li>
325
390
  </ul>
326
391
  </section>
@@ -348,9 +413,9 @@ deprecated: true
348
413
  </button>
349
414
  <div class="pf-v5-c-app-launcher__menu">
350
415
  <section class="pf-v5-c-app-launcher__group">
351
- <ul role="list">
352
- <li>
353
- <a class="pf-v5-c-app-launcher__menu-item" href="#">
416
+ <ul role="menu">
417
+ <li role="none">
418
+ <a class="pf-v5-c-app-launcher__menu-item" role="menuitem" href="#">
354
419
  <span class="pf-v5-c-app-launcher__menu-item-icon">
355
420
  <img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
356
421
  </span>
@@ -362,10 +427,11 @@ deprecated: true
362
427
  <li class="pf-v5-c-divider" role="separator"></li>
363
428
  <section class="pf-v5-c-app-launcher__group">
364
429
  <h1 class="pf-v5-c-app-launcher__group-title">Group 1</h1>
365
- <ul role="list">
366
- <li>
430
+ <ul role="menu">
431
+ <li role="none">
367
432
  <a
368
433
  class="pf-v5-c-app-launcher__menu-item pf-m-external"
434
+ role="menuitem"
369
435
  href="#"
370
436
  target="_blank"
371
437
  >
@@ -381,9 +447,10 @@ deprecated: true
381
447
  <span class="pf-v5-screen-reader">(opens new window)</span>
382
448
  </a>
383
449
  </li>
384
- <li>
450
+ <li role="none">
385
451
  <a
386
452
  class="pf-v5-c-app-launcher__menu-item pf-m-external"
453
+ role="menuitem"
387
454
  href="#"
388
455
  target="_blank"
389
456
  >
@@ -404,10 +471,11 @@ deprecated: true
404
471
  </section>
405
472
  <section class="pf-v5-c-app-launcher__group">
406
473
  <h1 class="pf-v5-c-app-launcher__group-title">Group 2</h1>
407
- <ul role="list">
408
- <li>
474
+ <ul role="menu">
475
+ <li role="none">
409
476
  <a
410
477
  class="pf-v5-c-app-launcher__menu-item pf-m-external"
478
+ role="menuitem"
411
479
  href="#"
412
480
  target="_blank"
413
481
  >
@@ -423,9 +491,10 @@ deprecated: true
423
491
  <span class="pf-v5-screen-reader">(opens new window)</span>
424
492
  </a>
425
493
  </li>
426
- <li>
494
+ <li role="none">
427
495
  <a
428
496
  class="pf-v5-c-app-launcher__menu-item pf-m-external"
497
+ role="menuitem"
429
498
  href="#"
430
499
  target="_blank"
431
500
  >
@@ -486,12 +555,14 @@ deprecated: true
486
555
  </div>
487
556
  <section class="pf-v5-c-app-launcher__group">
488
557
  <h1 class="pf-v5-c-app-launcher__group-title">Favorites</h1>
489
- <ul role="list">
558
+ <ul role="menu">
490
559
  <li
491
560
  class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
561
+ role="none"
492
562
  >
493
563
  <a
494
564
  class="pf-v5-c-app-launcher__menu-item pf-m-link"
565
+ role="menuitem"
495
566
  href="#"
496
567
  target="_blank"
497
568
  >
@@ -516,9 +587,11 @@ deprecated: true
516
587
  </li>
517
588
  <li
518
589
  class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
590
+ role="none"
519
591
  >
520
592
  <a
521
593
  class="pf-v5-c-app-launcher__menu-item pf-m-link"
594
+ role="menuitem"
522
595
  href="#"
523
596
  target="_blank"
524
597
  >
@@ -546,10 +619,14 @@ deprecated: true
546
619
  <hr class="pf-v5-c-divider" />
547
620
  <section class="pf-v5-c-app-launcher__group">
548
621
  <h1 class="pf-v5-c-app-launcher__group-title">Group 1</h1>
549
- <ul role="list">
550
- <li class="pf-v5-c-app-launcher__menu-wrapper pf-m-external">
622
+ <ul role="menu">
623
+ <li
624
+ class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
625
+ role="none"
626
+ >
551
627
  <a
552
628
  class="pf-v5-c-app-launcher__menu-item pf-m-link"
629
+ role="menuitem"
553
630
  href="#"
554
631
  target="_blank"
555
632
  >
@@ -574,9 +651,11 @@ deprecated: true
574
651
  </li>
575
652
  <li
576
653
  class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
654
+ role="none"
577
655
  >
578
656
  <a
579
657
  class="pf-v5-c-app-launcher__menu-item pf-m-link"
658
+ role="menuitem"
580
659
  href="#"
581
660
  target="_blank"
582
661
  >
@@ -604,12 +683,14 @@ deprecated: true
604
683
  <hr class="pf-v5-c-divider" />
605
684
  <section class="pf-v5-c-app-launcher__group">
606
685
  <h1 class="pf-v5-c-app-launcher__group-title">Group 2</h1>
607
- <ul role="list">
686
+ <ul role="menu">
608
687
  <li
609
688
  class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
689
+ role="none"
610
690
  >
611
691
  <a
612
692
  class="pf-v5-c-app-launcher__menu-item pf-m-link"
693
+ role="menuitem"
613
694
  href="#"
614
695
  target="_blank"
615
696
  >
@@ -632,9 +713,13 @@ deprecated: true
632
713
  <i class="fas fa-star" aria-hidden="true"></i>
633
714
  </button>
634
715
  </li>
635
- <li class="pf-v5-c-app-launcher__menu-wrapper pf-m-external">
716
+ <li
717
+ class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
718
+ role="none"
719
+ >
636
720
  <a
637
721
  class="pf-v5-c-app-launcher__menu-item pf-m-link"
722
+ role="menuitem"
638
723
  href="#"
639
724
  target="_blank"
640
725
  >
package/docs/components/Breadcrumb/examples/Breadcrumb.md CHANGED
@@ -179,34 +179,40 @@ cssPrefix: pf-v5-c-breadcrumb
179
179
  <ul
180
180
  class="pf-v5-c-dropdown__menu"
181
181
  aria-labelledby="dropdown-badge-toggle-button"
182
+ role="menu"
182
183
  >
183
- <li>
184
+ <li role="none">
184
185
  <button
185
186
  class="pf-v5-c-dropdown__menu-item"
187
+ role="menuitem"
186
188
  type="button"
187
189
  >Section title</button>
188
190
  </li>
189
- <li>
191
+ <li role="none">
190
192
  <button
191
193
  class="pf-v5-c-dropdown__menu-item"
194
+ role="menuitem"
192
195
  type="button"
193
196
  >Section title</button>
194
197
  </li>
195
- <li>
198
+ <li role="none">
196
199
  <button
197
200
  class="pf-v5-c-dropdown__menu-item"
201
+ role="menuitem"
198
202
  type="button"
199
203
  >Section title</button>
200
204
  </li>
201
- <li>
205
+ <li role="none">
202
206
  <button
203
207
  class="pf-v5-c-dropdown__menu-item"
208
+ role="menuitem"
204
209
  type="button"
205
210
  >Section title</button>
206
211
  </li>
207
- <li>
212
+ <li role="none">
208
213
  <button
209
214
  class="pf-v5-c-dropdown__menu-item"
215
+ role="menuitem"
210
216
  type="button"
211
217
  >Section title</button>
212
218
  </li>