@patternfly/patternfly 6.0.0-alpha.182 → 6.0.0-alpha.184

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.
@@ -14753,6 +14753,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14753
14753
  grid-column: 2;
14754
14754
  }
14755
14755
  .pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
14756
+ position: revert;
14756
14757
  font-weight: bold;
14757
14758
  text-align: start;
14758
14759
  content: attr(data-label);
@@ -15052,6 +15053,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15052
15053
  grid-column: 2;
15053
15054
  }
15054
15055
  .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
15056
+ position: revert;
15055
15057
  font-weight: bold;
15056
15058
  text-align: start;
15057
15059
  content: attr(data-label);
@@ -15354,6 +15356,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15354
15356
  grid-column: 2;
15355
15357
  }
15356
15358
  .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
15359
+ position: revert;
15357
15360
  font-weight: bold;
15358
15361
  text-align: start;
15359
15362
  content: attr(data-label);
@@ -15656,6 +15659,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15656
15659
  grid-column: 2;
15657
15660
  }
15658
15661
  .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
15662
+ position: revert;
15659
15663
  font-weight: bold;
15660
15664
  text-align: start;
15661
15665
  content: attr(data-label);
@@ -15958,6 +15962,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15958
15962
  grid-column: 2;
15959
15963
  }
15960
15964
  .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
15965
+ position: revert;
15961
15966
  font-weight: bold;
15962
15967
  text-align: start;
15963
15968
  content: attr(data-label);
@@ -17266,10 +17271,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
17266
17271
  grid-column: 2;
17267
17272
  }
17268
17273
  .pf-m-tree-view-grid.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
17274
+ position: revert;
17269
17275
  font-weight: var(--pf-t--global--font--weight--body--bold);
17270
17276
  text-align: start;
17271
17277
  content: attr(data-label);
17272
17278
  }
17279
+ .pf-m-tree-view-grid.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
17280
+ border-inline-end: 0;
17281
+ }
17273
17282
  .pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
17274
17283
  padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
17275
17284
  }
@@ -17406,10 +17415,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
17406
17415
  grid-column: 2;
17407
17416
  }
17408
17417
  .pf-m-tree-view-grid-md.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
17418
+ position: revert;
17409
17419
  font-weight: var(--pf-t--global--font--weight--body--bold);
17410
17420
  text-align: start;
17411
17421
  content: attr(data-label);
17412
17422
  }
17423
+ .pf-m-tree-view-grid-md.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
17424
+ border-inline-end: 0;
17425
+ }
17413
17426
  .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
17414
17427
  padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
17415
17428
  }
@@ -17547,10 +17560,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
17547
17560
  grid-column: 2;
17548
17561
  }
17549
17562
  .pf-m-tree-view-grid-lg.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
17563
+ position: revert;
17550
17564
  font-weight: var(--pf-t--global--font--weight--body--bold);
17551
17565
  text-align: start;
17552
17566
  content: attr(data-label);
17553
17567
  }
17568
+ .pf-m-tree-view-grid-lg.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
17569
+ border-inline-end: 0;
17570
+ }
17554
17571
  .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
17555
17572
  padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
17556
17573
  }
@@ -17688,10 +17705,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
17688
17705
  grid-column: 2;
17689
17706
  }
17690
17707
  .pf-m-tree-view-grid-xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
17708
+ position: revert;
17691
17709
  font-weight: var(--pf-t--global--font--weight--body--bold);
17692
17710
  text-align: start;
17693
17711
  content: attr(data-label);
17694
17712
  }
17713
+ .pf-m-tree-view-grid-xl.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
17714
+ border-inline-end: 0;
17715
+ }
17695
17716
  .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
17696
17717
  padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
17697
17718
  }
@@ -17829,10 +17850,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
17829
17850
  grid-column: 2;
17830
17851
  }
17831
17852
  .pf-m-tree-view-grid-2xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
17853
+ position: revert;
17832
17854
  font-weight: var(--pf-t--global--font--weight--body--bold);
17833
17855
  text-align: start;
17834
17856
  content: attr(data-label);
17835
17857
  }
17858
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
17859
+ border-inline-end: 0;
17860
+ }
17836
17861
  .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
17837
17862
  padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
17838
17863
  }
@@ -18711,10 +18736,19 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18711
18736
  :where(:root, .pf-v6-c-text-input-group) {
18712
18737
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
18713
18738
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
18739
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
18740
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
18741
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
18714
18742
  --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
18743
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
18744
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
18715
18745
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
18746
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
18747
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
18748
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
18716
18749
  --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
18717
18750
  --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
18751
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
18718
18752
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
18719
18753
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
18720
18754
  --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
@@ -18735,7 +18769,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18735
18769
  --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
18736
18770
  --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
18737
18771
  --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--sm);
18772
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
18738
18773
  --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
18774
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
18775
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
18776
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--disabled);
18777
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
18778
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
18779
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
18739
18780
  --pf-v6-c-text-input-group__icon--TranslateY: -50%;
18740
18781
  --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
18741
18782
  --pf-v6-c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
@@ -18748,24 +18789,60 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18748
18789
  position: relative;
18749
18790
  display: flex;
18750
18791
  width: 100%;
18792
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
18793
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
18751
18794
  color: var(--pf-v6-c-text-input-group--Color, inherit);
18752
18795
  background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
18796
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
18797
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
18798
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
18799
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
18753
18800
  }
18754
- .pf-v6-c-text-input-group:hover {
18755
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
18801
+ .pf-v6-c-text-input-group::before {
18802
+ position: absolute;
18803
+ inset: 0;
18804
+ pointer-events: none;
18805
+ content: "";
18806
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
18807
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
18808
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
18809
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
18810
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
18756
18811
  }
18757
18812
  .pf-v6-c-text-input-group.pf-m-disabled {
18758
18813
  --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
18759
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
18814
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
18815
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
18760
18816
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
18761
18817
  pointer-events: none;
18762
18818
  }
18763
18819
  .pf-v6-c-text-input-group.pf-m-plain {
18764
18820
  --pf-v6-c-text-input-group--BackgroundColor: transparent;
18765
18821
  }
18766
- .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before {
18822
+ .pf-v6-c-text-input-group.pf-m-plain::before {
18767
18823
  border: 0;
18768
18824
  }
18825
+ .pf-v6-c-text-input-group.pf-m-success {
18826
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
18827
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
18828
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
18829
+ }
18830
+ .pf-v6-c-text-input-group.pf-m-warning {
18831
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
18832
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
18833
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
18834
+ }
18835
+ .pf-v6-c-text-input-group.pf-m-error {
18836
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
18837
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
18838
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
18839
+ }
18840
+ .pf-v6-c-text-input-group:hover {
18841
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
18842
+ }
18843
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
18844
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
18845
+ }
18769
18846
 
18770
18847
  .pf-v6-c-text-input-group__main {
18771
18848
  display: flex;
@@ -18775,7 +18852,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18775
18852
  min-width: 0;
18776
18853
  }
18777
18854
  .pf-v6-c-text-input-group__main.pf-m-icon {
18855
+ --pf-v6-c-text-input-group__text--Position: relative;
18778
18856
  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
18857
+ display: inline-flex;
18858
+ align-items: center;
18859
+ justify-content: center;
18860
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
18779
18861
  }
18780
18862
  .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
18781
18863
  padding-block-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockStart);
@@ -18789,22 +18871,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18789
18871
  }
18790
18872
 
18791
18873
  .pf-v6-c-text-input-group__text {
18874
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
18792
18875
  display: inline-grid;
18793
18876
  flex: 1;
18794
18877
  grid-template-areas: "text-input";
18795
18878
  grid-template-columns: 1fr;
18796
18879
  }
18797
- .pf-v6-c-text-input-group__text::before {
18798
- position: absolute;
18799
- inset: 0;
18800
- pointer-events: none;
18801
- content: "";
18802
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
18803
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
18804
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
18805
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
18806
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
18807
- }
18808
18880
 
18809
18881
  .pf-v6-c-text-input-group__icon {
18810
18882
  position: absolute;
@@ -18813,6 +18885,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18813
18885
  color: var(--pf-v6-c-text-input-group__icon--Color);
18814
18886
  transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
18815
18887
  }
18888
+ .pf-v6-c-text-input-group__icon.pf-m-status {
18889
+ inset-inline-start: auto;
18890
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
18891
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
18892
+ }
18816
18893
 
18817
18894
  .pf-v6-c-text-input-group__text-input {
18818
18895
  overflow: hidden;
@@ -97,6 +97,76 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
97
97
 
98
98
  ```
99
99
 
100
+ ### With validation
101
+
102
+ ```html
103
+ <div class="pf-v6-c-text-input-group pf-m-success">
104
+ <div class="pf-v6-c-text-input-group__main">
105
+ <span class="pf-v6-c-text-input-group__text">
106
+ <input
107
+ class="pf-v6-c-text-input-group__text-input"
108
+ type="text"
109
+ value="Success validation"
110
+ aria-label="Type to filter"
111
+ />
112
+ <span class="pf-v6-c-text-input-group__icon pf-m-status">
113
+ <i aria-hidden="true" class="fas fa-check-circle"></i>
114
+ </span>
115
+ </span>
116
+ </div>
117
+ </div>
118
+ <br />
119
+ <div class="pf-v6-c-text-input-group pf-m-warning">
120
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
121
+ <span class="pf-v6-c-text-input-group__text">
122
+ <span class="pf-v6-c-text-input-group__icon">
123
+ <i class="fas fa-fw fa-search"></i>
124
+ </span>
125
+ <input
126
+ class="pf-v6-c-text-input-group__text-input"
127
+ type="text"
128
+ value="Warning validation with icon at start"
129
+ aria-label="Type to filter"
130
+ />
131
+ <span class="pf-v6-c-text-input-group__icon pf-m-status">
132
+ <i aria-hidden="true" class="fas fa-exclamation-triangle"></i>
133
+ </span>
134
+ </span>
135
+ </div>
136
+ </div>
137
+ <br />
138
+ <div class="pf-v6-c-text-input-group pf-m-error">
139
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
140
+ <span class="pf-v6-c-text-input-group__text">
141
+ <span class="pf-v6-c-text-input-group__icon">
142
+ <i class="fas fa-fw fa-search"></i>
143
+ </span>
144
+ <input
145
+ class="pf-v6-c-text-input-group__text-input"
146
+ type="text"
147
+ value="Error validation with icon at start and utilities"
148
+ aria-label="Type to filter"
149
+ />
150
+ <span class="pf-v6-c-text-input-group__icon pf-m-status">
151
+ <i aria-hidden="true" class="fas fa-exclamation-circle"></i>
152
+ </span>
153
+ </span>
154
+ </div>
155
+ <div class="pf-v6-c-text-input-group__utilities">
156
+ <button
157
+ class="pf-v6-c-button pf-m-plain"
158
+ type="button"
159
+ aria-label="Clear input"
160
+ >
161
+ <span class="pf-v6-c-button__text">
162
+ <i class="fas fa-times fa-fw" aria-hidden="true"></i>
163
+ </span>
164
+ </button>
165
+ </div>
166
+ </div>
167
+
168
+ ```
169
+
100
170
  ### Filters
101
171
 
102
172
  ```html
@@ -1386,3 +1456,13 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
1386
1456
  </div>
1387
1457
 
1388
1458
  ```
1459
+
1460
+ ### Usage
1461
+
1462
+ | Class | Applied to | Outcome |
1463
+ | -- | -- | -- |
1464
+ | `.pf-m-success` | `.pf-v6-c-text-input-group` | Applies success validation styling. |
1465
+ | `.pf-m-warning` | `.pf-v6-c-text-input-group` | Applies warning validation styling. |
1466
+ | `.pf-m-error` | `.pf-v6-c-text-input-group` | Applies error validation styling. |
1467
+ | `.pf-m-icon` | `.pf-v6-c-text-input-group__main` | Applies styling when icons are included in the container. |
1468
+ | `.pf-m-status` | `.pf-v6-c-text-input-group__icon` | Applies status styling to the icon, matching the status modifier applied to `.pf-v6-c-text-input-group`. |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.182",
4
+ "version": "6.0.0-alpha.184",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -20836,6 +20836,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
20836
20836
  grid-column: 2;
20837
20837
  }
20838
20838
  .pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
20839
+ position: revert;
20839
20840
  font-weight: bold;
20840
20841
  text-align: start;
20841
20842
  content: attr(data-label);
@@ -21135,6 +21136,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
21135
21136
  grid-column: 2;
21136
21137
  }
21137
21138
  .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
21139
+ position: revert;
21138
21140
  font-weight: bold;
21139
21141
  text-align: start;
21140
21142
  content: attr(data-label);
@@ -21437,6 +21439,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
21437
21439
  grid-column: 2;
21438
21440
  }
21439
21441
  .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
21442
+ position: revert;
21440
21443
  font-weight: bold;
21441
21444
  text-align: start;
21442
21445
  content: attr(data-label);
@@ -21739,6 +21742,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
21739
21742
  grid-column: 2;
21740
21743
  }
21741
21744
  .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
21745
+ position: revert;
21742
21746
  font-weight: bold;
21743
21747
  text-align: start;
21744
21748
  content: attr(data-label);
@@ -22041,6 +22045,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
22041
22045
  grid-column: 2;
22042
22046
  }
22043
22047
  .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
22048
+ position: revert;
22044
22049
  font-weight: bold;
22045
22050
  text-align: start;
22046
22051
  content: attr(data-label);
@@ -23349,10 +23354,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23349
23354
  grid-column: 2;
23350
23355
  }
23351
23356
  .pf-m-tree-view-grid.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
23357
+ position: revert;
23352
23358
  font-weight: var(--pf-t--global--font--weight--body--bold);
23353
23359
  text-align: start;
23354
23360
  content: attr(data-label);
23355
23361
  }
23362
+ .pf-m-tree-view-grid.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
23363
+ border-inline-end: 0;
23364
+ }
23356
23365
  .pf-m-tree-view-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
23357
23366
  padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
23358
23367
  }
@@ -23489,10 +23498,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23489
23498
  grid-column: 2;
23490
23499
  }
23491
23500
  .pf-m-tree-view-grid-md.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
23501
+ position: revert;
23492
23502
  font-weight: var(--pf-t--global--font--weight--body--bold);
23493
23503
  text-align: start;
23494
23504
  content: attr(data-label);
23495
23505
  }
23506
+ .pf-m-tree-view-grid-md.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
23507
+ border-inline-end: 0;
23508
+ }
23496
23509
  .pf-m-tree-view-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
23497
23510
  padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
23498
23511
  }
@@ -23630,10 +23643,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23630
23643
  grid-column: 2;
23631
23644
  }
23632
23645
  .pf-m-tree-view-grid-lg.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
23646
+ position: revert;
23633
23647
  font-weight: var(--pf-t--global--font--weight--body--bold);
23634
23648
  text-align: start;
23635
23649
  content: attr(data-label);
23636
23650
  }
23651
+ .pf-m-tree-view-grid-lg.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
23652
+ border-inline-end: 0;
23653
+ }
23637
23654
  .pf-m-tree-view-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
23638
23655
  padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
23639
23656
  }
@@ -23771,10 +23788,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23771
23788
  grid-column: 2;
23772
23789
  }
23773
23790
  .pf-m-tree-view-grid-xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
23791
+ position: revert;
23774
23792
  font-weight: var(--pf-t--global--font--weight--body--bold);
23775
23793
  text-align: start;
23776
23794
  content: attr(data-label);
23777
23795
  }
23796
+ .pf-m-tree-view-grid-xl.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
23797
+ border-inline-end: 0;
23798
+ }
23778
23799
  .pf-m-tree-view-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
23779
23800
  padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
23780
23801
  }
@@ -23912,10 +23933,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23912
23933
  grid-column: 2;
23913
23934
  }
23914
23935
  .pf-m-tree-view-grid-2xl.pf-v6-c-table td:where(.pf-v6-c-table__td)[data-label]::before {
23936
+ position: revert;
23915
23937
  font-weight: var(--pf-t--global--font--weight--body--bold);
23916
23938
  text-align: start;
23917
23939
  content: attr(data-label);
23918
23940
  }
23941
+ .pf-m-tree-view-grid-2xl.pf-v6-c-table .pf-v6-c-table__tr > :where(th, td).pf-m-border-right::before {
23942
+ border-inline-end: 0;
23943
+ }
23919
23944
  .pf-m-tree-view-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr).pf-m-tree-view-details-expanded {
23920
23945
  padding-block-end: var(--pf-v6-c-table--m-tree-view-grid--m-tree-view-details-expanded--PaddingBlockEnd);
23921
23946
  }
@@ -24794,10 +24819,19 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
24794
24819
  :where(:root, .pf-v6-c-text-input-group) {
24795
24820
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
24796
24821
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
24822
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
24823
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
24824
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
24797
24825
  --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
24826
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
24827
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
24798
24828
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
24829
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
24830
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
24831
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
24799
24832
  --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
24800
24833
  --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
24834
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
24801
24835
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
24802
24836
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
24803
24837
  --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
@@ -24818,7 +24852,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
24818
24852
  --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
24819
24853
  --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
24820
24854
  --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--sm);
24855
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
24821
24856
  --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
24857
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
24858
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
24859
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--disabled);
24860
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
24861
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
24862
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
24822
24863
  --pf-v6-c-text-input-group__icon--TranslateY: -50%;
24823
24864
  --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
24824
24865
  --pf-v6-c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
@@ -24831,24 +24872,60 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
24831
24872
  position: relative;
24832
24873
  display: flex;
24833
24874
  width: 100%;
24875
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
24876
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
24834
24877
  color: var(--pf-v6-c-text-input-group--Color, inherit);
24835
24878
  background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
24879
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
24880
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
24881
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
24882
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
24836
24883
  }
24837
- .pf-v6-c-text-input-group:hover {
24838
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
24884
+ .pf-v6-c-text-input-group::before {
24885
+ position: absolute;
24886
+ inset: 0;
24887
+ pointer-events: none;
24888
+ content: "";
24889
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
24890
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
24891
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
24892
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
24893
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
24839
24894
  }
24840
24895
  .pf-v6-c-text-input-group.pf-m-disabled {
24841
24896
  --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
24842
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
24897
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
24898
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
24843
24899
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
24844
24900
  pointer-events: none;
24845
24901
  }
24846
24902
  .pf-v6-c-text-input-group.pf-m-plain {
24847
24903
  --pf-v6-c-text-input-group--BackgroundColor: transparent;
24848
24904
  }
24849
- .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before {
24905
+ .pf-v6-c-text-input-group.pf-m-plain::before {
24850
24906
  border: 0;
24851
24907
  }
24908
+ .pf-v6-c-text-input-group.pf-m-success {
24909
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
24910
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
24911
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
24912
+ }
24913
+ .pf-v6-c-text-input-group.pf-m-warning {
24914
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
24915
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
24916
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
24917
+ }
24918
+ .pf-v6-c-text-input-group.pf-m-error {
24919
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
24920
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
24921
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
24922
+ }
24923
+ .pf-v6-c-text-input-group:hover {
24924
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
24925
+ }
24926
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
24927
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
24928
+ }
24852
24929
 
24853
24930
  .pf-v6-c-text-input-group__main {
24854
24931
  display: flex;
@@ -24858,7 +24935,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
24858
24935
  min-width: 0;
24859
24936
  }
24860
24937
  .pf-v6-c-text-input-group__main.pf-m-icon {
24938
+ --pf-v6-c-text-input-group__text--Position: relative;
24861
24939
  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
24940
+ display: inline-flex;
24941
+ align-items: center;
24942
+ justify-content: center;
24943
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
24862
24944
  }
24863
24945
  .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
24864
24946
  padding-block-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockStart);
@@ -24872,22 +24954,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
24872
24954
  }
24873
24955
 
24874
24956
  .pf-v6-c-text-input-group__text {
24957
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
24875
24958
  display: inline-grid;
24876
24959
  flex: 1;
24877
24960
  grid-template-areas: "text-input";
24878
24961
  grid-template-columns: 1fr;
24879
24962
  }
24880
- .pf-v6-c-text-input-group__text::before {
24881
- position: absolute;
24882
- inset: 0;
24883
- pointer-events: none;
24884
- content: "";
24885
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
24886
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
24887
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
24888
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
24889
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
24890
- }
24891
24963
 
24892
24964
  .pf-v6-c-text-input-group__icon {
24893
24965
  position: absolute;
@@ -24896,6 +24968,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
24896
24968
  color: var(--pf-v6-c-text-input-group__icon--Color);
24897
24969
  transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
24898
24970
  }
24971
+ .pf-v6-c-text-input-group__icon.pf-m-status {
24972
+ inset-inline-start: auto;
24973
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
24974
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
24975
+ }
24899
24976
 
24900
24977
  .pf-v6-c-text-input-group__text-input {
24901
24978
  overflow: hidden;