@patternfly/patternfly 6.0.0-alpha.184 → 6.0.0-alpha.186

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 (17) hide show
  1. package/base/patternfly-fonts.css +6 -6
  2. package/base/patternfly-fonts.scss +6 -6
  3. package/base/patternfly-variables.css +2 -18
  4. package/base/tokens/tokens-local.scss +4 -25
  5. package/components/Form/form.css +58 -1
  6. package/components/Form/form.scss +14 -2
  7. package/components/Icon/icon.css +4 -4
  8. package/components/Icon/icon.scss +4 -4
  9. package/components/_index.css +62 -5
  10. package/docs/components/Form/examples/Form.md +42 -1
  11. package/package.json +1 -1
  12. package/patternfly-base-no-globals.css +8 -24
  13. package/patternfly-base.css +8 -24
  14. package/patternfly-no-globals.css +70 -29
  15. package/patternfly.css +70 -29
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
package/base/patternfly-fonts.css CHANGED
@@ -1,40 +1,40 @@
1
1
  @font-face {
2
- font-family: RedHatTextVF;
2
+ font-family: "Red Hat Text";
3
3
  font-style: normal;
4
4
  font-weight: 400 500;
5
5
  src: url("./assets/fonts/RedHatText/RedHatTextVF.woff2") format("woff2-variations");
6
6
  font-display: fallback;
7
7
  }
8
8
  @font-face {
9
- font-family: RedHatTextVF;
9
+ font-family: "Red Hat Text";
10
10
  font-style: italic;
11
11
  font-weight: 400 500;
12
12
  src: url("./assets/fonts/RedHatText/RedHatTextVF-Italic.woff2") format("woff2-variations");
13
13
  font-display: fallback;
14
14
  }
15
15
  @font-face {
16
- font-family: RedHatDisplayVF;
16
+ font-family: "Red Hat Display";
17
17
  font-style: normal;
18
18
  font-weight: 400 700;
19
19
  src: url("./assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2") format("woff2-variations");
20
20
  font-display: fallback;
21
21
  }
22
22
  @font-face {
23
- font-family: RedHatDisplayVF;
23
+ font-family: "Red Hat Display";
24
24
  font-style: italic;
25
25
  font-weight: 400 700;
26
26
  src: url("./assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2") format("woff2-variations");
27
27
  font-display: fallback;
28
28
  }
29
29
  @font-face {
30
- font-family: RedHatMonoVF;
30
+ font-family: "Red Hat Mono";
31
31
  font-style: normal;
32
32
  font-weight: 400;
33
33
  src: url("./assets/fonts/RedHatMono/RedHatMonoVF.woff2") format("woff2-variations");
34
34
  font-display: fallback;
35
35
  }
36
36
  @font-face {
37
- font-family: RedHatMonoVF;
37
+ font-family: "Red Hat Mono";
38
38
  font-style: italic;
39
39
  font-weight: 400;
40
40
  src: url("./assets/fonts/RedHatMono/RedHatMonoVF-Italic.woff2") format("woff2-variations");
package/base/patternfly-fonts.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  @use '../sass-utilities' as *;
2
2
 
3
3
  @font-face {
4
- font-family: RedHatTextVF;
4
+ font-family: "Red Hat Text";
5
5
  font-style: normal;
6
6
  font-weight: 400 500;
7
7
  src: url("#{$pf-v6-global--font-path}/RedHatText/RedHatTextVF.woff2") format("woff2-variations");
@@ -9,7 +9,7 @@
9
9
  }
10
10
 
11
11
  @font-face {
12
- font-family: RedHatTextVF;
12
+ font-family: "Red Hat Text";
13
13
  font-style: italic;
14
14
  font-weight: 400 500;
15
15
  src: url("#{$pf-v6-global--font-path}/RedHatText/RedHatTextVF-Italic.woff2") format("woff2-variations");
@@ -17,7 +17,7 @@
17
17
  }
18
18
 
19
19
  @font-face {
20
- font-family: RedHatDisplayVF;
20
+ font-family: "Red Hat Display";
21
21
  font-style: normal;
22
22
  font-weight: 400 700;
23
23
  src: url("#{$pf-v6-global--font-path}/RedHatDisplay/RedHatDisplayVF.woff2") format("woff2-variations");
@@ -25,7 +25,7 @@
25
25
  }
26
26
 
27
27
  @font-face {
28
- font-family: RedHatDisplayVF;
28
+ font-family: "Red Hat Display";
29
29
  font-style: italic;
30
30
  font-weight: 400 700;
31
31
  src: url("#{$pf-v6-global--font-path}/RedHatDisplay/RedHatDisplayVF-Italic.woff2") format("woff2-variations");
@@ -33,7 +33,7 @@
33
33
  }
34
34
 
35
35
  @font-face {
36
- font-family: RedHatMonoVF;
36
+ font-family: "Red Hat Mono";
37
37
  font-style: normal;
38
38
  font-weight: 400;
39
39
  src: url("#{$pf-v6-global--font-path}/RedHatMono/RedHatMonoVF.woff2") format("woff2-variations");
@@ -41,7 +41,7 @@
41
41
  }
42
42
 
43
43
  @font-face {
44
- font-family: RedHatMonoVF;
44
+ font-family: "Red Hat Mono";
45
45
  font-style: italic;
46
46
  font-weight: 400;
47
47
  src: url("#{$pf-v6-global--font-path}/RedHatMono/RedHatMonoVF-Italic.woff2") format("woff2-variations");
package/base/patternfly-variables.css CHANGED
@@ -722,24 +722,8 @@
722
722
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
723
723
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
724
724
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
725
- --pf-t--global--font--family--100: redhattextvf, redhattext, helvetica, arial, sans-serif;
726
- --pf-t--global--font--family--200: redhatdisplayvf, redhatdisplay, helvetica, arial, sans-serif;
727
- --pf-t--global--font--family--300: redhatmonovf, redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
728
- --pf-t--global--font--line-height--100: 1.3;
729
- --pf-t--global--font--line-height--200: 1.5;
730
- --pf-t--global--font--weight--body--100: 400;
731
- --pf-t--global--font--weight--body--200: 500;
732
- --pf-t--global--font--weight--heading--100: 700;
733
- --pf-t--global--font--weight--heading--200: 700;
734
- --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
735
- --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
736
- --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
737
- --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200);
738
- --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100);
739
- --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--100);
740
- --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--200);
741
- --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--100);
742
- --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--200);
725
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--200);
726
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400);
743
727
  --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
744
728
  --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
745
729
  --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl);
package/base/tokens/tokens-local.scss CHANGED
@@ -1,30 +1,9 @@
1
- // FONT TOKENS
2
- // Manually added from hackathon values
3
- // Currently not being exported from Figma because they are styles rather than variables
4
- // The ability to make font variables is reportedly coming by the end of the year
1
+ // LOCAL TOKENS
5
2
 
6
3
  @mixin pf-v6-tokens {
7
- // Base tokens for fonts
8
- --pf-t--global--font--family--100: redhattextvf, redhattext, helvetica, arial, sans-serif;
9
- --pf-t--global--font--family--200: redhatdisplayvf, redhatdisplay, helvetica, arial, sans-serif;
10
- --pf-t--global--font--family--300: redhatmonovf, redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
11
- --pf-t--global--font--line-height--100: 1.3;
12
- --pf-t--global--font--line-height--200: 1.5;
13
- --pf-t--global--font--weight--body--100: 400;
14
- --pf-t--global--font--weight--body--200: 500;
15
- --pf-t--global--font--weight--heading--100: 700;
16
- --pf-t--global--font--weight--heading--200: 700;
17
-
18
- // Semantic tokens for fonts
19
- --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
20
- --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
21
- --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
22
- --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200);
23
- --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100);
24
- --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--100);
25
- --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--200);
26
- --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--100);
27
- --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--200);
4
+ // TODO Missing semantic font tokens not getting exported from Figma properly
5
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--200);
6
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400);
28
7
 
29
8
  // TODO Maintaining these in addition to the h1-h6 sizes
30
9
  --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
package/components/Form/form.css CHANGED
@@ -20,8 +20,9 @@
20
20
  --pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
21
21
  --pf-v6-c-form__label-required--Color: var(--pf-t--global--color--status--danger--default);
22
22
  --pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
23
- --pf-v6-c-form__group-label-info--MarginInlineStart: var(--pf-t--global--spacer--sm);
23
+ --pf-v6-c-form__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
24
24
  --pf-v6-c-form__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
