@patternfly/patternfly 6.3.0-prerelease.26 → 6.3.0-prerelease.28

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 (34) hide show
  1. package/base/patternfly-common.css +35 -0
  2. package/base/patternfly-common.scss +46 -1
  3. package/components/Accordion/accordion.css +1 -1
  4. package/components/Accordion/accordion.scss +1 -1
  5. package/components/DualListSelector/dual-list-selector.css +1 -1
  6. package/components/DualListSelector/dual-list-selector.scss +1 -1
  7. package/components/ExpandableSection/expandable-section.css +1 -1
  8. package/components/ExpandableSection/expandable-section.scss +1 -1
  9. package/components/Form/form.css +1 -1
  10. package/components/Form/form.scss +1 -1
  11. package/components/FormControl/form-control.css +16 -0
  12. package/components/FormControl/form-control.scss +9 -0
  13. package/components/Nav/nav.css +1 -1
  14. package/components/Nav/nav.scss +1 -1
  15. package/components/Progress/progress.css +16 -0
  16. package/components/Progress/progress.scss +11 -1
  17. package/components/Table/table.css +52 -25
  18. package/components/Table/table.scss +73 -22
  19. package/components/TextInputGroup/text-input-group.css +16 -0
  20. package/components/TextInputGroup/text-input-group.scss +8 -0
  21. package/components/TreeView/tree-view.css +1 -1
  22. package/components/TreeView/tree-view.scss +1 -1
  23. package/components/_index.css +106 -31
  24. package/docs/components/Table/examples/Table.md +8586 -5760
  25. package/docs/demos/Card/examples/Card.md +1 -1
  26. package/docs/demos/Table/examples/Table.md +2 -2
  27. package/package.json +2 -2
  28. package/patternfly-base-no-globals.css +34 -0
  29. package/patternfly-base.css +34 -0
  30. package/patternfly-no-globals.css +140 -31
  31. package/patternfly.css +140 -31
  32. package/patternfly.min.css +1 -1
  33. package/patternfly.min.css.map +1 -1
  34. package/sass-utilities/mixins.scss +19 -0
@@ -395,7 +395,7 @@
395
395
  overflow-y: auto;
396
396
  }
397
397
  .pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
398
- max-height: 9999px;
398
+ max-height: 99999px;
399
399
  margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
400
400
  visibility: revert;
401
401
  transition-delay: 0s;
@@ -5018,7 +5018,7 @@ ul) {
5018
5018
  --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: var(--pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate);
5019
5019
  }
5020
5020
  .pf-v6-c-dual-list-selector.pf-m-animate-expand .pf-v6-c-dual-list-selector__list-item.pf-m-expanded > .pf-v6-c-dual-list-selector__list {
5021
- max-height: 9999px;
5021
+ max-height: 99999px;
5022
5022
  visibility: revert;
5023
5023
  opacity: var(--pf-v6-c-dual-list-selector--m-expanded__list--Opacity);
5024
5024
  transition-delay: 0s;
@@ -6613,7 +6613,7 @@ ul) {
6613
6613
  --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
6614
6614
  --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
6615
6615
  --pf-v6-c-expandable-section__content--Visibility: auto;
6616
- --pf-v6-c-expandable-section__content--MaxHeight: 9999px;
6616
+ --pf-v6-c-expandable-section__content--MaxHeight: 99999px;
6617
6617
  --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
6618
6618
  gap: var(--pf-v6-c-expandable-section--Gap);
6619
6619
  }
@@ -7183,7 +7183,7 @@ ul) {
7183
7183
  --pf-v6-c-form__field-group-toggle-icon--Rotate: var(--pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate);
7184
7184
  }
7185
7185
  .pf-v6-c-form__field-group.pf-m-expanded.pf-m-expandable > .pf-v6-c-form__field-group-body {
7186
- max-height: 9999px;
7186
+ max-height: 99999px;
7187
7187
  padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
7188
7188
  padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
7189
7189
  visibility: visible;
@@ -7505,6 +7505,22 @@ ul) {
7505
7505
  --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
7506
7506
  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
7507
7507
  }
7508
+ @media (prefers-reduced-motion: no-preference) {
7509
+ .pf-v6-c-form-control.pf-m-error {
7510
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
7511
+ animation-name: pf-v6-global-danger-jiggle-motion;
7512
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
7513
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
7514
+ animation-fill-mode: both;
7515
+ }
7516
+ }
7517
+ .pf-v6-c-form-control.pf-m-error .pf-v6-c-form-control__icon.pf-m-status {
7518
+ --pf-v6-c-form-control--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
7519
+ --pf-v6-c-form-control--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
7520
+ animation-name: pf-v6-global-fade-in;
7521
+ animation-duration: var(--pf-v6-c-form-control--TransitionDuration--Opacity);
7522
+ animation-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction--Opacity);
7523
+ }
7508
7524
  .pf-v6-c-form-control.pf-m-error > textarea {
7509
7525
  padding-inline-end: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd, var(--pf-v6-c-form-control__textarea--m-error--PaddingInlineEnd));
7510
7526
  }
@@ -11666,7 +11682,7 @@ ul.pf-v6-c-list {
11666
11682
 
11667
11683
  .pf-v6-c-nav__subnav {
11668
11684
  --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
11669
- max-height: 9999px;
11685
+ max-height: 99999px;
11670
11686
  padding-block-start: var(--pf-v6-c-nav__subnav--PaddingBlockStart);
11671
11687
  padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
11672
11688
  padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
@@ -13621,6 +13637,22 @@ ul.pf-v6-c-list {
13621
13637
  --pf-v6-c-progress__status-icon--Color: var(--pf-v6-c-progress--m-danger__status-icon--Color);
13622
13638
  --pf-v6-c-progress--m-inside__measure--Color: var(--pf-v6-c-progress--m-danger--m-inside__measure--Color);
13623
13639
  }
13640
+ @media (prefers-reduced-motion: no-preference) {
13641
+ .pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__bar {
13642
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
13643
+ animation-name: pf-v6-global-danger-jiggle-motion;
13644
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
13645
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
13646
+ animation-fill-mode: both;
13647
+ }
13648
+ }
13649
+ .pf-v6-c-progress.pf-m-danger .pf-v6-c-progress__status-icon {
13650
+ --pf-v6-c-progress--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
13651
+ --pf-v6-c-progress--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
13652
+ animation-name: pf-v6-global-fade-in;
13653
+ animation-duration: var(--pf-v6-c-progress--TransitionDuration--Opacity);
13654
+ animation-timing-function: var(--pf-v6-c-progress--TransitionTimingFunction--Opacity);
13655
+ }
13624
13656
 
13625
13657
  .pf-v6-c-progress__description {
13626
13658
  grid-column: 1/2;
@@ -17136,8 +17168,6 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17136
17168
  --pf-v6-c-table__expandable-row--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
17137
17169
  --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: 0s;
17138
17170
  --pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
17139
- --pf-v6-c-table__expandable-row--TransitionDuration--slide: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide);
17140
- --pf-v6-c-table__expandable-row--TransitionDuration--fade: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade);
17141
17171
  --pf-v6-c-table__expandable-row--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
17142
17172
  --pf-v6-c-table__expandable-row--Opacity: 0;
17143
17173
  --pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity: 1;
@@ -17474,6 +17504,39 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17474
17504
  .pf-v6-c-table .pf-v6-c-button .pf-v6-c-table__sort-indicator {
17475
17505
  --pf-v6-c-table__sort-indicator--MarginInlineStart: 0;
17476
17506
  }
17507
+ .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row {
17508
+ display: revert;
17509
+ visibility: hidden;
17510
+ opacity: var(--pf-v6-c-table__expandable-row--Opacity);
17511
+ transition-delay: 0s, 0s, var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade);
17512
+ transition-timing-function: var(--pf-v6-c-table__expandable-row--TransitionTimingFunction);
17513
+ transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide), 0s;
17514
+ transition-property: opacity, translate, visibility;
17515
+ translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
17516
+ }
17517
+ .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row[hidden] {
17518
+ display: revert;
17519
+ }
17520
+ .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row.pf-m-expanded {
17521
+ visibility: visible;
17522
+ opacity: var(--pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity);
17523
+ transition-delay: 0s;
17524
+ transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--slide), 0s, 0s;
17525
+ translate: 0 var(--pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY);
17526
+ }
17527
+ .pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row.pf-m-expanded > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content {
17528
+ max-height: 99999px;
17529
+ }
17530
+ .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),
17531
+ .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 {
17532
+ padding: 0;
17533
+ overflow: hidden;
17534
+ transition-delay: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade);
17535
+ transition-property: padding, max-height, overflow;
17536
+ }
17537
+ .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 {
17538
+ max-height: 0;
17539
+ }
17477
17540
 
17478
17541
  [class*=pf-v6-c-table].pf-m-truncate {
17479
17542
  --pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--m-truncate--cell--MinWidth);
@@ -17778,28 +17841,26 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
17778
17841
  .pf-v6-c-table__expandable-row {
17779
17842
  position: relative;
17780
17843
  border-block-end: 0 solid transparent;
17781
- opacity: var(--pf-v6-c-table__expandable-row--Opacity);
17782
- transition-timing-function: var(--pf-v6-c-table__expandable-row--TransitionTimingFunction);
17783
- transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--slide), var(--pf-v6-c-table__expandable-row--TransitionDuration--fade);
17784
- transition-property: opacity, translate, display;
17785
- transition-behavior: allow-discrete;
17786
- translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
17787
17844
  }
17788
- :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
17789
- :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
17845
+ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
17846
+ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
17790
17847
  padding-block-start: 0;
17791
17848
  }
17792
-
17793
- .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding,
17794
- .pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding {
17849
+ .pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
17850
+ .pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
17851
+ padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart);
17852
+ }
17853
+ .pf-v6-c-table__expandable-row .pf-v6-c-table__td.pf-m-no-padding,
17854
+ .pf-v6-c-table__expandable-row .pf-v6-c-table__th.pf-m-no-padding {
17795
17855
  padding-block-start: 0;
17796
17856
  padding-block-end: 0;
17797
17857
  padding-inline-start: 0;
17798
17858
  padding-inline-end: 0;
17799
17859
  }
17800
- .pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding .pf-v6-c-table__expandable-row-content,
17801
- .pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding .pf-v6-c-table__expandable-row-content {
17860
+ .pf-v6-c-table__expandable-row .pf-v6-c-table__td.pf-m-no-padding .pf-v6-c-table__expandable-row-content,
17861
+ .pf-v6-c-table__expandable-row .pf-v6-c-table__th.pf-m-no-padding .pf-v6-c-table__expandable-row-content {
17802
17862
  padding: 0;
17863
+ border-radius: 0;
17803
17864
  }
17804
17865
  .pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content {
17805
17866
  padding-block-start: var(--pf-v6-c-table__expandable-row-content--PaddingBlockStart);
@@ -17809,18 +17870,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
17809
17870
  background-color: var(--pf-v6-c-table__expandable-row-content--BackgroundColor);
17810
17871
  border-radius: var(--pf-v6-c-table__expandable-row-content--BorderRadius);
17811
17872
  }
17873
+ .pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content.pf-m-no-background {
17874
+ background-color: transparent;
17875
+ }
17812
17876
  .pf-v6-c-table__expandable-row.pf-m-expanded {
17813
17877
  border-block-end-color: var(--pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor);
17814
17878
  border-block-end-width: var(--pf-v6-c-table--border-width--base);
17815
- opacity: var(--pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity);
17816
- transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--slide), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade);
17817
- translate: 0 var(--pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY);
17818
- }
17819
- @starting-style {
17820
- .pf-v6-c-table__expandable-row.pf-m-expanded {
17821
- opacity: var(--pf-v6-c-table__expandable-row--Opacity);
17822
- translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
17823
- }
17824
17879
  }
17825
17880
  .pf-v6-c-table__expandable-row:not(.pf-m-expanded) {
17826
17881
  display: none;
@@ -17829,6 +17884,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
17829
17884
  border-block-end: 0;
17830
17885
  }
17831
17886
 
17887
+ .pf-v6-c-table__tr:has(~ .pf-v6-c-table__expandable-row) {
17888
+ border-block-end: 0;
17889
+ }
17890
+
17832
17891
  .pf-v6-c-table.pf-m-compact {
17833
17892
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--PaddingBlockStart);
17834
17893
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact--cell--PaddingBlockEnd);
@@ -17884,7 +17943,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
17884
17943
  }
17885
17944
  .pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded .pf-v6-c-table__control-row {
17886
17945
  background-color: var(--pf-v6-c-table__control-row--BackgroundColor);
17887
- border-block-end: var(--pf-v6-c-table__control-row--BorderBlockEndWidth) solid var(--pf-v6-c-table__control-row__tbody--BorderBlockEndColor);
17946
+ border-block-end: 0;
17888
17947
  }
17889
17948
 
17890
17949
  .pf-v6-c-table__tr {
@@ -19840,6 +19899,22 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19840
19899
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
19841
19900
  --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
19842
19901
  }
19902
+ @media (prefers-reduced-motion: no-preference) {
19903
+ .pf-v6-c-text-input-group.pf-m-error {
19904
+ translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
19905
+ animation-name: pf-v6-global-danger-jiggle-motion;
19906
+ animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
19907
+ animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
19908
+ animation-fill-mode: both;
19909
+ }
19910
+ }
19911
+ .pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
19912
+ --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
19913
+ --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
19914
+ animation-name: pf-v6-global-fade-in;
19915
+ animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
19916
+ animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
19917
+ }
19843
19918
  .pf-v6-c-text-input-group:hover {
19844
19919
  --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
19845
19920
  }
@@ -22697,7 +22772,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22697
22772
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
22698
22773
  }
22699
22774
  .pf-v6-c-tree-view__list-item.pf-m-expanded > .pf-v6-c-tree-view__list {
22700
- max-height: 9999px;
22775
+ max-height: 99999px;
22701
22776
  visibility: revert;
22702
22777
  opacity: var(--pf-v6-c-tree-view--m-expanded__list--Opacity);
22703
22778
  transition-delay: 0s;