@patternfly/patternfly 6.0.0-alpha.131 → 6.0.0-alpha.133

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/components/Breadcrumb/breadcrumb.css +10 -10
  2. package/components/Breadcrumb/breadcrumb.scss +10 -10
  3. package/components/Hint/hint.css +2 -2
  4. package/components/Hint/hint.scss +2 -3
  5. package/components/Login/login.css +4 -2
  6. package/components/Login/login.scss +2 -1
  7. package/components/Menu/menu.css +4 -1
  8. package/components/Menu/menu.scss +5 -1
  9. package/components/_index.css +20 -15
  10. package/docs/components/ActionList/examples/ActionList.md +4 -4
  11. package/docs/components/Breadcrumb/examples/Breadcrumb.md +2 -1
  12. package/docs/components/Card/examples/Card.md +80 -416
  13. package/docs/components/DataList/examples/DataList.md +170 -952
  14. package/docs/components/DualListSelector/examples/DualListSelector.md +160 -896
  15. package/docs/components/Hint/examples/Hint.md +30 -156
  16. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
  17. package/docs/components/LogViewer/examples/LogViewer.css +9 -2
  18. package/docs/components/LogViewer/examples/LogViewer.md +315 -3313
  19. package/docs/components/Menu/examples/Menu.md +6 -76
  20. package/docs/components/MenuToggle/examples/MenuToggle.md +4 -0
  21. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +370 -2064
  22. package/docs/components/OverflowMenu/examples/overflow-menu.css +3 -27
  23. package/docs/components/OverflowMenu/examples/overflow-menu.md +56 -143
  24. package/docs/components/Table/examples/Table.css +7 -0
  25. package/docs/components/Table/examples/Table.md +281 -405
  26. package/docs/components/Toolbar/examples/Toolbar.md +32 -239
  27. package/docs/demos/CardView/examples/CardView.md +110 -583
  28. package/docs/demos/Dashboard/examples/Dashboard.md +10 -56
  29. package/docs/demos/DataList/examples/DataList.md +44 -96
  30. package/docs/demos/DescriptionList/examples/DescriptionList.md +10 -56
  31. package/docs/demos/Drawer/examples/Drawer.md +10 -56
  32. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +647 -3504
  33. package/docs/demos/Page/examples/Penta.md +5 -5
  34. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +150 -675
  35. package/docs/demos/Table/examples/Table.md +142 -220
  36. package/docs/demos/Tabs/examples/Tabs.md +15 -28
  37. package/docs/demos/Toolbar/examples/Toolbar.css +0 -16
  38. package/docs/demos/Toolbar/examples/Toolbar.md +88 -609
  39. package/docs/utilities/Display/examples/Display.css +1 -8
  40. package/docs/utilities/Display/examples/Display.md +16 -7
  41. package/package.json +1 -1
  42. package/patternfly-addons.css +38 -0
  43. package/patternfly-charts.css +339 -8
  44. package/patternfly-charts.scss +21 -8
  45. package/patternfly-no-globals.css +20 -15
  46. package/patternfly.css +20 -15
  47. package/patternfly.min.css +1 -1
  48. package/patternfly.min.css.map +1 -1
  49. package/utilities/Display/display.css +38 -0
  50. package/utilities/Display/display.scss +3 -1
  51. package/utilities/_index.css +38 -0
package/docs/demos/Dashboard/examples/Dashboard.md CHANGED
@@ -296,63 +296,17 @@ cssPrefix: pf-d-dashboard
296
296
  </button>
297
297
  </div>
298
298
  <div class="pf-v6-c-card__actions">
299
- <div class="pf-v6-c-dropdown">
300
- <button
301
- class="pf-v6-c-dropdown__toggle pf-m-plain"
302
- id="dashboard-demo-expandable-status-card-1-dropdown-kebab-right-aligned-button"
303
- aria-expanded="false"
304
- type="button"
305
- aria-label="Actions"
306
- >
299
+ <button
300
+ class="pf-v6-c-menu-toggle pf-m-plain"
301
+ type="button"
302
+ aria-expanded="false"
303
+ aria-label="Menu toggle"
304
+ id="dashboard-demo-expandable-status-card-1toggle"
305
+ >
306
+ <span class="pf-v6-c-menu-toggle__icon">
307
307
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
308
- </button>
309
- <ul
310
- class="pf-v6-c-dropdown__menu"
311
- aria-labelledby="dashboard-demo-expandable-status-card-1-dropdown-kebab-right-aligned-button"
312
- hidden
313
- role="menu"
314
- >
315
- <li role="none">
316
- <a
317
- class="pf-v6-c-dropdown__menu-item"
318
- role="menuitem"
319
- href="#"
320
- >Link</a>
321
- </li>
322
- <li role="none">
323
- <button
324
- class="pf-v6-c-dropdown__menu-item"
325
- role="menuitem"
326
- type="button"
327
- >Action</button>
328
- </li>
329
- <li role="none">
330
- <a
331
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
332
- role="menuitem"
333
- href="#"
334
- aria-disabled="true"
335
- tabindex="-1"
336
- >Disabled link</a>
337
- </li>
338
- <li role="none">
339
- <button
340
- class="pf-v6-c-dropdown__menu-item"
341
- role="menuitem"
342
- type="button"
343
- disabled
344
- >Disabled action</button>
345
- </li>
346
- <li class="pf-v6-c-divider" role="separator"></li>
347
- <li role="none">
348
- <a
349
- class="pf-v6-c-dropdown__menu-item"
350
- role="menuitem"
351
- href="#"
352
- >Separated link</a>
353
- </li>
354
- </ul>
355
- </div>
308
+ </span>
309
+ </button>
356
310
  </div>
357
311
  <div
358
312
  class="pf-v6-c-card__title"
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -335,30 +335,17 @@ wrapperTag: div
335
335
  </div>
336
336
  </div>
337
337
  <div class="pf-v6-c-overflow-menu__control">
338
- <div class="pf-v6-c-dropdown">
339
- <button
340
- class="pf-v6-c-button pf-v6-c-dropdown__toggle pf-m-plain"
341
- type="button"
342
- id="data-list-basic-example-toolbar-overflow-menu-dropdown-toggle"
343
- aria-label="Dropdown with additional options"
344
- aria-expanded="false"
345
- >
338
+ <button
339
+ class="pf-v6-c-menu-toggle pf-m-plain"
340
+ type="button"
341
+ aria-expanded="false"
342
+ aria-label="Menu toggle"
343
+ id="data-list-basic-example-toolbar-overflow-menutoggle"
344
+ >
345
+ <span class="pf-v6-c-menu-toggle__icon">
346
346
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
347
- </button>
348
- <ul
349
- class="pf-v6-c-dropdown__menu"
350
- role="menu"
351
- aria-labelledby="data-list-basic-example-toolbar-overflow-menu-dropdown-toggle"
352
- hidden
353
- >
354
- <li role="none">
355
- <button
356
- role="menuitem"
357
- class="pf-v6-c-dropdown__menu-item"
358
- >Action 7</button>
359
- </li>
360
- </ul>
361
- </div>
347
+ </span>
348
+ </button>
362
349
  </div>
363
350
  </div>
364
351
 
@@ -1261,30 +1248,17 @@ wrapperTag: div
1261
1248
  </div>
1262
1249
  </div>
1263
1250
  <div class="pf-v6-c-overflow-menu__control">
1264
- <div class="pf-v6-c-dropdown">
1265
- <button
1266
- class="pf-v6-c-button pf-v6-c-dropdown__toggle pf-m-plain"
1267
- type="button"
1268
- id="data-list-actionable-example-toolbar-overflow-menu-dropdown-toggle"
1269
- aria-label="Dropdown with additional options"
1270
- aria-expanded="false"
1271
- >
1251
+ <button
1252
+ class="pf-v6-c-menu-toggle pf-m-plain"
1253
+ type="button"
1254
+ aria-expanded="false"
1255
+ aria-label="Menu toggle"
1256
+ id="data-list-actionable-example-toolbar-overflow-menutoggle"
1257
+ >
1258
+ <span class="pf-v6-c-menu-toggle__icon">
1272
1259
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1273
- </button>
1274
- <ul
1275
- class="pf-v6-c-dropdown__menu"
1276
- role="menu"
1277
- aria-labelledby="data-list-actionable-example-toolbar-overflow-menu-dropdown-toggle"
1278
- hidden
1279
- >
1280
- <li role="none">
1281
- <button
1282
- role="menuitem"
1283
- class="pf-v6-c-dropdown__menu-item"
1284
- >Action 7</button>
1285
- </li>
1286
- </ul>
1287
- </div>
1260
+ </span>
1261
+ </button>
1288
1262
  </div>
1289
1263
  </div>
1290
1264
 
@@ -2226,30 +2200,17 @@ wrapperTag: div
2226
2200
  </div>
2227
2201
  </div>
2228
2202
  <div class="pf-v6-c-overflow-menu__control">
