@patternfly/patternfly 6.0.0-alpha.165 → 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 (85) hide show
  1. package/components/Button/button.css +33 -14
  2. package/components/Button/button.scss +36 -14
  3. package/components/_index.css +33 -14
  4. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  5. package/docs/components/ActionList/examples/ActionList.md +60 -20
  6. package/docs/components/Alert/examples/Alert.md +106 -62
  7. package/docs/components/BackToTop/examples/BackToTop.md +5 -3
  8. package/docs/components/Banner/examples/Banner.md +9 -3
  9. package/docs/components/Button/examples/Button.md +536 -367
  10. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  11. package/docs/components/Card/examples/Card.md +43 -29
  12. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +75 -33
  13. package/docs/components/CodeBlock/examples/CodeBlock.md +18 -6
  14. package/docs/components/CodeEditor/examples/CodeEditor.md +44 -22
  15. package/docs/components/ContextSelector/deprecated/context-selector.md +6 -8
  16. package/docs/components/DataList/examples/DataList.md +121 -63
  17. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  18. package/docs/components/DescriptionList/examples/DescriptionList.md +125 -75
  19. package/docs/components/Drawer/examples/Drawer.md +57 -19
  20. package/docs/components/DualListSelector/examples/DualListSelector.md +204 -100
  21. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  22. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  23. package/docs/components/Form/examples/Form.md +53 -19
  24. package/docs/components/Hint/examples/Hint.md +9 -9
  25. package/docs/components/InlineEdit/examples/InlineEdit.md +78 -26
  26. package/docs/components/InputGroup/examples/InputGroup.md +27 -9
  27. package/docs/components/JumpLinks/examples/JumpLinks.md +188 -68
  28. package/docs/components/Label/examples/Label.md +651 -217
  29. package/docs/components/LogViewer/examples/LogViewer.md +218 -86
  30. package/docs/components/Login/examples/Login.md +346 -282
  31. package/docs/components/Masthead/examples/masthead.md +27 -9
  32. package/docs/components/Menu/examples/Menu.md +35 -25
  33. package/docs/components/MenuToggle/examples/MenuToggle.md +3 -1
  34. package/docs/components/ModalBox/examples/ModalBox.md +48 -16
  35. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +48 -16
  36. package/docs/components/Nav/examples/Navigation.md +12 -4
  37. package/docs/components/NotificationBadge/examples/NotificationBadge.md +78 -42
  38. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +6 -2
  39. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  40. package/docs/components/OverflowMenu/examples/overflow-menu.md +48 -16
  41. package/docs/components/Page/examples/Page.md +21 -7
  42. package/docs/components/Pagination/examples/Pagination.md +132 -44
  43. package/docs/components/Popover/examples/Popover.md +45 -15
  44. package/docs/components/Select/deprecated/Select.md +111 -55
  45. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  46. package/docs/components/Slider/examples/Slider.md +12 -4
  47. package/docs/components/Table/examples/Table.md +363 -208
  48. package/docs/components/Tabs/examples/Tabs.md +1230 -574
  49. package/docs/components/TextInputGroup/examples/TextInputGroup.md +132 -44
  50. package/docs/components/Toolbar/examples/Toolbar.md +120 -64
  51. package/docs/components/TreeView/examples/TreeView.md +12 -4
  52. package/docs/components/Wizard/examples/Wizard.md +105 -38
  53. package/docs/demos/AboutModal/examples/AboutModal.md +9 -3
  54. package/docs/demos/Alert/examples/Alert.md +39 -25
  55. package/docs/demos/BackToTop/examples/BackToTop.md +11 -5
  56. package/docs/demos/Banner/examples/Banner.md +12 -4
  57. package/docs/demos/Button/examples/Button.md +7 -7
  58. package/docs/demos/Card/examples/Card.md +106 -57
  59. package/docs/demos/CardView/examples/CardView.md +30 -13
  60. package/docs/demos/ContextSelector/examples/ContextSelector.md +24 -8
  61. package/docs/demos/Dashboard/examples/Dashboard.md +43 -28
  62. package/docs/demos/DataList/examples/DataList.md +255 -149
  63. package/docs/demos/DescriptionList/examples/DescriptionList.md +21 -7
  64. package/docs/demos/Drawer/examples/Drawer.md +89 -43
  65. package/docs/demos/Form/examples/BasicForms.md +141 -59
  66. package/docs/demos/JumpLinks/examples/JumpLinks.md +222 -109
  67. package/docs/demos/Masthead/examples/Masthead.md +63 -21
  68. package/docs/demos/Modal/examples/Modal.md +99 -37
  69. package/docs/demos/Nav/examples/Nav.md +45 -15
  70. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +58 -43
  71. package/docs/demos/Page/examples/Page.md +54 -21
  72. package/docs/demos/Page/examples/Penta.md +9 -6
  73. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  74. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +12 -4
  75. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +306 -133
  76. package/docs/demos/Skeleton/examples/Skeleton.md +6 -2
  77. package/docs/demos/Table/examples/Table.md +474 -210
  78. package/docs/demos/Tabs/examples/Tabs.md +60 -22
  79. package/docs/demos/Toolbar/examples/Toolbar.md +123 -72
  80. package/docs/demos/Wizard/examples/Wizard.md +179 -110
  81. package/package.json +1 -1
  82. package/patternfly-no-globals.css +33 -14
  83. package/patternfly.css +33 -14
  84. package/patternfly.min.css +1 -1
  85. package/patternfly.min.css.map +1 -1
package/docs/components/Alert/examples/Alert.md CHANGED
@@ -76,18 +76,21 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
76
76
  type="button"
77
77
  aria-label="Close success alert: Success alert title"
78
78
  >
79
- <i class="fas fa-times" aria-hidden="true"></i>
79
+ <span class="pf-v6-c-button__text">
80
+ <i class="fas fa-times" aria-hidden="true"></i>
81
+ </span>
80
82
  </button>
81
83
  </div>
82
84
  <div class="pf-v6-c-alert__description">
83
85
  <p>Success alert description. This should tell the user more information about the alert.</p>
84
86
  </div>
85
87
  <div class="pf-v6-c-alert__action-group">
86
- <button
87
- class="pf-v6-c-button pf-m-link pf-m-inline"
88
- type="button"
89
- >View details</button>
90
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
88
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
89
+ <span class="pf-v6-c-button__text">View details</span>
90
+ </button>
91
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
92
+ <span class="pf-v6-c-button__text">Ignore</span>
93
+ </button>
91
94
  </div>
92
95
  </div>
93
96
  <br />
@@ -105,7 +108,9 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
105
108
  type="button"
106
109
  aria-label="Close success alert: Success alert title"
107
110
  >
108
- <i class="fas fa-times" aria-hidden="true"></i>
111
+ <span class="pf-v6-c-button__text">
112
+ <i class="fas fa-times" aria-hidden="true"></i>
113
+ </span>
109
114
  </button>
110
115
  </div>
111
116
  <div class="pf-v6-c-alert__description">
@@ -130,15 +135,18 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
130
135
  type="button"
131
136
  aria-label="Close success alert: Success alert title"
132
137
  >
133
- <i class="fas fa-times" aria-hidden="true"></i>
138
+ <span class="pf-v6-c-button__text">
139
+ <i class="fas fa-times" aria-hidden="true"></i>
140
+ </span>
134
141
  </button>
135
142
  </div>
136
143
  <div class="pf-v6-c-alert__action-group">
137
- <button
138
- class="pf-v6-c-button pf-m-link pf-m-inline"
139
- type="button"
140
- >View details</button>
141
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
144
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
145
+ <span class="pf-v6-c-button__text">View details</span>
146
+ </button>
147
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
148
+ <span class="pf-v6-c-button__text">Ignore</span>
149
+ </button>
142
150
  </div>
143
151
  </div>
144
152
  <br />
@@ -156,7 +164,9 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
156
164
  type="button"
157
165
  aria-label="Close success alert: Success alert title"
158
166
  >
159
- <i class="fas fa-times" aria-hidden="true"></i>
167
+ <span class="pf-v6-c-button__text">
168
+ <i class="fas fa-times" aria-hidden="true"></i>
169
+ </span>
160
170
  </button>
161
171
  </div>
162
172
  </div>
@@ -295,18 +305,21 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
295
305
  type="button"
296
306
  aria-label="Close success alert: Success alert title"
297
307
  >
298
- <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>
299
311
  </button>
300
312
  </div>
301
313
  <div class="pf-v6-c-alert__description">
302
314
  <p>Success alert description. This should tell the user more information about the alert.</p>
303
315
  </div>
304
316
  <div class="pf-v6-c-alert__action-group">
305
- <button
306
- class="pf-v6-c-button pf-m-link pf-m-inline"
307
- type="button"
308
- >View details</button>
309
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
317
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
318
+ <span class="pf-v6-c-button__text">View details</span>
319
+ </button>
320
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
321
+ <span class="pf-v6-c-button__text">Ignore</span>
322
+ </button>
310
323
  </div>
311
324
  </div>
312
325
  <br />
@@ -324,7 +337,9 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
324
337
  type="button"
325
338
  aria-label="Close success alert: Success alert title"
326
339
  >
327
- <i class="fas fa-times" aria-hidden="true"></i>
340
+ <span class="pf-v6-c-button__text">
341
+ <i class="fas fa-times" aria-hidden="true"></i>
342
+ </span>
328
343
  </button>
329
344
  </div>
330
345
  <div class="pf-v6-c-alert__description">
@@ -349,15 +364,18 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
349
364
  type="button"
350
365
  aria-label="Close success alert: Success alert title"
351
366
  >
352
- <i class="fas fa-times" aria-hidden="true"></i>
367
+ <span class="pf-v6-c-button__text">
368
+ <i class="fas fa-times" aria-hidden="true"></i>
369
+ </span>
353
370
  </button>
354
371
  </div>
355
372
  <div class="pf-v6-c-alert__action-group">
356
- <button
357
- class="pf-v6-c-button pf-m-link pf-m-inline"
358
- type="button"
359
- >View details</button>
360
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
373
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
374
+ <span class="pf-v6-c-button__text">View details</span>
375
+ </button>
376
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
377
+ <span class="pf-v6-c-button__text">Ignore</span>
378
+ </button>
361
379
  </div>
362
380
  </div>
363
381
  <br />
@@ -432,8 +450,10 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
432
450
  aria-label="Details"
433
451
  aria-labelledby="alert-expandable-example-1-title alert-expandable-example-1-toggle"
434
452
  >
435
- <span class="pf-v6-c-alert__toggle-icon">
436
- <i class="fas fa-angle-right" aria-hidden="true"></i>
453
+ <span class="pf-v6-c-button__text">
454
+ <span class="pf-v6-c-alert__toggle-icon">
455
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
456
+ </span>
437
457
  </span>
438
458
  </button>
439
459
  </div>
@@ -450,18 +470,21 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
450
470
  type="button"
451
471
  aria-label="Close success alert: Success alert title"
452
472
  >
453
- <i class="fas fa-times" aria-hidden="true"></i>
473
+ <span class="pf-v6-c-button__text">
474
+ <i class="fas fa-times" aria-hidden="true"></i>
475
+ </span>
454
476
  </button>
455
477
  </div>
456
478
  <div class="pf-v6-c-alert__description" hidden>
457
479
  <p>Success alert description. This should tell the user more information about the alert.</p>
458
480
  </div>
459
481
  <div class="pf-v6-c-alert__action-group">
460
- <button
461
- class="pf-v6-c-button pf-m-link pf-m-inline"
462
- type="button"
463
- >View details</button>
464
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
482
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
483
+ <span class="pf-v6-c-button__text">View details</span>
484
+ </button>
485
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
486
+ <span class="pf-v6-c-button__text">Ignore</span>
487
+ </button>
465
488
  </div>
466
489
  </div>
467
490
  <br />
@@ -478,8 +501,10 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
478
501
  aria-label="Details"
479
502
  aria-labelledby="alert-expandable-example-2-title alert-expandable-example-2-toggle"
480
503
  >
