@patternfly/react-styles 6.3.0-prerelease.9 → 6.3.1

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 (10) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/css/components/Button/button.css +2 -2
  3. package/css/components/Table/table-grid.css +30 -0
  4. package/css/components/Table/table-grid.d.ts +2 -1
  5. package/css/components/Table/table-grid.js +2 -1
  6. package/css/components/Table/table-grid.mjs +2 -1
  7. package/css/components/Table/table.css +30 -15
  8. package/css/components/TextInputGroup/text-input-group.css +4 -0
  9. package/css/components/_index.css +66 -17
  10. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,42 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 6.3.1 (2025-08-05)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-styles
9
+
10
+ # 6.3.0 (2025-07-22)
11
+
12
+ **Note:** Version bump only for package @patternfly/react-styles
13
+
14
+ # [6.3.0-prerelease.14](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.4.0-prerelease.0...@patternfly/react-styles@6.3.0-prerelease.14) (2025-07-22)
15
+
16
+ ### Reverts
17
+
18
+ - Revert "chore(release): releasing packages [ci skip]" ([40999d7](https://github.com/patternfly/patternfly-react/commit/40999d70a7a3aeadbe8f40fe96bb01ab3a6219d4))
19
+
20
+ # [6.3.0-prerelease.13](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0-prerelease.12...@patternfly/react-styles@6.3.0-prerelease.13) (2025-07-18)
21
+
22
+ ### Bug Fixes
23
+
24
+ - **Button:** Bump core version to fix button animation ([#11928](https://github.com/patternfly/patternfly-react/issues/11928)) ([dc6e358](https://github.com/patternfly/patternfly-react/commit/dc6e358e8b9cd81f9be0a1a21d4fc0cae4ca21d8))
25
+
26
+ # [6.3.0-prerelease.12](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0-prerelease.11...@patternfly/react-styles@6.3.0-prerelease.12) (2025-07-17)
27
+
28
+ ### Bug Fixes
29
+
30
+ - **Tables:** updated animations to beta ([#11927](https://github.com/patternfly/patternfly-react/issues/11927)) ([cca6678](https://github.com/patternfly/patternfly-react/commit/cca667858c24bb9d7cb39e0c781ff3c8466f7ef6))
31
+
32
+ # [6.3.0-prerelease.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0-prerelease.10...@patternfly/react-styles@6.3.0-prerelease.11) (2025-07-11)
33
+
34
+ ### Bug Fixes
35
+
36
+ - **Table:** updated logic for expandable class ([#11918](https://github.com/patternfly/patternfly-react/issues/11918)) ([2b6c99b](https://github.com/patternfly/patternfly-react/commit/2b6c99b4617f09009d799af4587a0b0d291cdf84))
37
+
38
+ # [6.3.0-prerelease.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0-prerelease.9...@patternfly/react-styles@6.3.0-prerelease.10) (2025-07-02)
39
+
40
+ **Note:** Version bump only for package @patternfly/react-styles
41
+
6
42
  # [6.3.0-prerelease.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.3.0-prerelease.8...@patternfly/react-styles@6.3.0-prerelease.9) (2025-06-23)
7
43
 
8
44
  ### Bug Fixes
package/css/components/Button/button.css CHANGED
@@ -327,7 +327,7 @@
327
327
  cursor: pointer;
328
328
  -webkit-user-select: none;
329
329
  user-select: none;
330
- background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000%;
330
+ background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
331
331
  border: 0;
332
332
  border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
333
333
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
@@ -680,7 +680,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
680
680
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
681
681
  }
682
682
  .pf-v6-c-button:active {
683
- background-size: 100%;
683
+ background-size: 100% 100%;
684
684
  transition-duration: 0s;
685
685
  }
686
686
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
package/css/components/Table/table-grid.css CHANGED
@@ -98,6 +98,12 @@
98
98
  .pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
99
99
  border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
100
100
  }
101
+ .pf-m-grid.pf-v6-c-table.pf-m-animate-expand {
102
+ --pf-v6-c-table__expandable-row--Display: block;
103
+ }
104
+ .pf-m-grid.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
105
+ content: none;
106
+ }
101
107
  .pf-m-grid.pf-v6-c-table.pf-m-expandable {
102
108
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
103
109
  }
@@ -401,6 +407,12 @@
401
407
  .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
402
408
  border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
403
409
  }
410
+ .pf-m-grid-md.pf-v6-c-table.pf-m-animate-expand {
411
+ --pf-v6-c-table__expandable-row--Display: block;
412
+ }
413
+ .pf-m-grid-md.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
414
+ content: none;
415
+ }
404
416
  .pf-m-grid-md.pf-v6-c-table.pf-m-expandable {
405
417
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
406
418
  }
@@ -707,6 +719,12 @@
707
719
  .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
708
720
  border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
709
721
  }
722
+ .pf-m-grid-lg.pf-v6-c-table.pf-m-animate-expand {
723
+ --pf-v6-c-table__expandable-row--Display: block;
724
+ }
725
+ .pf-m-grid-lg.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
726
+ content: none;
727
+ }
710
728
  .pf-m-grid-lg.pf-v6-c-table.pf-m-expandable {
711
729
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
712
730
  }
@@ -1013,6 +1031,12 @@
1013
1031
  .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
1014
1032
  border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
1015
1033
  }
1034
+ .pf-m-grid-xl.pf-v6-c-table.pf-m-animate-expand {
1035
+ --pf-v6-c-table__expandable-row--Display: block;
1036
+ }
1037
+ .pf-m-grid-xl.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
1038
+ content: none;
1039
+ }
1016
1040
  .pf-m-grid-xl.pf-v6-c-table.pf-m-expandable {
1017
1041
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
1018
1042
  }
@@ -1319,6 +1343,12 @@
1319
1343
  .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
1320
1344
  border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
1321
1345
  }
1346
+ .pf-m-grid-2xl.pf-v6-c-table.pf-m-animate-expand {
1347
+ --pf-v6-c-table__expandable-row--Display: block;
1348
+ }
1349
+ .pf-m-grid-2xl.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
1350
+ content: none;
1351
+ }
1322
1352
  .pf-m-grid-2xl.pf-v6-c-table.pf-m-expandable {
1323
1353
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
1324
1354
  }
package/css/components/Table/table-grid.d.ts CHANGED
@@ -3,8 +3,9 @@ declare const _default: {
3
3
  "button": "pf-v6-c-button",
4
4
  "modifiers": {
5
5
  "grid": "pf-m-grid",
6
- "expandable": "pf-m-expandable",
6
+ "animateExpand": "pf-m-animate-expand",
7
7
  "expanded": "pf-m-expanded",
8
+ "expandable": "pf-m-expandable",
8
9
  "selected": "pf-m-selected",
9
10
  "compact": "pf-m-compact",
10
11
  "action": "pf-m-action",
package/css/components/Table/table-grid.js CHANGED
@@ -5,8 +5,9 @@ exports.default = {
5
5
  "button": "pf-v6-c-button",
6
6
  "modifiers": {
7
7
  "grid": "pf-m-grid",
8
- "expandable": "pf-m-expandable",
8
+ "animateExpand": "pf-m-animate-expand",
9
9
  "expanded": "pf-m-expanded",
10
+ "expandable": "pf-m-expandable",
10
11
  "selected": "pf-m-selected",
11
12
  "compact": "pf-m-compact",
12
13
  "action": "pf-m-action",
package/css/components/Table/table-grid.mjs CHANGED
@@ -3,8 +3,9 @@ export default {
3
3
  "button": "pf-v6-c-button",
4
4
  "modifiers": {
5
5
  "grid": "pf-m-grid",
6
- "expandable": "pf-m-expandable",
6
+ "animateExpand": "pf-m-animate-expand",
7
7
  "expanded": "pf-m-expanded",
8
+ "expandable": "pf-m-expandable",
8
9
  "selected": "pf-m-selected",
9
10
  "compact": "pf-m-compact",
10
11
  "action": "pf-m-action",
package/css/components/Table/table.css CHANGED
@@ -10,7 +10,8 @@
10
10
  --pf-v6-c-table__caption--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
11
11
  --pf-v6-c-table__thead--cell--FontSize: var(--pf-t--global--font--size--body--sm);
12
12
  --pf-v6-c-table__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold);
13
- --pf-v6-c-table__thead__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
13
+ --pf-v6-c-table__thead__toggle--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base);
14
+ --pf-v6-c-table__thead__toggle--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base);
14
15
  --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base);
15
16
  --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base);
16
17
  --pf-v6-c-table__tbody--cell--FontSize: var(--pf-t--global--font--size--body--default);
@@ -422,8 +423,11 @@
422
423
  .pf-v6-c-table .pf-v6-c-button .pf-v6-c-table__sort-indicator {
423
424
  --pf-v6-c-table__sort-indicator--MarginInlineStart: 0;
424
425
  }
426
+ .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody.pf-m-expanded > .pf-v6-c-table__control-row {
427
+ border-block-end: 0;
428
+ }
425
429
  .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row {
426
- display: revert;
430
+ display: var(--pf-v6-c-table__expandable-row--Display, revert);
427
431
  visibility: hidden;
428
432
  opacity: var(--pf-v6-c-table__expandable-row--Opacity);
429
433
  transition-delay: 0s, 0s, var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade);
@@ -433,7 +437,7 @@
433
437
  translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
434
438
  }
435
439
  .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row[hidden] {
436
- display: revert;
440
+ display: var(--pf-v6-c-table__expandable-row--Display, revert);
437
441
  }
438
442
  .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row.pf-m-expanded {
439
443
  visibility: visible;
@@ -455,6 +459,9 @@
455
459
  .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content {
456
460
  max-height: 0;
457
461
  }
462
+ .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__tr:has(~ .pf-v6-c-table__expandable-row) {
463
+ border-block-end: 0;
464
+ }
458
465
  .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__control-row.pf-m-no-animate-expand ~ .pf-v6-c-table__expandable-row {
459
466
  --pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade: 0s;
460
467
  --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: 0s;
@@ -607,6 +614,12 @@
607
614
  --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table__toggle--PaddingInlineStart);
608
615
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table__toggle--PaddingInlineEnd);
609
616
  }
617
+ .pf-v6-c-table__thead .pf-v6-c-table__toggle .pf-v6-c-button {
618
+ margin-block-start: calc(var(--pf-v6-c-button--PaddingBlockStart) * -1);
619
+ margin-block-end: calc(var(--pf-v6-c-button--PaddingBlockEnd) * -1);
620
+ line-height: 1lh;
621
+ }
622
+
610
623
  .pf-v6-c-table__toggle .pf-v6-c-button.pf-m-expanded .pf-v6-c-table__toggle-icon {
611
624
  transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
612
625
  }
@@ -729,6 +742,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
729
742
  align-self: last baseline;
730
743
  margin-inline-start: var(--pf-v6-c-table__column-help--MarginInlineStart);
731
744
  }
745
+ .pf-v6-c-table__column-help-action .pf-v6-c-button {
746
+ line-height: 1lh;
747
+ }
732
748
 
733
749
  .pf-v6-c-table__sort {
734
750
  vertical-align: bottom;
@@ -766,23 +782,22 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
766
782
  position: relative;
767
783
  border-block-end: 0 solid transparent;
768
784
  }
769
- .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
770
- .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
785
+ :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
786
+ :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
771
787
  padding-block-start: 0;
772
788
  }
773
- .pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
774
- .pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
789
+ .pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row.pf-m-expanded > :is(.pf-v6-c-table__th, .pf-v6-c-table__td):not(.pf-m-no-padding) {
775
790
  padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart);
776
791
  }
777
- .pf-v6-c-table__expandable-row .pf-v6-c-table__td.pf-m-no-padding,
778
- .pf-v6-c-table__expandable-row .pf-v6-c-table__th.pf-m-no-padding {
792
+ .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding,
793
+ .pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding {
779
794
  padding-block-start: 0;
780
795
  padding-block-end: 0;
781
796
  padding-inline-start: 0;
782
797
  padding-inline-end: 0;
783
798
  }
784
- .pf-v6-c-table__expandable-row .pf-v6-c-table__td.pf-m-no-padding .pf-v6-c-table__expandable-row-content,
785
- .pf-v6-c-table__expandable-row .pf-v6-c-table__th.pf-m-no-padding .pf-v6-c-table__expandable-row-content {
799
+ .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding .pf-v6-c-table__expandable-row-content,
800
+ .pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding .pf-v6-c-table__expandable-row-content {
786
801
  padding: 0;
787
802
  border-radius: 0;
788
803
  }
@@ -808,10 +823,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
808
823
  border-block-end: 0;
809
824
  }
810
825
 
811
- .pf-v6-c-table__tr:has(~ .pf-v6-c-table__expandable-row) {
812
- border-block-end: 0;
813
- }
814
-
815
826
  .pf-v6-c-table.pf-m-compact {
816
827
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--PaddingBlockStart);
817
828
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact--cell--PaddingBlockEnd);
@@ -844,6 +855,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
844
855
 
845
856
  .pf-v6-c-table__thead {
846
857
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
858
+ --pf-v6-c-table__toggle--PaddingBlockStart: var(--pf-v6-c-table__thead__toggle--PaddingBlockStart);
847
859
  --pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-v6-c-table__thead__toggle--PaddingBlockEnd);
848
860
  vertical-align: bottom;
849
861
  }
@@ -871,6 +883,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
871
883
  }
872
884
  .pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded .pf-v6-c-table__control-row {
873
885
  background-color: var(--pf-v6-c-table__control-row--BackgroundColor);
886
+ border-block-end: var(--pf-v6-c-table__control-row--BorderBlockEndWidth) solid var(--pf-v6-c-table__control-row__tbody--BorderBlockEndColor);
887
+ }
888
+ .pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded .pf-v6-c-table__control-row.pf-m-expanded {
874
889
  border-block-end: 0;
875
890
  }
876
891
 
package/css/components/TextInputGroup/text-input-group.css CHANGED
@@ -31,6 +31,7 @@
31
31
  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
32
32
  --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
33
33
  --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
34
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
34
35
  --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
35
36
  --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
36
37
  --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
@@ -77,6 +78,8 @@
77
78
  }
78
79
  .pf-v6-c-text-input-group.pf-m-disabled {
79
80
  --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
81
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
82
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
80
83
  --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
81
84
  --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
82
85
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
@@ -187,6 +190,7 @@
187
190
  padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
188
191
  padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
189
192
  padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
193
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
190
194
  background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
191
195
  border: 0;
192
196
  outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
package/css/components/_index.css CHANGED
@@ -1855,7 +1855,7 @@ button.pf-v6-c-breadcrumb__link {
1855
1855
  cursor: pointer;
1856
1856
  -webkit-user-select: none;
1857
1857
  user-select: none;
1858
- background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000%;
1858
+ background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
1859
1859
  border: 0;
1860
1860
  border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
1861
1861
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
@@ -2208,7 +2208,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2208
2208
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
2209
2209
  }
2210
2210
  .pf-v6-c-button:active {
2211
- background-size: 100%;
2211
+ background-size: 100% 100%;
2212
2212
  transition-duration: 0s;
2213
2213
  }
2214
2214
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
@@ -15747,6 +15747,12 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15747
15747
  .pf-m-grid.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
15748
15748
  border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
15749
15749
  }
15750
+ .pf-m-grid.pf-v6-c-table.pf-m-animate-expand {
15751
+ --pf-v6-c-table__expandable-row--Display: block;
15752
+ }
15753
+ .pf-m-grid.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
15754
+ content: none;
15755
+ }
15750
15756
  .pf-m-grid.pf-v6-c-table.pf-m-expandable {
15751
15757
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
15752
15758
  }
@@ -16050,6 +16056,12 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16050
16056
  .pf-m-grid-md.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
16051
16057
  border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
16052
16058
  }
16059
+ .pf-m-grid-md.pf-v6-c-table.pf-m-animate-expand {
16060
+ --pf-v6-c-table__expandable-row--Display: block;
16061
+ }
16062
+ .pf-m-grid-md.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
16063
+ content: none;
16064
+ }
16053
16065
  .pf-m-grid-md.pf-v6-c-table.pf-m-expandable {
16054
16066
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
16055
16067
  }
@@ -16356,6 +16368,12 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16356
16368
  .pf-m-grid-lg.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
16357
16369
  border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
16358
16370
  }
16371
+ .pf-m-grid-lg.pf-v6-c-table.pf-m-animate-expand {
16372
+ --pf-v6-c-table__expandable-row--Display: block;
16373
+ }
16374
+ .pf-m-grid-lg.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
16375
+ content: none;
16376
+ }
16359
16377
  .pf-m-grid-lg.pf-v6-c-table.pf-m-expandable {
16360
16378
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
16361
16379
  }
@@ -16662,6 +16680,12 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16662
16680
  .pf-m-grid-xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
16663
16681
  border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
16664
16682
  }
16683
+ .pf-m-grid-xl.pf-v6-c-table.pf-m-animate-expand {
16684
+ --pf-v6-c-table__expandable-row--Display: block;
16685
+ }
16686
+ .pf-m-grid-xl.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
16687
+ content: none;
16688
+ }
16665
16689
  .pf-m-grid-xl.pf-v6-c-table.pf-m-expandable {
16666
16690
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
16667
16691
  }
@@ -16968,6 +16992,12 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16968
16992
  .pf-m-grid-2xl.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody):first-of-type {
16969
16993
  border-block-start: var(--pf-v6-c-table__tbody--responsive--border-width--base) solid var(--pf-v6-c-table--responsive--BorderColor);
16970
16994
  }
16995
+ .pf-m-grid-2xl.pf-v6-c-table.pf-m-animate-expand {
16996
+ --pf-v6-c-table__expandable-row--Display: block;
16997
+ }
16998
+ .pf-m-grid-2xl.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th)[data-label]::before {
16999
+ content: none;
17000
+ }
16971
17001
  .pf-m-grid-2xl.pf-v6-c-table.pf-m-expandable {
16972
17002
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
16973
17003
  }
@@ -17246,7 +17276,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17246
17276
  --pf-v6-c-table__caption--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
17247
17277
  --pf-v6-c-table__thead--cell--FontSize: var(--pf-t--global--font--size--body--sm);
17248
17278
  --pf-v6-c-table__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold);
17249
- --pf-v6-c-table__thead__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
17279
+ --pf-v6-c-table__thead__toggle--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base);
17280
+ --pf-v6-c-table__thead__toggle--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base);
17250
17281
  --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base);
17251
17282
  --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base);
17252
17283
  --pf-v6-c-table__tbody--cell--FontSize: var(--pf-t--global--font--size--body--default);
@@ -17658,8 +17689,11 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17658
17689
  .pf-v6-c-table .pf-v6-c-button .pf-v6-c-table__sort-indicator {
17659
17690
  --pf-v6-c-table__sort-indicator--MarginInlineStart: 0;
17660
17691
  }
17692
+ .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody.pf-m-expanded > .pf-v6-c-table__control-row {
17693
+ border-block-end: 0;
17694
+ }
17661
17695
  .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row {
17662
- display: revert;
17696
+ display: var(--pf-v6-c-table__expandable-row--Display, revert);
17663
17697
  visibility: hidden;
17664
17698
  opacity: var(--pf-v6-c-table__expandable-row--Opacity);
17665
17699
  transition-delay: 0s, 0s, var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade);
@@ -17669,7 +17703,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17669
17703
  translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
17670
17704
  }
17671
17705
  .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row[hidden] {
17672
- display: revert;
17706
+ display: var(--pf-v6-c-table__expandable-row--Display, revert);
17673
17707
  }
17674
17708
  .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row.pf-m-expanded {
17675
17709
  visibility: visible;
@@ -17691,6 +17725,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17691
17725
  .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content {
17692
17726
  max-height: 0;
17693
17727
  }
17728
+ .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__tr:has(~ .pf-v6-c-table__expandable-row) {
17729
+ border-block-end: 0;
17730
+ }
17694
17731
  .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__control-row.pf-m-no-animate-expand ~ .pf-v6-c-table__expandable-row {
17695
17732
  --pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade: 0s;
17696
17733
  --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: 0s;
@@ -17843,6 +17880,12 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17843
17880
  --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table__toggle--PaddingInlineStart);
17844
17881
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table__toggle--PaddingInlineEnd);
17845
17882
  }
17883
+ .pf-v6-c-table__thead .pf-v6-c-table__toggle .pf-v6-c-button {
17884
+ margin-block-start: calc(var(--pf-v6-c-button--PaddingBlockStart) * -1);
17885
+ margin-block-end: calc(var(--pf-v6-c-button--PaddingBlockEnd) * -1);
17886
+ line-height: 1lh;
17887
+ }
17888
+
17846
17889
  .pf-v6-c-table__toggle .pf-v6-c-button.pf-m-expanded .pf-v6-c-table__toggle-icon {
17847
17890
  transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
17848
17891
  }
@@ -17965,6 +18008,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
17965
18008
  align-self: last baseline;
17966
18009
  margin-inline-start: var(--pf-v6-c-table__column-help--MarginInlineStart);
17967
18010
  }
18011
+ .pf-v6-c-table__column-help-action .pf-v6-c-button {
18012
+ line-height: 1lh;
18013
+ }
17968
18014
 
17969
18015
  .pf-v6-c-table__sort {
17970
18016
  vertical-align: bottom;
@@ -18002,23 +18048,22 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18002
18048
  position: relative;
18003
18049
  border-block-end: 0 solid transparent;
18004
18050
  }
18005
- .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
18006
- .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
18051
+ :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
18052
+ :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
18007
18053
  padding-block-start: 0;
18008
18054
  }
18009
- .pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
18010
- .pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
18055
+ .pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row.pf-m-expanded > :is(.pf-v6-c-table__th, .pf-v6-c-table__td):not(.pf-m-no-padding) {
18011
18056
  padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart);
18012
18057
  }
18013
- .pf-v6-c-table__expandable-row .pf-v6-c-table__td.pf-m-no-padding,
18014
- .pf-v6-c-table__expandable-row .pf-v6-c-table__th.pf-m-no-padding {
18058
+ .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding,
18059
+ .pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding {
18015
18060
  padding-block-start: 0;
18016
18061
  padding-block-end: 0;
18017
18062
  padding-inline-start: 0;
18018
18063
  padding-inline-end: 0;
18019
18064
  }
18020
- .pf-v6-c-table__expandable-row .pf-v6-c-table__td.pf-m-no-padding .pf-v6-c-table__expandable-row-content,
18021
- .pf-v6-c-table__expandable-row .pf-v6-c-table__th.pf-m-no-padding .pf-v6-c-table__expandable-row-content {
18065
+ .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding .pf-v6-c-table__expandable-row-content,
18066
+ .pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding .pf-v6-c-table__expandable-row-content {
18022
18067
  padding: 0;
18023
18068
  border-radius: 0;
18024
18069
  }
@@ -18044,10 +18089,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18044
18089
  border-block-end: 0;
18045
18090
  }
18046
18091
 
18047
- .pf-v6-c-table__tr:has(~ .pf-v6-c-table__expandable-row) {
18048
- border-block-end: 0;
18049
- }
18050
-
18051
18092
  .pf-v6-c-table.pf-m-compact {
18052
18093
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--PaddingBlockStart);
18053
18094
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact--cell--PaddingBlockEnd);
@@ -18080,6 +18121,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18080
18121
 
18081
18122
  .pf-v6-c-table__thead {
18082
18123
  --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
18124
+ --pf-v6-c-table__toggle--PaddingBlockStart: var(--pf-v6-c-table__thead__toggle--PaddingBlockStart);
18083
18125
  --pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-v6-c-table__thead__toggle--PaddingBlockEnd);
18084
18126
  vertical-align: bottom;
18085
18127
  }
@@ -18107,6 +18149,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18107
18149
  }
18108
18150
  .pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded .pf-v6-c-table__control-row {
18109
18151
  background-color: var(--pf-v6-c-table__control-row--BackgroundColor);
18152
+ border-block-end: var(--pf-v6-c-table__control-row--BorderBlockEndWidth) solid var(--pf-v6-c-table__control-row__tbody--BorderBlockEndColor);
18153
+ }
18154
+ .pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded .pf-v6-c-table__control-row.pf-m-expanded {
18110
18155
  border-block-end: 0;
18111
18156
  }
18112
18157
 
@@ -19991,6 +20036,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19991
20036
  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
19992
20037
  --pf-v6-c-text-input-group__text-input--MinWidth: 12ch;
19993
20038
  --pf-v6-c-text-input-group__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
20039
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-t--global--text--color--regular);
19994
20040
  --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
19995
20041
  --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
19996
20042
  --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
@@ -20037,6 +20083,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20037
20083
  }
20038
20084
  .pf-v6-c-text-input-group.pf-m-disabled {
20039
20085
  --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
20086
+ --pf-v6-c-text-input-group__text-input--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
20087
+ --pf-v6-c-text-input-group__text-input--placeholder--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
20040
20088
  --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
20041
20089
  --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
20042
20090
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
@@ -20147,6 +20195,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20147
20195
  padding-block-end: var(--pf-v6-c-text-input-group__text-input--PaddingBlockEnd);
20148
20196
  padding-inline-start: var(--pf-v6-c-text-input-group__text-input--PaddingInlineStart);
20149
20197
  padding-inline-end: var(--pf-v6-c-text-input-group__text-input--PaddingInlineEnd);
20198
+ color: var(--pf-v6-c-text-input-group__text-input--Color);
20150
20199
  background-color: var(--pf-v6-c-text-input-group__text-input--BackgroundColor);
20151
20200
  border: 0;
20152
20201
  outline-offset: var(--pf-v6-c-text-input-group__text-input--OutlineOffset);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "6.3.0-prerelease.9",
3
+ "version": "6.3.1",
4
4
  "main": "dist/js/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/esm/index.d.ts",
@@ -19,10 +19,10 @@
19
19
  "clean": "rimraf dist css"
20
20
  },
21
21
  "devDependencies": {
22
- "@patternfly/patternfly": "6.3.0-prerelease.36",
22
+ "@patternfly/patternfly": "6.3.1",
23
23
  "change-case": "^5.4.4",
24
24
  "fs-extra": "^11.3.0"
25
25
  },
26
26
  "license": "MIT",
27
- "gitHead": "46b82e579ecedf3676a698830fb0a742985e7517"
27
+ "gitHead": "08775efb8b882f3b2b6cf7b7221f41154875415b"
28
28
  }