@patternfly/patternfly 6.0.0-alpha.45 → 6.0.0-alpha.47

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/Button/button.css +3 -1
  2. package/components/Button/button.scss +3 -1
  3. package/components/Check/check.css +17 -16
  4. package/components/Check/check.scss +17 -20
  5. package/components/Form/form.css +68 -87
  6. package/components/Form/form.scss +67 -98
  7. package/components/FormControl/form-control.css +86 -111
  8. package/components/FormControl/form-control.scss +88 -92
  9. package/components/NotificationDrawer/notification-drawer.css +104 -115
  10. package/components/NotificationDrawer/notification-drawer.scss +106 -116
  11. package/components/Radio/radio.css +15 -11
  12. package/components/Radio/radio.scss +15 -15
  13. package/components/SimpleList/simple-list.css +1 -1
  14. package/components/SimpleList/simple-list.scss +1 -1
  15. package/components/Switch/switch.css +41 -37
  16. package/components/Switch/switch.scss +47 -42
  17. package/docs/components/Button/examples/Button.md +29 -2
  18. package/docs/components/Form/examples/Form.md +23 -11
  19. package/docs/demos/Alert/examples/Alert.md +24 -0
  20. package/docs/demos/Form/examples/BasicForms.md +31 -10
  21. package/docs/demos/Modal/examples/Modal.md +3 -3
  22. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +1 -1
  23. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +4 -4
  24. package/package.json +1 -1
  25. package/patternfly-no-globals.css +336 -384
  26. package/patternfly-theme-dark-unversioned.css +336 -384
  27. package/patternfly.css +336 -384
  28. package/patternfly.min.css +1 -1
  29. package/patternfly.min.css.map +1 -1
  30. package/components/Form/themes/dark/form.scss +0 -7
  31. package/components/FormControl/themes/dark/form-control.scss +0 -24
  32. package/components/NotificationDrawer/themes/dark/notification-drawer.scss +0 -14
  33. package/components/Switch/themes/dark/switch.scss +0 -11
package/components/Switch/switch.scss CHANGED
@@ -1,51 +1,52 @@
1
1
  // @debug $switch; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
2
2
 
3
+ :root,
3
4
  .#{$switch} {
4
5
  // Switch - the vars for this file don't follow our normal order so that the IE11 script can convert the vars correctly
5
- --#{$switch}--FontSize: var(--#{$pf-global}--FontSize--md);
6
- --#{$switch}__label--PaddingLeft: var(--#{$pf-global}--spacer--md); // remove at breaking change
7
- --#{$switch}--ColumnGap: var(--#{$switch}__label--PaddingLeft); // update at breaking change
6
+ --#{$switch}--FontSize: var(--pf-t--global--font--size--sm);
7
+ --#{$switch}--ColumnGap: var(--pf-t--global--spacer--sm);
8
8
 
9
9
  // Switch icon
10
10
  --#{$switch}__toggle-icon--FontSize: calc(var(--#{$switch}--FontSize) * .625); // We don't use an icon font-size here because this value allows the icon to scale relative to the switch's font-size.
11
- --#{$switch}__toggle-icon--Color: var(--#{$pf-global}--Color--light-100);
11
+ --#{$switch}__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
12
12
  --#{$switch}__toggle-icon--Left: calc(var(--#{$switch}--FontSize) * .4);
13
13
  --#{$switch}__toggle-icon--Offset: #{pf-size-prem(2px)}; // this value is created to handle sizing of the toggle and therefore the width of the toggle and its transform value.
14
- --#{$switch}__input--disabled__toggle-icon--Color: var(--#{$pf-global}--palette--black-150);
14
+ --#{$switch}__input--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
15
15
 
16
16
  // Switch
17
- --#{$switch}--LineHeight: var(--#{$pf-global}--LineHeight--md);
17
+ --#{$switch}--LineHeight: var(--pf-t--global--font--line-height--body);
18
18
  --#{$switch}--Height: auto;
19
19
 
20
20
  // Switch input
21
- --#{$switch}__input--checked__toggle--BackgroundColor: var(--#{$pf-global}--primary-color--100);
21
+ --#{$switch}__input--checked__toggle--BackgroundColor: var(--pf-t--global--color--brand--default);
22
22
  --#{$switch}__input--checked__toggle--before--TranslateX: calc(100% + var(--#{$switch}__toggle-icon--Offset));
23
- --#{$switch}__input--checked__label--Color: var(--#{$pf-global}--Color--dark-100);
24
- --#{$switch}__input--not-checked__label--Color: var(--#{$pf-global}--disabled-color--100);
25
- --#{$switch}__input--disabled__label--Color: var(--#{$pf-global}--disabled-color--100);
26
- --#{$switch}__input--disabled__toggle--BackgroundColor: var(--#{$pf-global}--disabled-color--200);
27
- --#{$switch}__input--disabled__toggle--before--BackgroundColor: var(--#{$pf-global}--palette--black-150);
28
- --#{$switch}__input--focus__toggle--OutlineWidth: var(--#{$pf-global}--BorderWidth--md);
29
- --#{$switch}__input--focus__toggle--OutlineOffset: var(--#{$pf-global}--spacer--sm);
30
- --#{$switch}__input--focus__toggle--OutlineColor: var(--#{$pf-global}--primary-color--100);
23
+ --#{$switch}__input--checked__toggle--BorderWidth: 0;
24
+ --#{$switch}__input--checked__label--Color: var(--pf-t--global--text--color--regular);
25
+ --#{$switch}__input--not-checked__label--Color: var(--pf-t--global--text--color--subtle);
26
+ --#{$switch}__input--disabled__label--Color: var(--pf-t--global--text--color--disabled);
27
+ --#{$switch}__input--disabled__toggle--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
28
+ --#{$switch}__input--checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--inverse);
29
+ --#{$switch}__input--not-checked__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--subtle);
30
+ --#{$switch}__input--disabled__toggle--before--BackgroundColor: var(--pf-t--global--icon--color--on-disabled);
31
+ --#{$switch}__input--focus__toggle--OutlineWidth: var(--pf-t--global--border--width--strong);
32
+ --#{$switch}__input--focus__toggle--OutlineOffset: var(--pf-t--global--spacer--xs);
33
+ --#{$switch}__input--focus__toggle--OutlineColor: var(--pf-t--global--color--brand--default);
31
34
 
32
35
  // Switch toggle
33
36
  --#{$switch}__toggle--Height: calc(var(--#{$switch}--FontSize) * var(--#{$switch}--LineHeight));
34
- --#{$switch}__toggle--BackgroundColor: var(--#{$pf-global}--palette--black-500);
35
- --#{$switch}__toggle--BorderRadius: var(--#{$switch}__toggle--Height);
37
+ --#{$switch}__toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
38
+ --#{$switch}__toggle--BorderColor: var(--pf-t--global--border--color--default);
39
+ --#{$switch}__toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
40
+ --#{$switch}__toggle--BorderRadius: var(--pf-t--global--border--radius--pill);
36
41
  --#{$switch}__toggle--before--Width: calc(var(--#{$switch}--FontSize) - var(--#{$switch}__toggle-icon--Offset));
37
42
  --#{$switch}__toggle--before--Height: var(--#{$switch}__toggle--before--Width);
38
- --#{$switch}__toggle--before--Top: calc((var(--#{$switch}__toggle--Height) - var(--#{$switch}__toggle--before--Height)) / 2);
39
- --#{$switch}__toggle--before--Left: var(--#{$switch}__toggle--before--Top);
40
- --#{$switch}__toggle--before--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
41
- --#{$switch}__toggle--before--BorderRadius: var(--#{$pf-global}--BorderRadius--lg);
42
- --#{$switch}__toggle--before--BoxShadow: var(--#{$pf-global}--BoxShadow--md);
43
+ --#{$switch}__toggle--before--Left: calc((var(--#{$switch}__toggle--Height) - var(--#{$switch}__toggle--before--Height)) / 2);
44
+ --#{$switch}__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
43
45
  --#{$switch}__toggle--before--Transition: transform .25s ease 0s;
44
46
  --#{$switch}__toggle--Width: calc(var(--#{$switch}__toggle--Height) + var(--#{$switch}__toggle-icon--Offset) + var(--#{$switch}__toggle--before--Width));
47
+ }
45
48
 
46
- // Switch label
47
- --#{$switch}__label--Color: var(--#{$pf-global}--Color--dark-100);
48
-
49
+ .#{$switch} {
49
50
  position: relative;
50
51
  display: inline-grid;
51
52
  grid-template-columns: auto;
@@ -85,14 +86,18 @@
85
86
  }
86
87
 
87
88
  ~ .#{$switch}__toggle {
89
+ --#{$switch}__toggle--BorderWidth: var(--#{$switch}__input--checked__toggle--BorderWidth);
90
+
88
91
  background-color: var(--#{$switch}__input--checked__toggle--BackgroundColor);
89
92
 
90
93
  &::before {
91
94
  @include pf-v5-bidirectional-style(
92
95
  $prop: transform,
93
- $ltr-val: translateX(var(--#{$switch}__input--checked__toggle--before--TranslateX)),
94
- $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$switch}__input--checked__toggle--before--TranslateX))})
96
+ $ltr-val: translate(var(--#{$switch}__input--checked__toggle--before--TranslateX), -50%),
97
+ $rtl-val: translate(#{pf-v5-calc-inverse(var(--#{$switch}__input--checked__toggle--before--TranslateX))}, -50%)
95
98
  );
99
+
100
+ background-color: var(--#{$switch}__input--checked__toggle--before--BackgroundColor);
96
101
  }
97
102
  }
98
103
 
@@ -148,24 +153,32 @@
148
153
 
149
154
  &::before {
150
155
  position: absolute;
151
- inset-block-start: var(--#{$switch}__toggle--before--Top);
152
- inset-inline-start: var(--#{$switch}__toggle--before--Left);
156
+ inset-block-start: 50%;
157
+ inset-inline-start: var(--#{$switch}__toggle--before--Left);
153
158
  display: block;
154
159
  width: var(--#{$switch}__toggle--before--Width);
155
160
  height: var(--#{$switch}__toggle--before--Height);
156
161
  content: "";
157
- background-color: var(--#{$switch}__toggle--before--BackgroundColor);
162
+ background-color: var(--#{$switch}__input--not-checked__toggle--before--BackgroundColor);
158
163
  border-radius: var(--#{$switch}__toggle--before--BorderRadius);
159
- box-shadow: var(--#{$switch}__toggle--before--BoxShadow);
160
164
  transition: var(--#{$switch}__toggle--before--Transition);
165
+ transform: translateY(-50%);
166
+ }
167
+
168
+ &::after {
169
+ position: absolute;
170
+ inset: 0;
171
+ content: "";
172
+ border: var(--#{$switch}__toggle--BorderWidth) solid var(--#{$switch}__toggle--BorderColor);
173
+ border-radius: var(--#{$switch}__toggle--BorderRadius);
161
174
  }
162
175
  }
163
176
 
164
177
  .#{$switch}__toggle-icon {
165
178
  position: absolute;
166
- inset-block-start: 0;
167
- inset-block-end: 0;
168
- inset-inline-start: var(--#{$switch}__toggle-icon--Left);
179
+ inset-block-start: 0;
180
+ inset-block-end: 0;
181
+ inset-inline-start: var(--#{$switch}__toggle-icon--Left);
169
182
  display: flex;
170
183
  align-items: center;
171
184
  font-size: var(--#{$switch}__toggle-icon--FontSize);
@@ -175,13 +188,5 @@
175
188
  .#{$switch}__label {
176
189
  display: inline-block;
177
190
  grid-column: 2;
178
- color: var(--#{$switch}__label--Color);
179
191
  vertical-align: top;
180
192
  }
181
-
182
- // stylelint-disable no-invalid-position-at-import-rule
183
- @import "themes/dark/switch";
184
-
185
- @include pf-v5-theme-dark {
186
- @include pf-v5-theme-dark-switch;
187
- }
package/docs/components/Button/examples/Button.md CHANGED
@@ -1439,7 +1439,34 @@ cssPrefix: pf-v5-c-button
1439
1439
  ### Inline link as span
1440
1440
 
1441
1441
  ```html
1442
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
1442
+ <strong>Plain</strong>
1443
+ <br />
1444
+ <span
1445
+ class="pf-v5-c-button pf-m-plain"
1446
+ type="button"
1447
+ role="button"
1448
+ tabindex="0"
1449
+ aria-label="Remove"
1450
+ >
1451
+ <i class="fas fa-times" aria-hidden="true"></i>
1452
+ </span>
1453
+ <br />
1454
+ <br />
1455
+ <strong>Plain no padding</strong>
1456
+ <br />
1457
+ <span
1458
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
1459
+ type="button"
1460
+ role="button"
1461
+ tabindex="0"
1462
+ aria-label="Remove"
1463
+ >
1464
+ <i class="fas fa-times" aria-hidden="true"></i>
1465
+ </span>
1466
+ <br />
1467
+ <br />
1468
+ <strong>Inline link</strong>
1469
+ <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
1443
1470
  <span
1444
1471
  class="pf-v5-c-button pf-m-link pf-m-inline"
1445
1472
  type="button"
@@ -1831,7 +1858,7 @@ Semantic buttons and links are important for usability as well as accessibility.
1831
1858
 
1832
1859
  | Class | Applied to | Outcome |
1833
1860
  | -- | -- | -- |
1834
- | `.pf-v5-c-button` | `<button>` | Initiates a button. Always use it with a modifier class. **Required** |
1861
+ | `.pf-v5-c-button` | `<button>, <span>` | Initiates a button. Always use it with a modifier class. **Required** |
1835
1862
  | `.pf-v5-c-button__icon` | `<span>` | Initiates a button icon. |
1836
1863
  | `.pf-v5-c-button__progress` | `<span>` | Initiates a button progress container. |
1837
1864
  | `.pf-v5-c-button__count` | `<span>` | Initiates a button count container. **Note:** Count should only be used on link buttons.|
package/docs/components/Form/examples/Form.md CHANGED
@@ -18,7 +18,7 @@ cssPrefix: pf-v5-c-form
18
18
  role="button"
19
19
  type="button"
20
20
  tabindex="0"
21
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
21
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
22
22
  </div>
23
23
  <div class="pf-v5-c-form__group-control">
24
24
  <span class="pf-v5-c-form-control pf-m-required">
@@ -63,7 +63,7 @@ cssPrefix: pf-v5-c-form
63
63
  role="button"
64
64
  type="button"
65
65
  tabindex="0"
66
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
66
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
67
67
  </div>
68
68
  <div class="pf-v5-c-form__group-control">
69
69
  <span class="pf-v5-c-form-control">
@@ -92,7 +92,7 @@ cssPrefix: pf-v5-c-form
92
92
  role="button"
93
93
  type="button"
94
94
  tabindex="0"
95
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
95
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
96
96
  </div>
97
97
  <div class="pf-v5-c-form__group-control pf-m-stack">
98
98
  <div class="pf-v5-c-check">
@@ -143,7 +143,7 @@ cssPrefix: pf-v5-c-form
143
143
  role="button"
144
144
  type="button"
145
145
  tabindex="0"
146
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
146
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
147
147
  </div>
148
148
  <div class="pf-v5-c-form__group-control">
149
149
  <span class="pf-v5-c-form-control pf-m-required">
@@ -277,6 +277,9 @@ cssPrefix: pf-v5-c-form
277
277
  class="pf-v5-c-helper-text__item"
278
278
  id="form-help-text-name-helper"
279
279
  >
280
+ <span class="pf-v5-c-helper-text__item-icon">
281
+ <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
282
+ </span>
280
283
  <span class="pf-v5-c-helper-text__item-text">This is helper text.</span>
281
284
  </div>
282
285
  </div>
@@ -308,6 +311,9 @@ cssPrefix: pf-v5-c-form
308
311
  class="pf-v5-c-helper-text__item pf-m-warning"
309
312
  id="form-help-text-email-helper"
310
313
  >
314
+ <span class="pf-v5-c-helper-text__item-icon">
315
+ <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
316
+ </span>
311
317
  <span
312
318
  class="pf-v5-c-helper-text__item-text"
313
319
  >This is helper text for a warning input.</span>
@@ -342,6 +348,9 @@ cssPrefix: pf-v5-c-form
342
348
  class="pf-v5-c-helper-text__item pf-m-error"
343
349
  id="-address-helper"
344
350
  >
351
+ <span class="pf-v5-c-helper-text__item-icon">
352
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
353
+ </span>
345
354
  <span
346
355
  class="pf-v5-c-helper-text__item-text"
347
356
  >This is helper text for an invalid input.</span>
@@ -375,6 +384,9 @@ cssPrefix: pf-v5-c-form
375
384
  class="pf-v5-c-helper-text__item pf-m-success"
376
385
  id="form-help-text-comment-helper"
377
386
  >
387
+ <span class="pf-v5-c-helper-text__item-icon">
388
+ <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
389
+ </span>
378
390
  <span
379
391
  class="pf-v5-c-helper-text__item-text"
380
392
  >This is helper text for success input.</span>
@@ -436,7 +448,7 @@ cssPrefix: pf-v5-c-form
436
448
  role="button"
437
449
  type="button"
438
450
  tabindex="0"
439
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
451
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
440
452
  </div>
441
453
  <div class="pf-v5-c-form__group-label-info">info</div>
442
454
  </div>
@@ -507,7 +519,7 @@ cssPrefix: pf-v5-c-form
507
519
  role="button"
508
520
  type="button"
509
521
  tabindex="0"
510
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
522
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
511
523
  </div>
512
524
  <div class="pf-v5-c-form__group-control">
513
525
  <span class="pf-v5-c-form-control pf-m-required">
@@ -532,7 +544,7 @@ cssPrefix: pf-v5-c-form
532
544
  role="button"
533
545
  type="button"
534
546
  tabindex="0"
535
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
547
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
536
548
  </div>
537
549
  <div class="pf-v5-c-form__group-control">
538
550
  <span class="pf-v5-c-form-control pf-m-required">
@@ -640,7 +652,7 @@ cssPrefix: pf-v5-c-form
640
652
  role="button"
641
653
  type="button"
642
654
  tabindex="0"
643
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
655
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
644
656
  </div>
645
657
  <div class="pf-v5-c-form__group-control">
646
658
  <span class="pf-v5-c-form-control pf-m-required">
@@ -665,7 +677,7 @@ cssPrefix: pf-v5-c-form
665
677
  role="button"
666
678
  type="button"
667
679
  tabindex="0"
668
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
680
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
669
681
  </div>
670
682
  <div class="pf-v5-c-form__group-control">
671
683
  <span class="pf-v5-c-form-control pf-m-required">
@@ -709,7 +721,7 @@ cssPrefix: pf-v5-c-form
709
721
  role="button"
710
722
  type="button"
711
723
  tabindex="0"
712
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
724
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
713
725
  </div>
714
726
  <div class="pf-v5-c-form__group-control">
715
727
  <span class="pf-v5-c-form-control pf-m-required">
@@ -737,7 +749,7 @@ cssPrefix: pf-v5-c-form
737
749
  role="button"
738
750
  type="button"
739
751
  tabindex="0"
740
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
752
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
741
753
  </div>
742
754
  <div class="pf-v5-c-form__group-control">
743
755
  <span class="pf-v5-c-form-control pf-m-required">
package/docs/demos/Alert/examples/Alert.md CHANGED
@@ -691,6 +691,12 @@ section: components
691
691
  class="pf-v5-c-helper-text__item pf-m-error"
692
692
  id="alert-horizontal-example-form-name-helper"
693
693
  >
694
+ <span class="pf-v5-c-helper-text__item-icon">
695
+ <i
696
+ class="fas fa-fw fa-exclamation-circle"
697
+ aria-hidden="true"
698
+ ></i>
699
+ </span>
694
700
  <span class="pf-v5-c-helper-text__item-text">Required field</span>
695
701
  </div>
696
702
  </div>
@@ -751,6 +757,12 @@ section: components
751
757
  class="pf-v5-c-helper-text__item pf-m-error"
752
758
  id="alert-horizontal-example-form-phone-helper"
753
759
  >
760
+ <span class="pf-v5-c-helper-text__item-icon">
761
+ <i
762
+ class="fas fa-fw fa-exclamation-circle"
763
+ aria-hidden="true"
764
+ ></i>
765
+ </span>
754
766
  <span class="pf-v5-c-helper-text__item-text">Required field</span>
755
767
  </div>
756
768
  </div>
@@ -1148,6 +1160,12 @@ section: components
1148
1160
  class="pf-v5-c-helper-text__item pf-m-error"
1149
1161
  id="alert-stacked-example-form-name-helper"
1150
1162
  >
1163
+ <span class="pf-v5-c-helper-text__item-icon">
1164
+ <i
1165
+ class="fas fa-fw fa-exclamation-circle"
1166
+ aria-hidden="true"
1167
+ ></i>
1168
+ </span>
1151
1169
  <span class="pf-v5-c-helper-text__item-text">Required field</span>
1152
1170
  </div>
1153
1171
  </div>
@@ -1181,6 +1199,9 @@ section: components
1181
1199
  class="pf-v5-c-helper-text__item pf-m-error"
1182
1200
  id="alert-stacked-example-form-email-helper"
1183
1201
  >
1202
+ <span class="pf-v5-c-helper-text__item-icon">
1203
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
1204
+ </span>
1184
1205
  <span
1185
1206
  class="pf-v5-c-helper-text__item-text"
1186
1207
  >Enter a valid email address: example@gmail.com</span>
@@ -1232,6 +1253,9 @@ section: components
1232
1253
  class="pf-v5-c-helper-text__item pf-m-error"
1233
1254
  id="alert-stacked-example-form-state-helper"
1234
1255
  >
1256
+ <span class="pf-v5-c-helper-text__item-icon">
1257
+ <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
1258
+ </span>
1235
1259
  <span class="pf-v5-c-helper-text__item-text">Required field</span>
1236
1260
  </div>
1237
1261
  </div>
package/docs/demos/Form/examples/BasicForms.md CHANGED
@@ -26,6 +26,9 @@ subsection: forms
26
26
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
27
27
  <div class="pf-v5-c-helper-text">
28
28
  <div class="pf-v5-c-helper-text__item" id="-name-helper">
29
+ <span class="pf-v5-c-helper-text__item-icon">
30
+ <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
31
+ </span>
29
32
  <span
30
33
  class="pf-v5-c-helper-text__item-text"
31
34
  >Include your middle name if you have one.</span>
@@ -53,7 +56,7 @@ subsection: forms
53
56
  role="button"
54
57
  type="button"
55
58
  tabindex="0"
56
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
59
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
57
60
  </div>
58
61
  <div class="pf-v5-c-form__group-control">
59
62
  <span class="pf-v5-c-form-control pf-m-required">
@@ -188,6 +191,9 @@ subsection: forms
188
191
  class="pf-v5-c-helper-text__item"
189
192
  id="form-demo-horizontal-name-helper"
190
193
  >
194
+ <span class="pf-v5-c-helper-text__item-icon">
195
+ <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
196
+ </span>
191
197
  <span
192
198
  class="pf-v5-c-helper-text__item-text"
193
199
  >Include your middle name if you have one.</span>
@@ -241,7 +247,7 @@ subsection: forms
241
247
  role="button"
242
248
  type="button"
243
249
  tabindex="0"
244
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
250
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
245
251
  </div>
246
252
  <div class="pf-v5-c-form__group-control pf-m-stack">
247
253
  <div class="pf-v5-c-check">
@@ -320,6 +326,9 @@ subsection: forms
320
326
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
321
327
  <div class="pf-v5-c-helper-text">
322
328
  <div class="pf-v5-c-helper-text__item" id="-helper">
329
+ <span class="pf-v5-c-helper-text__item-icon">
330
+ <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
331
+ </span>
323
332
  <span
324
333
  class="pf-v5-c-helper-text__item-text"
325
334
  >Include your middle name if you have one.</span>
@@ -504,7 +513,7 @@ subsection: forms
504
513
  role="button"
505
514
  type="button"
506
515
  tabindex="0"
507
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
516
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
508
517
  </div>
509
518
  <div class="pf-v5-c-form__group-control">
510
519
  <span class="pf-v5-c-form-control pf-m-required">
@@ -529,7 +538,7 @@ subsection: forms
529
538
  role="button"
530
539
  type="button"
531
540
  tabindex="0"
532
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
541
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
533
542
  </div>
534
543
  <div class="pf-v5-c-form__group-control">
535
544
  <span class="pf-v5-c-form-control pf-m-required">
@@ -554,7 +563,7 @@ subsection: forms
554
563
  role="button"
555
564
  type="button"
556
565
  tabindex="0"
557
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
566
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
558
567
  </div>
559
568
  <div class="pf-v5-c-form__group-control">
560
569
  <span class="pf-v5-c-form-control pf-m-required">
@@ -590,7 +599,7 @@ subsection: forms
590
599
  role="button"
591
600
  type="button"
592
601
  tabindex="0"
593
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
602
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
594
603
  </div>
595
604
  <div class="pf-v5-c-form__group-control">
596
605
  <span class="pf-v5-c-form-control pf-m-required">
@@ -615,7 +624,7 @@ subsection: forms
615
624
  role="button"
616
625
  type="button"
617
626
  tabindex="0"
618
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
627
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
619
628
  </div>
620
629
  <div class="pf-v5-c-form__group-control pf-m-stack">
621
630
  <div class="pf-v5-c-input-group">
@@ -704,7 +713,7 @@ subsection: forms
704
713
  role="button"
705
714
  type="button"
706
715
  tabindex="0"
707
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
716
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
708
717
  </div>
709
718
  <div class="pf-v5-c-form__group-control">
710
719
  <span class="pf-v5-c-form-control pf-m-required">
@@ -738,7 +747,7 @@ subsection: forms
738
747
  role="button"
739
748
  type="button"
740
749
  tabindex="0"
741
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
750
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
742
751
  </div>
743
752
  <div class="pf-v5-c-form__group-control">
744
753
  <span class="pf-v5-c-form-control pf-m-required">
@@ -764,7 +773,7 @@ subsection: forms
764
773
  role="button"
765
774
  type="button"
766
775
  tabindex="0"
767
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
776
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
768
777
  </div>
769
778
  <div class="pf-v5-c-form__group-control">
770
779
  <div
@@ -1207,6 +1216,9 @@ subsection: forms
1207
1216
  class="pf-v5-c-helper-text__item"
1208
1217
  id="form-demo-sections-complex-form-routing-create-route-helper"
1209
1218
  >
1219
+ <span class="pf-v5-c-helper-text__item-icon">
1220
+ <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
1221
+ </span>
1210
1222
  <span
1211
1223
  class="pf-v5-c-helper-text__item-text"
1212
1224
  >Exposes your appplication at a public URL.</span>
@@ -1237,6 +1249,9 @@ subsection: forms
1237
1249
  class="pf-v5-c-helper-text__item"
1238
1250
  id="form-demo-sections-complex-form-routing-hostname-helper"
1239
1251
  >
1252
+ <span class="pf-v5-c-helper-text__item-icon">
1253
+ <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
1254
+ </span>
1240
1255
  <span
1241
1256
  class="pf-v5-c-helper-text__item-text"
1242
1257
  >Public hostname for the route. If not specified, a hostname is generated.</span>
@@ -1269,6 +1284,9 @@ subsection: forms
1269
1284
  class="pf-v5-c-helper-text__item"
1270
1285
  id="form-demo-sections-complex-form-routing-path-helper"
1271
1286
  >
1287
+ <span class="pf-v5-c-helper-text__item-icon">
1288
+ <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
1289
+ </span>
1272
1290
  <span
1273
1291
  class="pf-v5-c-helper-text__item-text"
1274
1292
  >Path that the router watches to route traffic to the service.</span>
@@ -1311,6 +1329,9 @@ subsection: forms
1311
1329
  class="pf-v5-c-helper-text__item"
1312
1330
  id="form-demo-sections-complex-form-routing-security-helper"
1313
1331
  >
1332
+ <span class="pf-v5-c-helper-text__item-icon">
1333
+ <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
1334
+ </span>
1314
1335
  <span
1315
1336
  class="pf-v5-c-helper-text__item-text"
1316
1337
  >Routes can be secured using several TLS termination types for serving certificates.</span>
package/docs/demos/Modal/examples/Modal.md CHANGED
@@ -2067,7 +2067,7 @@ section: components
2067
2067
  role="button"
2068
2068
  type="button"
2069
2069
  tabindex="0"
2070
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
2070
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
2071
2071
  </div>
2072
2072
  <div class="pf-v5-c-form__group-control">
2073
2073
  <span class="pf-v5-c-form-control pf-m-required">
@@ -2087,7 +2087,7 @@ section: components
2087
2087
  role="button"
2088
2088
  type="button"
2089
2089
  tabindex="0"
2090
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
2090
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
2091
2091
  </div>
2092
2092
  <div class="pf-v5-c-form__group-control">
2093
2093
  <span class="pf-v5-c-form-control pf-m-required">
@@ -2107,7 +2107,7 @@ section: components
2107
2107
  role="button"
2108
2108
  type="button"
2109
2109
  tabindex="0"
2110
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
2110
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
2111
2111
  </div>
2112
2112
  <div class="pf-v5-c-form__group-control">
2113
2113
  <span class="pf-v5-c-form-control pf-m-required">
package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md CHANGED
@@ -20,7 +20,7 @@ section: components
20
20
  role="button"
21
21
  type="button"
22
22
  tabindex="0"
23
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
23
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
24
24
  </div>
25
25
  <div class="pf-v5-c-form__group-label-info"></div>
26
26
  </div>
package/docs/demos/PasswordStrength/examples/PasswordStrength.md CHANGED
@@ -20,7 +20,7 @@ section: components
20
20
  role="button"
21
21
  type="button"
22
22
  tabindex="0"
23
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
23
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
24
24
  </div>
25
25
  <div class="pf-v5-c-form__group-label-info"></div>
26
26
  </div>
@@ -106,7 +106,7 @@ section: components
106
106
  role="button"
107
107
  type="button"
108
108
  tabindex="0"
109
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
109
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
110
110
  </div>
111
111
  <div class="pf-v5-c-form__group-label-info"></div>
112
112
  </div>
@@ -186,7 +186,7 @@ section: components
186
186
  role="button"
187
187
  type="button"
188
188
  tabindex="0"
189
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
189
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
190
190
  </div>
191
191
  <div class="pf-v5-c-form__group-label-info">
192
192
  <div class="pf-v5-c-helper-text">
@@ -275,7 +275,7 @@ section: components
275
275
  role="button"
276
276
  type="button"
277
277
  tabindex="0"
278
- ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
278
+ ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
279
279
  </div>
280
280
  <div class="pf-v5-c-form__group-label-info">
281
281
  <div class="pf-v5-c-helper-text">
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.45",
4
+ "version": "6.0.0-alpha.47",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {