@patternfly/patternfly 5.0.0-alpha.32 → 5.0.0-alpha.33

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 (20) hide show
  1. package/components/DatePicker/date-picker.css +0 -8
  2. package/components/DatePicker/date-picker.scss +0 -9
  3. package/components/HelperText/helper-text.css +4 -0
  4. package/components/HelperText/helper-text.scss +5 -0
  5. package/docs/components/DatePicker/examples/DatePicker.md +14 -3
  6. package/docs/components/FileUpload/examples/FileUpload.md +9 -5
  7. package/docs/components/Form/examples/Form.md +94 -73
  8. package/docs/components/HelperText/examples/HelperText.md +13 -24
  9. package/docs/components/Login/examples/Login.md +67 -30
  10. package/docs/components/Progress/examples/Progress.md +1 -1
  11. package/docs/demos/Alert/examples/Alert.md +105 -58
  12. package/docs/demos/Form/examples/BasicForms.md +129 -140
  13. package/docs/demos/HelperText/examples/HelperText.md +11 -8
  14. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +87 -53
  15. package/docs/demos/Toolbar/examples/Toolbar.md +17 -5
  16. package/package.json +2 -2
  17. package/patternfly-no-reset.css +4 -8
  18. package/patternfly.css +4 -8
  19. package/patternfly.min.css +1 -1
  20. package/patternfly.min.css.map +1 -1
package/components/DatePicker/date-picker.css CHANGED
@@ -2,9 +2,6 @@
2
2
  --pf-c-date-picker--m-top__calendar--Top: 0;
3
3
  --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
4
4
  --pf-c-date-picker__helper-text--MarginTop: var(--pf-global--spacer--xs);
5
- --pf-c-date-picker__helper-text--FontSize: var(--pf-global--FontSize--sm);
6
- --pf-c-date-picker__helper-text--Color: var(--pf-global--Color--100);
7
- --pf-c-date-picker__helper-text--m-error--Color: var(--pf-global--danger-color--100);
8
5
  --pf-c-date-picker__input--c-form-control--Width: calc(var(--pf-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-c-date-picker__input--c-form-control--width-base));
9
6
  --pf-c-date-picker__input--c-form-control--width-base: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));
10
7
  --pf-c-date-picker__input--c-form-control--width-chars: 10;
@@ -22,11 +19,6 @@
22
19
 
23
20
  .pf-c-date-picker__helper-text {
24
21
  margin-top: var(--pf-c-date-picker__helper-text--MarginTop);
25
- font-size: var(--pf-c-date-picker__helper-text--FontSize);
26
- color: var(--pf-c-date-picker__helper-text--Color);
27
- }
28
- .pf-c-date-picker__helper-text.pf-m-error {
29
- --pf-c-date-picker__helper-text--Color: var(--pf-c-date-picker__helper-text--m-error--Color);
30
22
  }
31
23
 
32
24
  .pf-c-date-picker__input .pf-c-form-control {
package/components/DatePicker/date-picker.scss CHANGED
@@ -2,9 +2,6 @@
2
2
  --pf-c-date-picker--m-top__calendar--Top: 0;
3
3
  --pf-c-date-picker--m-top__calendar--TranslateY: calc(-100% - var(--pf-global--spacer--xs));
4
4
  --pf-c-date-picker__helper-text--MarginTop: var(--pf-global--spacer--xs);
5
- --pf-c-date-picker__helper-text--FontSize: var(--pf-global--FontSize--sm);
6
- --pf-c-date-picker__helper-text--Color: var(--pf-global--Color--100);
7
- --pf-c-date-picker__helper-text--m-error--Color: var(--pf-global--danger-color--100);
8
5
  --pf-c-date-picker__input--c-form-control--Width: calc(var(--pf-c-date-picker__input--c-form-control--width-chars) * 1ch + var(--pf-c-date-picker__input--c-form-control--width-base));
9
6
  --pf-c-date-picker__input--c-form-control--width-base: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm)); // form control left/right padding + status icon width and spacer
10
7
  --pf-c-date-picker__input--c-form-control--width-chars: 10;
@@ -23,12 +20,6 @@
23
20
 
24
21
  .pf-c-date-picker__helper-text {
25
22
  margin-top: var(--pf-c-date-picker__helper-text--MarginTop);
26
- font-size: var(--pf-c-date-picker__helper-text--FontSize);
27
- color: var(--pf-c-date-picker__helper-text--Color);
28
-
29
- &.pf-m-error {
30
- --pf-c-date-picker__helper-text--Color: var(--pf-c-date-picker__helper-text--m-error--Color);
31
- }
32
23
  }
33
24
 
34
25
  .pf-c-date-picker__input {
package/components/HelperText/helper-text.css CHANGED
@@ -26,6 +26,10 @@
26
26
  gap: var(--pf-c-helper-text--Gap);
27
27
  font-size: var(--pf-c-helper-text--FontSize);
28
28
  }
29
+ .pf-c-helper-text.pf-m-hidden {
30
+ visibility: hidden;
31
+ opacity: 0;
32
+ }
29
33
 
30
34
  .pf-c-helper-text__item {
31
35
  display: flex;
package/components/HelperText/helper-text.scss CHANGED
@@ -34,6 +34,11 @@
34
34
  display: grid;
35
35
  gap: var(--pf-c-helper-text--Gap);
36
36
  font-size: var(--pf-c-helper-text--FontSize);
37
+
38
+ &.pf-m-hidden {
39
+ visibility: hidden;
40
+ opacity: 0;
41
+ }
37
42
  }
38
43
 
39
44
  .pf-c-helper-text__item {
package/docs/components/DatePicker/examples/DatePicker.md CHANGED
@@ -65,7 +65,13 @@ cssPrefix: pf-c-date-picker
65
65
  </div>
66
66
  </div>
67
67
  </div>
68
- <div class="pf-c-date-picker__helper-text">Select a date.</div>
68
+ <div class="pf-c-date-picker__helper-text">
69
+ <div class="pf-c-helper-text">
70
+ <div class="pf-c-helper-text__item">
71
+ <span class="pf-c-helper-text__item-text">Select a date.</span>
72
+ </div>
73
+ </div>
74
+ </div>
69
75
  </div>
70
76
 
71
77
  ```
@@ -98,7 +104,13 @@ cssPrefix: pf-c-date-picker
98
104
  </div>
99
105
  </div>
100
106
  </div>
101
- <div class="pf-c-date-picker__helper-text pf-m-error">Invalid date</div>
107
+ <div class="pf-c-date-picker__helper-text">
108
+ <div class="pf-c-helper-text">
109
+ <div class="pf-c-helper-text__item pf-m-error">
110
+ <span class="pf-c-helper-text__item-text">Invalid date</span>
111
+ </div>
112
+ </div>
113
+ </div>
102
114
  </div>
103
115
 
104
116
  ```
@@ -214,6 +226,5 @@ cssPrefix: pf-c-date-picker
214
226
  | `.pf-c-date-picker__helper-text` | `<div>` | Initiates the date picker helper text. |
215
227
  | `.pf-c-date-picker__calendar` | `<div>` | Initiates an optional date picker calendar container. **Note:** Required in the react date picker component. |
216
228
  | `.pf-m-top` | `.pf-c-date-picker` | Modifies to display the calendar above the date picker. |
217
- | `.pf-m-error` | `.pf-c-date-picker__helper-text` | Modifies the helper text for the invalid/error state. |
218
229
  | `.pf-m-align-right` | `.pf-c-date-picker__calendar` | Modifies the calendar to align the calendar to the right edge of the date picker. |
219
230
  | `.pf-m-static` | `.pf-c-date-picker__calendar` | Modifies the calendar to be statically positioned to support custom positioning. |
package/docs/components/FileUpload/examples/FileUpload.md CHANGED
@@ -219,11 +219,15 @@ cssPrefix: pf-c-file-upload
219
219
  ></textarea>
220
220
  </div>
221
221
  </div>
222
- <p
223
- class="pf-c-form__helper-text pf-m-error"
224
- id="textAreaHelperText1"
225
- aria-live="polite"
226
- >We don't support this file type. Try again with a different file type.</p>
222
+ <div class="pf-c-form__helper-text" aria-live="polite">
223
+ <div class="pf-c-helper-text">
224
+ <div class="pf-c-helper-text__item pf-m-error" id="textAreaHelperText1">
225
+ <span
226
+ class="pf-c-helper-text__item-text"
227
+ >We don't support this file type. Try again with a different file type.</span>
228
+ </div>
229
+ </div>
230
+ </div>
227
231
  </div>
228
232
  </form>
229
233
 
package/docs/components/Form/examples/Form.md CHANGED
@@ -75,11 +75,11 @@ cssPrefix: pf-c-form
75
75
  <div
76
76
  class="pf-c-form__group"
77
77
  role="group"
78
- aria-labelledby="form-horizontal-checkbox-legend"
78
+ aria-labelledby="form-horizontalform-horizontal-checkbox-legend"
79
79
  >
80
80
  <div
81
81
  class="pf-c-form__group-label pf-m-no-padding-top"
82
- id="form-horizontal-checkbox-legend"
82
+ id="form-horizontalform-horizontal-checkbox-legend"
83
83
  ><span class="pf-c-form__label">
84
84
  <span class="pf-c-form__label-text">Label (no top padding)</span></span>&nbsp;<span
85
85
  class="pf-c-form__group-label-help"
@@ -160,7 +160,7 @@ cssPrefix: pf-c-form
160
160
  <div class="pf-c-form__group">
161
161
  <div class="pf-c-form__group-label"><label
162
162
  class="pf-c-form__label"
163
- for="form-section-example-form-section-1-input"
163
+ for="form-section-example-section-1-input"
164
164
  >
165
165
  <span class="pf-c-form__label-text">Form section 1 inputs</span></label>
166
166
  </div>
@@ -168,8 +168,8 @@ cssPrefix: pf-c-form
168
168
  <input
169
169
  class="pf-c-form-control"
170
170
  type="text"
171
- id="form-section-example-form-section-1-input"
172
- name="form-section-example-form-section-1-input"
171
+ id="form-section-example-section-1-input"
172
+ name="form-section-example-section-1-input"
173
173
  required
174
174
  />
175
175
  </div>
@@ -177,7 +177,7 @@ cssPrefix: pf-c-form
177
177
  <div class="pf-c-form__group">
178
178
  <div class="pf-c-form__group-label"><label
179
179
  class="pf-c-form__label"
180
- for="form-section-example-form-section-1-input-2"
180
+ for="form-section-example-section-1-input-2"
181
181
  >
182
182
  <span class="pf-c-form__label-text">Form section 1 inputs</span></label>
183
183
  </div>
@@ -185,8 +185,8 @@ cssPrefix: pf-c-form
185
185
  <input
186
186
  class="pf-c-form-control"
187
187
  type="text"
188
- id="form-section-example-form-section-1-input-2"
189
- name="form-section-example-form-section-1-input-2"
188
+ id="form-section-example-section-1-input-2"
189
+ name="form-section-example-section-1-input-2"
190
190
  required
191
191
  />
192
192
  </div>
@@ -195,17 +195,17 @@ cssPrefix: pf-c-form
195
195
  <section
196
196
  class="pf-c-form__section"
197
197
  role="group"
198
- aria-labelledby="form-section-example-section2-title"
198
+ aria-labelledby="form-section-example-section-2-title"
199
199
  >
200
200
  <div
201
201
  class="pf-c-form__section-title"
202
- id="form-section-example-section2-title"
202
+ id="form-section-example-section-2-title"
203
203
  aria-hidden="true"
204
204
  >Section 2 title (optional)</div>
205
205
  <div class="pf-c-form__group">
206
206
  <div class="pf-c-form__group-label"><label
207
207
  class="pf-c-form__label"
208
- for="form-section-example-form-section-2-input"
208
+ for="form-section-example-section-2-input"
209
209
  >
210
210
  <span class="pf-c-form__label-text">Form section 2 inputs</span></label>
211
211
  </div>
@@ -213,8 +213,8 @@ cssPrefix: pf-c-form
213
213
  <input
214
214
  class="pf-c-form-control"
215
215
  type="text"
216
- id="form-section-example-form-section-2-input"
217
- name="form-section-example-form-section-2-input"
216
+ id="form-section-example-section-2-input"
217
+ name="form-section-example-section-2-input"
218
218
  required
219
219
  />
220
220
  </div>
@@ -222,7 +222,7 @@ cssPrefix: pf-c-form
222
222
  <div class="pf-c-form__group">
223
223
  <div class="pf-c-form__group-label"><label
224
224
  class="pf-c-form__label"
225
- for="form-section-example-form-section-2-input-2"
225
+ for="form-section-example-section-2-input-2"
226
226
  >
227
227
  <span class="pf-c-form__label-text">Form section 2 inputs</span></label>
228
228
  </div>
@@ -230,8 +230,8 @@ cssPrefix: pf-c-form
230
230
  <input
231
231
  class="pf-c-form-control"
232
232
  type="text"
233
- id="form-section-example-form-section-2-input-2"
234
- name="form-section-example-form-section-2-input-2"
233
+ id="form-section-example-section-2-input-2"
234
+ name="form-section-example-section-2-input-2"
235
235
  required
236
236
  />
237
237
  </div>
@@ -258,11 +258,13 @@ cssPrefix: pf-c-form
258
258
  name="form-help-text-name"
259
259
  aria-describedby="form-help-text-name-helper"
260
260
  />
261
- <p
262
- class="pf-c-form__helper-text"
263
- id="form-help-text-name-helper"
264
- aria-live="polite"
265
- >This is helper text.</p>
261
+ <div class="pf-c-form__helper-text" aria-live="polite">
262
+ <div class="pf-c-helper-text">
263
+ <div class="pf-c-helper-text__item" id="form-help-text-name-helper">
264
+ <span class="pf-c-helper-text__item-text">This is helper text.</span>
265
+ </div>
266
+ </div>
267
+ </div>
266
268
  </div>
267
269
  </div>
268
270
  <div class="pf-c-form__group">
@@ -278,15 +280,22 @@ cssPrefix: pf-c-form
278
280
  name="form-help-text-email"
279
281
  aria-describedby="form-help-text-email-helper"
280
282
  />
281
- <p
282
- class="pf-c-form__helper-text pf-m-warning"
283
- id="form-help-text-email-helper"
284
- aria-live="polite"
285
- >This is helper text for a warning input.</p>
283
+ <div class="pf-c-form__helper-text" aria-live="polite">
284
+ <div class="pf-c-helper-text">
285
+ <div
286
+ class="pf-c-helper-text__item pf-m-warning"
287
+ id="form-help-text-email-helper"
288
+ >
289
+ <span
290
+ class="pf-c-helper-text__item-text"
291
+ >This is helper text for a warning input.</span>
292
+ </div>
293
+ </div>
294
+ </div>
286
295
  </div>
287
296
  </div>
288
297
  <div class="pf-c-form__group">
289
- <div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-help-text-address">
298
+ <div class="pf-c-form__group-label"><label class="pf-c-form__label" for="-address">
290
299
  <span class="pf-c-form__label-text">Address</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
291
300
  </div>
292
301
  <div class="pf-c-form__group-control">
@@ -294,16 +303,20 @@ cssPrefix: pf-c-form
294
303
  class="pf-c-form-control"
295
304
  required
296
305
  type="text"
297
- id="form-help-text-address"
298
- name="form-help-text-address"
306
+ id="-address"
307
+ name="-address"
299
308
  aria-invalid="true"
300
- aria-describedby="form-help-text-address-helper"
309
+ aria-describedby="-address-helper"
301
310
  />
302
- <p
303
- class="pf-c-form__helper-text pf-m-error"
304
- id="form-help-text-address-helper"
305
- aria-live="polite"
306
- >This is helper text for an invalid input.</p>
311
+ <div class="pf-c-form__helper-text" aria-live="polite">
312
+ <div class="pf-c-helper-text">
313
+ <div class="pf-c-helper-text__item pf-m-error" id="-address-helper">
314
+ <span
315
+ class="pf-c-helper-text__item-text"
316
+ >This is helper text for an invalid input.</span>
317
+ </div>
318
+ </div>
319
+ </div>
307
320
  </div>
308
321
  </div>
309
322
  <div class="pf-c-form__group">
@@ -319,34 +332,48 @@ cssPrefix: pf-c-form
319
332
  name="form-help-text-comment"
320
333
  aria-describedby="form-help-text-comment-helper"
321
334
  />
322
- <p
323
- class="pf-c-form__helper-text pf-m-success"
324
- id="form-help-text-comment-helper"
325
- aria-live="polite"
326
- >This is helper text for success input.</p>
335
+ <div class="pf-c-form__helper-text" aria-live="polite">
336
+ <div class="pf-c-helper-text">
337
+ <div
338
+ class="pf-c-helper-text__item pf-m-success"
339
+ id="form-help-text-comment-helper"
340
+ >
341
+ <span
342
+ class="pf-c-helper-text__item-text"
343
+ >This is helper text for success input.</span>
344
+ </div>
345
+ </div>
346
+ </div>
327
347
  </div>
328
348
  </div>
329
349
  <div class="pf-c-form__group">
330
350
  <div class="pf-c-form__group-label"><label class="pf-c-form__label" for="form-help-text-info">
331
351
  <span class="pf-c-form__label-text">Information</span></label>
332
352
  </div>
333
- <textarea
334
- class="pf-c-form-control"
335
- id="form-help-text-info"
336
- name="form-help-text-info"
337
- aria-invalid="true"
338
- aria-describedby="form-help-text-info-helper"
339
- ></textarea>
340
- <p
341
- class="pf-c-form__helper-text pf-m-error"
342
- id="form-help-text-info-helper"
343
- aria-live="polite"
344
- >
345
- <span class="pf-c-form__helper-text-icon">
346
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
347
- </span>
348
- This is helper text with an icon.
349
- </p>
353
+ <div class="pf-c-form__group-control">
354
+ <textarea
355
+ class="pf-c-form-control"
356
+ id="form-help-text-info"
357
+ name="form-help-text-info"
358
+ aria-invalid="true"
359
+ aria-describedby="form-help-text-info-helper"
360
+ ></textarea>
361
+ <div class="pf-c-form__helper-text" aria-live="polite">
362
+ <div class="pf-c-helper-text">
363
+ <div
364
+ class="pf-c-helper-text__item pf-m-error"
365
+ id="form-help-text-info-helper"
366
+ >
367
+ <span class="pf-c-helper-text__item-icon">
368
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
369
+ </span>
370
+ <span
371
+ class="pf-c-helper-text__item-text"
372
+ >This is helper text with an icon.</span>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </div>
350
377
  </div>
351
378
  </form>
352
379
 
@@ -362,7 +389,7 @@ cssPrefix: pf-c-form
362
389
  <span class="pf-c-form__label-text">Name</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
363
390
  class="pf-c-form__group-label-help"
364
391
  aria-label="More information for name field"
365
- aria-describedby="form-additional-info-name"
392
+ aria-describedby="form-additional-infoform-additional-info-name"
366
393
  role="button"
367
394
  type="button"
368
395
  tabindex="0"
@@ -427,12 +454,12 @@ cssPrefix: pf-c-form
427
454
  <div class="pf-c-form__group">
428
455
  <div class="pf-c-form__group-label"><label
429
456
  class="pf-c-form__label"
430
- for="form-field-groupform-field-group-field-group-label1"
457
+ for="form-field-group-field-group-label1"
431
458
  >
432
459
  <span class="pf-c-form__label-text">Label 1</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
433
460
  class="pf-c-form__group-label-help"
434
461
  aria-label="More information for label 1 field"
435
- aria-describedby="form-field-groupform-field-group-field-group-label1"
462
+ aria-describedby="form-field-group-field-group-label1"
436
463
  role="button"
437
464
  type="button"
438
465
  tabindex="0"
@@ -442,8 +469,8 @@ cssPrefix: pf-c-form
442
469
  <input
443
470
  class="pf-c-form-control"
444
471
  type="text"
445
- id="form-field-groupform-field-group-field-group-label1"
446
- name="form-field-groupform-field-group-field-group-label1"
472
+ id="form-field-group-field-group-label1"
473
+ name="form-field-group-field-group-label1"
447
474
  required
448
475
  />
449
476
  </div>
@@ -451,12 +478,12 @@ cssPrefix: pf-c-form
451
478
  <div class="pf-c-form__group">
452
479
  <div class="pf-c-form__group-label"><label
453
480
  class="pf-c-form__label"
454
- for="form-field-groupform-field-group-field-group-label2"
481
+ for="form-field-group-field-group-label2"
455
482
  >
456
483
  <span class="pf-c-form__label-text">Label 2</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
457
484
  class="pf-c-form__group-label-help"
458
485
  aria-label="More information for label 2 field"
459
- aria-describedby="form-field-groupform-field-group-field-group-label2"
486
+ aria-describedby="form-field-group-field-group-label2"
460
487
  role="button"
461
488
  type="button"
462
489
  tabindex="0"
@@ -466,8 +493,8 @@ cssPrefix: pf-c-form
466
493
  <input
467
494
  class="pf-c-form-control"
468
495
  type="text"
469
- id="form-field-groupform-field-group-field-group-label2"
470
- name="form-field-groupform-field-group-field-group-label2"
496
+ id="form-field-group-field-group-label2"
497
+ name="form-field-group-field-group-label2"
471
498
  required
472
499
  />
473
500
  </div>
@@ -686,8 +713,7 @@ To avoid the form label's required indicator or help tooltip icon from wrapping
686
713
  | `for` | `<label>` | Each `<label>` must have a `for` attribute that matches its form field id. **Required** |
687
714
  | `id` | `<input type="radio/checkbox/text">`, `<select>`, `<textarea>` | Each `<form>` field must have an `id` attribute that matches its label's `for` value. **Required** |
688
715
  | `required` | `<input>`, `<select>`, `<textarea>` | Required fields must include these attributes. |
689
- | `id="{helper_text_id}"` | `.pf-c-form__helper-text` | Form fields with related `.pf-c-form__helper-text` require this attribute. Usage `<p class="pf-c-form__helper-text" id="{helper_text_id}">`. |
690
- | `aria-describedby="{helper_text_id}"` | `<input>`, `<select>`, `<textarea>` | Form fields with related `.pf-c-form__helper-text` require this attribute. Usage `<input aria-describedby="{helper_text_id}">`. |
716
+ | `aria-describedby="{helper_text_id}"` | `<input>`, `<select>`, `<textarea>` | Form fields with related `.pf-c-helper-text` require this attribute. Usage `<input aria-describedby="{helper_text_id}">`. |
691
717
  | `aria-invalid="true" aria-describedby="{helper_text_id}"` | `<input>`, `<select>`, `<textarea>` | When form validation fails `aria-describedby` is used to communicate the error to the user. These attributes need to be handled with Javascript so that `aria-describedby` only references help text that explains the error, and so that `aria-invalid="true"` is only present when validation fails. For proper styling of errors `aria-invalid="true"` is required. |
692
718
  | `aria-hidden="true"` | `.pf-c-form__label-required` | Hides the required indicator from assistive technologies. |
693
719
  | `role="group"` | `.pf-c-form__group`, `.pf-c-form__section`, `.pf-c-form__field-group` | Provides group role for form groups, form sections, and form field groups. **Required for checkbox groups, form groups, form sections, and form field groups.** |
@@ -721,7 +747,6 @@ To avoid the form label's required indicator or help tooltip icon from wrapping
721
747
  | `.pf-c-form__group-control` | `<div>` | Initiates a form group control section. |
722
748
  | `.pf-c-form__actions` | `<div>` | Iniates a row of actions. |
723
749
  | `.pf-c-form__helper-text` | `<p>`, `<div>` | Initiates a form helper text block. |
724
- | `.pf-c-form__helper-text-icon` | `<span>` | Initiates a form helper text icon. |
725
750
  | `.pf-c-form__alert` | `<div>` | Initiates the form alert container for inline alerts. |
726
751
  | `.pf-c-form__field-group` | `<div>` | Initiates a form field group. |
727
752
  | `.pf-c-form__field-group-toggle` | `<div>` | Initiates the form field group toggle. |
@@ -738,10 +763,6 @@ To avoid the form label's required indicator or help tooltip icon from wrapping
738
763
  | `.pf-m-limit-width` | `.pf-c-form` | Limits the overall max-width of the form. Configurable by defining `--pf-c-form--m-limit-width--MaxWidth`. |
739
764
  | `.pf-m-info` | `.pf-c-form__group-label` | Modifies the form group label to contain form group label info. |
740
765
  | `.pf-m-action` | `.pf-c-form__group` | Modifies form group margin-top. |
741
- | `.pf-m-success` | `.pf-c-form__helper-text` | Modifies text color of helper text for success state. |
742
- | `.pf-m-warning` | `.pf-c-form__helper-text` | Modifies text color of helper text for warning state. |
743
- | `.pf-m-error` | `.pf-c-form__helper-text`| Modifies text color of helper text for error state. |
744
- | `.pf-m-inactive` | `.pf-c-form__helper-text`| Modifies display of helper text to none. |
745
766
  | `.pf-m-disabled` | `.pf-c-form__label` | Modifies form label to show disabled state. |
746
767
  | `.pf-m-no-padding-top` | `.pf-c-form__group-label` | Removes top padding from the label element for labels adjacent to an element that isn't a form control. |
747
768
  | `.pf-m-inline` | `.pf-c-form__group-control` | Modifies form group children to be inline (this is primarily for radio buttons and checkboxes). |
package/docs/components/HelperText/examples/HelperText.md CHANGED
@@ -12,25 +12,21 @@ cssPrefix: pf-c-helper-text
12
12
  <span class="pf-c-helper-text__item-text">This is default helper text</span>
13
13
  </div>
14
14
  </div>
15
-
16
15
  <div class="pf-c-helper-text">
17
16
  <div class="pf-c-helper-text__item pf-m-indeterminate">
18
17
  <span class="pf-c-helper-text__item-text">This is indeterminate helper text</span>
19
18
  </div>
20
19
  </div>
21
-
22
20
  <div class="pf-c-helper-text">
23
21
  <div class="pf-c-helper-text__item pf-m-warning">
24
22
  <span class="pf-c-helper-text__item-text">This is warning helper text</span>
25
23
  </div>
26
24
  </div>
27
-
28
25
  <div class="pf-c-helper-text">
29
26
  <div class="pf-c-helper-text__item pf-m-success">
30
27
  <span class="pf-c-helper-text__item-text">This is success helper text</span>
31
28
  </div>
32
29
  </div>
33
-
34
30
  <div class="pf-c-helper-text">
35
31
  <div class="pf-c-helper-text__item pf-m-error">
36
32
  <span class="pf-c-helper-text__item-text">This is error helper text</span>
@@ -50,7 +46,6 @@ cssPrefix: pf-c-helper-text
50
46
  <span class="pf-c-helper-text__item-text">This is default helper text</span>
51
47
  </div>
52
48
  </div>
53
-
54
49
  <div class="pf-c-helper-text">
55
50
  <div class="pf-c-helper-text__item pf-m-indeterminate">
56
51
  <span class="pf-c-helper-text__item-icon">
@@ -59,7 +54,6 @@ cssPrefix: pf-c-helper-text
59
54
  <span class="pf-c-helper-text__item-text">This is indeterminate helper text</span>
60
55
  </div>
61
56
  </div>
62
-
63
57
  <div class="pf-c-helper-text">
64
58
  <div class="pf-c-helper-text__item pf-m-warning">
65
59
  <span class="pf-c-helper-text__item-icon">
@@ -68,7 +62,6 @@ cssPrefix: pf-c-helper-text
68
62
  <span class="pf-c-helper-text__item-text">This is warning helper text</span>
69
63
  </div>
70
64
  </div>
71
-
72
65
  <div class="pf-c-helper-text">
73
66
  <div class="pf-c-helper-text__item pf-m-success">
74
67
  <span class="pf-c-helper-text__item-icon">
@@ -77,7 +70,6 @@ cssPrefix: pf-c-helper-text
77
70
  <span class="pf-c-helper-text__item-text">This is success helper text</span>
78
71
  </div>
79
72
  </div>
80
-
81
73
  <div class="pf-c-helper-text">
82
74
  <div class="pf-c-helper-text__item pf-m-error">
83
75
  <span class="pf-c-helper-text__item-icon">
@@ -121,36 +113,32 @@ cssPrefix: pf-c-helper-text
121
113
  <span class="pf-c-helper-text__item-text">This is default helper text</span>
122
114
  </div>
123
115
  </div>
124
-
125
116
  <div class="pf-c-helper-text">
126
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-indeterminate">
117
+ <div class="pf-c-helper-text__item pf-m-indeterminate pf-m-dynamic">
127
118
  <span class="pf-c-helper-text__item-icon">
128
119
  <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
129
120
  </span>
130
121
  <span class="pf-c-helper-text__item-text">This is indeterminate helper text</span>
131
122
  </div>
132
123
  </div>
133
-
134
124
  <div class="pf-c-helper-text">
135
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-warning">
125
+ <div class="pf-c-helper-text__item pf-m-warning pf-m-dynamic">
136
126
  <span class="pf-c-helper-text__item-icon">
137
127
  <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
138
128
  </span>
139
129
  <span class="pf-c-helper-text__item-text">This is warning helper text</span>
140
130
  </div>
141
131
  </div>
142
-
143
132
  <div class="pf-c-helper-text">
144
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
133
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
145
134
  <span class="pf-c-helper-text__item-icon">
146
135
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
147
136
  </span>
148
137
  <span class="pf-c-helper-text__item-text">This is success helper text</span>
149
138
  </div>
150
139
  </div>
151
-
152
140
  <div class="pf-c-helper-text">
153
- <div class="pf-c-helper-text__item pf-m-dynamic pf-m-error">
141
+ <div class="pf-c-helper-text__item pf-m-error pf-m-dynamic">
154
142
  <span class="pf-c-helper-text__item-icon">
155
143
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
156
144
  </span>
@@ -163,30 +151,30 @@ cssPrefix: pf-c-helper-text
163
151
  ### Dynamic list
164
152
 
165
153
  ```html
166
- <ul class="pf-c-helper-text" role="list">
167
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
154
+ <div class="pf-c-helper-text">
155
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
168
156
  <span class="pf-c-helper-text__item-icon">
169
157
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
170
158
  </span>
171
159
  <span class="pf-c-helper-text__item-text">Must be at least 14 characters</span>
172
- </li>
173
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-error">
160
+ </div>
161
+ <div class="pf-c-helper-text__item pf-m-error pf-m-dynamic">
174
162
  <span class="pf-c-helper-text__item-icon">
175
163
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
176
164
  </span>
177
165
  <span
178
166
  class="pf-c-helper-text__item-text"
179
167
  >Cannot contain any variation of the word "redhat"</span>
180
- </li>
181
- <li class="pf-c-helper-text__item pf-m-dynamic pf-m-success">
168
+ </div>
169
+ <div class="pf-c-helper-text__item pf-m-success pf-m-dynamic">
182
170
  <span class="pf-c-helper-text__item-icon">
183
171
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
184
172
  </span>
185
173
  <span
186
174
  class="pf-c-helper-text__item-text"
187
175
  >Must include at least 3 of the following: lowercase letter, uppercase letters, numbers, symbols</span>
188
- </li>
189
- </ul>
176
+ </div>
177
+ </div>
190
178
 
191
179
  ```
192
180
 
@@ -203,3 +191,4 @@ cssPrefix: pf-c-helper-text
203
191
  | `.pf-m-warning` | `.pf-c-helper-text__item` | Modifies a helper text item for warning state styles. |
204
192
  | `.pf-m-success` | `.pf-c-helper-text__item` | Modifies a helper text item for success state styles. |
205
193
  | `.pf-m-error` | `.pf-c-helper-text__item` | Modifies a helper text item for error state styles. |
194
+ | `.pf-m-hidden` | `.pf-c-helper-text` | Hides helper text. |