@patternfly/patternfly 5.0.0-alpha.67 → 5.0.0-alpha.68

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 (33) hide show
  1. package/components/InputGroup/input-group.css +0 -2
  2. package/components/InputGroup/input-group.scss +0 -4
  3. package/components/NumberInput/number-input.css +4 -2
  4. package/components/NumberInput/number-input.scss +5 -2
  5. package/components/Pagination/pagination.css +5 -3
  6. package/components/Pagination/pagination.scss +7 -1
  7. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +4 -4
  8. package/docs/components/DatePicker/examples/DatePicker.md +6 -1
  9. package/docs/components/FileUpload/examples/FileUpload.md +21 -16
  10. package/docs/components/Form/examples/Form.md +51 -31
  11. package/docs/components/FormControl/examples/FormControl.md +1 -1
  12. package/docs/components/InlineEdit/examples/InlineEdit.md +11 -156
  13. package/docs/components/InputGroup/examples/InputGroup.md +9 -4
  14. package/docs/components/Login/examples/Login.md +20 -17
  15. package/docs/components/NumberInput/examples/NumberInput.md +7 -2
  16. package/docs/components/Pagination/examples/Pagination.md +1 -1
  17. package/docs/components/Select/examples/Select.md +4 -2
  18. package/docs/components/Wizard/examples/Wizard.md +7 -70
  19. package/docs/demos/Alert/examples/Alert.md +26 -8
  20. package/docs/demos/Button/examples/Button.md +12 -12
  21. package/docs/demos/Form/examples/BasicForms.md +18 -18
  22. package/docs/demos/HelperText/examples/HelperText.md +18 -3
  23. package/docs/demos/Modal/examples/Modal.md +6 -6
  24. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +1 -1
  25. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
  26. package/docs/demos/Toolbar/examples/Toolbar.md +11 -1
  27. package/docs/demos/Wizard/examples/Wizard.md +0 -56
  28. package/package.json +1 -1
  29. package/patternfly-no-globals.css +7 -5
  30. package/patternfly-theme-dark-unversioned.css +7 -5
  31. package/patternfly.css +7 -5
  32. package/patternfly.min.css +1 -1
  33. package/patternfly.min.css.map +1 -1
package/components/InputGroup/input-group.css CHANGED
@@ -20,8 +20,6 @@
20
20
  --pf-v5-c-input-group__item--m-disabled__text--Color: var(--pf-v5-global--disabled-color--100);
21
21
  --pf-v5-c-input-group__item--m-disabled--BorderBottomColor: transparent;
22
22
  --pf-v5-c-input-group__item--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
23
- --pf-v5-c-input-group--c-form-control--invalid--ZIndex: var(--pf-v5-global--ZIndex--xs);
24
- --pf-v5-c-input-group--c-form-control--MarginRight: 0;
25
23
  display: flex;
26
24
  width: 100%;
27
25
  }
package/components/InputGroup/input-group.scss CHANGED
@@ -34,10 +34,6 @@
34
34
  --#{$input-group}__item--m-disabled--BorderBottomColor: transparent;
35
35
  --#{$input-group}__item--m-disabled--BackgroundColor: var(--#{$pf-global}--disabled-color--300);
36
36
 
37
- // Form control
38
- --#{$input-group}--c-form-control--invalid--ZIndex: var(--#{$pf-global}--ZIndex--xs);
39
- --#{$input-group}--c-form-control--MarginRight: 0;
40
-
41
37
  display: flex;
42
38
  width: 100%;
43
39
  }
package/components/NumberInput/number-input.css CHANGED
@@ -1,7 +1,7 @@
1
- .pf-v5-c-number-input .pf-v5-c-form-control {
1
+ .pf-v5-c-number-input .pf-v5-c-form-control > :is(input) {
2
2
  appearance: textfield;
3
3
  }
4
- .pf-v5-c-number-input .pf-v5-c-form-control::-webkit-inner-spin-button, .pf-v5-c-number-input .pf-v5-c-form-control::-webkit-outer-spin-button {
4
+ .pf-v5-c-number-input .pf-v5-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v5-c-number-input .pf-v5-c-form-control > :is(input)::-webkit-outer-spin-button {
5
5
  appearance: none;
6
6
  margin: 0;
7
7
  }
@@ -27,6 +27,8 @@
27
27
  }
28
28
  .pf-v5-c-number-input .pf-v5-c-form-control {
29
29
  width: var(--pf-v5-c-number-input--c-form-control--Width);
30
+ }
31
+ .pf-v5-c-number-input .pf-v5-c-form-control > :is(input) {
30
32
  text-align: right;
31
33
  }
32
34
 
package/components/NumberInput/number-input.scss CHANGED
@@ -31,9 +31,12 @@
31
31
 
32
32
  .#{$form-control} {
33
33
  width: var(--#{$number-input}--c-form-control--Width);
34
- text-align: right;
35
34
 
36
- @extend %pf-v5-remove-num-arrows;
35
+ > :is(input) {
36
+ text-align: right;
37
+
38
+ @extend %pf-v5-remove-num-arrows;
39
+ }
37
40
  }
38
41
  }
39
42
 
package/components/Pagination/pagination.css CHANGED
@@ -1,7 +1,7 @@
1
- .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control {
1
+ .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control > :is(input) {
2
2
  appearance: textfield;
3
3
  }
4
- .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control::-webkit-inner-spin-button, .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control::-webkit-outer-spin-button {
4
+ .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control > :is(input)::-webkit-outer-spin-button {
5
5
  appearance: none;
6
6
  margin: 0;
7
7
  }
@@ -149,6 +149,9 @@
149
149
  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
150
150
  display: block;
151
151
  }
152
+ .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-pagination__nav-page-select {
153
+ display: inline-flex;
154
+ }
152
155
  .pf-v5-c-pagination.pf-m-bottom .pf-v5-c-options-menu {
153
156
  position: relative;
154
157
  }
@@ -214,7 +217,6 @@
214
217
  .pf-v5-c-pagination__nav-page-select .pf-v5-c-form-control {
215
218
  width: var(--pf-v5-c-pagination__nav-page-select--c-form-control--Width);
216
219
  }
217
-
218
220
  .pf-v5-c-pagination__total-items {
219
221
  display: var(--pf-v5-c-pagination__total-items--Display);
220
222
  }
package/components/Pagination/pagination.scss CHANGED
@@ -179,6 +179,10 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
179
179
  display: block;
180
180
  }
181
181
 
182
+ .#{$pagination}__nav-page-select {
183
+ display: inline-flex;
184
+ }
185
+
182
186
  .#{$options-menu} {
183
187
  position: relative;
184
188
  }
@@ -260,7 +264,9 @@ $pf-v5-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
260
264
  .#{$form-control} {
261
265
  width: var(--#{$pagination}__nav-page-select--c-form-control--Width);
262
266
 
263
- @extend %pf-v5-remove-num-arrows;
267
+ > :is(input) {
268
+ @extend %pf-v5-remove-num-arrows;
269
+ }
264
270
  }
265
271
  }
266
272
 
package/docs/components/ClipboardCopy/examples/ClipboardCopy.md CHANGED
@@ -31,7 +31,7 @@ cssPrefix: pf-v5-c-clipboard-copy
31
31
  <br />
32
32
  <div class="pf-v5-c-clipboard-copy">
33
33
  <div class="pf-v5-c-clipboard-copy__group">
34
- <div class="pf-v5-c-form-control">
34
+ <div class="pf-v5-c-form-control pf-m-readonly">
35
35
  <input
36
36
  readonly
37
37
  type="text"
@@ -109,7 +109,7 @@ cssPrefix: pf-v5-c-clipboard-copy
109
109
  <i class="fas fa-angle-right" aria-hidden="true"></i>
110
110
  </div>
111
111
  </button>
