@patternfly/patternfly 6.5.0-prerelease.74 → 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 (12) hide show
  1. package/components/Button/button.css +42 -37
  2. package/components/Button/button.scss +48 -43
  3. package/components/ToggleGroup/toggle-group.css +10 -2
  4. package/components/ToggleGroup/toggle-group.scss +15 -2
  5. package/components/_index.css +52 -39
  6. package/docs/components/Button/examples/Button.md +298 -1
  7. package/docs/components/ToggleGroup/examples/toggle-group.md +66 -0
  8. package/package.json +5 -5
  9. package/patternfly-no-globals.css +52 -39
  10. package/patternfly.css +52 -39
  11. package/patternfly.min.css +1 -1
  12. 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/ToggleGroup/toggle-group.css CHANGED
@@ -38,9 +38,9 @@
38
38
  --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--control--default);
39
39
  --pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--control--default);
40
40
  --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
41
- --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
41
+ --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
42
42
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
43
- --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: 0;
43
+ --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
44
44
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
45
45
  --pf-v6-c-toggle-group--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
46
46
  }
@@ -55,6 +55,14 @@
55
55
  --pf-v6-c-toggle-group__button--PaddingInlineStart: var(--pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart);
56
56
  --pf-v6-c-toggle-group__button--FontSize: var(--pf-v6-c-toggle-group--m-compact__button--FontSize);
57
57
  }
58
+ .pf-v6-c-toggle-group.pf-m-fill .pf-v6-c-toggle-group__item {
59
+ display: flex;
60
+ flex-grow: 1;
61
+ }
62
+ .pf-v6-c-toggle-group.pf-m-fill .pf-v6-c-toggle-group__button {
63
+ flex-basis: 100%;
64
+ justify-content: center;
65
+ }
58
66
 
59
67
  .pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
60
68
  margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginInlineStart);
package/components/ToggleGroup/toggle-group.scss CHANGED
@@ -51,9 +51,9 @@
51
51
  --#{$toggle-group}__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
52
52
 
53
53
  // Compact
54
- --#{$toggle-group}--m-compact__button--PaddingBlockStart: 0;
54
+ --#{$toggle-group}--m-compact__button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
55
55
  --#{$toggle-group}--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
56
- --#{$toggle-group}--m-compact__button--PaddingBlockEnd: 0;
56
+ --#{$toggle-group}--m-compact__button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
57
57
  --#{$toggle-group}--m-compact__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
58
58
  --#{$toggle-group}--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
59
59
  }
@@ -68,6 +68,19 @@
68
68
  --#{$toggle-group}__button--PaddingInlineStart: var(--#{$toggle-group}--m-compact__button--PaddingInlineStart);
69
69
  --#{$toggle-group}__button--FontSize: var(--#{$toggle-group}--m-compact__button--FontSize);
70
70
  }
71
+
72
+ // Filled style
73
+ &.pf-m-fill {
74
+ .#{$toggle-group}__item {
75
+ display: flex;
76
+ flex-grow: 1;
77
+ }
78
+
79
+ .#{$toggle-group}__button {
80
+ flex-basis: 100%;
81
+ justify-content: center;
82
+ }
83
+ }
71
84
  }
72
85
 
73
86
  .#{$toggle-group}__item {
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);
@@ -22291,9 +22296,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22291
22296
  --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--control--default);
22292
22297
  --pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--control--default);
22293
22298
  --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
22294
- --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
22299
+ --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
22295
22300
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
22296
- --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: 0;
22301
+ --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
22297
22302
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
22298
22303
  --pf-v6-c-toggle-group--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
22299
22304
  }
@@ -22308,6 +22313,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22308
22313
  --pf-v6-c-toggle-group__button--PaddingInlineStart: var(--pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart);
22309
22314
  --pf-v6-c-toggle-group__button--FontSize: var(--pf-v6-c-toggle-group--m-compact__button--FontSize);
22310
22315
  }
22316
+ .pf-v6-c-toggle-group.pf-m-fill .pf-v6-c-toggle-group__item {
22317
+ display: flex;
22318
+ flex-grow: 1;
22319
+ }
22320
+ .pf-v6-c-toggle-group.pf-m-fill .pf-v6-c-toggle-group__button {
22321
+ flex-basis: 100%;
22322
+ justify-content: center;
22323
+ }
22311
22324
 
22312
22325
  .pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
22313
22326
  margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginInlineStart);