@patternfly/patternfly 6.5.0-prerelease.75 → 6.5.0-prerelease.76

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 (9) hide show
  1. package/components/Button/button.css +42 -37
  2. package/components/Button/button.scss +48 -43
  3. package/components/_index.css +42 -37
  4. package/docs/components/Button/examples/Button.md +298 -1
  5. package/package.json +2 -2
  6. package/patternfly-no-globals.css +42 -37
  7. package/patternfly.css +42 -37
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/Button/button.css CHANGED
@@ -584,43 +584,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
584
584
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-control--m-small--PaddingInlineEnd);
585
585
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-control--m-small--PaddingInlineStart);
586
586
  }
587
- .pf-v6-c-button.pf-m-stateful {
588
- --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
589
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
590
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
591
- --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
592
- --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
593
- }
594
- .pf-v6-c-button.pf-m-read {
595
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
596
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor);
597
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor);
598
- --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor);
599
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor);
600
- --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor);
601
- }
602
- .pf-v6-c-button.pf-m-unread {
603
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color);
604
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor);
605
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color);
606
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color);
607
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor);
608
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color);
609
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color);
610
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor);
611
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color);
612
- }
613
- .pf-v6-c-button.pf-m-attention {
614
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color);
615
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor);
616
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color);
617
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color);
618
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor);
619
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color);
620
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color);
621
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor);
622
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
623
- }
624
587
  .pf-v6-c-button.pf-m-plain {
625
588
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-plain--BorderWidth);
626
589
  --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-plain--hover--BorderColor);
@@ -644,6 +607,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
644
607
  --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
645
608
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
646
609
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineStart);
610
+ --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--PaddingInlineEnd);
611
+ --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-v6-c-button--m-plain--PaddingInlineStart);
612
+ --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--hover--BackgroundColor);
613
+ --pf-v6-c-button--m-read--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor);
614
+ --pf-v6-c-button--m-read--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor);
647
615
  }
648
616
  .pf-v6-c-button.pf-m-plain.pf-m-no-padding {
649
617
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding__icon--Color);
@@ -660,6 +628,43 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
660
628
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
661
629
  background: var(--pf-v6-c-button--BackgroundColor);
662
630
  }
631
+ .pf-v6-c-button.pf-m-stateful {
632
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
633
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
634
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
635
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
636
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
637
+ }
638
+ .pf-v6-c-button.pf-m-read {
639
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
640
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor);
641
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor);
642
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor);
643
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor);
644
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor);
645
+ }
646
+ .pf-v6-c-button.pf-m-unread {
647
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color);
648
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor);
649
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color);
650
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color);
651
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor);
652
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color);
653
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color);
654
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor);
655
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color);
656
+ }
657
+ .pf-v6-c-button.pf-m-attention {
658
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color);
659
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor);
660
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color);
661
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color);
662
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor);
663
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color);
664
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color);
665
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor);
666
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
667
+ }
663
668
  .pf-v6-c-button.pf-m-block {
664
669
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
665
670
  width: var(--pf-v6-c-button--m-block--Width);
package/components/Button/button.scss CHANGED
@@ -673,6 +673,54 @@
673
673
  --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-control--m-small--PaddingInlineStart);
674
674
  }
675
675
 
676
+ // Icon buttons
677
+ &.pf-m-plain {
678
+ --#{$button}--BorderWidth: var(--#{$button}--m-plain--BorderWidth);
679
+ --#{$button}--hover--BorderColor: var(--#{$button}--m-plain--hover--BorderColor);
680
+ --#{$button}--hover--BorderWidth: var(--#{$button}--m-plain--hover--BorderWidth);
681
+ --#{$button}--m-clicked--BorderColor: var(--#{$button}--m-plain--m-clicked--BorderColor);
682
+ --#{$button}--m-clicked--BorderWidth: var(--#{$button}--m-plain--m-clicked--BorderWidth);
683
+ --#{$button}--BorderColor: var(--#{$button}--m-plain--BorderColor);
684
+ --#{$button}--BorderRadius: var(--#{$button}--m-plain--BorderRadius);
685
+ --#{$button}--Color: var(--#{$button}--m-plain--Color);
686
+ --#{$button}__icon--Color: var(--#{$button}--m-plain__icon--Color);
687
+ --#{$button}--BackgroundColor: var(--#{$button}--m-plain--BackgroundColor);
688
+ --#{$button}--PaddingInlineEnd: var(--#{$button}--m-plain--PaddingInlineEnd);
689
+ --#{$button}--PaddingInlineStart: var(--#{$button}--m-plain--PaddingInlineStart);
690
+ --#{$button}__progress--Color: var(--#{$button}--m-in-progress--m-plain--Color);
691
+ --#{$button}--hover--Color: var(--#{$button}--m-plain--hover--Color);
692
+ --#{$button}--hover--BackgroundColor: var(--#{$button}--m-plain--hover--BackgroundColor);
693
+ --#{$button}--m-clicked--Color: var(--#{$button}--m-plain--m-clicked--Color);
694
+ --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-clicked--BackgroundColor);
695
+ --#{$button}--disabled--Color: var(--#{$button}--m-plain--disabled--Color);
696
+ --#{$button}--disabled__icon--Color: var(--#{$button}--m-plain--disabled__icon--Color);
697
+ --#{$button}--disabled--BackgroundColor: var(--#{$button}--m-plain--disabled--BackgroundColor);
698
+ --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-plain--m-small--PaddingInlineEnd);
699
+ --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-plain--m-small--PaddingInlineStart);
700
+ --#{$button}--m-stateful--PaddingInlineEnd: var(--#{$button}--m-plain--PaddingInlineEnd);
701
+ --#{$button}--m-stateful--PaddingInlineStart: var(--#{$button}--m-plain--PaddingInlineStart);
702
+ --#{$button}--m-read--hover--BackgroundColor: var(--#{$button}--m-plain--hover--BackgroundColor);
703
+ --#{$button}--m-read--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-clicked--BackgroundColor);
704
+ --#{$button}--m-read--BackgroundColor: var(--#{$button}--m-plain--BackgroundColor);
705
+
706
+ &.pf-m-no-padding {
707
+ --#{$button}__icon--Color: var(--#{$button}--m-plain--m-no-padding__icon--Color);
708
+ --#{$button}--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--BackgroundColor);
709
+ --#{$button}--hover--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--hover--BackgroundColor);
710
+ --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--m-clicked--BackgroundColor);
711
+ --#{$button}--PaddingBlockStart: var(--#{$button}--m-plain--m-no-padding--PaddingBlockStart);
712
+ --#{$button}--PaddingBlockEnd: var(--#{$button}--m-plain--m-no-padding--PaddingBlockEnd);
713
+ --#{$button}--PaddingInlineEnd: var(--#{$button}--m-plain--m-no-padding--PaddingInlineEnd);
714
+ --#{$button}--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--PaddingInlineStart);
715
+ --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineEnd);
716
+ --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineStart);
717
+ --#{$button}--border--offset: var(--#{$button}--m-plain--m-no-padding--border--offset);
718
+
719
+ min-width: var(--#{$button}--m-plain--m-no-padding--MinWidth);
720
+ background: var(--#{$button}--BackgroundColor); // override the ripple background
721
+ }
722
+ }
723
+
676
724
  // Stateful
677
725
  &.pf-m-stateful {
678
726
  --#{$button}--BorderRadius: var(--#{$button}--m-stateful--BorderRadius);
@@ -718,49 +766,6 @@
718
766
  --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-attention--m-clicked__icon--Color);
719
767
  }
720
768
 
721
- // Icon buttons
722
- &.pf-m-plain {
723
- --#{$button}--BorderWidth: var(--#{$button}--m-plain--BorderWidth);
724
- --#{$button}--hover--BorderColor: var(--#{$button}--m-plain--hover--BorderColor);
725
- --#{$button}--hover--BorderWidth: var(--#{$button}--m-plain--hover--BorderWidth);
726
- --#{$button}--m-clicked--BorderColor: var(--#{$button}--m-plain--m-clicked--BorderColor);
727
- --#{$button}--m-clicked--BorderWidth: var(--#{$button}--m-plain--m-clicked--BorderWidth);
728
- --#{$button}--BorderColor: var(--#{$button}--m-plain--BorderColor);
729
- --#{$button}--BorderRadius: var(--#{$button}--m-plain--BorderRadius);
730
- --#{$button}--Color: var(--#{$button}--m-plain--Color);
731
- --#{$button}__icon--Color: var(--#{$button}--m-plain__icon--Color);
732
- --#{$button}--BackgroundColor: var(--#{$button}--m-plain--BackgroundColor);
733
- --#{$button}--PaddingInlineEnd: var(--#{$button}--m-plain--PaddingInlineEnd);
734
- --#{$button}--PaddingInlineStart: var(--#{$button}--m-plain--PaddingInlineStart);
735
- --#{$button}__progress--Color: var(--#{$button}--m-in-progress--m-plain--Color);
736
- --#{$button}--hover--Color: var(--#{$button}--m-plain--hover--Color);
737
- --#{$button}--hover--BackgroundColor: var(--#{$button}--m-plain--hover--BackgroundColor);
738
- --#{$button}--m-clicked--Color: var(--#{$button}--m-plain--m-clicked--Color);
739
- --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-clicked--BackgroundColor);
740
- --#{$button}--disabled--Color: var(--#{$button}--m-plain--disabled--Color);
741
- --#{$button}--disabled__icon--Color: var(--#{$button}--m-plain--disabled__icon--Color);
742
- --#{$button}--disabled--BackgroundColor: var(--#{$button}--m-plain--disabled--BackgroundColor);
743
- --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-plain--m-small--PaddingInlineEnd);
744
- --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-plain--m-small--PaddingInlineStart);
745
-
746
- &.pf-m-no-padding {
747
- --#{$button}__icon--Color: var(--#{$button}--m-plain--m-no-padding__icon--Color);
748
- --#{$button}--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--BackgroundColor);
749
- --#{$button}--hover--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--hover--BackgroundColor);
750
- --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--m-clicked--BackgroundColor);
751
- --#{$button}--PaddingBlockStart: var(--#{$button}--m-plain--m-no-padding--PaddingBlockStart);
752
- --#{$button}--PaddingBlockEnd: var(--#{$button}--m-plain--m-no-padding--PaddingBlockEnd);
753
- --#{$button}--PaddingInlineEnd: var(--#{$button}--m-plain--m-no-padding--PaddingInlineEnd);
754
- --#{$button}--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--PaddingInlineStart);
755
- --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineEnd);
756
- --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineStart);
757
- --#{$button}--border--offset: var(--#{$button}--m-plain--m-no-padding--border--offset);
758
-
759
- min-width: var(--#{$button}--m-plain--m-no-padding--MinWidth);
760
- background: var(--#{$button}--BackgroundColor); // override the ripple background
761
- }
762
- }
763
-
764
769
  &.pf-m-block {
765
770
  --#{$button}--Display: var(--#{$button}--m-block--Display);
766
771
 
package/components/_index.css CHANGED
@@ -2199,43 +2199,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2199
2199
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-control--m-small--PaddingInlineEnd);
2200
2200
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-control--m-small--PaddingInlineStart);
2201
2201
  }
2202
- .pf-v6-c-button.pf-m-stateful {
2203
- --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
2204
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
2205
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
2206
- --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
2207
- --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
2208
- }
2209
- .pf-v6-c-button.pf-m-read {
2210
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
2211
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor);
2212
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor);
2213
- --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor);
2214
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor);
2215
- --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor);
2216
- }
2217
- .pf-v6-c-button.pf-m-unread {
2218
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color);
2219
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor);
2220
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color);
2221
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color);
2222
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor);
2223
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color);
2224
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color);
2225
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor);
2226
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color);
2227
- }
2228
- .pf-v6-c-button.pf-m-attention {
2229
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color);
2230
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor);
2231
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color);
2232
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color);
2233
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor);
2234
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color);
2235
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color);
2236
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor);
2237
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
2238
- }
2239
2202
  .pf-v6-c-button.pf-m-plain {
2240
2203
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-plain--BorderWidth);
2241
2204
  --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-plain--hover--BorderColor);
@@ -2259,6 +2222,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2259
2222
  --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
2260
2223
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
2261
2224
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineStart);
2225
+ --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--PaddingInlineEnd);
2226
+ --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-v6-c-button--m-plain--PaddingInlineStart);
2227
+ --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--hover--BackgroundColor);
2228
+ --pf-v6-c-button--m-read--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor);
2229
+ --pf-v6-c-button--m-read--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor);
2262
2230
  }
2263
2231
  .pf-v6-c-button.pf-m-plain.pf-m-no-padding {
2264
2232
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding__icon--Color);
@@ -2275,6 +2243,43 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2275
2243
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
2276
2244
  background: var(--pf-v6-c-button--BackgroundColor);
2277
2245
  }
2246
+ .pf-v6-c-button.pf-m-stateful {
2247
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
2248
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
2249
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
2250
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
2251
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
2252
+ }
2253
+ .pf-v6-c-button.pf-m-read {
2254
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
2255
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor);
2256
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor);
2257
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor);
2258
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor);
2259
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor);
2260
+ }
2261
+ .pf-v6-c-button.pf-m-unread {
2262
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color);
2263
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor);
2264
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color);
2265
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color);
2266
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor);
2267
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color);
2268
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color);
2269
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor);
2270
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color);
2271
+ }
2272
+ .pf-v6-c-button.pf-m-attention {
2273
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color);
2274
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor);
2275
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color);
2276
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color);
2277
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor);
2278
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color);
2279
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color);
2280
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor);
2281
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
2282
+ }
2278
2283
  .pf-v6-c-button.pf-m-block {
2279
2284
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
2280
2285
  width: var(--pf-v6-c-button--m-block--Width);
package/docs/components/Button/examples/Button.md CHANGED
@@ -4311,6 +4311,303 @@ For when a plain/icon button is placed inline with text
4311
4311
  </span>
4312
4312
  </button>
4313
4313
 
4314
+ <br />
4315
+ <br />
4316
+
4317
+ <strong>Plain</strong>
4318
+ <br />
4319
+ <button
4320
+ class="pf-v6-c-button pf-m-read pf-m-stateful pf-m-plain"
4321
+ type="button"
4322
+ aria-label="all items read"
4323
+ >
4324
+ <span class="pf-v6-c-button__icon pf-m-start">
4325
+ <svg
4326
+ class="pf-v6-svg"
4327
+ viewBox="0 0 32 32"
4328
+ fill="currentColor"
4329
+ aria-hidden="true"
4330
+ role="img"
4331
+ width="1em"
4332
+ height="1em"
4333
+ >
4334
+ <path
4335
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4336
+ />
4337
+ </svg>
4338
+ </span>
4339
+ </button>
4340
+
4341
+ <button
4342
+ class="pf-v6-c-button pf-m-read pf-m-stateful pf-m-clicked pf-m-plain"
4343
+ type="button"
4344
+ aria-label="all items read"
4345
+ >
4346
+ <span class="pf-v6-c-button__icon pf-m-start">
4347
+ <svg
4348
+ class="pf-v6-svg"
4349
+ viewBox="0 0 32 32"
4350
+ fill="currentColor"
4351
+ aria-hidden="true"
4352
+ role="img"
4353
+ width="1em"
4354
+ height="1em"
4355
+ >
4356
+ <path
4357
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4358
+ />
4359
+ </svg>
4360
+ </span>
4361
+ </button>
4362
+
4363
+ <br />
4364
+
4365
+ <button
4366
+ class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-plain"
4367
+ type="button"
4368
+ aria-label="unread items"
4369
+ >
4370
+ <span class="pf-v6-c-button__icon pf-m-start">
4371
+ <svg
4372
+ class="pf-v6-svg"
4373
+ viewBox="0 0 32 32"
4374
+ fill="currentColor"
4375
+ aria-hidden="true"
4376
+ role="img"
4377
+ width="1em"
4378
+ height="1em"
4379
+ >
4380
+ <path
4381
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4382
+ />
4383
+ </svg>
4384
+ </span>
4385
+ </button>
4386
+
4387
+ <button
4388
+ class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-clicked pf-m-plain"
4389
+ type="button"
4390
+ aria-label="unread items"
4391
+ >
4392
+ <span class="pf-v6-c-button__icon pf-m-start">
4393
+ <svg
4394
+ class="pf-v6-svg"
4395
+ viewBox="0 0 32 32"
4396
+ fill="currentColor"
4397
+ aria-hidden="true"
4398
+ role="img"
4399
+ width="1em"
4400
+ height="1em"
4401
+ >
4402
+ <path
4403
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4404
+ />
4405
+ </svg>
4406
+ </span>
4407
+ </button>
4408
+
4409
+ <br />
4410
+
4411
+ <button
4412
+ class="pf-v6-c-button pf-m-attention pf-m-stateful pf-m-plain"
4413
+ type="button"
4414
+ aria-label="unread items, needs attention"
4415
+ >
4416
+ <span class="pf-v6-c-button__icon pf-m-start">
4417
+ <svg
4418
+ class="pf-v6-svg"
4419
+ viewBox="0 0 32 32"
4420
+ fill="currentColor"
4421
+ aria-hidden="true"
4422
+ role="img"
4423
+ width="1em"
4424
+ height="1em"
4425
+ >
4426
+ <path
4427
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.884-3.523-8.955-8.159-9.823.405-.444.659-1.03.659-1.677C18.5 2.121 17.379 1 16 1s-2.5 1.121-2.5 2.5c0 .648.254 1.233.659 1.677C9.523 6.045 6 10.116 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1ZM14.5 11a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 24.014a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 24.014Z"
4428
+ />
4429
+ </svg>
4430
+ </span>
4431
+ </button>
4432
+
4433
+ <button
4434
+ class="pf-v6-c-button pf-m-attention pf-m-stateful pf-m-clicked pf-m-plain"
4435
+ type="button"
4436
+ aria-label="unread items, needs attention"
4437
+ >
4438
+ <span class="pf-v6-c-button__icon pf-m-start">
4439
+ <svg
4440
+ class="pf-v6-svg"
4441
+ viewBox="0 0 32 32"
4442
+ fill="currentColor"
4443
+ aria-hidden="true"
4444
+ role="img"
4445
+ width="1em"
4446
+ height="1em"
4447
+ >
4448
+ <path
4449
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.884-3.523-8.955-8.159-9.823.405-.444.659-1.03.659-1.677C18.5 2.121 17.379 1 16 1s-2.5 1.121-2.5 2.5c0 .648.254 1.233.659 1.677C9.523 6.045 6 10.116 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1ZM14.5 11a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 24.014a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 24.014Z"
4450
+ />
4451
+ </svg>
4452
+ </span>
4453
+ </button>
4454
+
4455
+ <br />
4456
+ <br />
4457
+
4458
+ <strong>Plain with count</strong>
4459
+ <br />
4460
+ <button class="pf-v6-c-button pf-m-read pf-m-stateful pf-m-plain" type="button">
4461
+ <span class="pf-v6-c-button__icon pf-m-start">
4462
+ <svg
4463
+ class="pf-v6-svg"
4464
+ viewBox="0 0 32 32"
4465
+ fill="currentColor"
4466
+ aria-hidden="true"
4467
+ role="img"
4468
+ width="1em"
4469
+ height="1em"
4470
+ >
4471
+ <path
4472
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4473
+ />
4474
+ </svg>
4475
+ </span>
4476
+ <span class="pf-v6-c-button__text">
4477
+ 10
4478
+ <span class="pf-v6-screen-reader">items</span>
4479
+ </span>
4480
+ </button>
4481
+
4482
+ <button
4483
+ class="pf-v6-c-button pf-m-read pf-m-stateful pf-m-clicked pf-m-plain"
4484
+ type="button"
4485
+ >
4486
+ <span class="pf-v6-c-button__icon pf-m-start">
4487
+ <svg
4488
+ class="pf-v6-svg"
4489
+ viewBox="0 0 32 32"
4490
+ fill="currentColor"
4491
+ aria-hidden="true"
4492
+ role="img"
4493
+ width="1em"
4494
+ height="1em"
4495
+ >
4496
+ <path
4497
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4498
+ />
4499
+ </svg>
4500
+ </span>
4501
+ <span class="pf-v6-c-button__text">
4502
+ 10
4503
+ <span class="pf-v6-screen-reader">items</span>
4504
+ </span>
4505
+ </button>
4506
+
4507
+ <br />
4508
+
4509
+ <button
4510
+ class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-plain"
4511
+ type="button"
4512
+ >
4513
+ <span class="pf-v6-c-button__icon pf-m-start">
4514
+ <svg
4515
+ class="pf-v6-svg"
4516
+ viewBox="0 0 32 32"
4517
+ fill="currentColor"
4518
+ aria-hidden="true"
4519
+ role="img"
4520
+ width="1em"
4521
+ height="1em"
4522
+ >
4523
+ <path
4524
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4525
+ />
4526
+ </svg>
4527
+ </span>
4528
+ <span class="pf-v6-c-button__text">
4529
+ 10
4530
+ <span class="pf-v6-screen-reader">unread items</span>
4531
+ </span>
4532
+ </button>
4533
+
4534
+ <button
4535
+ class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-clicked pf-m-plain"
4536
+ type="button"
4537
+ >
4538
+ <span class="pf-v6-c-button__icon pf-m-start">
4539
+ <svg
4540
+ class="pf-v6-svg"
4541
+ viewBox="0 0 32 32"
4542
+ fill="currentColor"
4543
+ aria-hidden="true"
4544
+ role="img"
4545
+ width="1em"
4546
+ height="1em"
4547
+ >
4548
+ <path
4549
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4550
+ />
4551
+ </svg>
4552
+ </span>
4553
+ <span class="pf-v6-c-button__text">
4554
+ 10
4555
+ <span class="pf-v6-screen-reader">unread items</span>
4556
+ </span>
4557
+ </button>
4558
+
4559
+ <br />
4560
+
4561
+ <button
4562
+ class="pf-v6-c-button pf-m-attention pf-m-stateful pf-m-plain"
4563
+ type="button"
4564
+ >
4565
+ <span class="pf-v6-c-button__icon pf-m-start">
4566
+ <svg
4567
+ class="pf-v6-svg"
4568
+ viewBox="0 0 32 32"
4569
+ fill="currentColor"
4570
+ aria-hidden="true"
4571
+ role="img"
4572
+ width="1em"
4573
+ height="1em"
4574
+ >
4575
+ <path
4576
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.884-3.523-8.955-8.159-9.823.405-.444.659-1.03.659-1.677C18.5 2.121 17.379 1 16 1s-2.5 1.121-2.5 2.5c0 .648.254 1.233.659 1.677C9.523 6.045 6 10.116 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1ZM14.5 11a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 24.014a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 24.014Z"
4577
+ />
4578
+ </svg>
4579
+ </span>
4580
+ <span class="pf-v6-c-button__text">
4581
+ 10
4582
+ <span class="pf-v6-screen-reader">unread items, needs attention</span>
4583
+ </span>
4584
+ </button>
4585
+
4586
+ <button
4587
+ class="pf-v6-c-button pf-m-attention pf-m-stateful pf-m-clicked pf-m-plain"
4588
+ type="button"
4589
+ >
4590
+ <span class="pf-v6-c-button__icon pf-m-start">
4591
+ <svg
4592
+ class="pf-v6-svg"
4593
+ viewBox="0 0 32 32"
4594
+ fill="currentColor"
4595
+ aria-hidden="true"
4596
+ role="img"
4597
+ width="1em"
4598
+ height="1em"
4599
+ >
4600
+ <path
4601
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.884-3.523-8.955-8.159-9.823.405-.444.659-1.03.659-1.677C18.5 2.121 17.379 1 16 1s-2.5 1.121-2.5 2.5c0 .648.254 1.233.659 1.677C9.523 6.045 6 10.116 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1ZM14.5 11a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 24.014a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 24.014Z"
4602
+ />
4603
+ </svg>
4604
+ </span>
4605
+ <span class="pf-v6-c-button__text">
4606
+ 10
4607
+ <span class="pf-v6-screen-reader">unread items, needs attention</span>
4608
+ </span>
4609
+ </button>
4610
+
4314
4611
  ```
4315
4612
 
4316
4613
  ### Favorite
@@ -4528,7 +4825,7 @@ Semantic buttons and links are important for usability as well as accessibility.
4528
4825
  | `.pf-m-danger` | `.pf-v6-c-button` | Modifies for danger styles. |
4529
4826
  | `.pf-m-warning` | `.pf-v6-c-button` | Modifies for warning styles. |
4530
4827
  | `.pf-m-link` | `.pf-v6-c-button` | Modifies for link styles. This button has no background or border and is styled as a link. This button would commonly appear in a form and may include an icon. |
4531
- | `.pf-m-plain` | `.pf-v6-c-button` | Modifies for icon styles. This button has no background or border, uses a standard text color, and is used for `.pf-m-plain` icon buttons such as close, expand, kebab, etc. |
4828
+ | `.pf-m-plain` | `.pf-v6-c-button` | Modifies for icon styles. This button has no background or border, uses a standard text color, and is used for `.pf-m-plain` icon buttons such as close, expand, kebab, stateful, etc. |
4532
4829
  | `.pf-m-no-padding` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to remove padding. This modifier should only be used when the button is inline within a sentence or block of text. Adjacent plain buttons without padding should always have spacing between them. |
4533
4830
  | `.pf-m-inline` | `.pf-v6-c-button.pf-m-link` | Modifies for inline styles. This button is presented similar to a normal link and has no padding and is displayed inline with other inline content. When used as a `<span>`, the text will flow inline with text around it. |
4534
4831
  | `.pf-m-block` | `.pf-v6-c-button` | Creates a block level button. |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.5.0-prerelease.75",
4
+ "version": "6.5.0-prerelease.76",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -71,7 +71,7 @@
71
71
  "@octokit/rest": "^20.1.0",
72
72
  "@patternfly/documentation-framework": "6.38.3",
73
73
  "@patternfly/patternfly-a11y": "5.1.0",
74
- "@patternfly/react-code-editor": "6.4.1",
74
+ "@patternfly/react-code-editor": "6.4.3",
75
75
  "@patternfly/react-core": "6.4.3",
76
76
  "@patternfly/react-icons": "6.5.0-prerelease.13",
77
77
  "@patternfly/react-table": "6.4.3",