2229
- <div class="pf-v6-c-dropdown">
2230
- <button
2231
- class="pf-v6-c-button pf-v6-c-dropdown__toggle pf-m-plain"
2232
- type="button"
2233
- id="data-list-expandable-example-toolbar-overflow-menu-dropdown-toggle"
2234
- aria-label="Dropdown with additional options"
2235
- aria-expanded="false"
2236
- >
2203
+ <button
2204
+ class="pf-v6-c-menu-toggle pf-m-plain"
2205
+ type="button"
2206
+ aria-expanded="false"
2207
+ aria-label="Menu toggle"
2208
+ id="data-list-expandable-example-toolbar-overflow-menutoggle"
2209
+ >
2210
+ <span class="pf-v6-c-menu-toggle__icon">
2237
2211
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2238
- </button>
2239
- <ul
2240
- class="pf-v6-c-dropdown__menu"
2241
- role="menu"
2242
- aria-labelledby="data-list-expandable-example-toolbar-overflow-menu-dropdown-toggle"
2243
- hidden
2244
- >
2245
- <li role="none">
2246
- <button
2247
- role="menuitem"
2248
- class="pf-v6-c-dropdown__menu-item"
2249
- >Action 7</button>
2250
- </li>
2251
- </ul>
2252
- </div>
2212
+ </span>
2213
+ </button>
2253
2214
  </div>
2254
2215
  </div>
2255
2216
 
@@ -2593,7 +2554,7 @@ wrapperTag: div
2593
2554
  class="pf-v6-c-menu-toggle pf-m-plain"
2594
2555
  type="button"
2595
2556
  aria-expanded="false"
2596
- aria-label="Table actions"
2557
+ aria-label="Menu toggle"
2597
2558
  >
2598
2559
  <span class="pf-v6-c-menu-toggle__icon">
2599
2560
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -2674,7 +2635,7 @@ wrapperTag: div
2674
2635
  class="pf-v6-c-menu-toggle pf-m-plain"
2675
2636
  type="button"
2676
2637
  aria-expanded="false"
2677
- aria-label="Table actions"
2638
+ aria-label="Menu toggle"
2678
2639
  >
2679
2640
  <span class="pf-v6-c-menu-toggle__icon">
2680
2641
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -2755,7 +2716,7 @@ wrapperTag: div
2755
2716
  class="pf-v6-c-menu-toggle pf-m-plain"
2756
2717
  type="button"
2757
2718
  aria-expanded="false"
2758
- aria-label="Table actions"
2719
+ aria-label="Menu toggle"
2759
2720
  >
2760
2721
  <span class="pf-v6-c-menu-toggle__icon">
2761
2722
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -2834,7 +2795,7 @@ wrapperTag: div
2834
2795
  class="pf-v6-c-menu-toggle pf-m-plain"
2835
2796
  type="button"
2836
2797
  aria-expanded="false"
2837
- aria-label="Table actions"
2798
+ aria-label="Menu toggle"
2838
2799
  >
2839
2800
  <span class="pf-v6-c-menu-toggle__icon">
2840
2801
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -3765,30 +3726,17 @@ wrapperTag: div
3765
3726
  </div>
3766
3727
  </div>
3767
3728
  <div class="pf-v6-c-overflow-menu__control">
3768
- <div class="pf-v6-c-dropdown">
3769
- <button
3770
- class="pf-v6-c-button pf-v6-c-dropdown__toggle pf-m-plain"
3771
- type="button"
3772
- id="data-list-static-bottom-example-toolbar-overflow-menu-dropdown-toggle"
3773
- aria-label="Dropdown with additional options"
3774
- aria-expanded="false"
3775
- >
3729
+ <button
3730
+ class="pf-v6-c-menu-toggle pf-m-plain"
3731
+ type="button"
3732
+ aria-expanded="false"
3733
+ aria-label="Menu toggle"
3734
+ id="data-list-static-bottom-example-toolbar-overflow-menutoggle"
3735
+ >
3736
+ <span class="pf-v6-c-menu-toggle__icon">
3776
3737
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3777
- </button>
3778
- <ul
3779
- class="pf-v6-c-dropdown__menu"
3780
- role="menu"
3781
- aria-labelledby="data-list-static-bottom-example-toolbar-overflow-menu-dropdown-toggle"
3782
- hidden
3783
- >
3784
- <li role="none">
3785
- <button
3786
- role="menuitem"
3787
- class="pf-v6-c-dropdown__menu-item"
3788
- >Action 7</button>
3789
- </li>
3790
- </ul>
3791
- </div>
3738
+ </span>
3739
+ </button>
3792
3740
  </div>
3793
3741
  </div>
3794
3742
 
package/docs/demos/DescriptionList/examples/DescriptionList.md CHANGED
@@ -717,63 +717,17 @@ cssPrefix: pf-d-description-list
717
717
  <div class="pf-v6-c-drawer__body">
718
718
  <div class="pf-v6-c-drawer__head">
719
719
  <div class="pf-v6-c-drawer__actions">
720
- <div class="pf-v6-c-dropdown">
721
- <button
722
- class="pf-v6-c-dropdown__toggle pf-m-plain"
723
- id="-button"
724
- aria-expanded="false"
725
- type="button"
726
- aria-label="Actions"
727
- >
720
+ <button
721
+ class="pf-v6-c-menu-toggle pf-m-plain"
722
+ type="button"
723
+ aria-expanded="false"
724
+ aria-label="Menu toggle"
725
+ id="description-list-in-drawer-exampletoggle"
726
+ >
727
+ <span class="pf-v6-c-menu-toggle__icon">
728
728
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
729
- </button>
730
- <ul
731
- class="pf-v6-c-dropdown__menu"
732
- aria-labelledby="-button"
733
- hidden
734
- role="menu"
735
- >
736
- <li role="none">
737
- <a
738
- class="pf-v6-c-dropdown__menu-item"
739
- role="menuitem"
740
- href="#"
741
- >Link</a>
742
- </li>
743
- <li role="none">
744
- <button
745
- class="pf-v6-c-dropdown__menu-item"
746
- role="menuitem"
747
- type="button"
748
- >Action</button>
749
- </li>
750
- <li role="none">
751
- <a
752
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
753
- role="menuitem"
754
- href="#"
755
- aria-disabled="true"
756
- tabindex="-1"
757
- >Disabled link</a>
758
- </li>
759
- <li role="none">
760
- <button
761
- class="pf-v6-c-dropdown__menu-item"
762
- role="menuitem"
763
- type="button"
764
- disabled
765
- >Disabled action</button>
766
- </li>
767
- <li class="pf-v6-c-divider" role="separator"></li>
768
- <li role="none">
769
- <a
770
- class="pf-v6-c-dropdown__menu-item"
771
- role="menuitem"
772
- href="#"
773
- >Separated link</a>
774
- </li>
775
- </ul>
776
- </div>
729
+ </span>
730
+ </button>
777
731
  <div class="pf-v6-c-drawer__close">
778
732
  <button
779
733
  class="pf-v6-c-button pf-m-plain"
package/docs/demos/Drawer/examples/Drawer.md CHANGED
@@ -337,63 +337,17 @@ wrapperTag: div
337
337
  <div class="pf-v6-c-drawer__body">
338
338
  <div class="pf-v6-c-drawer__head">
339
339
  <div class="pf-v6-c-drawer__actions">
340
- <div class="pf-v6-c-dropdown">
341
- <button
342
- class="pf-v6-c-dropdown__toggle pf-m-plain"
343
- id="-button"
344
- aria-expanded="false"
345
- type="button"
346
- aria-label="Actions"
347
- >
340
+ <button
341
+ class="pf-v6-c-menu-toggle pf-m-plain"
342
+ type="button"
343
+ aria-expanded="false"
344
+ aria-label="Menu toggle"
345
+ id="drawer-collapsed-exampletoggle"
346
+ >
347
+ <span class="pf-v6-c-menu-toggle__icon">
348
348
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
349
- </button>
350
- <ul
351
- class="pf-v6-c-dropdown__menu"
352
- aria-labelledby="-button"
353
- hidden
354
- role="menu"
355
- >
356
- <li role="none">
357
- <a
358
- class="pf-v6-c-dropdown__menu-item"
359
- role="menuitem"
360
- href="#"
361
- >Link</a>
362
- </li>
363
- <li role="none">
364
- <button
365
- class="pf-v6-c-dropdown__menu-item"
366
- role="menuitem"
367
- type="button"
368
- >Action</button>
369
- </li>
370
- <li role="none">
371
- <a
372
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
373
- role="menuitem"
374
- href="#"
375
- aria-disabled="true"
376
- tabindex="-1"
377
- >Disabled link</a>
378
- </li>
379
- <li role="none">
380
- <button
381
- class="pf-v6-c-dropdown__menu-item"
382
- role="menuitem"
383
- type="button"
384
- disabled
385
- >Disabled action</button>
386
- </li>
387
- <li class="pf-v6-c-divider" role="separator"></li>
388
- <li role="none">
389
- <a
390
- class="pf-v6-c-dropdown__menu-item"
391
- role="menuitem"
392
- href="#"
393
- >Separated link</a>
394
- </li>
395
- </ul>
396
- </div>
349
+ </span>
350
+ </button>
397
351
  <div class="pf-v6-c-drawer__close">
398
352
  <button
399
353
  class="pf-v6-c-button pf-m-plain"