481
- <span class="pf-v6-c-alert__toggle-icon">
482
- <i class="fas fa-angle-right" aria-hidden="true"></i>
504
+ <span class="pf-v6-c-button__text">
505
+ <span class="pf-v6-c-alert__toggle-icon">
506
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
507
+ </span>
483
508
  </span>
484
509
  </button>
485
510
  </div>
@@ -496,18 +521,21 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
496
521
  type="button"
497
522
  aria-label="Close success alert: Success alert title"
498
523
  >
499
- <i class="fas fa-times" aria-hidden="true"></i>
524
+ <span class="pf-v6-c-button__text">
525
+ <i class="fas fa-times" aria-hidden="true"></i>
526
+ </span>
500
527
  </button>
501
528
  </div>
502
529
  <div class="pf-v6-c-alert__description">
503
530
  <p>Success alert description. This should tell the user more information about the alert.</p>
504
531
  </div>
505
532
  <div class="pf-v6-c-alert__action-group">
506
- <button
507
- class="pf-v6-c-button pf-m-link pf-m-inline"
508
- type="button"
509
- >View details</button>
510
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
533
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
534
+ <span class="pf-v6-c-button__text">View details</span>
535
+ </button>
536
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
537
+ <span class="pf-v6-c-button__text">Ignore</span>
538
+ </button>
511
539
  </div>
512
540
  </div>
513
541
  <br />
@@ -524,8 +552,10 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
524
552
  aria-label="Details"
525
553
  aria-labelledby="alert-expandable-example-3-title alert-expandable-example-3-toggle"
526
554
  >
527
- <span class="pf-v6-c-alert__toggle-icon">
528
- <i class="fas fa-angle-right" aria-hidden="true"></i>
555
+ <span class="pf-v6-c-button__text">
556
+ <span class="pf-v6-c-alert__toggle-icon">
557
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
558
+ </span>
529
559
  </span>
530
560
  </button>
531
561
  </div>
@@ -542,18 +572,21 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
542
572
  type="button"
543
573
  aria-label="Close success alert: Success alert title"
544
574
  >
545
- <i class="fas fa-times" aria-hidden="true"></i>
575
+ <span class="pf-v6-c-button__text">
576
+ <i class="fas fa-times" aria-hidden="true"></i>
577
+ </span>
546
578
  </button>
547
579
  </div>
548
580
  <div class="pf-v6-c-alert__description" hidden>
549
581
  <p>Success alert description. This should tell the user more information about the alert.</p>
550
582
  </div>
551
583
  <div class="pf-v6-c-alert__action-group">
552
- <button
553
- class="pf-v6-c-button pf-m-link pf-m-inline"
554
- type="button"
555
- >View details</button>
556
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
584
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
585
+ <span class="pf-v6-c-button__text">View details</span>
586
+ </button>
587
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
588
+ <span class="pf-v6-c-button__text">Ignore</span>
589
+ </button>
557
590
  </div>
558
591
  </div>
559
592
  <br />
@@ -570,8 +603,10 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
570
603
  aria-label="Details"
571
604
  aria-labelledby="alert-expandable-example-4-title alert-expandable-example-4-toggle"
572
605
  >
573
- <span class="pf-v6-c-alert__toggle-icon">
574
- <i class="fas fa-angle-right" aria-hidden="true"></i>
606
+ <span class="pf-v6-c-button__text">
607
+ <span class="pf-v6-c-alert__toggle-icon">
608
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
609
+ </span>
575
610
  </span>
576
611
  </button>
577
612
  </div>
@@ -588,18 +623,21 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
588
623
  type="button"
589
624
  aria-label="Close success alert: Success alert title"
590
625
  >
591
- <i class="fas fa-times" aria-hidden="true"></i>
626
+ <span class="pf-v6-c-button__text">
627
+ <i class="fas fa-times" aria-hidden="true"></i>
628
+ </span>
592
629
  </button>
593
630
  </div>
594
631
  <div class="pf-v6-c-alert__description">
595
632
  <p>Success alert description. This should tell the user more information about the alert.</p>
596
633
  </div>
597
634
  <div class="pf-v6-c-alert__action-group">
598
- <button
599
- class="pf-v6-c-button pf-m-link pf-m-inline"
600
- type="button"
601
- >View details</button>
602
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
635
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
636
+ <span class="pf-v6-c-button__text">View details</span>
637
+ </button>
638
+ <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
639
+ <span class="pf-v6-c-button__text">Ignore</span>
640
+ </button>
603
641
  </div>
604
642
  </div>
605
643
 
@@ -697,7 +735,9 @@ For sighted users, interactive elements can be included in this message in one o
697
735
  type="button"
698
736
  aria-label="Close success alert: Success alert title"
699
737
  >
700
- <i class="fas fa-times" aria-hidden="true"></i>
738
+ <span class="pf-v6-c-button__text">
739
+ <i class="fas fa-times" aria-hidden="true"></i>
740
+ </span>
701
741
  </button>
702
742
  </div>
703
743
  </div>
@@ -718,7 +758,9 @@ For sighted users, interactive elements can be included in this message in one o
718
758
  type="button"
719
759
  aria-label="Close success alert: Success alert title"
720
760
  >
721
- <i class="fas fa-times" aria-hidden="true"></i>
761
+ <span class="pf-v6-c-button__text">
762
+ <i class="fas fa-times" aria-hidden="true"></i>
763
+ </span>
722
764
  </button>
723
765
  </div>
724
766
  </div>
@@ -745,7 +787,9 @@ For sighted users, interactive elements can be included in this message in one o
745
787
  type="button"
746
788
  aria-label="Close success alert: Success alert title"
747
789
  >
748
- <i class="fas fa-times" aria-hidden="true"></i>
790
+ <span class="pf-v6-c-button__text">
791
+ <i class="fas fa-times" aria-hidden="true"></i>
792
+ </span>
749
793
  </button>
750
794
  </div>
751
795
  </div>
package/docs/components/BackToTop/examples/BackToTop.md CHANGED
@@ -11,9 +11,11 @@ cssPrefix: pf-v6-c-back-to-top
11
11
  ```html
12
12
  <div class="pf-v6-c-back-to-top">
13
13
  <a class="pf-v6-c-button pf-m-primary" href="#">
14
- Back to top
15
- <span class="pf-v6-c-button__icon pf-m-end">
16
- <i class="fas fa-angle-up" aria-hidden="true"></i>
14
+ <span class="pf-v6-c-button__text">
15
+ Back to top
16
+ <span class="pf-v6-c-button__icon pf-m-start pf-m-end">
17
+ <i class="fas fa-angle-up" aria-hidden="true"></i>
18
+ </span>
17
19
  </span>
18
20
  </a>
19
21
  </div>
package/docs/components/Banner/examples/Banner.md CHANGED
@@ -69,7 +69,9 @@ Banners can be styled with one of 9 different nonstatus colors. A nonstatus bann
69
69
  <button
70
70
  class="pf-v6-c-button pf-m-inline pf-m-link"
71
71
  type="button"
72
- >inline link button</button>
72
+ >
73
+ <span class="pf-v6-c-button__text">inline link button</span>
74
+ </button>
73
75
  </div>
74
76
  <br />
75
77
  <div class="pf-v6-c-banner pf-m-yellow">
@@ -77,7 +79,9 @@ Banners can be styled with one of 9 different nonstatus colors. A nonstatus bann
77
79
  <a
78
80
  class="pf-v6-c-button pf-m-inline pf-m-link"
79
81
  href="https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples"
80
- >inline link button (anchor)</a>
82
+ >
83
+ <span class="pf-v6-c-button__text">inline link button (anchor)</span>
84
+ </a>
81
85
  </div>
82
86
  <br />
83
87
  <div class="pf-v6-c-banner pf-m-red">
@@ -86,7 +90,9 @@ Banners can be styled with one of 9 different nonstatus colors. A nonstatus bann
86
90
  class="pf-v6-c-button pf-m-link pf-m-inline"
87
91
  type="button"
88
92
  disabled
89
- >disabled inline link button</button>
93
+ >
94
+ <span class="pf-v6-c-button__text">disabled inline link button</span>
95
+ </button>
90
96
  </div>
91
97
 
92
98
  ```