@patternfly/patternfly 6.0.0-alpha.46 → 6.0.0-alpha.48

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 (22) hide show
  1. package/components/Button/button.css +3 -1
  2. package/components/Button/button.scss +3 -1
  3. package/components/Form/form.css +2 -35
  4. package/components/Form/form.scss +2 -35
  5. package/components/Progress/progress.css +31 -45
  6. package/components/Progress/progress.scss +36 -55
  7. package/components/Switch/switch.css +41 -37
  8. package/components/Switch/switch.scss +47 -42
  9. package/docs/components/Button/examples/Button.md +29 -2
  10. package/docs/components/Form/examples/Form.md +122 -89
  11. package/docs/demos/Form/examples/BasicForms.md +110 -80
  12. package/docs/demos/Modal/examples/Modal.md +33 -24
  13. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +11 -8
  14. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -32
  15. package/package.json +1 -1
  16. package/patternfly-no-globals.css +77 -126
  17. package/patternfly-theme-dark-unversioned.css +77 -126
  18. package/patternfly.css +77 -126
  19. package/patternfly.min.css +1 -1
  20. package/patternfly.min.css.map +1 -1
  21. package/components/Progress/themes/dark/progress.scss +0 -9
  22. 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
@@ -11,14 +11,17 @@ cssPrefix: pf-v5-c-form
11
11
  <form class="pf-v5-c-form" novalidate>
12
12
  <div class="pf-v5-c-form__group">
13
13
  <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="form-vertical-name">
14
- <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>&nbsp;<span
15
- class="pf-v5-c-form__group-label-help"
16
- aria-label="More information for name field"
17
- aria-describedby="form-vertical-name"
18
- role="button"
19
- type="button"
20
- tabindex="0"
21
- ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
14
+ <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>&nbsp;<span class="pf-v5-c-form__group-label-help">
15
+ <span
16
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
17
+ type="button"
18
+ role="button"
19
+ tabindex="0"
20
+ aria-label="More information for name field"
21
+ aria-describedby="form-vertical-name"
22
+ >
23
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
24
+ </span></span>
22
25
  </div>
23
26
  <div class="pf-v5-c-form__group-control">
24
27
  <span class="pf-v5-c-form-control pf-m-required">
@@ -56,14 +59,17 @@ cssPrefix: pf-v5-c-form
56
59
  </div>
57
60
  <div class="pf-v5-c-form__group">
58
61
  <div class="pf-v5-c-form__group-label"><label class="pf-v5-c-form__label" for="form-horizontal-info">
59
- <span class="pf-v5-c-form__label-text">Information</span></label>&nbsp;<span
60
- class="pf-v5-c-form__group-label-help"
61
- aria-label="More information for information field"
62
- aria-describedby="form-horizontal-info"
63
- role="button"
64
- type="button"
65
- tabindex="0"
66
- ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
62
+ <span class="pf-v5-c-form__label-text">Information</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
63
+ <span
64
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
65
+ type="button"
66
+ role="button"
67
+ tabindex="0"
68
+ aria-label="More information for information field"
69
+ aria-describedby="form-horizontal-info"
70
+ >
71
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
72
+ </span></span>
67
73
  </div>
68
74
  <div class="pf-v5-c-form__group-control">
69
75
  <span class="pf-v5-c-form-control">
@@ -85,14 +91,17 @@ cssPrefix: pf-v5-c-form
85
91
  class="pf-v5-c-form__group-label pf-m-no-padding-top"
86
92
  id="form-horizontalform-horizontal-checkbox-legend"
87
93
  ><span class="pf-v5-c-form__label">
88
- <span class="pf-v5-c-form__label-text">Label (no top padding)</span></span>&nbsp;<span
89
- class="pf-v5-c-form__group-label-help"
90
- aria-label="More information for label field"
91
- aria-describedby="form-horizontal-checkbox-legend"
92
- role="button"
93
- type="button"
94
- tabindex="0"
95
- ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
94
+ <span class="pf-v5-c-form__label-text">Label (no top padding)</span></span>&nbsp;<span class="pf-v5-c-form__group-label-help">
95
+ <span
96
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
97
+ type="button"
98
+ role="button"
99
+ tabindex="0"
100
+ aria-label="More information for label field"
101
+ aria-describedby="form-horizontal-checkbox-legend"
102
+ >
103
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
104
+ </span></span>
96
105
  </div>
97
106
  <div class="pf-v5-c-form__group-control pf-m-stack">
98
107
  <div class="pf-v5-c-check">
@@ -136,14 +145,17 @@ cssPrefix: pf-v5-c-form
136
145
  class="pf-v5-c-form__label"
137
146
  for="form-horizontal-custom-breakpoint-name"
138
147
  >
139
- <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>&nbsp;<span
140
- class="pf-v5-c-form__group-label-help"
141
- aria-label="More information for name field"
142
- aria-describedby="form-horizontal-custom-breakpoint-name"
143
- role="button"
144
- type="button"
145
- tabindex="0"
146
- ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
148
+ <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>&nbsp;<span class="pf-v5-c-form__group-label-help">
149
+ <span
150
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
151
+ type="button"
152
+ role="button"
153
+ tabindex="0"
154
+ aria-label="More information for name field"
155
+ aria-describedby="form-horizontal-custom-breakpoint-name"
156
+ >
157
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
158
+ </span></span>
147
159
  </div>
148
160
  <div class="pf-v5-c-form__group-control">
149
161
  <span class="pf-v5-c-form-control pf-m-required">
@@ -441,14 +453,17 @@ cssPrefix: pf-v5-c-form
441
453
  <div class="pf-v5-c-form__group">
442
454
  <div class="pf-v5-c-form__group-label pf-m-info">
443
455
  <div class="pf-v5-c-form__group-label-main"><label class="pf-v5-c-form__label" for="form-additional-info-name">
444
- <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>&nbsp;<span
445
- class="pf-v5-c-form__group-label-help"
446
- aria-label="More information for name field"
447
- aria-describedby="form-additional-infoform-additional-info-name"
448
- role="button"
449
- type="button"
450
- tabindex="0"
451
- ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
456
+ <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>&nbsp;<span class="pf-v5-c-form__group-label-help">
457
+ <span
458
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
459
+ type="button"
460
+ role="button"
461
+ tabindex="0"
462
+ aria-label="More information for name field"
463
+ aria-describedby="form-additional-infoform-additional-info-name"
464
+ >
465
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
466
+ </span></span>
452
467
  </div>
453
468
  <div class="pf-v5-c-form__group-label-info">info</div>
454
469
  </div>
@@ -512,14 +527,17 @@ cssPrefix: pf-v5-c-form
512
527
  class="pf-v5-c-form__label"
513
528
  for="form-field-group-field-group-label1"
514
529
  >
515
- <span class="pf-v5-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
516
- class="pf-v5-c-form__group-label-help"
517
- aria-label="More information for label 1 field"
518
- aria-describedby="form-field-group-field-group-label1"
519
- role="button"
520
- type="button"
521
- tabindex="0"
522
- ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
530
+ <span class="pf-v5-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
531
+ <span
532
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
533
+ type="button"
534
+ role="button"
535
+ tabindex="0"
536
+ aria-label="More information for label 1 field"
537
+ aria-describedby="form-field-group-field-group-label1"
538
+ >
539
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
540
+ </span></span>
523
541
  </div>
524
542
  <div class="pf-v5-c-form__group-control">
525
543
  <span class="pf-v5-c-form-control pf-m-required">
@@ -537,14 +555,17 @@ cssPrefix: pf-v5-c-form
537
555
  class="pf-v5-c-form__label"
538
556
  for="form-field-group-field-group-label2"
539
557
  >
540
- <span class="pf-v5-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
541
- class="pf-v5-c-form__group-label-help"
542
- aria-label="More information for label 2 field"
543
- aria-describedby="form-field-group-field-group-label2"
544
- role="button"
545
- type="button"
546
- tabindex="0"
547
- ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
558
+ <span class="pf-v5-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
559
+ <span
560
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
561
+ type="button"
562
+ role="button"
563
+ tabindex="0"
564
+ aria-label="More information for label 2 field"
565
+ aria-describedby="form-field-group-field-group-label2"
566
+ >
567
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
568
+ </span></span>
548
569
  </div>
549
570
  <div class="pf-v5-c-form__group-control">
550
571
  <span class="pf-v5-c-form-control pf-m-required">
@@ -645,14 +666,17 @@ cssPrefix: pf-v5-c-form
645
666
  class="pf-v5-c-form__label"
646
667
  for="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
647
668
  >
648
- <span class="pf-v5-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
649
- class="pf-v5-c-form__group-label-help"
650
- aria-label="More information for label 1 field"
651
- aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
652
- role="button"
653
- type="button"
654
- tabindex="0"
655
- ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
669
+ <span class="pf-v5-c-form__label-text">Label 1</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
670
+ <span
671
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
672
+ type="button"
673
+ role="button"
674
+ tabindex="0"
675
+ aria-label="More information for label 1 field"
676
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label1"
677
+ >
678
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
679
+ </span></span>
656
680
  </div>
657
681
  <div class="pf-v5-c-form__group-control">
658
682
  <span class="pf-v5-c-form-control pf-m-required">
@@ -670,14 +694,17 @@ cssPrefix: pf-v5-c-form
670
694
  class="pf-v5-c-form__label"
671
695
  for="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
672
696
  >
673
- <span class="pf-v5-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span
674
- class="pf-v5-c-form__group-label-help"
675
- aria-label="More information for label 2 field"
676
- aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
677
- role="button"
678
- type="button"
679
- tabindex="0"
680
- ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
697
+ <span class="pf-v5-c-form__label-text">Label 2</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
698
+ <span
699
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
700
+ type="button"
701
+ role="button"
702
+ tabindex="0"
703
+ aria-label="More information for label 2 field"
704
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-2-label2"
705
+ >
706
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
707
+ </span></span>
681
708
  </div>
682
709
  <div class="pf-v5-c-form__group-control">
683
710
  <span class="pf-v5-c-form-control pf-m-required">
@@ -714,14 +741,17 @@ cssPrefix: pf-v5-c-form
714
741
  <span class="pf-v5-c-form__label-text">Label 1</span>&nbsp;<span
715
742
  class="pf-v5-c-form__label-required"
716
743
  aria-hidden="true"
717
- >&#42;</span></label>&nbsp;<span
718
- class="pf-v5-c-form__group-label-help"
719
- aria-label="More information for label 1 field"
720
- aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
721
- role="button"
722
- type="button"
723
- tabindex="0"
724
- ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
744
+ >&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
745
+ <span
746
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
747
+ type="button"
748
+ role="button"
749
+ tabindex="0"
750
+ aria-label="More information for label 1 field"
751
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label1"
752
+ >
753
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
754
+ </span></span>
725
755
  </div>
726
756
  <div class="pf-v5-c-form__group-control">
727
757
  <span class="pf-v5-c-form-control pf-m-required">
@@ -742,14 +772,17 @@ cssPrefix: pf-v5-c-form
742
772
  <span class="pf-v5-c-form__label-text">Label 2</span>&nbsp;<span
743
773
  class="pf-v5-c-form__label-required"
744
774
  aria-hidden="true"
745
- >&#42;</span></label>&nbsp;<span
746
- class="pf-v5-c-form__group-label-help"
747
- aria-label="More information for label 2 field"
748
- aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
749
- role="button"
750
- type="button"
751
- tabindex="0"
752
- ><i class="fas fa-question-circle" aria-hidden="true"></i></span>
775
+ >&#42;</span></label>&nbsp;<span class="pf-v5-c-form__group-label-help">
776
+ <span
777
+ class="pf-v5-c-button pf-m-plain pf-m-no-padding"
778
+ type="button"
779
+ role="button"
780
+ tabindex="0"
781
+ aria-label="More information for label 2 field"
782
+ aria-describedby="form-expandable-field-groupsform-expandable-field-groups-field-group-3-label2"
783
+ >
784
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
785
+ </span></span>
753
786
  </div>
754
787
  <div class="pf-v5-c-form__group-control">
755
788
  <span class="pf-v5-c-form-control pf-m-required">
@@ -811,7 +844,7 @@ To avoid the form label's required indicator or help tooltip icon from wrapping
811
844
  | `.pf-v5-c-form__label-required` | `<span>` | Initiates a form label required indicator. |
812
845
  | `.pf-v5-c-form__group-label-main` | `<div>` | Initiates a form group label main container. |
813
846
  | `.pf-v5-c-form__group-label-info` | `<div>` | Initiates a form group info label. |
814
- | `.pf-v5-c-form__group-label-help` | `<button>`, `<span>` | Initiates a field level help span/button. |
847
+ | `.pf-v5-c-form__group-label-help` | `<span>` | Initiates field level help. |
815
848
  | `.pf-v5-c-form__group-control` | `<div>` | Initiates a form group control section. |
816
849
  | `.pf-v5-c-form__actions` | `<div>` | Iniates a row of actions. |
817
850
  | `.pf-v5-c-form__helper-text` | `<p>`, `<div>` | Initiates a form helper text block. |