@patternfly/patternfly 6.3.0-prerelease.25 → 6.3.0-prerelease.26

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 (50) hide show
  1. package/components/Button/button.css +103 -0
  2. package/components/Button/button.scss +103 -2
  3. package/components/MenuToggle/menu-toggle.css +30 -0
  4. package/components/MenuToggle/menu-toggle.scss +33 -0
  5. package/components/Page/page.css +45 -0
  6. package/components/Page/page.scss +29 -0
  7. package/components/_index.css +178 -0
  8. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  9. package/docs/components/Button/examples/Button.md +85 -3
  10. package/docs/components/Card/examples/Card.md +8 -8
  11. package/docs/components/DataList/examples/DataList.md +23 -23
  12. package/docs/components/DualListSelector/examples/DualListSelector.md +18 -18
  13. package/docs/components/Hint/examples/Hint.md +3 -3
  14. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
  15. package/docs/components/Masthead/examples/masthead.md +90 -12
  16. package/docs/components/Menu/examples/Menu.md +2 -2
  17. package/docs/components/MenuToggle/examples/MenuToggle.md +90 -51
  18. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  19. package/docs/components/Page/examples/Page.md +147 -14
  20. package/docs/components/Pagination/examples/Pagination.md +12 -12
  21. package/docs/components/Table/examples/Table.md +240 -240
  22. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  23. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  24. package/docs/demos/Alert/examples/Alert.md +66 -9
  25. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  26. package/docs/demos/Banner/examples/Banner.md +47 -6
  27. package/docs/demos/Card/examples/Card.md +4 -4
  28. package/docs/demos/CardView/examples/CardView.md +24 -5
  29. package/docs/demos/Dashboard/examples/Dashboard.md +24 -5
  30. package/docs/demos/DataList/examples/DataList.md +100 -24
  31. package/docs/demos/DescriptionList/examples/DescriptionList.md +66 -9
  32. package/docs/demos/Drawer/examples/Drawer.md +110 -15
  33. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  34. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  35. package/docs/demos/Modal/examples/Modal.md +132 -18
  36. package/docs/demos/Nav/examples/Nav.md +111 -16
  37. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +110 -15
  38. package/docs/demos/Page/examples/Page.md +309 -43
  39. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -27
  40. package/docs/demos/Skeleton/examples/Skeleton.md +22 -3
  41. package/docs/demos/Table/examples/Table.md +435 -150
  42. package/docs/demos/Tabs/examples/Tabs.md +137 -23
  43. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  44. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  45. package/package.json +1 -1
  46. package/patternfly-no-globals.css +178 -0
  47. package/patternfly.css +178 -0
  48. package/patternfly.min.css +1 -1
  49. package/patternfly.min.css.map +1 -1
  50. package/sass-utilities/mixins.scss +35 -0
package/docs/components/DualListSelector/examples/DualListSelector.md CHANGED
@@ -49,7 +49,7 @@ cssPrefix: pf-v6-c-dual-list-selector
49
49
  class="pf-v6-c-menu-toggle pf-m-plain"
50
50
  type="button"
51
51
  aria-expanded="false"
52
- aria-label="Menu toggle"
52
+ aria-label="Dual list item menu toggle"
53
53
  id="basic-available-menu-toggle"
54
54
  >
55
55
  <span class="pf-v6-c-menu-toggle__icon">
@@ -230,7 +230,7 @@ cssPrefix: pf-v6-c-dual-list-selector
230
230
  class="pf-v6-c-menu-toggle pf-m-plain"
231
231
  type="button"
232
232
  aria-expanded="false"
233
- aria-label="Menu toggle"
233
+ aria-label="Dual list item menu toggle"
234
234
  id="basic-chosen-menu-toggle"
235
235
  >
236
236
  <span class="pf-v6-c-menu-toggle__icon">
@@ -304,7 +304,7 @@ cssPrefix: pf-v6-c-dual-list-selector
304
304
  class="pf-v6-c-menu-toggle pf-m-plain"
305
305
  type="button"
306
306
  aria-expanded="false"
307
- aria-label="Menu toggle"
307
+ aria-label="Dual list item menu toggle"
308
308
  id="available-item-selected-available-menu-toggle"
309
309
  >
310
310
  <span class="pf-v6-c-menu-toggle__icon">
@@ -479,7 +479,7 @@ cssPrefix: pf-v6-c-dual-list-selector
479
479
  class="pf-v6-c-menu-toggle pf-m-plain"
480
480
  type="button"
481
481
  aria-expanded="false"
482
- aria-label="Menu toggle"
482
+ aria-label="Dual list item menu toggle"
483
483
  id="available-item-selected-chosen-menu-toggle"
484
484
  >
485
485
  <span class="pf-v6-c-menu-toggle__icon">
@@ -553,7 +553,7 @@ cssPrefix: pf-v6-c-dual-list-selector
553
553
  class="pf-v6-c-menu-toggle pf-m-plain"
554
554
  type="button"
555
555
  aria-expanded="false"
556
- aria-label="Menu toggle"
556
+ aria-label="Dual list item menu toggle"
557
557
  id="multiple-available-items-selected-available-menu-toggle"
558
558
  >
559
559
  <span class="pf-v6-c-menu-toggle__icon">
@@ -728,7 +728,7 @@ cssPrefix: pf-v6-c-dual-list-selector
728
728
  class="pf-v6-c-menu-toggle pf-m-plain"
729
729
  type="button"
730
730
  aria-expanded="false"
731
- aria-label="Menu toggle"
731
+ aria-label="Dual list item menu toggle"
732
732
  id="multiple-available-items-selected-chosen-menu-toggle"
733
733
  >
734
734
  <span class="pf-v6-c-menu-toggle__icon">
@@ -802,7 +802,7 @@ cssPrefix: pf-v6-c-dual-list-selector
802
802
  class="pf-v6-c-menu-toggle pf-m-plain"
803
803
  type="button"
804
804
  aria-expanded="false"
805
- aria-label="Menu toggle"
805
+ aria-label="Dual list item menu toggle"
806
806
  id="chosen-item-available-menu-toggle"
807
807
  >
808
808
  <span class="pf-v6-c-menu-toggle__icon">
@@ -977,7 +977,7 @@ cssPrefix: pf-v6-c-dual-list-selector
977
977
  class="pf-v6-c-menu-toggle pf-m-plain"
978
978
  type="button"
979
979
  aria-expanded="false"
980
- aria-label="Menu toggle"
980
+ aria-label="Dual list item menu toggle"
981
981
  id="chosen-item-chosen-menu-toggle"
982
982
  >
983
983
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1064,7 +1064,7 @@ cssPrefix: pf-v6-c-dual-list-selector
1064
1064
  class="pf-v6-c-menu-toggle pf-m-plain"
1065
1065
  type="button"
1066
1066
  aria-expanded="false"
1067
- aria-label="Menu toggle"
1067
+ aria-label="Dual list item menu toggle"
1068
1068
  id="chosen-item-selected-available-menu-toggle"
1069
1069
  >
1070
1070
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1238,7 +1238,7 @@ cssPrefix: pf-v6-c-dual-list-selector
1238
1238
  class="pf-v6-c-menu-toggle pf-m-plain"
1239
1239
  type="button"
1240
1240
  aria-expanded="false"
1241
- aria-label="Menu toggle"
1241
+ aria-label="Dual list item menu toggle"
1242
1242
  id="chosen-item-selected-chosen-menu-toggle"
1243
1243
  >
1244
1244
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1325,7 +1325,7 @@ cssPrefix: pf-v6-c-dual-list-selector
1325
1325
  class="pf-v6-c-menu-toggle pf-m-plain"
1326
1326
  type="button"
1327
1327
  aria-expanded="false"
1328
- aria-label="Menu toggle"
1328
+ aria-label="Dual list item menu toggle"
1329
1329
  id="tree-available-menu-toggle"
1330
1330
  >
1331
1331
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1768,7 +1768,7 @@ cssPrefix: pf-v6-c-dual-list-selector
1768
1768
  class="pf-v6-c-menu-toggle pf-m-plain"
1769
1769
  type="button"
1770
1770
  aria-expanded="false"
1771
- aria-label="Menu toggle"
1771
+ aria-label="Dual list item menu toggle"
1772
1772
  id="tree-chosen-menu-toggle"
1773
1773
  >
1774
1774
  <span class="pf-v6-c-menu-toggle__icon">
@@ -1842,7 +1842,7 @@ cssPrefix: pf-v6-c-dual-list-selector
1842
1842
  class="pf-v6-c-menu-toggle pf-m-plain"
1843
1843
  type="button"
1844
1844
  aria-expanded="false"
1845
- aria-label="Menu toggle"
1845
+ aria-label="Dual list item menu toggle"
1846
1846
  id="tree-options-available-menu-toggle"
1847
1847
  >
1848
1848
  <span class="pf-v6-c-menu-toggle__icon">
@@ -2266,7 +2266,7 @@ cssPrefix: pf-v6-c-dual-list-selector
2266
2266
  class="pf-v6-c-menu-toggle pf-m-plain"
2267
2267
  type="button"
2268
2268
  aria-expanded="false"
2269
- aria-label="Menu toggle"
2269
+ aria-label="Dual list item menu toggle"
2270
2270
  id="tree-options-chosen-menu-toggle"
2271
2271
  >
2272
2272
  <span class="pf-v6-c-menu-toggle__icon">
@@ -2404,7 +2404,7 @@ cssPrefix: pf-v6-c-dual-list-selector
2404
2404
  class="pf-v6-c-menu-toggle pf-m-plain"
2405
2405
  type="button"
2406
2406
  aria-expanded="false"
2407
- aria-label="Menu toggle"
2407
+ aria-label="Dual list item menu toggle"
2408
2408
  id="tree-available-menu-toggle"
2409
2409
  >
2410
2410
  <span class="pf-v6-c-menu-toggle__icon">
@@ -2847,7 +2847,7 @@ cssPrefix: pf-v6-c-dual-list-selector
2847
2847
  class="pf-v6-c-menu-toggle pf-m-plain"
2848
2848
  type="button"
2849
2849
  aria-expanded="false"
2850
- aria-label="Menu toggle"
2850
+ aria-label="Dual list item menu toggle"
2851
2851
  id="tree-chosen-menu-toggle"
2852
2852
  >
2853
2853
  <span class="pf-v6-c-menu-toggle__icon">
@@ -2924,7 +2924,7 @@ cssPrefix: pf-v6-c-dual-list-selector
2924
2924
  class="pf-v6-c-menu-toggle pf-m-plain"
2925
2925
  type="button"
2926
2926
  aria-expanded="false"
2927
- aria-label="Menu toggle"
2927
+ aria-label="Dual list item menu toggle"
2928
2928
  id="draggable-available-menu-toggle"
2929
2929
  >
2930
2930
  <span class="pf-v6-c-menu-toggle__icon">
@@ -3076,7 +3076,7 @@ cssPrefix: pf-v6-c-dual-list-selector
3076
3076
  class="pf-v6-c-menu-toggle pf-m-plain"
3077
3077
  type="button"
3078
3078
  aria-expanded="false"
3079
- aria-label="Menu toggle"
3079
+ aria-label="Dual list item menu toggle"
3080
3080
  id="draggable-chosen-menu-toggle"
3081
3081
  >
3082
3082
  <span class="pf-v6-c-menu-toggle__icon">
package/docs/components/Hint/examples/Hint.md CHANGED
@@ -13,7 +13,7 @@ cssPrefix: pf-v6-c-hint
13
13
  class="pf-v6-c-menu-toggle pf-m-plain"
14
14
  type="button"
15
15
  aria-expanded="false"
16
- aria-label="Menu toggle"
16
+ aria-label="Hint menu toggle"
17
17
  id="hint-with-title-example-hint"
18
18
  >
19
19
  <span class="pf-v6-c-menu-toggle__icon">
@@ -35,7 +35,7 @@ cssPrefix: pf-v6-c-hint
35
35
  class="pf-v6-c-menu-toggle pf-m-plain"
36
36
  type="button"
37
37
  aria-expanded="false"
38
- aria-label="Menu toggle"
38
+ aria-label="Hint menu toggle"
39
39
  id="hint-with-title-and-actions-example-hint"
40
40
  >
41
41
  <span class="pf-v6-c-menu-toggle__icon">
@@ -74,7 +74,7 @@ cssPrefix: pf-v6-c-hint
74
74
  class="pf-v6-c-menu-toggle pf-m-plain"
75
75
  type="button"
76
76
  aria-expanded="false"
77
- aria-label="Menu toggle"
77
+ aria-label="Hint menu toggle"
78
78
  id="hint-with-no-title-example-hint"
79
79
  >
80
80
  <span class="pf-v6-c-menu-toggle__icon">
package/docs/components/InlineEdit/examples/InlineEdit.md CHANGED
@@ -680,7 +680,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
680
680
  class="pf-v6-c-menu-toggle pf-m-plain"
681
681
  type="button"
682
682
  aria-expanded="false"
683
- aria-label="Menu toggle"
683
+ aria-label="Table actions"
684
684
  >
685
685
  <span class="pf-v6-c-menu-toggle__icon">
686
686
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -869,7 +869,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
869
869
  class="pf-v6-c-menu-toggle pf-m-plain"
870
870
  type="button"
871
871
  aria-expanded="false"
872
- aria-label="Menu toggle"
872
+ aria-label="Table actions"
873
873
  >
874
874
  <span class="pf-v6-c-menu-toggle__icon">
875
875
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
package/docs/components/Masthead/examples/masthead.md CHANGED
@@ -11,12 +11,25 @@ cssPrefix: pf-v6-c-masthead
11
11
  <div class="pf-v6-c-masthead__main">
12
12
  <span class="pf-v6-c-masthead__toggle">
13
13
  <button
14
- class="pf-v6-c-button pf-m-plain"
14
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
15
15
  type="button"
16
16
  aria-label="Global navigation"
17
17
  >
18
18
  <span class="pf-v6-c-button__icon">
19
- <i class="fas fa-bars" aria-hidden="true"></i>
19
+ <svg
20
+ viewBox="0 0 10 10"
21
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
22
+ width="1em"
23
+ height="1em"
24
+ >
25
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
26
+ <path class="pf-v6-c-button--hamburger-icon--middle" d="M1,5 L9,5" />
27
+ <path
28
+ class="pf-v6-c-button--hamburger-icon--arrow"
29
+ d="M1,5 L1,5 L1,5"
30
+ />
31
+ <path class="pf-v6-c-button--hamburger-icon--bottom" d="M9,9 L1,9" />
32
+ </svg>
20
33
  </span>
21
34
  </button>
22
35
  </span>
@@ -109,12 +122,25 @@ cssPrefix: pf-v6-c-masthead
109
122
  <div class="pf-v6-c-masthead__main">
110
123
  <span class="pf-v6-c-masthead__toggle">
111
124
  <button
112
- class="pf-v6-c-button pf-m-plain"
125
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
113
126
  type="button"
114
127
  aria-label="Global navigation"
115
128
  >
116
129
  <span class="pf-v6-c-button__icon">
117
- <i class="fas fa-bars" aria-hidden="true"></i>
130
+ <svg
131
+ viewBox="0 0 10 10"
132
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
133
+ width="1em"
134
+ height="1em"
135
+ >
136
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
137
+ <path class="pf-v6-c-button--hamburger-icon--middle" d="M1,5 L9,5" />
138
+ <path
139
+ class="pf-v6-c-button--hamburger-icon--arrow"
140
+ d="M1,5 L1,5 L1,5"
141
+ />
142
+ <path class="pf-v6-c-button--hamburger-icon--bottom" d="M9,9 L1,9" />
143
+ </svg>
118
144
  </span>
119
145
  </button>
120
146
  </span>
@@ -218,12 +244,25 @@ cssPrefix: pf-v6-c-masthead
218
244
  <div class="pf-v6-c-masthead__main">
219
245
  <span class="pf-v6-c-masthead__toggle">
220
246
  <button
221
- class="pf-v6-c-button pf-m-plain"
247
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
222
248
  type="button"
223
249
  aria-label="Global navigation"
224
250
  >
225
251
  <span class="pf-v6-c-button__icon">
226
- <i class="fas fa-bars" aria-hidden="true"></i>
252
+ <svg
253
+ viewBox="0 0 10 10"
254
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
255
+ width="1em"
256
+ height="1em"
257
+ >
258
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
259
+ <path class="pf-v6-c-button--hamburger-icon--middle" d="M1,5 L9,5" />
260
+ <path
261
+ class="pf-v6-c-button--hamburger-icon--arrow"
262
+ d="M1,5 L1,5 L1,5"
263
+ />
264
+ <path class="pf-v6-c-button--hamburger-icon--bottom" d="M9,9 L1,9" />
265
+ </svg>
227
266
  </span>
228
267
  </button>
229
268
  </span>
@@ -316,12 +355,25 @@ cssPrefix: pf-v6-c-masthead
316
355
  <div class="pf-v6-c-masthead__main">
317
356
  <span class="pf-v6-c-masthead__toggle">
318
357
  <button
319
- class="pf-v6-c-button pf-m-plain"
358
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
320
359
  type="button"
321
360
  aria-label="Global navigation"
322
361
  >
323
362
  <span class="pf-v6-c-button__icon">
324
- <i class="fas fa-bars" aria-hidden="true"></i>
363
+ <svg
364
+ viewBox="0 0 10 10"
365
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
366
+ width="1em"
367
+ height="1em"
368
+ >
369
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
370
+ <path class="pf-v6-c-button--hamburger-icon--middle" d="M1,5 L9,5" />
371
+ <path
372
+ class="pf-v6-c-button--hamburger-icon--arrow"
373
+ d="M1,5 L1,5 L1,5"
374
+ />
375
+ <path class="pf-v6-c-button--hamburger-icon--bottom" d="M9,9 L1,9" />
376
+ </svg>
325
377
  </span>
326
378
  </button>
327
379
  </span>
@@ -417,12 +469,25 @@ cssPrefix: pf-v6-c-masthead
417
469
  <div class="pf-v6-c-masthead__main">
418
470
  <span class="pf-v6-c-masthead__toggle">
419
471
  <button
420
- class="pf-v6-c-button pf-m-plain"
472
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
421
473
  type="button"
422
474
  aria-label="Global navigation"
423
475
  >
424
476
  <span class="pf-v6-c-button__icon">
425
- <i class="fas fa-bars" aria-hidden="true"></i>
477
+ <svg
478
+ viewBox="0 0 10 10"
479
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
480
+ width="1em"
481
+ height="1em"
482
+ >
483
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
484
+ <path class="pf-v6-c-button--hamburger-icon--middle" d="M1,5 L9,5" />
485
+ <path
486
+ class="pf-v6-c-button--hamburger-icon--arrow"
487
+ d="M1,5 L1,5 L1,5"
488
+ />
489
+ <path class="pf-v6-c-button--hamburger-icon--bottom" d="M9,9 L1,9" />
490
+ </svg>
426
491
  </span>
427
492
  </button>
428
493
  </span>
@@ -515,12 +580,25 @@ cssPrefix: pf-v6-c-masthead
515
580
  <div class="pf-v6-c-masthead__main">
516
581
  <span class="pf-v6-c-masthead__toggle">
517
582
  <button
518
- class="pf-v6-c-button pf-m-plain"
583
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
519
584
  type="button"
520
585
  aria-label="Global navigation"
521
586
  >
522
587
  <span class="pf-v6-c-button__icon">
523
- <i class="fas fa-bars" aria-hidden="true"></i>
588
+ <svg
589
+ viewBox="0 0 10 10"
590
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
591
+ width="1em"
592
+ height="1em"
593
+ >
594
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
595
+ <path class="pf-v6-c-button--hamburger-icon--middle" d="M1,5 L9,5" />
596
+ <path
597
+ class="pf-v6-c-button--hamburger-icon--arrow"
598
+ d="M1,5 L1,5 L1,5"
599
+ />
600
+ <path class="pf-v6-c-button--hamburger-icon--bottom" d="M9,9 L1,9" />
601
+ </svg>
524
602
  </span>
525
603
  </button>
526
604
  </span>
package/docs/components/Menu/examples/Menu.md CHANGED
@@ -4579,7 +4579,7 @@ cssPrefix: pf-v6-c-menu
4579
4579
  </span>
4580
4580
  <span class="pf-v6-c-breadcrumb__dropdown">
4581
4581
  <button
4582
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text"
4582
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-small pf-m-plain"
4583
4583
  type="button"
4584
4584
  aria-expanded="false"
4585
4585
  aria-label="Menu toggle"
@@ -4811,7 +4811,7 @@ cssPrefix: pf-v6-c-menu
4811
4811
  </span>
4812
4812
  <span class="pf-v6-c-breadcrumb__dropdown">
4813
4813
  <button
4814
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text"
4814
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-small pf-m-plain"
4815
4815
  type="button"
4816
4816
  aria-expanded="false"
4817
4817
  aria-label="Menu toggle"