112
- <div class="pf-v5-c-form-control">
112
+ <div class="pf-v5-c-form-control pf-m-readonly">
113
113
  <input
114
114
  readonly
115
115
  type="text"
@@ -149,7 +149,7 @@ cssPrefix: pf-v5-c-clipboard-copy
149
149
  <i class="fas fa-angle-right" aria-hidden="true"></i>
150
150
  </div>
151
151
  </button>
152
- <div class="pf-v5-c-form-control">
152
+ <div class="pf-v5-c-form-control pf-m-readonly">
153
153
  <input
154
154
  readonly
155
155
  type="text"
@@ -188,7 +188,7 @@ cssPrefix: pf-v5-c-clipboard-copy
188
188
  <i class="fas fa-angle-right" aria-hidden="true"></i>
189
189
  </div>
190
190
  </button>
191
- <div class="pf-v5-c-form-control">
191
+ <div class="pf-v5-c-form-control pf-m-readonly">
192
192
  <input
193
193
  readonly
194
194
  type="text"
package/docs/components/DatePicker/examples/DatePicker.md CHANGED
@@ -85,7 +85,7 @@ cssPrefix: pf-v5-c-date-picker
85
85
  <div class="pf-v5-c-date-picker__input">
86
86
  <div class="pf-v5-c-input-group">
87
87
  <div class="pf-v5-c-input-group__item pf-m-fill">
88
- <div class="pf-v5-c-form-control">
88
+ <div class="pf-v5-c-form-control pf-m-error">
89
89
  <input
90
90
  aria-invalid="true"
91
91
  type="text"
@@ -94,6 +94,11 @@ cssPrefix: pf-v5-c-date-picker
94
94
  name="invalid-input"
95
95
  aria-label="Date picker"
96
96
  />
97
+ <div class="pf-v5-c-form-control__utilities">
98
+ <div class="pf-v5-c-form-control__icon pf-m-status">
99
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
100
+ </div>
101
+ </div>
97
102
  </div>
98
103
  </div>
99
104
  <div class="pf-v5-c-input-group__item">
package/docs/components/FileUpload/examples/FileUpload.md CHANGED
@@ -12,12 +12,12 @@ cssPrefix: pf-v5-c-file-upload
12
12
  <div class="pf-v5-c-file-upload__file-select">
13
13
  <div class="pf-v5-c-input-group">
14
14
  <div class="pf-v5-c-input-group__item pf-m-fill">
15
- <div class="pf-v5-c-form-control">
15
+ <div class="pf-v5-c-form-control pf-m-readonly">
16
16
  <input
17
+ readonly
17
18
  id="basic-file-upload-text-input"
18
19
  name="basic-file-upload-text-input"
19
20
  aria-label="Drag and drop a file or upload one"
20
- readonly
21
21
  placeholder="Drag and drop a file or upload one"
22
22
  aria-describedby="basic-file-upload-browse"
23
23
  />
@@ -55,12 +55,12 @@ cssPrefix: pf-v5-c-file-upload
55
55
  <div class="pf-v5-c-file-upload__file-select">
56
56
  <div class="pf-v5-c-input-group">
57
57
  <div class="pf-v5-c-input-group__item pf-m-fill">
58
- <div class="pf-v5-c-form-control">
58
+ <div class="pf-v5-c-form-control pf-m-readonly">
59
59
  <input
60
+ readonly
60
61
  id="browsed-file-upload-complete-text-input"
61
62
  name="browsed-file-upload-complete-text-input"
62
63
  aria-label="Read only filename"
63
- readonly
64
64
  value="Read only filename"
65
65
  aria-describedby="browsed-file-upload-complete-browse"
66
66
  />
@@ -78,13 +78,13 @@ cssPrefix: pf-v5-c-file-upload
78
78
  </div>
79
79
  </div>
80
80
  </div>
81
- <div class="pf-v5-c-file-upload__file-details" readonly>
82
- <div class="pf-v5-c-form-control pf-m-resize-vertical">
81
+ <div class="pf-v5-c-file-upload__file-details">
82
+ <div class="pf-v5-c-form-control pf-m-readonly pf-m-resize-vertical">
83
83
  <textarea
84
+ readonly
84
85
  id="browsed-file-upload-complete-file-details"
85
86
  name="browsed-file-upload-complete-file-details"
86
87
  aria-label="Text area"
87
- readonly
88
88
  >Ssh-Rsa AAh3zJFkzjjakCJialksjfB3zJFkzzAAhhMskjjakCJialksjfB3z89z3zJFkz3 +kzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fczJFkzMAjsauoox88aaZXphBx4fc
89
89
 
90
90
  </textarea>
@@ -101,12 +101,12 @@ cssPrefix: pf-v5-c-file-upload
101
101
  <div class="pf-v5-c-file-upload__file-select">
102
102
  <div class="pf-v5-c-input-group">
103
103
  <div class="pf-v5-c-input-group__item pf-m-fill">
104
- <div class="pf-v5-c-form-control">
104
+ <div class="pf-v5-c-form-control pf-m-readonly">
105
105
  <input
106
+ readonly
106
107
  id="drop-file-text-input"
107
108
  name="drop-file-text-input"
108
109
  aria-label="Read only filename"
109
- readonly
110
110
  value="Sample.txt"
111
111
  aria-describedby="drop-file-browse"
112
112
  />
@@ -146,12 +146,12 @@ cssPrefix: pf-v5-c-file-upload
146
146
  <div class="pf-v5-c-file-upload__file-select">
147
147
  <div class="pf-v5-c-input-group">
148
148
  <div class="pf-v5-c-input-group__item pf-m-fill">
149
- <div class="pf-v5-c-form-control">
149
+ <div class="pf-v5-c-form-control pf-m-readonly">
150
150
  <input
151
+ readonly
151
152
  id="drag-file-hover-component-text-input"
152
153
  name="drag-file-hover-component-text-input"
153
154
  aria-label="Drag and drop a file or upload one"
154
- readonly
155
155
  placeholder="Drag and drop a file or upload one"
156
156
  aria-describedby="drag-file-hover-component-browse"
157
157
  />
@@ -191,12 +191,12 @@ cssPrefix: pf-v5-c-file-upload
191
191
  <div class="pf-v5-c-file-upload__file-select">
192
192
  <div class="pf-v5-c-input-group">
193
193
  <div class="pf-v5-c-input-group__item pf-m-fill">
194
- <div class="pf-v5-c-form-control">
194
+ <div class="pf-v5-c-form-control pf-m-required">
195
195
  <input
196
+ required
196
197
  id="file-upload-error-text-input"
197
198
  name="file-upload-error-text-input"
198
199
  aria-label="File upload error"
199
- required
200
200
  value="Sample.png"
201
201
  aria-describedby="file-upload-error-browse"
202
202
  />
@@ -219,7 +219,7 @@ cssPrefix: pf-v5-c-file-upload
219
219
  aria-describedby="textAreaHelperText1"
220
220
  aria-invalid="true"
221
221
  >
222
- <div class="pf-v5-c-form-control pf-m-resize-vertical">
222
+ <div class="pf-v5-c-form-control pf-m-error pf-m-resize-vertical">
223
223
  <textarea
224
224
  id="file-upload-error-file-details"
225
225
  name="file-upload-error-file-details"
@@ -227,6 +227,11 @@ cssPrefix: pf-v5-c-file-upload
227
227
  aria-describedby="textAreaHelperText1"
228
228
  aria-invalid="true"
229
229
  ></textarea>
230
+ <div class="pf-v5-c-form-control__utilities">
231
+ <div class="pf-v5-c-form-control__icon pf-m-status">
232
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
233
+ </div>
234
+ </div>
230
235
  </div>
231
236
  </div>
232
237
  </div>
@@ -254,12 +259,12 @@ cssPrefix: pf-v5-c-file-upload
254
259
  <div class="pf-v5-c-file-upload__file-select">
255
260
  <div class="pf-v5-c-input-group">
256
261
  <div class="pf-v5-c-input-group__item pf-m-fill">
257
- <div class="pf-v5-c-form-control">
262
+ <div class="pf-v5-c-form-control pf-m-readonly">
258
263
  <input
264
+ readonly
259
265
  id="file-upload-loading-text-input"
260
266
  name="file-upload-loading"
261
267
  aria-label="Read only filename"
262
- readonly
263
268
  value="Sample.png"
264
269
  aria-describedby="file-upload-loading-browse"
265
270
  />
package/docs/components/Form/examples/Form.md CHANGED
@@ -21,12 +21,12 @@ cssPrefix: pf-v5-c-form
21
21
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
22
22
  </div>
23
23
  <div class="pf-v5-c-form__group-control">
24
- <div class="pf-v5-c-form-control">
24
+ <div class="pf-v5-c-form-control pf-m-required">
25
25
  <input
26
+ required
26
27
  type="text"
27
28
  id="form-vertical-name"
28
29
  name="form-vertical-name"
29
- required
30
30
  />
31
31
  </div>
32
32
  </div>
@@ -44,12 +44,12 @@ cssPrefix: pf-v5-c-form
44
44
  <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
45
45
  </div>
46
46
  <div class="pf-v5-c-form__group-control">
47
- <div class="pf-v5-c-form-control">
47
+ <div class="pf-v5-c-form-control pf-m-required">
48
48
  <input
49
+ required
49
50
  type="text"
50
51
  id="form-horizontal-name"
51
52
  name="form-horizontal-name"
52
- required
53
53
  />
54
54
  </div>
55
55
  </div>
@@ -146,12 +146,12 @@ cssPrefix: pf-v5-c-form
146
146
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
147
147
  </div>
148
148
  <div class="pf-v5-c-form__group-control">
149
- <div class="pf-v5-c-form-control">
149
+ <div class="pf-v5-c-form-control pf-m-required">
150
150
  <input
151
+ required
151
152
  type="text"
152
153
  id="form-horizontal-custom-breakpoint-name"
153
154
  name="form-horizontal-custom-breakpoint-name"
154
- required
155
155
  />
156
156
  </div>
157
157
  </div>
@@ -173,12 +173,12 @@ cssPrefix: pf-v5-c-form
173
173
  <span class="pf-v5-c-form__label-text">Form section 1 inputs</span></label>
174
174
  </div>
175
175
  <div class="pf-v5-c-form__group-control">
176
- <div class="pf-v5-c-form-control">
176
+ <div class="pf-v5-c-form-control pf-m-required">
177
177
  <input
178
+ required
178
179
  type="text"
179
180
  id="form-section-example-section-1-input"
180
181
  name="form-section-example-section-1-input"
181
- required
182
182
  />
183
183
  </div>
184
184
  </div>
@@ -191,12 +191,12 @@ cssPrefix: pf-v5-c-form
191
191
  <span class="pf-v5-c-form__label-text">Form section 1 inputs</span></label>
192
192
  </div>
193
193
  <div class="pf-v5-c-form__group-control">
194
- <div class="pf-v5-c-form-control">
194
+ <div class="pf-v5-c-form-control pf-m-required">
195
195
  <input
196
+ required
196
197
  type="text"
197
198
  id="form-section-example-section-1-input-2"
198
199
  name="form-section-example-section-1-input-2"
199
- required
200
200
  />
201
201
  </div>
202
202
  </div>
@@ -220,12 +220,12 @@ cssPrefix: pf-v5-c-form
220
220
  <span class="pf-v5-c-form__label-text">Form section 2 inputs</span></label>
221
221
  </div>
222
222
  <div class="pf-v5-c-form__group-control">
223
- <div class="pf-v5-c-form-control">
223
+ <div class="pf-v5-c-form-control pf-m-required">
224
224
  <input
225
+ required
225
226
  type="text"
226
227
  id="form-section-example-section-2-input"
227
228
  name="form-section-example-section-2-input"
228
- required
229
229
  />
230
230
  </div>
231
231
  </div>
@@ -238,12 +238,12 @@ cssPrefix: pf-v5-c-form
238
238
  <span class="pf-v5-c-form__label-text">Form section 2 inputs</span></label>
239
239
  </div>
240
240
  <div class="pf-v5-c-form__group-control">
241
- <div class="pf-v5-c-form-control">
241
+ <div class="pf-v5-c-form-control pf-m-required">
242
242
  <input
243
+ required
243
244
  type="text"
244
245
  id="form-section-example-section-2-input-2"
245
246
  name="form-section-example-section-2-input-2"
246
- required
247
247
  />
248
248
  </div>
249
249
  </div>
@@ -262,7 +262,7 @@ cssPrefix: pf-v5-c-form
262
262
  <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
263
263
  </div>
264
264
  <div class="pf-v5-c-form__group-control">
265
- <div class="pf-v5-c-form-control">
265
+ <div class="pf-v5-c-form-control pf-m-required">
266
266
  <input
267
267
  required
268
268
  type="text"
@@ -296,6 +296,11 @@ cssPrefix: pf-v5-c-form
296
296
  name="form-help-text-email"
297
297
  aria-describedby="form-help-text-email-helper"
298
298
  />
299
+ <div class="pf-v5-c-form-control__utilities">
300
+ <div class="pf-v5-c-form-control__icon pf-m-status">
301
+ <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
302
+ </div>
303
+ </div>
299
304
  </div>
300
305
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
301
306
  <div class="pf-v5-c-helper-text">
@@ -316,7 +321,7 @@ cssPrefix: pf-v5-c-form
316
321
  <span class="pf-v5-c-form__label-text">Address</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
317
322
  </div>
318
323
  <div class="pf-v5-c-form__group-control">
319
- <div class="pf-v5-c-form-control">
324
+ <div class="pf-v5-c-form-control pf-m-required pf-m-error">
320
325
  <input
321
326
  required
322
327
  type="text"
@@ -325,6 +330,11 @@ cssPrefix: pf-v5-c-form
325
330
  aria-invalid="true"
326
331
  aria-describedby="-address-helper"
327
332
  />
333
+ <div class="pf-v5-c-form-control__utilities">
334
+ <div class="pf-v5-c-form-control__icon pf-m-status">
335
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
336
+ </div>
337
+ </div>
328
338
  </div>
329
339
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
330
340
  <div class="pf-v5-c-helper-text">
@@ -353,6 +363,11 @@ cssPrefix: pf-v5-c-form
353
363
  name="form-help-text-comment"
354
364
  aria-describedby="form-help-text-comment-helper"
355
365
  />
366
+ <div class="pf-v5-c-form-control__utilities">
367
+ <div class="pf-v5-c-form-control__icon pf-m-status">
368
+ <i class="fas fa-check-circle" aria-hidden="true"></i>
369
+ </div>
370
+ </div>
356
371
  </div>
357
372
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
358
373
  <div class="pf-v5-c-helper-text">
@@ -373,13 +388,18 @@ cssPrefix: pf-v5-c-form
373
388
  <span class="pf-v5-c-form__label-text">Information</span></label>
374
389
  </div>
375
390
  <div class="pf-v5-c-form__group-control">
376
- <div class="pf-v5-c-form-control">
391
+ <div class="pf-v5-c-form-control pf-m-error pf-m-resize-both">
377
392
  <textarea
378
393
  id="form-help-text-info"
379
394
  name="form-help-text-info"
380
395
  aria-invalid="true"
381
396
  aria-describedby="form-help-text-info-helper"
382
397
  ></textarea>
398
+ <div class="pf-v5-c-form-control__utilities">
399
+ <div class="pf-v5-c-form-control__icon pf-m-status">
400
+ <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
401
+ </div>
402
+ </div>
383
403
  </div>
384
404
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
385
405
  <div class="pf-v5-c-helper-text">
@@ -421,12 +441,12 @@ cssPrefix: pf-v5-c-form
421
441
  <div class="pf-v5-c-form__group-label-info">info</div>
422
442
  </div>
423
443
  <div class="pf-v5-c-form__group-control">
424
- <div class="pf-v5-c-form-control">
444
+ <div class="pf-v5-c-form-control pf-m-required">
425
445
  <input
446
+ required
426
447
  type="text"
427
448
  id="form-additional-info-name"
428
449
  name="form-additional-info-name"
429
- required
430
450
  />
431
451
  </div>
432
452
  </div>
@@ -490,12 +510,12 @@ cssPrefix: pf-v5-c-form
490
510
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
491
511
  </div>
492
512
  <div class="pf-v5-c-form__group-control">
493
- <div class="pf-v5-c-form-control">
513
+ <div class="pf-v5-c-form-control pf-m-required">
494
514
  <input
515
+ required
495
516
  type="text"
496
517
  id="form-field-group-field-group-label1"
497
518
  name="form-field-group-field-group-label1"
498
- required
499
519
  />
500
520
  </div>
501
521
  </div>
@@ -515,12 +535,12 @@ cssPrefix: pf-v5-c-form
515
535
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
516
536
  </div>
517
537
  <div class="pf-v5-c-form__group-control">
518
- <div class="pf-v5-c-form-control">
538
+ <div class="pf-v5-c-form-control pf-m-required">
519
539
  <input
540
+ required
520
541
  type="text"
521
542
  id="form-field-group-field-group-label2"
522
543
  name="form-field-group-field-group-label2"
523
- required
524
544
  />
525
545
  </div>
526
546
  </div>
@@ -623,12 +643,12 @@ cssPrefix: pf-v5-c-form
623
643
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
624
644
  </div>
625
645
  <div class="pf-v5-c-form__group-control">
626
- <div class="pf-v5-c-form-control">
646
+ <div class="pf-v5-c-form-control pf-m-required">
627
647
  <input
648
+ required
628
649
  type="text"
629
650
  id="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
630
651
  name="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
631
- required
632
652
  />
633
653
  </div>
634
654
  </div>
@@ -648,12 +668,12 @@ cssPrefix: pf-v5-c-form
648
668
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
649
669
  </div>
650
670
  <div class="pf-v5-c-form__group-control">
651
- <div class="pf-v5-c-form-control">
671
+ <div class="pf-v5-c-form-control pf-m-required">
652
672
  <input
673
+ required
653
674
  type="text"
654
675
  id="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
655
676
  name="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
656
- required
657
677
  />
658
678
  </div>
659
679
  </div>
@@ -692,12 +712,12 @@ cssPrefix: pf-v5-c-form
692
712
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
693
713
  </div>
694
714
  <div class="pf-v5-c-form__group-control">
695
- <div class="pf-v5-c-form-control">
715
+ <div class="pf-v5-c-form-control pf-m-required">
696
716
  <input
717
+ required
697
718
  type="text"
698
719
  id="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
699
720
  name="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
700
- required
701
721
  />
702
722
  </div>
703
723
  </div>
@@ -720,12 +740,12 @@ cssPrefix: pf-v5-c-form
720
740
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
721
741
  </div>
722
742
  <div class="pf-v5-c-form__group-control">
723
- <div class="pf-v5-c-form-control">
743
+ <div class="pf-v5-c-form-control pf-m-required">
724
744
  <input
745
+ required
725
746
  type="text"
726
747
  id="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
727
748
  name="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
728
- required
729
749
  />
730
750
  </div>
731
751
  </div>
package/docs/components/FormControl/examples/FormControl.md CHANGED
@@ -19,7 +19,7 @@ cssPrefix: pf-v5-c-form-control
19
19
  />
20
20
  </div>
21
21
  <br />
22
- <div class="pf-v5-c-form-control pf-m-placeholder">
22
+ <div class="pf-v5-c-form-control">
23
23
  <input
24
24
  type="text"
25
25
  placeholder="Placeholder"