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

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/ToggleGroup/toggle-group.css +10 -2
  2. package/components/ToggleGroup/toggle-group.scss +15 -2
  3. package/components/_index.css +10 -2
  4. package/docs/components/ToggleGroup/examples/toggle-group.md +66 -0
  5. package/package.json +4 -4
  6. package/patternfly-no-globals.css +10 -2
  7. package/patternfly.css +10 -2
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
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
@@ -22291,9 +22291,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22291
22291
  --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--control--default);
22292
22292
  --pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--control--default);
22293
22293
  --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;
22294
+ --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
22295
22295
  --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;
22296
+ --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
22297
22297
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
22298
22298
  --pf-v6-c-toggle-group--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
22299
22299
  }
@@ -22308,6 +22308,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22308
22308
  --pf-v6-c-toggle-group__button--PaddingInlineStart: var(--pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart);
22309
22309
  --pf-v6-c-toggle-group__button--FontSize: var(--pf-v6-c-toggle-group--m-compact__button--FontSize);
22310
22310
  }
22311
+ .pf-v6-c-toggle-group.pf-m-fill .pf-v6-c-toggle-group__item {
22312
+ display: flex;
22313
+ flex-grow: 1;
22314
+ }
22315
+ .pf-v6-c-toggle-group.pf-m-fill .pf-v6-c-toggle-group__button {
22316
+ flex-basis: 100%;
22317
+ justify-content: center;
22318
+ }
22311
22319
 
22312
22320
  .pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
22313
22321
  margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginInlineStart);
package/docs/components/ToggleGroup/examples/toggle-group.md CHANGED
@@ -493,6 +493,71 @@ cssPrefix: pf-v6-c-toggle-group
493
493
 
494
494
  ```
495
495
 
496
+ ### Full width toggle
497
+
498
+ To make toggle group items fill the available space, use `.pf-m-fill`. In the following example, the toggle group items fill the width of the parent as the window size changes.
499
+
500
+ ```html
501
+ <div class="pf-v6-c-toggle-group pf-m-fill">
502
+ <div class="pf-v6-c-toggle-group__item">
503
+ <button class="pf-v6-c-toggle-group__button" type="button">
504
+ <span class="pf-v6-c-toggle-group__text">Option 1</span>
505
+ </button>
506
+ </div>
507
+ <div class="pf-v6-c-toggle-group__item">
508
+ <button class="pf-v6-c-toggle-group__button" type="button">
509
+ <span class="pf-v6-c-toggle-group__text">Option 2</span>
510
+ </button>
511
+ </div>
512
+ <div class="pf-v6-c-toggle-group__item">
513
+ <button class="pf-v6-c-toggle-group__button" type="button">
514
+ <span class="pf-v6-c-toggle-group__text">Option 3</span>
515
+ </button>
516
+ </div>
517
+ </div>
518
+
519
+ <br />
520
+
521
+ <div class="pf-v6-c-toggle-group pf-m-fill">
522
+ <div class="pf-v6-c-toggle-group__item">
523
+ <button class="pf-v6-c-toggle-group__button pf-m-selected" type="button">
524
+ <span class="pf-v6-c-toggle-group__text">Option 1</span>
525
+ </button>
526
+ </div>
527
+ <div class="pf-v6-c-toggle-group__item">
528
+ <button class="pf-v6-c-toggle-group__button pf-m-selected" type="button">
529
+ <span class="pf-v6-c-toggle-group__text">Option 2</span>
530
+ </button>
531
+ </div>
532
+ <div class="pf-v6-c-toggle-group__item">
533
+ <button class="pf-v6-c-toggle-group__button" type="button">
534
+ <span class="pf-v6-c-toggle-group__text">Option 3</span>
535
+ </button>
536
+ </div>
537
+ </div>
538
+
539
+ <br />
540
+
541
+ <div class="pf-v6-c-toggle-group pf-m-fill">
542
+ <div class="pf-v6-c-toggle-group__item">
543
+ <button class="pf-v6-c-toggle-group__button" type="button">
544
+ <span class="pf-v6-c-toggle-group__text">Option 1</span>
545
+ </button>
546
+ </div>
547
+ <div class="pf-v6-c-toggle-group__item">
548
+ <button class="pf-v6-c-toggle-group__button" type="button">
549
+ <span class="pf-v6-c-toggle-group__text">Option 2</span>
550
+ </button>
551
+ </div>
552
+ <div class="pf-v6-c-toggle-group__item">
553
+ <button class="pf-v6-c-toggle-group__button" type="button" disabled>
554
+ <span class="pf-v6-c-toggle-group__text">Option 3</span>
555
+ </button>
556
+ </div>
557
+ </div>
558
+
559
+ ```
560
+
496
561
  ## Documentation
497
562
 
498
563
  ### Accessibility
@@ -512,4 +577,5 @@ cssPrefix: pf-v6-c-toggle-group
512
577
  | `.pf-v6-c-toggle-group__text` | `<span>` | Initiates the toggle button text element. |
513
578
  | `.pf-v6-c-toggle-group__icon` | `<span>` | Initiates the toggle button icon element. |
514
579
  | `.pf-m-compact` | `.pf-v6-c-toggle-group` | Modifies the toggle group for compact styles. |
580
+ | `.pf-m-fill` | `.pf-v6-c-toggle-group` | Modifies the group items to fill the available space. |
515
581
  | `.pf-m-selected` | `.pf-v6-c-toggle-group__button` | Modifies the toggle button group button for the selected state. |
package/package.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.5.0-prerelease.74",
4
+ "version": "6.5.0-prerelease.75",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
8
8
  "a11y": "patternfly-a11y --config patternfly-a11y.config",
9
- "backstop:clean": "rimraf -- backstop_data/bitmaps_test backstop_data/html_report",
9
+ "backstop:clean": "rimraf -- backstop_data/bitmaps_test backstop_data/bitmaps_test_glass backstop_data/html_report",
10
10
  "backstop:test": "backstop test --config='backstop.js'",
11
11
  "backstop:test:dark": "backstop test --config='backstop.js' --dark",
12
12
  "backstop:test:glass": "backstop test --config='backstop.js' --glass",
@@ -72,9 +72,9 @@
72
72
  "@patternfly/documentation-framework": "6.38.3",
73
73
  "@patternfly/patternfly-a11y": "5.1.0",
74
74
  "@patternfly/react-code-editor": "6.4.1",
75
- "@patternfly/react-core": "6.4.1",
75
+ "@patternfly/react-core": "6.4.3",
76
76
  "@patternfly/react-icons": "6.5.0-prerelease.13",
77
- "@patternfly/react-table": "6.4.1",
77
+ "@patternfly/react-table": "6.4.3",
78
78
  "@rspack/cli": "^1.6.0",
79
79
  "@rspack/core": "^1.6.0",
80
80
  "@rspack/dev-server": "^1.1.4",
package/patternfly-no-globals.css CHANGED
@@ -31438,9 +31438,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31438
31438
  --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--control--default);
31439
31439
  --pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--control--default);
31440
31440
  --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
31441
- --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
31441
+ --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
31442
31442
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
31443
- --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: 0;
31443
+ --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
31444
31444
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
31445
31445
  --pf-v6-c-toggle-group--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
31446
31446
  }
@@ -31455,6 +31455,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31455
31455
  --pf-v6-c-toggle-group__button--PaddingInlineStart: var(--pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart);
31456
31456
  --pf-v6-c-toggle-group__button--FontSize: var(--pf-v6-c-toggle-group--m-compact__button--FontSize);
31457
31457
  }
31458
+ .pf-v6-c-toggle-group.pf-m-fill .pf-v6-c-toggle-group__item {
31459
+ display: flex;
31460
+ flex-grow: 1;
31461
+ }
31462
+ .pf-v6-c-toggle-group.pf-m-fill .pf-v6-c-toggle-group__button {
31463
+ flex-basis: 100%;
31464
+ justify-content: center;
31465
+ }
31458
31466
 
31459
31467
  .pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
31460
31468
  margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginInlineStart);
package/patternfly.css CHANGED
@@ -31585,9 +31585,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31585
31585
  --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--control--default);
31586
31586
  --pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--control--default);
31587
31587
  --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;
31588
+ --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
31589
31589
  --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;
31590
+ --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
31591
31591
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
31592
31592
  --pf-v6-c-toggle-group--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
31593
31593
  }
@@ -31602,6 +31602,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31602
31602
  --pf-v6-c-toggle-group__button--PaddingInlineStart: var(--pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart);
31603
31603
  --pf-v6-c-toggle-group__button--FontSize: var(--pf-v6-c-toggle-group--m-compact__button--FontSize);
31604
31604
  }
31605
+ .pf-v6-c-toggle-group.pf-m-fill .pf-v6-c-toggle-group__item {
31606
+ display: flex;
31607
+ flex-grow: 1;
31608
+ }
31609
+ .pf-v6-c-toggle-group.pf-m-fill .pf-v6-c-toggle-group__button {
31610
+ flex-basis: 100%;
31611
+ justify-content: center;
31612
+ }
31605
31613
 
31606
31614
  .pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
31607
31615
  margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginInlineStart);