@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/patternfly.css CHANGED
@@ -11493,43 +11493,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11493
11493
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-control--m-small--PaddingInlineEnd);
11494
11494
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-control--m-small--PaddingInlineStart);
11495
11495
  }
11496
- .pf-v6-c-button.pf-m-stateful {
11497
- --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
11498
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
11499
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
11500
- --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
11501
- --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
11502
- }
11503
- .pf-v6-c-button.pf-m-read {
11504
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
11505
- --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor);
11506
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor);
11507
- --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor);
11508
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor);
11509
- --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor);
11510
- }
11511
- .pf-v6-c-button.pf-m-unread {
11512
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color);
11513
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor);
11514
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color);
11515
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color);
11516
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor);
11517
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color);
11518
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color);
11519
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor);
11520
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color);
11521
- }
11522
- .pf-v6-c-button.pf-m-attention {
11523
- --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color);
11524
- --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor);
11525
- --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color);
11526
- --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color);
11527
- --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor);
11528
- --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color);
11529
- --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color);
11530
- --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor);
11531
- --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
11532
- }
11533
11496
  .pf-v6-c-button.pf-m-plain {
11534
11497
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-plain--BorderWidth);
11535
11498
  --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-plain--hover--BorderColor);
@@ -11553,6 +11516,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11553
11516
  --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
11554
11517
  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
11555
11518
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineStart);
11519
+ --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--PaddingInlineEnd);
11520
+ --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-v6-c-button--m-plain--PaddingInlineStart);
11521
+ --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--hover--BackgroundColor);
11522
+ --pf-v6-c-button--m-read--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor);
11523
+ --pf-v6-c-button--m-read--BackgroundColor: var(--pf-v6-c-button--m-plain--BackgroundColor);
11556
11524
  }
11557
11525
  .pf-v6-c-button.pf-m-plain.pf-m-no-padding {
11558
11526
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding__icon--Color);
@@ -11569,6 +11537,43 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11569
11537
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
11570
11538
  background: var(--pf-v6-c-button--BackgroundColor);
11571
11539
  }
11540
+ .pf-v6-c-button.pf-m-stateful {
11541
+ --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
11542
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
11543
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
11544
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
11545
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
11546
+ }
11547
+ .pf-v6-c-button.pf-m-read {
11548
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
11549
+ --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-read--BorderColor);
11550
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-read--hover--BackgroundColor);
11551
+ --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-read--hover--BorderColor);
11552
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-read--m-clicked--BackgroundColor);
11553
+ --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-read--m-clicked--BorderColor);
11554
+ }
11555
+ .pf-v6-c-button.pf-m-unread {
11556
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-unread--Color);
11557
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-unread--BackgroundColor);
11558
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-unread__icon--Color);
11559
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-unread--hover--Color);
11560
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-unread--hover--BackgroundColor);
11561
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-unread--hover__icon--Color);
11562
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-unread--m-clicked--Color);
11563
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-unread--m-clicked--BackgroundColor);
11564
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-unread--m-clicked__icon--Color);
11565
+ }
11566
+ .pf-v6-c-button.pf-m-attention {
11567
+ --pf-v6-c-button--Color: var(--pf-v6-c-button--m-attention--Color);
11568
+ --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-attention--BackgroundColor);
11569
+ --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-attention__icon--Color);
11570
+ --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-attention--hover--Color);
11571
+ --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-attention--hover--BackgroundColor);
11572
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-attention--hover__icon--Color);
11573
+ --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-attention--m-clicked--Color);
11574
+ --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-attention--m-clicked--BackgroundColor);
11575
+ --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-attention--m-clicked__icon--Color);
11576
+ }
11572
11577
  .pf-v6-c-button.pf-m-block {
11573
11578
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
11574
11579
  width: var(--pf-v6-c-button--m-block--Width);
@@ -31585,9 +31590,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31585
31590
  --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--control--default);
31586
31591
  --pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--control--default);
31587
31592
  --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
31588
- --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
31593
+ --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
31589
31594
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
31590
- --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: 0;
31595
+ --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
31591
31596
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
31592
31597
  --pf-v6-c-toggle-group--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
31593
31598
  }
@@ -31602,6 +31607,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31602
31607
  --pf-v6-c-toggle-group__button--PaddingInlineStart: var(--pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart);
31603
31608
  --pf-v6-c-toggle-group__button--FontSize: var(--pf-v6-c-toggle-group--m-compact__button--FontSize);
31604
31609
  }
31610
+ .pf-v6-c-toggle-group.pf-m-fill .pf-v6-c-toggle-group__item {
31611
+ display: flex;
31612
+ flex-grow: 1;
31613
+ }
31614
+ .pf-v6-c-toggle-group.pf-m-fill .pf-v6-c-toggle-group__button {
31615
+ flex-basis: 100%;
31616
+ justify-content: center;
31617
+ }
31605
31618
 
31606
31619
  .pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
31607
31620
  margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginInlineStart);