@patternfly/patternfly 6.0.0-alpha.164 → 6.0.0-alpha.166

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 (89) hide show
  1. package/components/Button/button.css +33 -14
  2. package/components/Button/button.scss +36 -14
  3. package/components/Panel/panel.css +17 -14
  4. package/components/Panel/panel.scss +17 -14
  5. package/components/_index.css +50 -28
  6. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  7. package/docs/components/ActionList/examples/ActionList.md +60 -20
  8. package/docs/components/Alert/examples/Alert.md +106 -62
  9. package/docs/components/BackToTop/examples/BackToTop.md +5 -3
  10. package/docs/components/Banner/examples/Banner.md +9 -3
  11. package/docs/components/Button/examples/Button.md +536 -367
  12. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  13. package/docs/components/Card/examples/Card.md +43 -29
  14. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +75 -33
  15. package/docs/components/CodeBlock/examples/CodeBlock.md +18 -6
  16. package/docs/components/CodeEditor/examples/CodeEditor.md +44 -22
  17. package/docs/components/ContextSelector/deprecated/context-selector.md +6 -8
  18. package/docs/components/DataList/examples/DataList.md +121 -63
  19. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  20. package/docs/components/DescriptionList/examples/DescriptionList.md +125 -75
  21. package/docs/components/Drawer/examples/Drawer.md +57 -19
  22. package/docs/components/DualListSelector/examples/DualListSelector.md +204 -100
  23. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  24. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  25. package/docs/components/Form/examples/Form.md +53 -19
  26. package/docs/components/Hint/examples/Hint.md +9 -9
  27. package/docs/components/InlineEdit/examples/InlineEdit.md +78 -26
  28. package/docs/components/InputGroup/examples/InputGroup.md +27 -9
  29. package/docs/components/JumpLinks/examples/JumpLinks.md +188 -68
  30. package/docs/components/Label/examples/Label.md +651 -217
  31. package/docs/components/LogViewer/examples/LogViewer.md +218 -86
  32. package/docs/components/Login/examples/Login.md +346 -282
  33. package/docs/components/Masthead/examples/masthead.md +27 -9
  34. package/docs/components/Menu/examples/Menu.md +35 -25
  35. package/docs/components/MenuToggle/examples/MenuToggle.md +3 -1
  36. package/docs/components/ModalBox/examples/ModalBox.md +48 -16
  37. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +48 -16
  38. package/docs/components/Nav/examples/Navigation.md +12 -4
  39. package/docs/components/NotificationBadge/examples/NotificationBadge.md +78 -42
  40. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +6 -2
  41. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  42. package/docs/components/OverflowMenu/examples/overflow-menu.md +48 -16
  43. package/docs/components/Page/examples/Page.md +21 -7
  44. package/docs/components/Pagination/examples/Pagination.md +132 -44
  45. package/docs/components/Panel/examples/Panel.md +1 -0
  46. package/docs/components/Popover/examples/Popover.md +45 -15
  47. package/docs/components/Select/deprecated/Select.md +111 -55
  48. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  49. package/docs/components/Slider/examples/Slider.md +12 -4
  50. package/docs/components/Table/examples/Table.md +363 -208
  51. package/docs/components/Tabs/examples/Tabs.md +1230 -574
  52. package/docs/components/TextInputGroup/examples/TextInputGroup.md +132 -44
  53. package/docs/components/Toolbar/examples/Toolbar.md +120 -64
  54. package/docs/components/TreeView/examples/TreeView.md +12 -4
  55. package/docs/components/Wizard/examples/Wizard.md +105 -38
  56. package/docs/demos/AboutModal/examples/AboutModal.md +9 -3
  57. package/docs/demos/Alert/examples/Alert.md +39 -25
  58. package/docs/demos/BackToTop/examples/BackToTop.md +11 -5
  59. package/docs/demos/Banner/examples/Banner.md +12 -4
  60. package/docs/demos/Button/examples/Button.md +7 -7
  61. package/docs/demos/Card/examples/Card.md +106 -57
  62. package/docs/demos/CardView/examples/CardView.md +30 -13
  63. package/docs/demos/ContextSelector/examples/ContextSelector.md +24 -8
  64. package/docs/demos/Dashboard/examples/Dashboard.md +43 -28
  65. package/docs/demos/DataList/examples/DataList.md +255 -149
  66. package/docs/demos/DescriptionList/examples/DescriptionList.md +21 -7
  67. package/docs/demos/Drawer/examples/Drawer.md +89 -43
  68. package/docs/demos/Form/examples/BasicForms.md +141 -59
  69. package/docs/demos/JumpLinks/examples/JumpLinks.md +222 -109
  70. package/docs/demos/Masthead/examples/Masthead.md +63 -21
  71. package/docs/demos/Modal/examples/Modal.md +99 -37
  72. package/docs/demos/Nav/examples/Nav.md +45 -15
  73. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +58 -43
  74. package/docs/demos/Page/examples/Page.md +54 -21
  75. package/docs/demos/Page/examples/Penta.md +9 -6
  76. package/docs/demos/Panel/Panel.md +88 -0
  77. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  78. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +12 -4
  79. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +306 -133
  80. package/docs/demos/Skeleton/examples/Skeleton.md +6 -2
  81. package/docs/demos/Table/examples/Table.md +474 -210
  82. package/docs/demos/Tabs/examples/Tabs.md +60 -22
  83. package/docs/demos/Toolbar/examples/Toolbar.md +123 -72
  84. package/docs/demos/Wizard/examples/Wizard.md +179 -110
  85. package/package.json +1 -1
  86. package/patternfly-no-globals.css +50 -28
  87. package/patternfly.css +50 -28
  88. package/patternfly.min.css +1 -1
  89. package/patternfly.min.css.map +1 -1
