@patternfly/patternfly 6.0.0-alpha.183 → 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.
Files changed (9) hide show
  1. package/components/TextInputGroup/text-input-group.css +67 -15
  2. package/components/TextInputGroup/text-input-group.scss +78 -21
  3. package/components/_index.css +67 -15
  4. package/docs/components/TextInputGroup/examples/TextInputGroup.md +80 -0
  5. package/package.json +1 -1
  6. package/patternfly-no-globals.css +67 -15
  7. package/patternfly.css +67 -15
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/TextInputGroup/text-input-group.css CHANGED
@@ -1,10 +1,19 @@
1
1
  :where(:root, .pf-v6-c-text-input-group) {
2
2
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
3
3
  --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
4
+ --pf-v6-c-text-input-group--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
5
+ --pf-v6-c-text-input-group--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
6
+ --pf-v6-c-text-input-group--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
4
7
  --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
8
+ --pf-v6-c-text-input-group__LineHeight: var(--pf-t--global--font--line-height--body);
9
+ --pf-v6-c-text-input-group__FontSize: var(--pf-t--global--font--size--body--default);
5
10
  --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
11
+ --pf-v6-c-text-input-group--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
12
+ --pf-v6-c-text-input-group--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
13
+ --pf-v6-c-text-input-group--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
6
14
  --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
7
15
  --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
16
+ --pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
8
17
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
9
18
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
10
19
  --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
@@ -25,7 +34,14 @@
25
34
  --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
26
35
  --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
27
36
  --pf-v6-c-text-input-group__icon--InsetInlineStart: var(--pf-t--global--spacer--sm);
37
+ --pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
28
38
  --pf-v6-c-text-input-group__icon--Color: var(--pf-t--global--icon--color--regular);
39
+ --pf-v6-c-text-input-group--m-disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
40
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
41
+ --pf-v6-c-text-input-group--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--disabled);
42
+ --pf-v6-c-text-input-group__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
43
+ --pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
44
+ --pf-v6-c-text-input-group__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
29
45
  --pf-v6-c-text-input-group__icon--TranslateY: -50%;
30
46
  --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
31
47
  --pf-v6-c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
@@ -38,24 +54,60 @@
38
54
  position: relative;
39
55
  display: flex;
40
56
  width: 100%;
57
+ font-size: var(--pf-v6-c-text-input-group__FontSize);
58
+ line-height: var(--pf-v6-c-text-input-group__LineHeight);
41
59
  color: var(--pf-v6-c-text-input-group--Color, inherit);
42
60
  background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
61
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
62
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
63
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
64
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
43
65
  }
44
- .pf-v6-c-text-input-group:hover {
45
- --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
66
+ .pf-v6-c-text-input-group::before {
67
+ position: absolute;
68
+ inset: 0;
69
+ pointer-events: none;
70
+ content: "";
71
+ border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
72
+ border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
73
+ border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
74
+ border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
75
+ border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
46
76
  }
47
77
  .pf-v6-c-text-input-group.pf-m-disabled {
48
78
  --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
49
- --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
79
+ --pf-v6-c-text-input-group__icon--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--Color);
80
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group--m-disabled__icon--m-status--Color);
50
81
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
51
82
  pointer-events: none;
52
83
  }
53
84
  .pf-v6-c-text-input-group.pf-m-plain {
54
85
  --pf-v6-c-text-input-group--BackgroundColor: transparent;
55
86
  }
56
- .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before {
87
+ .pf-v6-c-text-input-group.pf-m-plain::before {
57
88
  border: 0;
58
89
  }
90
+ .pf-v6-c-text-input-group.pf-m-success {
91
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-success--BorderColor);
92
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-success--BorderColor);
93
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-success__icon--m-status--Color);
94
+ }
95
+ .pf-v6-c-text-input-group.pf-m-warning {
96
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-warning--BorderColor);
97
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-warning--BorderColor);
98
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-warning__icon--m-status--Color);
99
+ }
100
+ .pf-v6-c-text-input-group.pf-m-error {
101
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-error--BorderColor);
102
+ --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
103
+ --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
104
+ }
105
+ .pf-v6-c-text-input-group:hover {
106
+ --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
107
+ }
108
+ .pf-v6-c-text-input-group:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
109
+ --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-v6-c-text-input-group--status__text-input--PaddingInlineEnd);
110
+ }
59
111
 
60
112
  .pf-v6-c-text-input-group__main {
61
113
  display: flex;
@@ -65,7 +117,12 @@
65
117
  min-width: 0;
66
118
  }
67
119
  .pf-v6-c-text-input-group__main.pf-m-icon {
120
+ --pf-v6-c-text-input-group__text--Position: relative;
68
121
  --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
122
+ display: inline-flex;
123
+ align-items: center;
124
+ justify-content: center;
125
+ min-width: calc(var(--pf-v6-c-text-input-group__LineHeight) * var(--pf-v6-c-text-input-group__FontSize));
69
126
  }
70
127
  .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
71
128
  padding-block-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockStart);
@@ -79,22 +136,12 @@
79
136
  }
80
137
 
81
138
  .pf-v6-c-text-input-group__text {
139
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
82
140
  display: inline-grid;
83
141
  flex: 1;
84
142
  grid-template-areas: "text-input";
85
143
  grid-template-columns: 1fr;
86
144
  }
87
- .pf-v6-c-text-input-group__text::before {
88
- position: absolute;
89
- inset: 0;
90
- pointer-events: none;
91
- content: "";
92
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
93
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
94
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
95
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
96
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
97
- }
98
145
 
99
146
  .pf-v6-c-text-input-group__icon {
100
147
  position: absolute;
@@ -103,6 +150,11 @@
103
150
  color: var(--pf-v6-c-text-input-group__icon--Color);
104
151
  transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
105
152
  }
153
+ .pf-v6-c-text-input-group__icon.pf-m-status {
154
+ inset-inline-start: auto;
155
+ inset-inline-end: var(--pf-v6-c-text-input-group__icon--m-status--InsetInlineEnd);
156
+ color: var(--pf-v6-c-text-input-group__icon--m-status--Color);
157
+ }
106
158
 
107
159
  .pf-v6-c-text-input-group__text-input {
108
160
  overflow: hidden;
package/components/TextInputGroup/text-input-group.scss CHANGED
@@ -3,14 +3,24 @@
3
3
  :where(:root, .#{$text-input-group}) {
4
4
  --#{$text-input-group}--BackgroundColor: var(--pf-t--global--background--color--control--default);
5
5
  --#{$text-input-group}--BorderColor: var(--pf-t--global--border--color--default);
6
+ --#{$text-input-group}--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
7
+ --#{$text-input-group}--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
8
+ --#{$text-input-group}--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--default);
6
9
  --#{$text-input-group}--BorderWidth: var(--pf-t--global--border--width--control--default);
10
+ --#{$text-input-group}__LineHeight: var(--pf-t--global--font--line-height--body);
11
+ --#{$text-input-group}__FontSize: var(--pf-t--global--font--size--body--default);
7
12
 
8
13
  // Border hover
9
14
  --#{$text-input-group}--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
15
+ --#{$text-input-group}--m-hover--m-success--BorderColor: var(--pf-t--global--border--color--status--success--hover);
16
+ --#{$text-input-group}--m-hover--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
17
+ --#{$text-input-group}--m-hover--m-error--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
18
+
10
19
 
11
20
  // Main
12
21
  --#{$text-input-group}__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
13
22
  --#{$text-input-group}__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
23
+ --#{$text-input-group}--status__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
14
24
  --#{$text-input-group}__main--RowGap: var(--pf-t--global--spacer--xs);
15
25
  --#{$text-input-group}__main--ColumnGap: var(--pf-t--global--spacer--xs);
16
26
 
@@ -39,7 +49,14 @@
39
49
 
40
50
  // Icon
41
51
  --#{$text-input-group}__icon--InsetInlineStart: var(--pf-t--global--spacer--sm);
52
+ --#{$text-input-group}__icon--m-status--InsetInlineEnd: var(--pf-t--global--spacer--sm);
42
53
  --#{$text-input-group}__icon--Color: var(--pf-t--global--icon--color--regular);
54
+ --#{$text-input-group}--m-disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
55
+ --#{$text-input-group}__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
56
+ --#{$text-input-group}--m-disabled__icon--m-status--Color: var(--pf-t--global--icon--color--disabled);
57
+ --#{$text-input-group}__main--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
58
+ --#{$text-input-group}__main--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
59
+ --#{$text-input-group}__main--m-error__icon--m-status--Color: var(--pf-t--global--icon--color--status--danger--default);
43
60
  --#{$text-input-group}__icon--TranslateY: -50%;
44
61
 
45
62
  // Utilities
@@ -56,16 +73,31 @@
56
73
  position: relative;
57
74
  display: flex;
58
75
  width: 100%; // when child of flex layout, take up space
76
+ font-size: var(--#{$text-input-group}__FontSize);
77
+ line-height: var(--#{$text-input-group}__LineHeight);
59
78
  color: var(--#{$text-input-group}--Color, inherit);
60
79
  background-color: var(--#{$text-input-group}--BackgroundColor);
80
+ border-start-start-radius: var(--#{$text-input-group}__text--BorderStartStartRadius);
81
+ border-start-end-radius: var(--#{$text-input-group}__text--BorderStartEndRadius);
82
+ border-end-start-radius: var(--#{$text-input-group}__text--BorderEndStartRadius);
83
+ border-end-end-radius: var(--#{$text-input-group}__text--BorderEndEndRadius);
61
84
 
62
- &:hover {
63
- --#{$text-input-group}--BorderColor: var(--#{$text-input-group}--m-hover--BorderColor);
85
+ &::before {
86
+ position: absolute;
87
+ inset: 0;
88
+ pointer-events: none;
89
+ content: "";
90
+ border: var(--#{$text-input-group}--BorderWidth) solid var(--#{$text-input-group}--BorderColor);
91
+ border-start-start-radius: var(--#{$text-input-group}__text--BorderStartStartRadius);
92
+ border-start-end-radius: var(--#{$text-input-group}__text--BorderStartEndRadius);
93
+ border-end-start-radius: var(--#{$text-input-group}__text--BorderEndStartRadius);
94
+ border-end-end-radius: var(--#{$text-input-group}__text--BorderEndEndRadius);
64
95
  }
65
96
 
66
97
  &.pf-m-disabled {
67
98
  --#{$text-input-group}--Color: var(--#{$text-input-group}--m-disabled--Color);
68
- --#{$text-input-group}__icon--Color: var(--#{$text-input-group}--m-disabled--Color);
99
+ --#{$text-input-group}__icon--Color: var(--#{$text-input-group}--m-disabled__icon--Color);
100
+ --#{$text-input-group}__icon--m-status--Color: var(--#{$text-input-group}--m-disabled__icon--m-status--Color);
69
101
  --#{$text-input-group}--BackgroundColor: var(--#{$text-input-group}--m-disabled--BackgroundColor);
70
102
 
71
103
  pointer-events: none;
@@ -74,11 +106,35 @@
74
106
  &.pf-m-plain {
75
107
  --#{$text-input-group}--BackgroundColor: transparent;
76
108
 
77
- .#{$text-input-group}__text {
78
- &::before {
79
- border: 0;
80
- }
81
- }
109
+ &::before {
110
+ border: 0;
111
+ }
112
+ }
113
+
114
+ &.pf-m-success {
115
+ --#{$text-input-group}--BorderColor: var(--#{$text-input-group}--m-success--BorderColor);
116
+ --#{$text-input-group}--m-hover--BorderColor: var(--#{$text-input-group}--m-hover--m-success--BorderColor);
117
+ --#{$text-input-group}__icon--m-status--Color: var(--#{$text-input-group}__main--m-success__icon--m-status--Color);
118
+ }
119
+
120
+ &.pf-m-warning {
121
+ --#{$text-input-group}--BorderColor: var(--#{$text-input-group}--m-warning--BorderColor);
122
+ --#{$text-input-group}--m-hover--BorderColor: var(--#{$text-input-group}--m-hover--m-warning--BorderColor);
123
+ --#{$text-input-group}__icon--m-status--Color: var(--#{$text-input-group}__main--m-warning__icon--m-status--Color);
124
+ }
125
+
126
+ &.pf-m-error {
127
+ --#{$text-input-group}--BorderColor: var(--#{$text-input-group}--m-error--BorderColor);
128
+ --#{$text-input-group}--m-hover--BorderColor: var(--#{$text-input-group}--m-hover--m-error--BorderColor);
129
+ --#{$text-input-group}__icon--m-status--Color: var(--#{$text-input-group}__main--m-error__icon--m-status--Color);
130
+ }
131
+
132
+ &:hover {
133
+ --#{$text-input-group}--BorderColor: var(--#{$text-input-group}--m-hover--BorderColor);
134
+ }
135
+
136
+ &:where(.pf-m-success, .pf-m-warning, .pf-m-error) {
137
+ --#{$text-input-group}__text-input--PaddingInlineEnd: var(--#{$text-input-group}--status__text-input--PaddingInlineEnd);
82
138
  }
83
139
  }
84
140
 
@@ -88,9 +144,15 @@
88
144
  flex-wrap: wrap;
89
145
  gap: var(--#{$text-input-group}__main--RowGap) var(--#{$text-input-group}__main--ColumnGap);
90
146
  min-width: 0;
91
-
147
+
92
148
  &.pf-m-icon {
149
+ --#{$text-input-group}__text--Position: relative;
93
150
  --#{$text-input-group}__text-input--PaddingInlineStart: var(--#{$text-input-group}__main--m-icon__text-input--PaddingInlineStart);
151
+
152
+ display: inline-flex;
153
+ align-items: center;
154
+ justify-content: center;
155
+ min-width: calc(var(--#{$text-input-group}__LineHeight) * var(--#{$text-input-group}__FontSize));
94
156
  }
95
157
 
96
158
  > :first-child:not(.#{$text-input-group}__text) {
@@ -107,22 +169,11 @@
107
169
  }
108
170
 
109
171
  .#{$text-input-group}__text {
172
+ position: var(--#{$text-input-group}__text--Position, revert);
110
173
  display: inline-grid;
111
174
  flex: 1;
112
175
  grid-template-areas: "text-input";
113
176
  grid-template-columns: 1fr;
114
-
115
- &::before {
116
- position: absolute;
117
- inset: 0;
118
- pointer-events: none;
119
- content: "";
120
- border: var(--#{$text-input-group}--BorderWidth) solid var(--#{$text-input-group}--BorderColor);
121
- border-start-start-radius: var(--#{$text-input-group}__text--BorderStartStartRadius);
122
- border-start-end-radius: var(--#{$text-input-group}__text--BorderStartEndRadius);
123
- border-end-start-radius: var(--#{$text-input-group}__text--BorderEndStartRadius);
124
- border-end-end-radius: var(--#{$text-input-group}__text--BorderEndEndRadius);
125
- }
126
177
  }
127
178
 
128
179
  .#{$text-input-group}__icon {
@@ -131,6 +182,12 @@
131
182
  inset-inline-start: var(--#{$text-input-group}__icon--InsetInlineStart);
132
183
  color: var(--#{$text-input-group}__icon--Color);
133
184
  transform: translateY(var(--#{$text-input-group}__icon--TranslateY));
185
+
186
+ &.pf-m-status {
187
+ inset-inline-start: auto;
188
+ inset-inline-end: var(--#{$text-input-group}__icon--m-status--InsetInlineEnd);
189
+ color: var(--#{$text-input-group}__icon--m-status--Color);
190
+ }
134
191
  }
135
192
 
136
193
  .#{$text-input-group}__text-input {
package/components/_index.css CHANGED
@@ -18736,10 +18736,19 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18736
18736
  :where(:root, .pf-v6-c-text-input-group) {
18737
18737
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
18738
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);
18739
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);
18740
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);
18741
18749
  --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
18742
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);
18743
18752
  --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
18744
18753
  --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
18745
18754
  --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
@@ -18760,7 +18769,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18760
18769
  --pf-v6-c-text-input-group__text-input--BackgroundColor: transparent;
18761
18770
  --pf-v6-c-text-input-group__text-input--OutlineOffset: -6px;
18762
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);
18763
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);
18764
18780
  --pf-v6-c-text-input-group__icon--TranslateY: -50%;
18765
18781
  --pf-v6-c-text-input-group__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
18766
18782
  --pf-v6-c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
@@ -18773,24 +18789,60 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18773
18789
  position: relative;
18774
18790
  display: flex;
18775
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);
18776
18794
  color: var(--pf-v6-c-text-input-group--Color, inherit);
18777
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);
18778
18800
  }
18779
- .pf-v6-c-text-input-group:hover {
18780
- --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);
18781
18811
  }
18782
18812
  .pf-v6-c-text-input-group.pf-m-disabled {
18783
18813
  --pf-v6-c-text-input-group--Color: var(--pf-v6-c-text-input-group--m-disabled--Color);
18784
- --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);
18785
18816
  --pf-v6-c-text-input-group--BackgroundColor: var(--pf-v6-c-text-input-group--m-disabled--BackgroundColor);
18786
18817
  pointer-events: none;
18787
18818
  }
18788
18819
  .pf-v6-c-text-input-group.pf-m-plain {
18789
18820
  --pf-v6-c-text-input-group--BackgroundColor: transparent;
18790
18821
  }
18791
- .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 {
18792
18823
  border: 0;
18793
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
+ }
18794
18846
 
18795
18847
  .pf-v6-c-text-input-group__main {
18796
18848
  display: flex;
@@ -18800,7 +18852,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18800
18852
  min-width: 0;
18801
18853
  }
18802
18854
  .pf-v6-c-text-input-group__main.pf-m-icon {
18855
+ --pf-v6-c-text-input-group__text--Position: relative;
18803
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));
18804
18861
  }
18805
18862
  .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
18806
18863
  padding-block-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockStart);
@@ -18814,22 +18871,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18814
18871
  }
18815
18872
 
18816
18873
  .pf-v6-c-text-input-group__text {
18874
+ position: var(--pf-v6-c-text-input-group__text--Position, revert);
18817
18875
  display: inline-grid;
18818
18876
  flex: 1;
18819
18877
  grid-template-areas: "text-input";
18820
18878
  grid-template-columns: 1fr;
18821
18879
  }
18822
- .pf-v6-c-text-input-group__text::before {
18823
- position: absolute;
18824
- inset: 0;
18825
- pointer-events: none;
18826
- content: "";
18827
- border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
18828
- border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
18829
- border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
18830
- border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
18831
- border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
18832
- }
18833
18880
 
18834
18881
  .pf-v6-c-text-input-group__icon {
18835
18882
  position: absolute;
@@ -18838,6 +18885,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18838
18885
  color: var(--pf-v6-c-text-input-group__icon--Color);
18839
18886
  transform: translateY(var(--pf-v6-c-text-input-group__icon--TranslateY));
18840
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
+ }
18841
18893
 
18842
18894
  .pf-v6-c-text-input-group__text-input {
18843
18895
  overflow: hidden;
package/docs/components/TextInputGroup/examples/TextInputGroup.md CHANGED
@@ -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.183",
4
+ "version": "6.0.0-alpha.184",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {