@patternfly/patternfly 6.0.0-alpha.173 → 6.0.0-alpha.175

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 (95) hide show
  1. package/components/Button/button.css +5 -1
  2. package/components/Button/button.scss +5 -1
  3. package/components/Card/card.css +2 -2
  4. package/components/Card/card.scss +1 -1
  5. package/components/ClipboardCopy/clipboard-copy.css +2 -2
  6. package/components/ClipboardCopy/clipboard-copy.scss +2 -2
  7. package/components/Content/content.css +19 -43
  8. package/components/Content/content.scss +17 -60
  9. package/components/JumpLinks/jump-links.css +0 -7
  10. package/components/JumpLinks/jump-links.scss +0 -9
  11. package/components/Label/label.css +2 -2
  12. package/components/Label/label.scss +2 -2
  13. package/components/List/list.css +33 -40
  14. package/components/List/list.scss +39 -48
  15. package/components/NumberInput/number-input.css +0 -1
  16. package/components/NumberInput/number-input.scss +0 -1
  17. package/components/Tabs/tabs.css +1 -18
  18. package/components/Tabs/tabs.scss +1 -18
  19. package/components/_index.css +64 -116
  20. package/docs/components/AboutModalBox/examples/AboutModalBox.md +1 -1
  21. package/docs/components/ActionList/examples/ActionList.md +7 -7
  22. package/docs/components/Alert/examples/Alert.md +44 -46
  23. package/docs/components/BackToTop/examples/BackToTop.md +3 -5
  24. package/docs/components/Banner/examples/Banner.md +1 -1
  25. package/docs/components/Button/examples/Button.md +35 -35
  26. package/docs/components/CalendarMonth/examples/CalendarMonth.md +8 -8
  27. package/docs/components/Card/examples/Card.md +36 -20
  28. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +32 -29
  29. package/docs/components/CodeBlock/examples/CodeBlock.md +6 -6
  30. package/docs/components/CodeEditor/examples/CodeEditor.md +18 -21
  31. package/docs/components/DataList/examples/DataList.md +17 -17
  32. package/docs/components/DatePicker/examples/DatePicker.md +6 -6
  33. package/docs/components/DescriptionList/examples/DescriptionList.md +100 -150
  34. package/docs/components/Drawer/examples/Drawer.md +19 -19
  35. package/docs/components/DualListSelector/examples/DualListSelector.md +84 -84
  36. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  37. package/docs/components/Form/examples/Form.md +18 -19
  38. package/docs/components/Hint/examples/Hint.md +2 -2
  39. package/docs/components/InlineEdit/examples/InlineEdit.md +24 -24
  40. package/docs/components/InputGroup/examples/InputGroup.md +2 -2
  41. package/docs/components/JumpLinks/examples/JumpLinks.md +8 -8
  42. package/docs/components/Label/examples/Label.md +217 -217
  43. package/docs/components/LogViewer/examples/LogViewer.md +77 -97
  44. package/docs/components/Login/examples/Login.md +37 -32
  45. package/docs/components/Masthead/examples/masthead.md +6 -6
  46. package/docs/components/Menu/examples/Menu.md +10 -10
  47. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -1
  48. package/docs/components/ModalBox/examples/ModalBox.md +17 -17
  49. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +9 -9
  50. package/docs/components/Nav/examples/Navigation.md +4 -4
  51. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +2 -2
  52. package/docs/components/NumberInput/examples/NumberInput.md +24 -24
  53. package/docs/components/OverflowMenu/examples/overflow-menu.md +6 -6
  54. package/docs/components/Page/examples/Page.md +7 -7
  55. package/docs/components/Pagination/examples/Pagination.md +53 -44
  56. package/docs/components/Popover/examples/Popover.md +30 -15
  57. package/docs/components/Slider/examples/Slider.md +8 -8
  58. package/docs/components/Table/examples/Table.md +433 -203
  59. package/docs/components/Tabs/examples/Tabs.md +364 -358
  60. package/docs/components/TextInputGroup/examples/TextInputGroup.md +364 -404
  61. package/docs/components/Toolbar/examples/Toolbar.md +59 -59
  62. package/docs/components/TreeView/examples/TreeView.md +4 -4
  63. package/docs/components/Wizard/examples/Wizard.md +10 -10
  64. package/docs/demos/AboutModal/examples/AboutModal.md +2 -2
  65. package/docs/demos/Alert/examples/Alert.md +6 -6
  66. package/docs/demos/BackToTop/examples/BackToTop.md +4 -6
  67. package/docs/demos/Banner/examples/Banner.md +2 -2
  68. package/docs/demos/Button/examples/Button.md +1 -1
  69. package/docs/demos/Card/examples/Card.md +54 -79
  70. package/docs/demos/CardView/examples/CardView.md +8 -7
  71. package/docs/demos/Dashboard/examples/Dashboard.md +25 -37
  72. package/docs/demos/DataList/examples/DataList.md +38 -34
  73. package/docs/demos/DescriptionList/examples/DescriptionList.md +4 -4
  74. package/docs/demos/Drawer/examples/Drawer.md +8 -8
  75. package/docs/demos/Form/examples/BasicForms.md +69 -86
  76. package/docs/demos/JumpLinks/examples/JumpLinks.md +14 -20
  77. package/docs/demos/Masthead/examples/Masthead.md +13 -13
  78. package/docs/demos/Modal/examples/Modal.md +15 -15
  79. package/docs/demos/Nav/examples/Nav.md +9 -9
  80. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
  81. package/docs/demos/Page/examples/Page.md +9 -9
  82. package/docs/demos/Page/examples/Penta.md +2 -2
  83. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +3 -3
  84. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
  85. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +35 -35
  86. package/docs/demos/Skeleton/examples/Skeleton.md +1 -1
  87. package/docs/demos/Table/examples/Table.md +132 -115
  88. package/docs/demos/Tabs/examples/Tabs.md +11 -11
  89. package/docs/demos/Toolbar/examples/Toolbar.md +37 -36
  90. package/docs/demos/Wizard/examples/Wizard.md +22 -23
  91. package/package.json +1 -1
  92. package/patternfly-no-globals.css +64 -116
  93. package/patternfly.css +64 -116
  94. package/patternfly.min.css +1 -1
  95. package/patternfly.min.css.map +1 -1