@@ -30,7 +30,9 @@ Inline edit **toggle** can be placed anywhere within `.pf-v6-c-inline-edit`. It
30
30
  aria-label="Edit"
31
31
  aria-labelledby="inline-edit-toggle-example-edit-button inline-edit-toggle-example-label"
32
32
  >
33
- <i class="fas fa-pencil-alt" aria-hidden="true"></i>
33
+ <span class="pf-v6-c-button__text">
34
+ <i class="fas fa-pencil-alt" aria-hidden="true"></i>
35
+ </span>
34
36
  </button>
35
37
  </div>
36
38
  </div>
@@ -59,10 +61,14 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
59
61
  >
60
62
  <div class="pf-v6-c-inline-edit__group pf-m-action-group">
61
63
  <div class="pf-v6-c-inline-edit__action">
62
- <button class="pf-v6-c-button pf-m-primary" type="button">Save</button>
64
+ <button class="pf-v6-c-button pf-m-primary" type="button">
65
+ <span class="pf-v6-c-button__text">Save</span>
66
+ </button>
63
67
  </div>
64
68
  <div class="pf-v6-c-inline-edit__action">
65
- <button class="pf-v6-c-button pf-m-secondary" type="button">Cancel</button>
69
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
70
+ <span class="pf-v6-c-button__text">Cancel</span>
71
+ </button>
66
72
  </div>
67
73
  </div>
68
74
  </div>
@@ -83,7 +89,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
83
89
  type="button"
84
90
  aria-label="Save edits"
85
91
  >
86
- <i class="fas fa-check" aria-hidden="true"></i>
92
+ <span class="pf-v6-c-button__text">
93
+ <i class="fas fa-check" aria-hidden="true"></i>
94
+ </span>
87
95
  </button>
88
96
  </div>
89
97
  <div class="pf-v6-c-inline-edit__action">
@@ -92,7 +100,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
92
100
  type="button"
93
101
  aria-label="Cancel edits"
94
102
  >
95
- <i class="fas fa-times" aria-hidden="true"></i>
103
+ <span class="pf-v6-c-button__text">
104
+ <i class="fas fa-times" aria-hidden="true"></i>
105
+ </span>
96
106
  </button>
97
107
  </div>
98
108
  </div>
@@ -117,7 +127,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
117
127
  aria-label="Edit"
118
128
  aria-labelledby="single-inline-edit-example-edit-button single-inline-edit-example-label"
119
129
  >
120
- <i class="fas fa-pencil-alt" aria-hidden="true"></i>
130
+ <span class="pf-v6-c-button__text">
131
+ <i class="fas fa-pencil-alt" aria-hidden="true"></i>
132
+ </span>
121
133
  </button>
122
134
  </div>
123
135
  </div>
@@ -138,7 +150,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
138
150
  type="button"
