@patternfly/patternfly 5.4.0-prerelease.6 → 5.4.0-prerelease.8

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/components/Form/form.css +59 -2
  2. package/components/Form/form.scss +15 -3
  3. package/docs/components/Form/examples/Form.md +41 -1
  4. package/docs/components/InlineEdit/examples/InlineEdit.md +29 -22
  5. package/package.json +7 -6
  6. package/patternfly-no-globals.css +59 -2
  7. package/patternfly-theme-dark-unversioned.css +59 -2
  8. package/patternfly.css +59 -2
  9. package/patternfly.min.css +1 -1
  10. package/patternfly.min.css.map +1 -1
package/patternfly-theme-dark-unversioned.css CHANGED
@@ -14595,8 +14595,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14595
14595
  --pf-v5-c-form__group-label-help--Color: var(--pf-v5-global--Color--200);
14596
14596
  --pf-v5-c-form__group-label-help--hover--Color: var(--pf-v5-global--Color--100);
14597
14597
  --pf-v5-c-form__group-label-help--focus--Color: var(--pf-v5-global--Color--100);
14598
- --pf-v5-c-form__group-label-info--MarginLeft: var(--pf-v5-global--spacer--sm);
14598
+ --pf-v5-c-form__group-label--m-info--Gap: var(--pf-v5-global--spacer--sm);
14599
14599
  --pf-v5-c-form__group-label-info--FontSize: var(--pf-v5-global--FontSize--sm);
14600
+ --pf-v5-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-v5-global--spacer--sm);
14600
14601
  --pf-v5-c-form__group-control--m-inline--child--MarginRight: var(--pf-v5-global--spacer--lg);
14601
14602
  --pf-v5-c-form__group-control__helper-text--MarginBottom: var(--pf-v5-global--spacer--xs);
14602
14603
  --pf-v5-c-form__group-control--m-stack--Gap: var(--pf-v5-global--spacer--sm);
@@ -14682,6 +14683,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14682
14683
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14683
14684
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14684
14685
  }
14686
+ .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-label.pf-m-info {
14687
+ flex-direction: column;
14688
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14689
+ align-items: flex-start;
14690
+ }
14691
+ .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-label-main {
14692
+ flex-grow: 0;
14693
+ }
14685
14694
  .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-control {
14686
14695
  grid-column: 2;
14687
14696
  }
@@ -14702,6 +14711,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14702
14711
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14703
14712
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14704
14713
  }
14714
+ .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-label.pf-m-info {
14715
+ flex-direction: column;
14716
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14717
+ align-items: flex-start;
14718
+ }
14719
+ .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-label-main {
14720
+ flex-grow: 0;
14721
+ }
14705
14722
  .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-control {
14706
14723
  grid-column: 2;
14707
14724
  }
@@ -14722,6 +14739,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14722
14739
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14723
14740
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14724
14741
  }
14742
+ .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-label.pf-m-info {
14743
+ flex-direction: column;
14744
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14745
+ align-items: flex-start;
14746
+ }
14747
+ .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-label-main {
14748
+ flex-grow: 0;
14749
+ }
14725
14750
  .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-control {
14726
14751
  grid-column: 2;
14727
14752
  }
@@ -14742,6 +14767,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14742
14767
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14743
14768
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14744
14769
  }
14770
+ .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-label.pf-m-info {
14771
+ flex-direction: column;
14772
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14773
+ align-items: flex-start;
14774
+ }
14775
+ .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-label-main {
14776
+ flex-grow: 0;
14777
+ }
14745
14778
  .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-control {
14746
14779
  grid-column: 2;
14747
14780
  }
@@ -14762,6 +14795,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14762
14795
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14763
14796
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14764
14797
  }
14798
+ .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-label.pf-m-info {
14799
+ flex-direction: column;
14800
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14801
+ align-items: flex-start;
14802
+ }
14803
+ .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-label-main {
14804
+ flex-grow: 0;
14805
+ }
14765
14806
  .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-control {
14766
14807
  grid-column: 2;
14767
14808
  }
@@ -14782,6 +14823,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14782
14823
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14783
14824
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14784
14825
  }
14826
+ .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-label.pf-m-info {
14827
+ flex-direction: column;
14828
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14829
+ align-items: flex-start;
14830
+ }
14831
+ .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-label-main {
14832
+ flex-grow: 0;
14833
+ }
14785
14834
  .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-control {
14786
14835
  grid-column: 2;
14787
14836
  }
@@ -14802,6 +14851,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14802
14851
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14803
14852
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14804
14853
  }
14854
+ .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-label.pf-m-info {
14855
+ flex-direction: column;
14856
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14857
+ align-items: flex-start;
14858
+ }
14859
+ .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-label-main {
14860
+ flex-grow: 0;
14861
+ }
14805
14862
  .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-control {
14806
14863
  grid-column: 2;
14807
14864
  }
@@ -14838,6 +14895,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14838
14895
  }
14839
14896
  .pf-v5-c-form__group-label.pf-m-info {
14840
14897
  display: flex;
14898
+ gap: var(--pf-v5-c-form__group-label--m-info--Gap);
14841
14899
  align-items: flex-end;
14842
14900
  }
14843
14901
 
@@ -14846,7 +14904,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14846
14904
  }
14847
14905
 
14848
14906
  .pf-v5-c-form__group-label-info {
14849
- margin-inline-start: var(--pf-v5-c-form__group-label-info--MarginLeft);
14850
14907
  font-size: var(--pf-v5-c-form__group-label-info--FontSize);
14851
14908
  }
14852
14909
 
package/patternfly.css CHANGED
@@ -14595,8 +14595,9 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14595
14595
  --pf-v5-c-form__group-label-help--Color: var(--pf-v5-global--Color--200);
14596
14596
  --pf-v5-c-form__group-label-help--hover--Color: var(--pf-v5-global--Color--100);
14597
14597
  --pf-v5-c-form__group-label-help--focus--Color: var(--pf-v5-global--Color--100);
14598
- --pf-v5-c-form__group-label-info--MarginLeft: var(--pf-v5-global--spacer--sm);
14598
+ --pf-v5-c-form__group-label--m-info--Gap: var(--pf-v5-global--spacer--sm);
14599
14599
  --pf-v5-c-form__group-label-info--FontSize: var(--pf-v5-global--FontSize--sm);
14600
+ --pf-v5-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-v5-global--spacer--sm);
14600
14601
  --pf-v5-c-form__group-control--m-inline--child--MarginRight: var(--pf-v5-global--spacer--lg);
14601
14602
  --pf-v5-c-form__group-control__helper-text--MarginBottom: var(--pf-v5-global--spacer--xs);
14602
14603
  --pf-v5-c-form__group-control--m-stack--Gap: var(--pf-v5-global--spacer--sm);
@@ -14682,6 +14683,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14682
14683
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14683
14684
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14684
14685
  }
14686
+ .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-label.pf-m-info {
14687
+ flex-direction: column;
14688
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14689
+ align-items: flex-start;
14690
+ }
14691
+ .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-label-main {
14692
+ flex-grow: 0;
14693
+ }
14685
14694
  .pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-control {
14686
14695
  grid-column: 2;
14687
14696
  }
@@ -14702,6 +14711,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14702
14711
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14703
14712
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14704
14713
  }
14714
+ .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-label.pf-m-info {
14715
+ flex-direction: column;
14716
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14717
+ align-items: flex-start;
14718
+ }
14719
+ .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-label-main {
14720
+ flex-grow: 0;
14721
+ }
14705
14722
  .pf-v5-c-form.pf-m-horizontal-on-xs .pf-v5-c-form__group-control {
14706
14723
  grid-column: 2;
14707
14724
  }
@@ -14722,6 +14739,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14722
14739
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14723
14740
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14724
14741
  }
14742
+ .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-label.pf-m-info {
14743
+ flex-direction: column;
14744
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14745
+ align-items: flex-start;
14746
+ }
14747
+ .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-label-main {
14748
+ flex-grow: 0;
14749
+ }
14725
14750
  .pf-v5-c-form.pf-m-horizontal-on-sm .pf-v5-c-form__group-control {
14726
14751
  grid-column: 2;
14727
14752
  }
@@ -14742,6 +14767,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14742
14767
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14743
14768
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14744
14769
  }
14770
+ .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-label.pf-m-info {
14771
+ flex-direction: column;
14772
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14773
+ align-items: flex-start;
14774
+ }
14775
+ .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-label-main {
14776
+ flex-grow: 0;
14777
+ }
14745
14778
  .pf-v5-c-form.pf-m-horizontal-on-md .pf-v5-c-form__group-control {
14746
14779
  grid-column: 2;
14747
14780
  }
@@ -14762,6 +14795,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14762
14795
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14763
14796
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14764
14797
  }
14798
+ .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-label.pf-m-info {
14799
+ flex-direction: column;
14800
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14801
+ align-items: flex-start;
14802
+ }
14803
+ .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-label-main {
14804
+ flex-grow: 0;
14805
+ }
14765
14806
  .pf-v5-c-form.pf-m-horizontal-on-lg .pf-v5-c-form__group-control {
14766
14807
  grid-column: 2;
14767
14808
  }
@@ -14782,6 +14823,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14782
14823
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14783
14824
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14784
14825
  }
14826
+ .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-label.pf-m-info {
14827
+ flex-direction: column;
14828
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14829
+ align-items: flex-start;
14830
+ }
14831
+ .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-label-main {
14832
+ flex-grow: 0;
14833
+ }
14785
14834
  .pf-v5-c-form.pf-m-horizontal-on-xl .pf-v5-c-form__group-control {
14786
14835
  grid-column: 2;
14787
14836
  }
@@ -14802,6 +14851,14 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14802
14851
  --pf-v5-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
14803
14852
  transform: translateY(var(--pf-v5-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
14804
14853
  }
14854
+ .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-label.pf-m-info {
14855
+ flex-direction: column;
14856
+ gap: var(--pf-v5-c-form--m-horizontal__group-label--m-info--Gap);
14857
+ align-items: flex-start;
14858
+ }
14859
+ .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-label-main {
14860
+ flex-grow: 0;
14861
+ }
14805
14862
  .pf-v5-c-form.pf-m-horizontal-on-2xl .pf-v5-c-form__group-control {
14806
14863
  grid-column: 2;
14807
14864
  }
@@ -14838,6 +14895,7 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14838
14895
  }
14839
14896
  .pf-v5-c-form__group-label.pf-m-info {
14840
14897
  display: flex;
14898
+ gap: var(--pf-v5-c-form__group-label--m-info--Gap);
14841
14899
  align-items: flex-end;
14842
14900
  }
14843
14901
 
@@ -14846,7 +14904,6 @@ label.pf-v5-c-check, .pf-v5-c-check__label,
14846
14904
  }
14847
14905
 
14848
14906
  .pf-v5-c-form__group-label-info {
14849
- margin-inline-start: var(--pf-v5-c-form__group-label-info--MarginLeft);
14850
14907
  font-size: var(--pf-v5-c-form__group-label-info--FontSize);
14851
14908
  }
14852
14909