package/docs/components/Alert/examples/Alert.md CHANGED
@@ -76,7 +76,7 @@ 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
- <span class="pf-v6-c-button__text">
79
+ <span class="pf-v6-c-button__icon">
80
80
  <i class="fas fa-times" aria-hidden="true"></i>
81
81
  </span>
82
82
  </button>
@@ -85,10 +85,10 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
85
85
  <p>Success alert description. This should tell the user more information about the alert.</p>
86
86
  </div>
87
87
  <div class="pf-v6-c-alert__action-group">
88
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
88
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
89
89
  <span class="pf-v6-c-button__text">View details</span>
90
90
  </button>
91
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
91
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
92
92
  <span class="pf-v6-c-button__text">Ignore</span>
93
93
  </button>
94
94
  </div>
@@ -108,7 +108,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
108
108
  type="button"
109
109
  aria-label="Close success alert: Success alert title"
110
110
  >
111
- <span class="pf-v6-c-button__text">
111
+ <span class="pf-v6-c-button__icon">
112
112
  <i class="fas fa-times" aria-hidden="true"></i>
113
113
  </span>
114
114
  </button>
@@ -135,16 +135,16 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
135
135
  type="button"
136
136
  aria-label="Close success alert: Success alert title"
137
137
  >
138
- <span class="pf-v6-c-button__text">
138
+ <span class="pf-v6-c-button__icon">
139
139
  <i class="fas fa-times" aria-hidden="true"></i>
140
140
  </span>
141
141
  </button>
142
142
  </div>
143
143
  <div class="pf-v6-c-alert__action-group">
144
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
144
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
145
145
  <span class="pf-v6-c-button__text">View details</span>
146
146
  </button>
147
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
147
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
148
148
  <span class="pf-v6-c-button__text">Ignore</span>
149
149
  </button>
150
150
  </div>
@@ -164,7 +164,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
164
164
  type="button"
165
165
  aria-label="Close success alert: Success alert title"
166
166
  >
167
- <span class="pf-v6-c-button__text">
167
+ <span class="pf-v6-c-button__icon">
168
168
  <i class="fas fa-times" aria-hidden="true"></i>
169
169
  </span>
170
170
  </button>
@@ -305,7 +305,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
305
305
  type="button"
306
306
  aria-label="Close success alert: Success alert title"
307
307
  >
308
- <span class="pf-v6-c-button__text">
308
+ <span class="pf-v6-c-button__icon">
309
309
  <i class="fas fa-times" aria-hidden="true"></i>
310
310
  </span>
311
311
  </button>
@@ -314,10 +314,10 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
314
314
  <p>Success alert description. This should tell the user more information about the alert.</p>
315
315
  </div>
316
316
  <div class="pf-v6-c-alert__action-group">
317
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
317
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
318
318
  <span class="pf-v6-c-button__text">View details</span>
319
319
  </button>
320
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
320
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
321
321
  <span class="pf-v6-c-button__text">Ignore</span>
322
322
  </button>
323
323
  </div>
@@ -337,7 +337,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
337
337
  type="button"
338
338
  aria-label="Close success alert: Success alert title"
339
339
  >
340
- <span class="pf-v6-c-button__text">
340
+ <span class="pf-v6-c-button__icon">
341
341
  <i class="fas fa-times" aria-hidden="true"></i>
342
342
  </span>
343
343
  </button>
@@ -364,16 +364,16 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
364
364
  type="button"
365
365
  aria-label="Close success alert: Success alert title"
366
366
  >
367
- <span class="pf-v6-c-button__text">
367
+ <span class="pf-v6-c-button__icon">
368
368
  <i class="fas fa-times" aria-hidden="true"></i>
369
369
  </span>
370
370
  </button>
371
371
  </div>
372
372
  <div class="pf-v6-c-alert__action-group">
373
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
373
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
374
374
  <span class="pf-v6-c-button__text">View details</span>
375
375
  </button>
376
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
376
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
377
377
  <span class="pf-v6-c-button__text">Ignore</span>
378
378
  </button>
379
379
  </div>
@@ -444,13 +444,12 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
444
444
  <div class="pf-v6-c-alert__toggle">
445
445
  <button
446
446
  class="pf-v6-c-button pf-m-plain"
447
+ id&#x26;#x3D;&#x26;quot;alert-expandable-example-1-toggle&#x26;quot;
447
448
  type="button"
448
- aria-expanded="false"
449
- id="alert-expandable-example-1-toggle"
450
- aria-label="Details"
451
449
  aria-labelledby="alert-expandable-example-1-title alert-expandable-example-1-toggle"
450
+ aria-label="Details"
452
451
  >
453
- <span class="pf-v6-c-button__text">
452
+ <span class="pf-v6-c-button__icon">
454
453
  <span class="pf-v6-c-alert__toggle-icon">
455
454
  <i class="fas fa-angle-right" aria-hidden="true"></i>
456
455
  </span>
@@ -470,7 +469,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
470
469
  type="button"
471
470
  aria-label="Close success alert: Success alert title"
472
471
  >
473
- <span class="pf-v6-c-button__text">
472
+ <span class="pf-v6-c-button__icon">
474
473
  <i class="fas fa-times" aria-hidden="true"></i>
475
474
  </span>
476
475
  </button>
@@ -479,10 +478,10 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
479
478
  <p>Success alert description. This should tell the user more information about the alert.</p>
480
479
  </div>
481
480
  <div class="pf-v6-c-alert__action-group">
482
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
481
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
483
482
  <span class="pf-v6-c-button__text">View details</span>
484
483
  </button>
485
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
484
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
486
485
  <span class="pf-v6-c-button__text">Ignore</span>
487
486
  </button>
488
487
  </div>
@@ -494,14 +493,14 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
494
493
  >
495
494
  <div class="pf-v6-c-alert__toggle">
496
495
  <button
497
- class="pf-v6-c-button pf-m-plain"
496
+ class="pf-v6-c-button pf-m-expanded pf-m-plain"
497
+ id&#x26;#x3D;&#x26;quot;alert-expandable-example-2-toggle&#x26;quot;
498
498
  type="button"
499
499
  aria-expanded="true"
500
- id="alert-expandable-example-2-toggle"
501
- aria-label="Details"
502
500
  aria-labelledby="alert-expandable-example-2-title alert-expandable-example-2-toggle"
501
+ aria-label="Details"
503
502
  >
504
- <span class="pf-v6-c-button__text">
503
+ <span class="pf-v6-c-button__icon">
505
504
  <span class="pf-v6-c-alert__toggle-icon">
506
505
  <i class="fas fa-angle-right" aria-hidden="true"></i>
507
506
  </span>
@@ -521,7 +520,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
521
520
  type="button"
522
521
  aria-label="Close success alert: Success alert title"
523
522
  >
524
- <span class="pf-v6-c-button__text">
523
+ <span class="pf-v6-c-button__icon">
525
524
  <i class="fas fa-times" aria-hidden="true"></i>
526
525
  </span>
527
526
  </button>
@@ -530,10 +529,10 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
530
529
  <p>Success alert description. This should tell the user more information about the alert.</p>
531
530
  </div>
532
531
  <div class="pf-v6-c-alert__action-group">
533
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
532
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
534
533
  <span class="pf-v6-c-button__text">View details</span>
535
534
  </button>
536
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
535
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
537
536
  <span class="pf-v6-c-button__text">Ignore</span>
538
537
  </button>
539
538
  </div>
@@ -546,13 +545,12 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
546
545
  <div class="pf-v6-c-alert__toggle">
547
546
  <button
548
547
  class="pf-v6-c-button pf-m-plain"
548
+ id&#x26;#x3D;&#x26;quot;alert-expandable-example-3-toggle&#x26;quot;
549
549
  type="button"
550
- aria-expanded="false"
551
- id="alert-expandable-example-3-toggle"
552
- aria-label="Details"
553
550
  aria-labelledby="alert-expandable-example-3-title alert-expandable-example-3-toggle"
551
+ aria-label="Details"
554
552
  >
555
- <span class="pf-v6-c-button__text">
553
+ <span class="pf-v6-c-button__icon">
556
554
  <span class="pf-v6-c-alert__toggle-icon">
557
555
  <i class="fas fa-angle-right" aria-hidden="true"></i>
558
556
  </span>
@@ -572,7 +570,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
572
570
  type="button"
573
571
  aria-label="Close success alert: Success alert title"
574
572
  >
575
- <span class="pf-v6-c-button__text">
573
+ <span class="pf-v6-c-button__icon">
576
574
  <i class="fas fa-times" aria-hidden="true"></i>
577
575
  </span>
578
576
  </button>
@@ -581,10 +579,10 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
581
579
  <p>Success alert description. This should tell the user more information about the alert.</p>
582
580
  </div>
583
581
  <div class="pf-v6-c-alert__action-group">
584
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
582
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
585
583
  <span class="pf-v6-c-button__text">View details</span>
586
584
  </button>
587
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
585
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
588
586
  <span class="pf-v6-c-button__text">Ignore</span>
589
587
  </button>
590
588
  </div>
@@ -596,14 +594,14 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
596
594
  >
597
595
  <div class="pf-v6-c-alert__toggle">
598
596
  <button
599
- class="pf-v6-c-button pf-m-plain"
597
+ class="pf-v6-c-button pf-m-expanded pf-m-plain"
598
+ id&#x26;#x3D;&#x26;quot;alert-expandable-example-4-toggle&#x26;quot;
600
599
  type="button"
601
600
  aria-expanded="true"
602
- id="alert-expandable-example-4-toggle"
603
- aria-label="Details"
604
601
  aria-labelledby="alert-expandable-example-4-title alert-expandable-example-4-toggle"
602
+ aria-label="Details"
605
603
  >
606
- <span class="pf-v6-c-button__text">
604
+ <span class="pf-v6-c-button__icon">
607
605
  <span class="pf-v6-c-alert__toggle-icon">
608
606
  <i class="fas fa-angle-right" aria-hidden="true"></i>
609
607
  </span>
@@ -623,7 +621,7 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
623
621
  type="button"
624
622
  aria-label="Close success alert: Success alert title"
625
623
  >
626
- <span class="pf-v6-c-button__text">
624
+ <span class="pf-v6-c-button__icon">
627
625
  <i class="fas fa-times" aria-hidden="true"></i>
628
626
  </span>
629
627
  </button>
@@ -632,10 +630,10 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
632
630
  <p>Success alert description. This should tell the user more information about the alert.</p>
633
631
  </div>
634
632
  <div class="pf-v6-c-alert__action-group">
635
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
633
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
636
634
  <span class="pf-v6-c-button__text">View details</span>
637
635
  </button>
638
- <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">
636
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
639
637
  <span class="pf-v6-c-button__text">Ignore</span>
640
638
  </button>
641
639
  </div>
@@ -735,7 +733,7 @@ For sighted users, interactive elements can be included in this message in one o
735
733
  type="button"
736
734
  aria-label="Close success alert: Success alert title"
737
735
  >
738
- <span class="pf-v6-c-button__text">
736
+ <span class="pf-v6-c-button__icon">
739
737
  <i class="fas fa-times" aria-hidden="true"></i>
740
738
  </span>
741
739
  </button>
@@ -758,7 +756,7 @@ For sighted users, interactive elements can be included in this message in one o
758
756
  type="button"
759
757
  aria-label="Close success alert: Success alert title"
760
758
  >
761
- <span class="pf-v6-c-button__text">
759
+ <span class="pf-v6-c-button__icon">
762
760
  <i class="fas fa-times" aria-hidden="true"></i>
763
761
  </span>
764
762
  </button>
@@ -787,7 +785,7 @@ For sighted users, interactive elements can be included in this message in one o
787
785
  type="button"
788
786
  aria-label="Close success alert: Success alert title"
789
787
  >
790
- <span class="pf-v6-c-button__text">
788
+ <span class="pf-v6-c-button__icon">
791
789
  <i class="fas fa-times" aria-hidden="true"></i>
792
790
  </span>
793
791
  </button>
package/docs/components/BackToTop/examples/BackToTop.md CHANGED
@@ -11,11 +11,9 @@ 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
- <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>
14
+ <span class="pf-v6-c-button__text">Back to top</span>
15
+ <span class="pf-v6-c-button__icon pf-m-end">
16
+ <i class="fas fa-angle-up" aria-hidden="true"></i>
19
17
  </span>
20
18
  </a>
21
19
  </div>
package/docs/components/Banner/examples/Banner.md CHANGED
@@ -87,7 +87,7 @@ Banners can be styled with one of 9 different nonstatus colors. A nonstatus bann
87
87
  <div class="pf-v6-c-banner pf-m-red">
88
88
  Red banner with a
89
89
  <button
90
- class="pf-v6-c-button pf-m-link pf-m-inline"
90
+ class="pf-v6-c-button pf-m-inline pf-m-link"
91
91
  type="button"
92
92
  disabled
93
93
  >
package/docs/components/Button/examples/Button.md CHANGED
@@ -49,7 +49,7 @@ cssPrefix: pf-v6-c-button
49
49
  </button>
50
50
 
51
51
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
52
- <span class="pf-v6-c-button__icon pf-m-start">
52
+ <span class="pf-v6-c-button__icon">
53
53
  <i class="fas fa-times" aria-hidden="true"></i>
54
54
  </span>
55
55
  </button>
@@ -66,7 +66,7 @@ cssPrefix: pf-v6-c-button
66
66
  type="button"
67
67
  aria-label="Copy input"
68
68
  >
69
- <span class="pf-v6-c-button__icon pf-m-start">
69
+ <span class="pf-v6-c-button__icon">
70
70
  <i class="fas fa-copy" aria-hidden="true"></i>
71
71
  </span>
72
72
  </button>
@@ -144,7 +144,7 @@ cssPrefix: pf-v6-c-button
144
144
  </button>
145
145
 
146
146
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
147
- <span class="pf-v6-c-button__icon pf-m-start">
147
+ <span class="pf-v6-c-button__icon">
148
148
  <i class="fas fa-times" aria-hidden="true"></i>
149
149
  </span>
150
150
  </button>
@@ -164,7 +164,7 @@ cssPrefix: pf-v6-c-button
164
164
  type="button"
165
165
  aria-label="Copy input"
166
166
  >
167
- <span class="pf-v6-c-button__icon pf-m-start">
167
+ <span class="pf-v6-c-button__icon">
168
168
  <i class="fas fa-copy" aria-hidden="true"></i>
169
169
  </span>
170
170
  </button>
@@ -242,7 +242,7 @@ cssPrefix: pf-v6-c-button
242
242
  </button>
243
243
 
244
244
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
245
- <span class="pf-v6-c-button__icon pf-m-end">
245
+ <span class="pf-v6-c-button__icon">
246
246
  <i class="fas fa-times" aria-hidden="true"></i>
247
247
  </span>
248
248
  </button>
@@ -262,7 +262,7 @@ cssPrefix: pf-v6-c-button
262
262
  type="button"
263
263
  aria-label="Copy input"
264
264
  >
265
- <span class="pf-v6-c-button__icon pf-m-end">
265
+ <span class="pf-v6-c-button__icon">
266
266
  <i class="fas fa-copy" aria-hidden="true"></i>
267
267
  </span>
268
268
  </button>
@@ -319,7 +319,7 @@ cssPrefix: pf-v6-c-button
319
319
  type="button"
320
320
  aria-label="Remove"
321
321
  >
322
- <span class="pf-v6-c-button__icon pf-m-start">
322
+ <span class="pf-v6-c-button__icon">
323
323
  <i class="fas fa-times" aria-hidden="true"></i>
324
324
  </span>
325
325
  </button>
@@ -336,7 +336,7 @@ cssPrefix: pf-v6-c-button
336
336
  type="button"
337
337
  aria-label="Copy input"
338
338
  >
339
- <span class="pf-v6-c-button__icon pf-m-start">
339
+ <span class="pf-v6-c-button__icon">
340
340
  <i class="fas fa-copy" aria-hidden="true"></i>
341
341
  </span>
342
342
  </button>
@@ -421,7 +421,7 @@ cssPrefix: pf-v6-c-button
421
421
  type="button"
422
422
  aria-label="Remove"
423
423
  >
424
- <span class="pf-v6-c-button__icon pf-m-start">
424
+ <span class="pf-v6-c-button__icon">
425
425
  <i class="fas fa-times" aria-hidden="true"></i>
426
426
  </span>
427
427
  </button>
@@ -441,7 +441,7 @@ cssPrefix: pf-v6-c-button
441
441
  type="button"
442
442
  aria-label="Copy input"
443
443
  >
444
- <span class="pf-v6-c-button__icon pf-m-start">
444
+ <span class="pf-v6-c-button__icon">
445
445
  <i class="fas fa-copy" aria-hidden="true"></i>
446
446
  </span>
447
447
  </button>
@@ -526,7 +526,7 @@ cssPrefix: pf-v6-c-button
526
526
  type="button"
527
527
  aria-label="Remove"
528
528
  >
529
- <span class="pf-v6-c-button__icon pf-m-end">
529
+ <span class="pf-v6-c-button__icon">
530
530
  <i class="fas fa-times" aria-hidden="true"></i>
531
531
  </span>
532
532
  </button>
@@ -546,7 +546,7 @@ cssPrefix: pf-v6-c-button
546
546
  type="button"
547
547
  aria-label="Copy input"
548
548
  >
549
- <span class="pf-v6-c-button__icon pf-m-end">
549
+ <span class="pf-v6-c-button__icon">
550
550
  <i class="fas fa-copy" aria-hidden="true"></i>
551
551
  </span>
552
552
  </button>
@@ -603,7 +603,7 @@ cssPrefix: pf-v6-c-button
603
603
  type="button"
604
604
  aria-label="Remove"
605
605
  >
606
- <span class="pf-v6-c-button__icon pf-m-start">
606
+ <span class="pf-v6-c-button__icon">
607
607
  <i class="fas fa-times" aria-hidden="true"></i>
608
608
  </span>
609
609
  </button>
@@ -620,7 +620,7 @@ cssPrefix: pf-v6-c-button
620
620
  type="button"
621
621
  aria-label="Copy input"
622
622
  >
623
- <span class="pf-v6-c-button__icon pf-m-start">
623
+ <span class="pf-v6-c-button__icon">
624
624
  <i class="fas fa-copy" aria-hidden="true"></i>
625
625
  </span>
626
626
  </button>
@@ -705,7 +705,7 @@ cssPrefix: pf-v6-c-button
705
705
  type="button"
706
706
  aria-label="Remove"
707
707
  >
708
- <span class="pf-v6-c-button__icon pf-m-start">
708
+ <span class="pf-v6-c-button__icon">
709
709
  <i class="fas fa-times" aria-hidden="true"></i>
710
710
  </span>
711
711
  </button>
@@ -725,7 +725,7 @@ cssPrefix: pf-v6-c-button
725
725
  type="button"
726
726
  aria-label="Copy input"
727
727
  >
728
- <span class="pf-v6-c-button__icon pf-m-start">
728
+ <span class="pf-v6-c-button__icon">
729
729
  <i class="fas fa-copy" aria-hidden="true"></i>
730
730
  </span>
731
731
  </button>
@@ -810,7 +810,7 @@ cssPrefix: pf-v6-c-button
810
810
  type="button"
811
811
  aria-label="Remove"
812
812
  >
813
- <span class="pf-v6-c-button__icon pf-m-end">
813
+ <span class="pf-v6-c-button__icon">
814
814
  <i class="fas fa-times" aria-hidden="true"></i>
815
815
  </span>
816
816
  </button>
@@ -830,7 +830,7 @@ cssPrefix: pf-v6-c-button
830
830
  type="button"
831
831
  aria-label="Copy input"
832
832
  >
833
- <span class="pf-v6-c-button__icon pf-m-end">
833
+ <span class="pf-v6-c-button__icon">
834
834
  <i class="fas fa-copy" aria-hidden="true"></i>
835
835
  </span>
836
836
  </button>
@@ -889,7 +889,7 @@ cssPrefix: pf-v6-c-button
889
889
  aria-label="Remove"
890
890
  disabled
891
891
  >
892
- <span class="pf-v6-c-button__icon pf-m-start">
892
+ <span class="pf-v6-c-button__icon">
893
893
  <i class="fas fa-times" aria-hidden="true"></i>
894
894
  </span>
895
895
  </button>
@@ -907,7 +907,7 @@ cssPrefix: pf-v6-c-button
907
907
  aria-label="Copy input"
908
908
  disabled
909
909
  >
910
- <span class="pf-v6-c-button__icon pf-m-start">
910
+ <span class="pf-v6-c-button__icon">
911
911
  <i class="fas fa-copy" aria-hidden="true"></i>
912
912
  </span>
913
913
  </button>
@@ -994,7 +994,7 @@ cssPrefix: pf-v6-c-button
994
994
  aria-label="Remove"
995
995
  disabled
996
996
  >
997
- <span class="pf-v6-c-button__icon pf-m-start">
997
+ <span class="pf-v6-c-button__icon">
998
998
  <i class="fas fa-times" aria-hidden="true"></i>
999
999
  </span>
1000
1000
  </button>
@@ -1015,7 +1015,7 @@ cssPrefix: pf-v6-c-button
1015
1015
  aria-label="Copy input"
1016
1016
  disabled
1017
1017
  >
1018
- <span class="pf-v6-c-button__icon pf-m-start">
1018
+ <span class="pf-v6-c-button__icon">
1019
1019
  <i class="fas fa-copy" aria-hidden="true"></i>
1020
1020
  </span>
1021
1021
  </button>
@@ -1102,7 +1102,7 @@ cssPrefix: pf-v6-c-button
1102
1102
  aria-label="Remove"
1103
1103
  disabled
1104
1104
  >
1105
- <span class="pf-v6-c-button__icon pf-m-end">
1105
+ <span class="pf-v6-c-button__icon">
1106
1106
  <i class="fas fa-times" aria-hidden="true"></i>
1107
1107
  </span>
1108
1108
  </button>
@@ -1123,7 +1123,7 @@ cssPrefix: pf-v6-c-button
1123
1123
  aria-label="Copy input"
1124
1124
  disabled
1125
1125
  >
1126
- <span class="pf-v6-c-button__icon pf-m-end">
1126
+ <span class="pf-v6-c-button__icon">
1127
1127
  <i class="fas fa-copy" aria-hidden="true"></i>
1128
1128
  </span>
1129
1129
  </button>
@@ -1214,7 +1214,7 @@ cssPrefix: pf-v6-c-button
1214
1214
  aria-label="Remove"
1215
1215
  aria-disabled="true"
1216
1216
  >
1217
- <span class="pf-v6-c-button__icon pf-m-start">
1217
+ <span class="pf-v6-c-button__icon">
1218
1218
  <i class="fas fa-times" aria-hidden="true"></i>
1219
1219
  </span>
1220
1220
  </button>
@@ -1236,7 +1236,7 @@ cssPrefix: pf-v6-c-button
1236
1236
  aria-label="Copy input"
1237
1237
  aria-disabled="true"
1238
1238
  >
1239
- <span class="pf-v6-c-button__icon pf-m-start">
1239
+ <span class="pf-v6-c-button__icon">
1240
1240
  <i class="fas fa-copy" aria-hidden="true"></i>
1241
1241
  </span>
1242
1242
  </button>
@@ -1355,7 +1355,7 @@ cssPrefix: pf-v6-c-button
1355
1355
  aria-label="Remove"
1356
1356
  aria-disabled="true"
1357
1357
  >
1358
- <span class="pf-v6-c-button__icon pf-m-start">
1358
+ <span class="pf-v6-c-button__icon">
1359
1359
  <i class="fas fa-times" aria-hidden="true"></i>
1360
1360
  </span>
1361
1361
  </button>
@@ -1380,7 +1380,7 @@ cssPrefix: pf-v6-c-button
1380
1380
  aria-label="Copy input"
1381
1381
  aria-disabled="true"
1382
1382
  >
1383
- <span class="pf-v6-c-button__icon pf-m-start">
1383
+ <span class="pf-v6-c-button__icon">
1384
1384
  <i class="fas fa-copy" aria-hidden="true"></i>
1385
1385
  </span>
1386
1386
  </button>
@@ -1499,7 +1499,7 @@ cssPrefix: pf-v6-c-button
1499
1499
  aria-label="Remove"
1500
1500
  aria-disabled="true"
1501
1501
  >
1502
- <span class="pf-v6-c-button__icon pf-m-end">
1502
+ <span class="pf-v6-c-button__icon">
1503
1503
  <i class="fas fa-times" aria-hidden="true"></i>
1504
1504
  </span>
1505
1505
  </button>
@@ -1524,7 +1524,7 @@ cssPrefix: pf-v6-c-button
1524
1524
  aria-label="Copy input"
1525
1525
  aria-disabled="true"
1526
1526
  >
1527
- <span class="pf-v6-c-button__icon pf-m-end">
1527
+ <span class="pf-v6-c-button__icon">
1528
1528
  <i class="fas fa-copy" aria-hidden="true"></i>
1529
1529
  </span>
1530
1530
  </button>
@@ -1594,7 +1594,7 @@ cssPrefix: pf-v6-c-button
1594
1594
  tabindex="0"
1595
1595
  aria-label="Remove"
1596
1596
  >
1597
- <span class="pf-v6-c-button__icon pf-m-start">
1597
+ <span class="pf-v6-c-button__icon">
1598
1598
  <i class="fas fa-times" aria-hidden="true"></i>
1599
1599
  </span>
1600
1600
  </span>
@@ -1609,7 +1609,7 @@ cssPrefix: pf-v6-c-button
1609
1609
  tabindex="0"
1610
1610
  aria-label="Remove"
1611
1611
  >
1612
- <span class="pf-v6-c-button__icon pf-m-start">
1612
+ <span class="pf-v6-c-button__icon">
1613
1613
  <i class="fas fa-times" aria-hidden="true"></i>
1614
1614
  </span>
1615
1615
  </span>
@@ -1784,7 +1784,7 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1784
1784
  </button>
1785
1785
  <br />
1786
1786
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Upload">
1787
- <span class="pf-v6-c-button__icon pf-m-start">
1787
+ <span class="pf-v6-c-button__icon">
1788
1788
  <i class="fas fa-upload" aria-hidden="true"></i>
1789
1789
  </span>
1790
1790
  </button>
@@ -1801,7 +1801,7 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1801
1801
  </svg>
1802
1802
  </span>
1803
1803
 
1804
- <span class="pf-v6-c-button__icon pf-m-start">
1804
+ <span class="pf-v6-c-button__icon">
1805
1805
  <i class="fas fa-upload" aria-hidden="true"></i>
1806
1806
  </span>
1807
1807
  </button>
@@ -1905,7 +1905,7 @@ For when a plain/icon button is placed inline with text
1905
1905
  type="button"
1906
1906
  aria-label="More info"
1907
1907
  >
1908
- <span class="pf-v6-c-button__icon pf-m-start">
1908
+ <span class="pf-v6-c-button__icon">
1909
1909
  <i class="fas fa-question-circle" aria-hidden="true"></i>
1910
1910
  </span>
1911
1911
  </button>