139
151
  aria-label="Save edits"
140
152
  >
141
- <i class="fas fa-check" aria-hidden="true"></i>
153
+ <span class="pf-v6-c-button__text">
154
+ <i class="fas fa-check" aria-hidden="true"></i>
155
+ </span>
142
156
  </button>
143
157
  </div>
144
158
  <div class="pf-v6-c-inline-edit__action">
@@ -147,7 +161,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
147
161
  type="button"
148
162
  aria-label="Cancel edits"
149
163
  >
150
- <i class="fas fa-times" aria-hidden="true"></i>
164
+ <span class="pf-v6-c-button__text">
165
+ <i class="fas fa-times" aria-hidden="true"></i>
166
+ </span>
151
167
  </button>
152
168
  </div>
153
169
  </div>
@@ -176,7 +192,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
176
192
  aria-label="Edit"
177
193
  aria-labelledby="single-editable-example-edit-button single-editable-example-label"
178
194
  >
179
- <i class="fas fa-pencil-alt" aria-hidden="true"></i>
195
+ <span class="pf-v6-c-button__text">
196
+ <i class="fas fa-pencil-alt" aria-hidden="true"></i>
197
+ </span>
180
198
  </button>
181
199
  </div>
182
200
  </div>
@@ -197,7 +215,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
197
215
  type="button"
198
216
  aria-label="Save edits"
199
217
  >
200
- <i class="fas fa-check" aria-hidden="true"></i>
218
+ <span class="pf-v6-c-button__text">
219
+ <i class="fas fa-check" aria-hidden="true"></i>
220
+ </span>
201
221
  </button>
202
222
  </div>
203
223
  <div class="pf-v6-c-inline-edit__action">
@@ -206,7 +226,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
206
226
  type="button"
207
227
  aria-label="Cancel edits"
208
228
  >
209
- <i class="fas fa-times" aria-hidden="true"></i>
229
+ <span class="pf-v6-c-button__text">
230
+ <i class="fas fa-times" aria-hidden="true"></i>
231
+ </span>
210
232
  </button>
211
233
  </div>
212
234
  </div>
@@ -247,7 +269,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
247
269
  aria-label="Edit"
248
270
  aria-labelledby="single-inline-edit-with-label-example-label single-inline-edit-with-label-example-edit-button"
249
271
  >
250
- <i class="fas fa-pencil-alt" aria-hidden="true"></i>
272
+ <span class="pf-v6-c-button__text">
273
+ <i class="fas fa-pencil-alt" aria-hidden="true"></i>
274
+ </span>
251
275
  </button>
252
276
  </div>
253
277
  </div>
@@ -270,7 +294,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
270
294
  type="button"
271
295
  aria-label="Save edits"
272
296
  >
273
- <i class="fas fa-check" aria-hidden="true"></i>
297
+ <span class="pf-v6-c-button__text">
298
+ <i class="fas fa-check" aria-hidden="true"></i>
299
+ </span>
274
300
  </button>
275
301
  </div>
276
302
  <div class="pf-v6-c-inline-edit__action">
@@ -279,7 +305,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
279
305
  type="button"
280
306
  aria-label="Cancel edits"
281
307
  >
282
- <i class="fas fa-times" aria-hidden="true"></i>
308
+ <span class="pf-v6-c-button__text">
309
+ <i class="fas fa-times" aria-hidden="true"></i>
310
+ </span>
283
311
  </button>
284
312
  </div>
285
313
  </div>
@@ -309,7 +337,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
309
337
  aria-label="Edit"
310
338
  aria-labelledby="inline-edit-state-valid-label inline-edit-state-valid-edit-button"
311
339
  >
312
- <i class="fas fa-pencil-alt" aria-hidden="true"></i>
340
+ <span class="pf-v6-c-button__text">
341
+ <i class="fas fa-pencil-alt" aria-hidden="true"></i>
342
+ </span>
313
343
  </button>
314
344
  </div>
315
345
  </div>
@@ -331,7 +361,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
331
361
  type="button"
332
362
  aria-label="Save edits"
333
363
  >
334
- <i class="fas fa-check" aria-hidden="true"></i>
364
+ <span class="pf-v6-c-button__text">
365
+ <i class="fas fa-check" aria-hidden="true"></i>
366
+ </span>
335
367
  </button>
336
368
  </div>
337
369
  <div class="pf-v6-c-inline-edit__action">
@@ -340,7 +372,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
340
372
  type="button"
341
373
  aria-label="Cancel edits"
342
374
  >
343
- <i class="fas fa-times" aria-hidden="true"></i>
375
+ <span class="pf-v6-c-button__text">
376
+ <i class="fas fa-times" aria-hidden="true"></i>
377
+ </span>
344
378
  </button>
345
379
  </div>
346
380
  </div>
@@ -370,7 +404,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
370
404
  aria-label="Edit"
371
405
  aria-labelledby="inline-edit-state-invalid-label inline-edit-state-invalid-edit-button"
372
406
  >
373
- <i class="fas fa-pencil-alt" aria-hidden="true"></i>
407
+ <span class="pf-v6-c-button__text">
408
+ <i class="fas fa-pencil-alt" aria-hidden="true"></i>
409
+ </span>
374
410
  </button>
375
411
  </div>
376
412
  </div>
@@ -399,7 +435,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
399
435
  disabled
400
436
  aria-label="Save edits"
401
437
  >
402
- <i class="fas fa-check" aria-hidden="true"></i>
438
+ <span class="pf-v6-c-button__text">
439
+ <i class="fas fa-check" aria-hidden="true"></i>
440
+ </span>
403
441
  </button>
404
442
  </div>
405
443
  <div class="pf-v6-c-inline-edit__action">
@@ -408,7 +446,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
408
446
  type="button"
409
447
  aria-label="Cancel edits"
410
448
  >
411
- <i class="fas fa-times" aria-hidden="true"></i>
449
+ <span class="pf-v6-c-button__text">
450
+ <i class="fas fa-times" aria-hidden="true"></i>
451
+ </span>
412
452
  </button>
413
453
  </div>
414
454
  </div>
@@ -587,7 +627,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
587
627
  type="button"
588
628
  aria-label="Save edits"
589
629
  >
590
- <i class="fas fa-check" aria-hidden="true"></i>
630
+ <span class="pf-v6-c-button__text">
631
+ <i class="fas fa-check" aria-hidden="true"></i>
632
+ </span>
591
633
  </button>
592
634
  </div>
593
635
  <div class="pf-v6-c-inline-edit__action">
@@ -596,7 +638,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
596
638
  type="button"
597
639
  aria-label="Cancel edits"
598
640
  >
599
- <i class="fas fa-times" aria-hidden="true"></i>
641
+ <span class="pf-v6-c-button__text">
642
+ <i class="fas fa-times" aria-hidden="true"></i>
643
+ </span>
600
644
  </button>
601
645
  </div>
602
646
  </div>
@@ -608,7 +652,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
608
652
  aria-label="Edit"
609
653
  aria-labelledby="bulk-edit-table-example-label bulk-edit-table-example-row-1-edit-button"
610
654
  >
611
- <i class="fas fa-pencil-alt" aria-hidden="true"></i>
655
+ <span class="pf-v6-c-button__text">
656
+ <i class="fas fa-pencil-alt" aria-hidden="true"></i>
657
+ </span>
612
658
  </button>
613
659
  </div>
614
660
  </td>
@@ -766,7 +812,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
766
812
  type="button"
767
813
  aria-label="Save edits"
768
814
  >
769
- <i class="fas fa-check" aria-hidden="true"></i>
815
+ <span class="pf-v6-c-button__text">
816
+ <i class="fas fa-check" aria-hidden="true"></i>
817
+ </span>
770
818
  </button>
771
819
  </div>
772
820
  <div class="pf-v6-c-inline-edit__action">
@@ -775,7 +823,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
775
823
  type="button"
776
824
  aria-label="Cancel edits"
777
825
  >
778
- <i class="fas fa-times" aria-hidden="true"></i>
826
+ <span class="pf-v6-c-button__text">
827
+ <i class="fas fa-times" aria-hidden="true"></i>
828
+ </span>
779
829
  </button>
780
830
  </div>
781
831
  </div>
@@ -787,7 +837,9 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
787
837
  aria-label="Edit"
788
838
  aria-labelledby="bulk-edit-table-example-label bulk-edit-table-example-row-2-edit-button"
789
839
  >
790
- <i class="fas fa-pencil-alt" aria-hidden="true"></i>
840
+ <span class="pf-v6-c-button__text">
841
+ <i class="fas fa-pencil-alt" aria-hidden="true"></i>
842
+ </span>
791
843
  </button>
792
844
  </div>
793
845
  </td>
@@ -17,7 +17,9 @@ Use the input group to extend form controls by adding text, buttons, selects, et
17
17
  class="pf-v6-c-button pf-m-control"
18
18
  type="button"
19
19
  id="textAreaButton1"
20
- >Button</button>
20
+ >
21
+ <span class="pf-v6-c-button__text">Button</span>
22
+ </button>
21
23
  </div>
22
24
  <div class="pf-v6-c-input-group__item pf-m-fill">
23
25
  <span class="pf-v6-c-form-control pf-m-resize-both">
@@ -30,7 +32,9 @@ Use the input group to extend form controls by adding text, buttons, selects, et
30
32
  </span>
31
33
  </div>
32
34
  <div class="pf-v6-c-input-group__item">
33
- <button class="pf-v6-c-button pf-m-control" type="button">Button</button>
35
+ <button class="pf-v6-c-button pf-m-control" type="button">
36
+ <span class="pf-v6-c-button__text">Button</span>
37
+ </button>
34
38
  </div>
35
39
  </div>
36
40
  <br />
@@ -50,7 +54,9 @@ Use the input group to extend form controls by adding text, buttons, selects, et
50
54
  class="pf-v6-c-button pf-m-control"
51
55
  type="button"
52
56
  id="textAreaButton2"
53
- >Button</button>
57
+ >
58
+ <span class="pf-v6-c-button__text">Button</span>
59
+ </button>
54
60
  </div>
55
61
  </div>
56
62
  <br />
@@ -60,10 +66,14 @@ Use the input group to extend form controls by adding text, buttons, selects, et
60
66
  class="pf-v6-c-button pf-m-control"
61
67
  type="button"
62
68
  id="textAreaButton3"
63
- >Button</button>
69
+ >
70
+ <span class="pf-v6-c-button__text">Button</span>
71
+ </button>
64
72
  </div>
65
73
  <div class="pf-v6-c-input-group__item">
66
- <button class="pf-v6-c-button pf-m-control" type="button">Button</button>
74
+ <button class="pf-v6-c-button pf-m-control" type="button">
75
+ <span class="pf-v6-c-button__text">Button</span>
76
+ </button>
67
77
  </div>
68
78
  <div class="pf-v6-c-input-group__item pf-m-fill">
69
79
  <span class="pf-v6-c-form-control pf-m-resize-both">
@@ -76,7 +86,9 @@ Use the input group to extend form controls by adding text, buttons, selects, et
76
86
  </span>
77
87
  </div>
78
88
  <div class="pf-v6-c-input-group__item">
79
- <button class="pf-v6-c-button pf-m-control" type="button">Button</button>
89
+ <button class="pf-v6-c-button pf-m-control" type="button">
90
+ <span class="pf-v6-c-button__text">Button</span>
91
+ </button>
80
92
  </div>
81
93
  </div>
82
94
  <br />
@@ -154,7 +166,9 @@ Use the input group to extend form controls by adding text, buttons, selects, et
154
166
  class="pf-v6-c-button pf-m-control"
155
167
  type="button"
156
168
  id="inputSelectButton1"
157
- >Button</button>
169
+ >
170
+ <span class="pf-v6-c-button__text">Button</span>
171
+ </button>
158
172
  </div>
159
173
  </div>
160
174
  <br />
@@ -238,7 +252,9 @@ Use the input group to extend form controls by adding text, buttons, selects, et
238
252
  type="button"
239
253
  aria-label="Popover for input"
240
254
  >
241
- <i class="fas fa-question-circle" aria-hidden="true"></i>
255
+ <span class="pf-v6-c-button__text">
256
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
257
+ </span>
242
258
  </button>
243
259
  </div>
244
260
  </div>
@@ -260,7 +276,9 @@ Use the input group to extend form controls by adding text, buttons, selects, et
260
276
  type="button"
261
277
  aria-label="Popover for input"
262
278
  >
263
- <i class="fas fa-question-circle" aria-hidden="true"></i>
279
+ <span class="pf-v6-c-button__text">
280
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
281
+ </span>
264
282
  </button>
265
283
  </div>
266
284
  </div>