25
+ --pf-v6-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
25
26
  --pf-v6-c-form__group-control--m-inline--child--MarginInlineEnd: var(--pf-t--global--spacer--lg);
26
27
  --pf-v6-c-form__group-control__helper-text--MarginBlockEnd: var(--pf-t--global--spacer--xs);
27
28
  --pf-v6-c-form__group-control--Gap: var(--pf-t--global--spacer--sm);
@@ -102,6 +103,14 @@
102
103
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
103
104
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
104
105
  }
106
+ .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label.pf-m-info {
107
+ flex-direction: column;
108
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
109
+ align-items: flex-start;
110
+ }
111
+ .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label-main {
112
+ flex-grow: 0;
113
+ }
105
114
  .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-control {
106
115
  grid-column: 2;
107
116
  }
@@ -122,6 +131,14 @@
122
131
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
123
132
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
124
133
  }
134
+ .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label.pf-m-info {
135
+ flex-direction: column;
136
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
137
+ align-items: flex-start;
138
+ }
139
+ .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label-main {
140
+ flex-grow: 0;
141
+ }
125
142
  .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-control {
126
143
  grid-column: 2;
127
144
  }
@@ -142,6 +159,14 @@
142
159
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
143
160
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
144
161
  }
162
+ .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label.pf-m-info {
163
+ flex-direction: column;
164
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
165
+ align-items: flex-start;
166
+ }
167
+ .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label-main {
168
+ flex-grow: 0;
169
+ }
145
170
  .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-control {
146
171
  grid-column: 2;
147
172
  }
@@ -162,6 +187,14 @@
162
187
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
163
188
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
164
189
  }
190
+ .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label.pf-m-info {
191
+ flex-direction: column;
192
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
193
+ align-items: flex-start;
194
+ }
195
+ .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label-main {
196
+ flex-grow: 0;
197
+ }
165
198
  .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-control {
166
199
  grid-column: 2;
167
200
  }
@@ -182,6 +215,14 @@
182
215
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
183
216
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
184
217
  }
218
+ .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label.pf-m-info {
219
+ flex-direction: column;
220
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
221
+ align-items: flex-start;
222
+ }
223
+ .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label-main {
224
+ flex-grow: 0;
225
+ }
185
226
  .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-control {
186
227
  grid-column: 2;
187
228
  }
@@ -202,6 +243,14 @@
202
243
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
203
244
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
204
245
  }
246
+ .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label.pf-m-info {
247
+ flex-direction: column;
248
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
249
+ align-items: flex-start;
250
+ }
251
+ .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label-main {
252
+ flex-grow: 0;
253
+ }
205
254
  .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-control {
206
255
  grid-column: 2;
207
256
  }
@@ -222,6 +271,14 @@
222
271
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
223
272
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
224
273
  }
274
+ .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label.pf-m-info {
275
+ flex-direction: column;
276
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
277
+ align-items: flex-start;
278
+ }
279
+ .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label-main {
280
+ flex-grow: 0;
281
+ }
225
282
  .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-control {
226
283
  grid-column: 2;
227
284
  }
package/components/Form/form.scss CHANGED
@@ -85,8 +85,9 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
85
85
  --#{$form}__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
86
86
 
87
87
  // Form group label info
88
- --#{$form}__group-label-info--MarginInlineStart: var(--pf-t--global--spacer--sm);
88
+ --#{$form}__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
89
89
  --#{$form}__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
90
+ --#{$form}--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
90
91
 
91
92
  // Group control
92
93
  --#{$form}__group-control--m-inline--child--MarginInlineEnd: var(--pf-t--global--spacer--lg);
@@ -179,12 +180,23 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
179
180
  .#{$form}__group-label {
180
181
  padding-block-start: var(--#{$form}--m-horizontal__group-label--md--PaddingBlockStart);
181
182
 
182
- // stylelint-disable-next-line
183
+ // stylelint-disable max-nesting-depth
183
184
  &.pf-m-no-padding-top {
184
185
  --#{$form}--m-horizontal__group-label--md--PaddingBlockStart: var(--#{$form}--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
185
186
 
186
187
  transform: translateY(var(--#{$form}--m-horizontal__group-label--m-no-padding--md--TranslateY));
187
188
  }
189
+
190
+ &.pf-m-info {
191
+ flex-direction: column;
192
+ gap: var(--#{$form}--m-horizontal__group-label--m-info--Gap);
193
+ align-items: flex-start;
194
+ }
195
+ // stylelint-enable
196
+ }
197
+
198
+ .#{$form}__group-label-main {
199
+ flex-grow: 0;
188
200
  }
189
201
 
190
202
  .#{$form}__group-control {
package/components/Icon/icon.css CHANGED
@@ -1,6 +1,6 @@
1
1
  :where(:root, .pf-v6-c-icon) {
2
- --pf-v6-c-icon--Width: 1em;
3
- --pf-v6-c-icon--Height: 1em;
2
+ --pf-v6-c-icon--Width: var(--pf-t--global--icon--size--font--body--default);
3
+ --pf-v6-c-icon--Height: var(--pf-t--global--icon--size--font--body--default);
4
4
  --pf-v6-c-icon--m-sm--Width: var(--pf-t--global--icon--size--sm);
5
5
  --pf-v6-c-icon--m-sm--Height: var(--pf-t--global--icon--size--sm);
6
6
  --pf-v6-c-icon--m-md--Width: var(--pf-t--global--icon--size--md);
@@ -34,14 +34,14 @@
34
34
  --pf-v6-c-icon--m-inline--Width: 1em;
35
35
  --pf-v6-c-icon--m-inline--Height: 1em;
36
36
  --pf-v6-c-icon__content--svg--VerticalAlign: -.125em;
37
- --pf-v6-c-icon__content--Color: initial;
37
+ --pf-v6-c-icon__content--Color: var(--pf-t--global--icon--color--regular);
38
38
  --pf-v6-c-icon__content--m-danger--Color: var(--pf-t--global--icon--color--status--danger--default);
39
39
  --pf-v6-c-icon__content--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
40
40
  --pf-v6-c-icon__content--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
41
41
  --pf-v6-c-icon__content--m-info--Color: var(--pf-t--global--icon--color--status--info--default);
42
42
  --pf-v6-c-icon__content--m-custom--Color: var(--pf-t--global--icon--color--status--custom--default);
43
43
  --pf-v6-c-icon--m-inline__content--Color: initial;
44
- --pf-v6-c-icon__content--FontSize: 1em;
44
+ --pf-v6-c-icon__content--FontSize: var(--pf-t--global--icon--size--font--body--default);
45
45
  --pf-v6-c-icon--m-sm__content--FontSize: var(--pf-t--global--icon--size--sm);
46
46
  --pf-v6-c-icon--m-md__content--FontSize: var(--pf-t--global--icon--size--md);
47
47
  --pf-v6-c-icon--m-lg__content--FontSize: var(--pf-t--global--icon--size--lg);
package/components/Icon/icon.scss CHANGED
@@ -2,8 +2,8 @@
2
2
 
3
3
  :where(:root, .#{$icon}) {
4
4
  // Sizes
5
- --#{$icon}--Width: 1em;
6
- --#{$icon}--Height: 1em;
5
+ --#{$icon}--Width: var(--pf-t--global--icon--size--font--body--default);
6
+ --#{$icon}--Height: var(--pf-t--global--icon--size--font--body--default);
7
7
 
8
8
  // Standalone icon sizes
9
9
  --#{$icon}--m-sm--Width: var(--pf-t--global--icon--size--sm);
@@ -49,7 +49,7 @@
49
49
  --#{$icon}__content--svg--VerticalAlign: -.125em;
50
50
 
51
51
  // Content color
52
- --#{$icon}__content--Color: initial;
52
+ --#{$icon}__content--Color: var(--pf-t--global--icon--color--regular);
53
53
  --#{$icon}__content--m-danger--Color: var(--pf-t--global--icon--color--status--danger--default);
54
54
  --#{$icon}__content--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
55
55
  --#{$icon}__content--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
@@ -58,7 +58,7 @@
58
58
  --#{$icon}--m-inline__content--Color: initial;
59
59
 
60
60
  // Content sizes
61
- --#{$icon}__content--FontSize: 1em;
61
+ --#{$icon}__content--FontSize: var(--pf-t--global--icon--size--font--body--default);;
62
62
 
63
63
  // Standalone content sizes
64
64
  --#{$icon}--m-sm__content--FontSize: var(--pf-t--global--icon--size--sm);
package/components/_index.css CHANGED
@@ -6305,8 +6305,9 @@ ul) {
6305
6305
  --pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
6306
6306
  --pf-v6-c-form__label-required--Color: var(--pf-t--global--color--status--danger--default);
6307
6307
  --pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
6308
- --pf-v6-c-form__group-label-info--MarginInlineStart: var(--pf-t--global--spacer--sm);
6308
+ --pf-v6-c-form__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
6309
6309
  --pf-v6-c-form__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
6310
+ --pf-v6-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--sm);
6310
6311
  --pf-v6-c-form__group-control--m-inline--child--MarginInlineEnd: var(--pf-t--global--spacer--lg);
6311
6312
  --pf-v6-c-form__group-control__helper-text--MarginBlockEnd: var(--pf-t--global--spacer--xs);
6312
6313
  --pf-v6-c-form__group-control--Gap: var(--pf-t--global--spacer--sm);
@@ -6387,6 +6388,14 @@ ul) {
6387
6388
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
6388
6389
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
6389
6390
  }
6391
+ .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label.pf-m-info {
6392
+ flex-direction: column;
6393
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
6394
+ align-items: flex-start;
6395
+ }
6396
+ .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label-main {
6397
+ flex-grow: 0;
6398
+ }
6390
6399
  .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-control {
6391
6400
  grid-column: 2;
6392
6401
  }
@@ -6407,6 +6416,14 @@ ul) {
6407
6416
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
6408
6417
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
6409
6418
  }
6419
+ .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label.pf-m-info {
6420
+ flex-direction: column;
6421
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
6422
+ align-items: flex-start;
6423
+ }
6424
+ .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label-main {
6425
+ flex-grow: 0;
6426
+ }
6410
6427
  .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-control {
6411
6428
  grid-column: 2;
6412
6429
  }
@@ -6427,6 +6444,14 @@ ul) {
6427
6444
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
6428
6445
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
6429
6446
  }
6447
+ .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label.pf-m-info {
6448
+ flex-direction: column;
6449
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
6450
+ align-items: flex-start;
6451
+ }
6452
+ .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label-main {
6453
+ flex-grow: 0;
6454
+ }
6430
6455
  .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-control {
6431
6456
  grid-column: 2;
6432
6457
  }
@@ -6447,6 +6472,14 @@ ul) {
6447
6472
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
6448
6473
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
6449
6474
  }
6475
+ .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label.pf-m-info {
6476
+ flex-direction: column;
6477
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
6478
+ align-items: flex-start;
6479
+ }
6480
+ .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label-main {
6481
+ flex-grow: 0;
6482
+ }
6450
6483
  .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-control {
6451
6484
  grid-column: 2;
6452
6485
  }
@@ -6467,6 +6500,14 @@ ul) {
6467
6500
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
6468
6501
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
6469
6502
  }
6503
+ .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label.pf-m-info {
6504
+ flex-direction: column;
6505
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
6506
+ align-items: flex-start;
6507
+ }
6508
+ .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label-main {
6509
+ flex-grow: 0;
6510
+ }
6470
6511
  .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-control {
6471
6512
  grid-column: 2;
6472
6513
  }
@@ -6487,6 +6528,14 @@ ul) {
6487
6528
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
6488
6529
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
6489
6530
  }
6531
+ .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label.pf-m-info {
6532
+ flex-direction: column;
6533
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
6534
+ align-items: flex-start;
6535
+ }
6536
+ .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label-main {
6537
+ flex-grow: 0;
6538
+ }
6490
6539
  .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-control {
6491
6540
  grid-column: 2;
6492
6541
  }
@@ -6507,6 +6556,14 @@ ul) {
6507
6556
  --pf-v6-c-form--m-horizontal__group-label--md--PaddingBlockStart: var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart);
6508
6557
  transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
6509
6558
  }
6559
+ .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label.pf-m-info {
6560
+ flex-direction: column;
6561
+ gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
6562
+ align-items: flex-start;
6563
+ }
6564
+ .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label-main {
6565
+ flex-grow: 0;
6566
+ }
6510
6567
  .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-control {
6511
6568
  grid-column: 2;
6512
6569
  }
@@ -7162,8 +7219,8 @@ select ~ .pf-v6-c-form-control__utilities {
7162
7219
  }
7163
7220
 
7164
7221
  :where(:root, .pf-v6-c-icon) {
7165
- --pf-v6-c-icon--Width: 1em;
7166
- --pf-v6-c-icon--Height: 1em;
7222
+ --pf-v6-c-icon--Width: var(--pf-t--global--icon--size--font--body--default);
7223
+ --pf-v6-c-icon--Height: var(--pf-t--global--icon--size--font--body--default);
7167
7224
  --pf-v6-c-icon--m-sm--Width: var(--pf-t--global--icon--size--sm);
7168
7225
  --pf-v6-c-icon--m-sm--Height: var(--pf-t--global--icon--size--sm);
7169
7226
  --pf-v6-c-icon--m-md--Width: var(--pf-t--global--icon--size--md);
@@ -7197,14 +7254,14 @@ select ~ .pf-v6-c-form-control__utilities {
7197
7254
  --pf-v6-c-icon--m-inline--Width: 1em;
7198
7255
  --pf-v6-c-icon--m-inline--Height: 1em;
7199
7256
  --pf-v6-c-icon__content--svg--VerticalAlign: -.125em;
7200
- --pf-v6-c-icon__content--Color: initial;
7257
+ --pf-v6-c-icon__content--Color: var(--pf-t--global--icon--color--regular);
7201
7258
  --pf-v6-c-icon__content--m-danger--Color: var(--pf-t--global--icon--color--status--danger--default);
7202
7259
  --pf-v6-c-icon__content--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
7203
7260
  --pf-v6-c-icon__content--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
7204
7261
  --pf-v6-c-icon__content--m-info--Color: var(--pf-t--global--icon--color--status--info--default);
7205
7262
  --pf-v6-c-icon__content--m-custom--Color: var(--pf-t--global--icon--color--status--custom--default);
7206
7263
  --pf-v6-c-icon--m-inline__content--Color: initial;
7207
- --pf-v6-c-icon__content--FontSize: 1em;
7264
+ --pf-v6-c-icon__content--FontSize: var(--pf-t--global--icon--size--font--body--default);
7208
7265
  --pf-v6-c-icon--m-sm__content--FontSize: var(--pf-t--global--icon--size--sm);
7209
7266
  --pf-v6-c-icon--m-md__content--FontSize: var(--pf-t--global--icon--size--md);
7210
7267
  --pf-v6-c-icon--m-lg__content--FontSize: var(--pf-t--global--icon--size--lg);
package/docs/components/Form/examples/Form.md CHANGED
@@ -475,7 +475,7 @@ cssPrefix: pf-v6-c-form
475
475
  </span>
476
476
  </span></span>
477
477
  </div>
478
- <div class="pf-v6-c-form__group-label-info">info</div>
478
+ <div class="pf-v6-c-form__group-label-info">More info about the name field</div>
479
479
  </div>
480
480
  <div class="pf-v6-c-form__group-control">
481
481
  <span class="pf-v6-c-form-control pf-m-required">
@@ -492,6 +492,47 @@ cssPrefix: pf-v6-c-form
492
492
 
493
493
  ```
494
494
 
495
+ ### Label with additional info (horizontal form)
496
+
497
+ ```html
498
+ <form class="pf-v6-c-form pf-m-horizontal" novalidate>
499
+ <div class="pf-v6-c-form__group">
500
+ <div class="pf-v6-c-form__group-label pf-m-info">
501
+ <div class="pf-v6-c-form__group-label-main"><label
502
+ class="pf-v6-c-form__label"
503
+ for="form-additional-info-horizontal-name"
504
+ >
505
+ <span class="pf-v6-c-form__label-text">Name</span>&nbsp;<span class="pf-v6-c-form__label-required" aria-hidden="true">&#42;</span></label>&nbsp;<span class="pf-v6-c-form__group-label-help">
506
+ <span
507
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
508
+ type="button"
509
+ role="button"
510
+ tabindex="0"
511
+ aria-label="More information for name field"
512
+ aria-describedby="form-additional-info-horizontalform-additional-info-horizontal-name"
513
+ >
514
+ <span class="pf-v6-c-button__icon">
515
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
516
+ </span>
517
+ </span></span>
518
+ </div>
519
+ <div class="pf-v6-c-form__group-label-info">More info about the name field</div>
520
+ </div>
521
+ <div class="pf-v6-c-form__group-control">
522
+ <span class="pf-v6-c-form-control pf-m-required">
523
+ <input
524
+ required
525
+ type="text"
526
+ id="form-additional-info-horizontal-name"
527
+ name="form-additional-info-horizontal-name"
528
+ />
529
+ </span>
530
+ </div>
531
+ </div>
532
+ </form>
533
+
534
+ ```
535
+
495
536
  ### Action group
496
537
 
497
538
  ```html
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.184",
4
+ "version": "6.0.0-alpha.186",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-globals.css CHANGED
@@ -58,42 +58,42 @@
58
58
  }
59
59
 
60
60
  @font-face {
61
- font-family: RedHatTextVF;
61
+ font-family: "Red Hat Text";
62
62
  font-style: normal;
63
63
  font-weight: 400 500;
64
64
  src: url("./assets/fonts/RedHatText/RedHatTextVF.woff2") format("woff2-variations");
65
65
  font-display: fallback;
66
66
  }
67
67
  @font-face {
68
- font-family: RedHatTextVF;
68
+ font-family: "Red Hat Text";
69
69
  font-style: italic;
70
70
  font-weight: 400 500;
71
71
  src: url("./assets/fonts/RedHatText/RedHatTextVF-Italic.woff2") format("woff2-variations");
72
72
  font-display: fallback;
73
73
  }
74
74
  @font-face {
75
- font-family: RedHatDisplayVF;
75
+ font-family: "Red Hat Display";
76
76
  font-style: normal;
77
77
  font-weight: 400 700;
78
78
  src: url("./assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2") format("woff2-variations");
79
79
  font-display: fallback;
80
80
  }
81
81
  @font-face {
82
- font-family: RedHatDisplayVF;
82
+ font-family: "Red Hat Display";
83
83
  font-style: italic;
84
84
  font-weight: 400 700;
85
85
  src: url("./assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2") format("woff2-variations");
86
86
  font-display: fallback;
87
87
  }
88
88
  @font-face {
89
- font-family: RedHatMonoVF;
89
+ font-family: "Red Hat Mono";
90
90
  font-style: normal;
91
91
  font-weight: 400;
92
92
  src: url("./assets/fonts/RedHatMono/RedHatMonoVF.woff2") format("woff2-variations");
93
93
  font-display: fallback;
94
94
  }
95
95
  @font-face {
96
- font-family: RedHatMonoVF;
96
+ font-family: "Red Hat Mono";
97
97
  font-style: italic;
98
98
  font-weight: 400;
99
99
  src: url("./assets/fonts/RedHatMono/RedHatMonoVF-Italic.woff2") format("woff2-variations");
@@ -5576,24 +5576,8 @@
5576
5576
  --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
5577
5577
  --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
5578
5578
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
5579
- --pf-t--global--font--family--100: redhattextvf, redhattext, helvetica, arial, sans-serif;
5580
- --pf-t--global--font--family--200: redhatdisplayvf, redhatdisplay, helvetica, arial, sans-serif;
5581
- --pf-t--global--font--family--300: redhatmonovf, redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
5582
- --pf-t--global--font--line-height--100: 1.3;
5583
- --pf-t--global--font--line-height--200: 1.5;
5584
- --pf-t--global--font--weight--body--100: 400;
5585
- --pf-t--global--font--weight--body--200: 500;
5586
- --pf-t--global--font--weight--heading--100: 700;
5587
- --pf-t--global--font--weight--heading--200: 700;
5588
- --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
5589
- --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
5590
- --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
5591
- --pf-t--global--font--line-height--body: var(--pf-t--global--font--line-height--200);
5592
- --pf-t--global--font--line-height--heading: var(--pf-t--global--font--line-height--100);
5593
- --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--100);
5594
- --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--200);
5595
- --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--100);
5596
- --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--200);
5579
+ --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--200);
5580
+ --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400);
5597
5581
  --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
5598
5582
  --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
5599
5583
  --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl);