@patternfly/patternfly 6.0.0-alpha.204 → 6.0.0-alpha.206
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.
- package/components/Form/form.css +8 -8
- package/components/Form/form.scss +3 -2
- package/components/FormControl/form-control.css +10 -10
- package/components/FormControl/form-control.scss +11 -13
- package/components/MenuToggle/menu-toggle.scss +1 -1
- package/components/Table/table.css +2 -2
- package/components/Table/table.scss +2 -2
- package/components/_index.css +20 -20
- package/docs/components/InlineEdit/examples/InlineEdit.md +18 -10
- package/docs/components/Panel/examples/Panel.md +2 -2
- package/docs/components/Sidebar/examples/Sidebar.css +4 -2
- package/docs/components/Sidebar/examples/Sidebar.md +3 -3
- package/docs/components/TreeView/examples/TreeView.md +615 -45
- package/package.json +1 -1
- package/patternfly-no-globals.css +20 -20
- package/patternfly.css +20 -20
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/assets/pficon/pf-v5-pficon.woff2 +0 -0
package/components/Form/form.css
CHANGED
|
@@ -104,8 +104,8 @@
|
|
|
104
104
|
transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
|
|
105
105
|
}
|
|
106
106
|
.pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label.pf-m-info {
|
|
107
|
+
--pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
107
108
|
flex-direction: column;
|
|
108
|
-
gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
109
109
|
align-items: flex-start;
|
|
110
110
|
}
|
|
111
111
|
.pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label-main {
|
|
@@ -132,8 +132,8 @@
|
|
|
132
132
|
transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
|
|
133
133
|
}
|
|
134
134
|
.pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label.pf-m-info {
|
|
135
|
+
--pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
135
136
|
flex-direction: column;
|
|
136
|
-
gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
137
137
|
align-items: flex-start;
|
|
138
138
|
}
|
|
139
139
|
.pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label-main {
|
|
@@ -160,8 +160,8 @@
|
|
|
160
160
|
transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
|
|
161
161
|
}
|
|
162
162
|
.pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label.pf-m-info {
|
|
163
|
+
--pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
163
164
|
flex-direction: column;
|
|
164
|
-
gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
165
165
|
align-items: flex-start;
|
|
166
166
|
}
|
|
167
167
|
.pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label-main {
|
|
@@ -188,8 +188,8 @@
|
|
|
188
188
|
transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
|
|
189
189
|
}
|
|
190
190
|
.pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label.pf-m-info {
|
|
191
|
+
--pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
191
192
|
flex-direction: column;
|
|
192
|
-
gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
193
193
|
align-items: flex-start;
|
|
194
194
|
}
|
|
195
195
|
.pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label-main {
|
|
@@ -216,8 +216,8 @@
|
|
|
216
216
|
transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
|
|
217
217
|
}
|
|
218
218
|
.pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label.pf-m-info {
|
|
219
|
+
--pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
219
220
|
flex-direction: column;
|
|
220
|
-
gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
221
221
|
align-items: flex-start;
|
|
222
222
|
}
|
|
223
223
|
.pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label-main {
|
|
@@ -244,8 +244,8 @@
|
|
|
244
244
|
transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
|
|
245
245
|
}
|
|
246
246
|
.pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label.pf-m-info {
|
|
247
|
+
--pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
247
248
|
flex-direction: column;
|
|
248
|
-
gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
249
249
|
align-items: flex-start;
|
|
250
250
|
}
|
|
251
251
|
.pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label-main {
|
|
@@ -272,8 +272,8 @@
|
|
|
272
272
|
transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
|
|
273
273
|
}
|
|
274
274
|
.pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label.pf-m-info {
|
|
275
|
+
--pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
275
276
|
flex-direction: column;
|
|
276
|
-
gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
277
277
|
align-items: flex-start;
|
|
278
278
|
}
|
|
279
279
|
.pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label-main {
|
|
@@ -317,6 +317,7 @@
|
|
|
317
317
|
}
|
|
318
318
|
.pf-v6-c-form__group-label.pf-m-info {
|
|
319
319
|
display: flex;
|
|
320
|
+
gap: var(--pf-v6-c-form__group-label--m-info--Gap);
|
|
320
321
|
align-items: flex-end;
|
|
321
322
|
}
|
|
322
323
|
|
|
@@ -325,7 +326,6 @@
|
|
|
325
326
|
}
|
|
326
327
|
|
|
327
328
|
.pf-v6-c-form__group-label-info {
|
|
328
|
-
margin-inline-start: var(--pf-v6-c-form__group-label-info--MarginInlineStart);
|
|
329
329
|
font-size: var(--pf-v6-c-form__group-label-info--FontSize);
|
|
330
330
|
}
|
|
331
331
|
|
|
@@ -188,8 +188,9 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
|
|
|
188
188
|
}
|
|
189
189
|
|
|
190
190
|
&.pf-m-info {
|
|
191
|
+
--#{$form}__group-label--m-info--Gap: var(--#{$form}--m-horizontal__group-label--m-info--Gap);
|
|
192
|
+
|
|
191
193
|
flex-direction: column;
|
|
192
|
-
gap: var(--#{$form}--m-horizontal__group-label--m-info--Gap);
|
|
193
194
|
align-items: flex-start;
|
|
194
195
|
}
|
|
195
196
|
// stylelint-enable
|
|
@@ -243,6 +244,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
|
|
|
243
244
|
|
|
244
245
|
&.pf-m-info {
|
|
245
246
|
display: flex;
|
|
247
|
+
gap: var(--#{$form}__group-label--m-info--Gap);
|
|
246
248
|
align-items: flex-end;
|
|
247
249
|
}
|
|
248
250
|
}
|
|
@@ -252,7 +254,6 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
|
|
|
252
254
|
}
|
|
253
255
|
|
|
254
256
|
.#{$form}__group-label-info {
|
|
255
|
-
margin-inline-start: var(--#{$form}__group-label-info--MarginInlineStart);
|
|
256
257
|
font-size: var(--#{$form}__group-label-info--FontSize);
|
|
257
258
|
}
|
|
258
259
|
|
|
@@ -21,8 +21,9 @@
|
|
|
21
21
|
--pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
|
|
22
22
|
--pf-v6-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
|
|
23
23
|
--pf-v6-c-form-control--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
|
|
24
|
-
--pf-v6-c-form-control--
|
|
25
|
-
--pf-v6-c-form-control--
|
|
24
|
+
--pf-v6-c-form-control--m-success--hover--after--BorderColor: var(--pf-t--global--border--color--status--success--hover);
|
|
25
|
+
--pf-v6-c-form-control--m-warning--hover--after--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
|
|
26
|
+
--pf-v6-c-form-control--m-error--hover--after--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
|
|
26
27
|
--pf-v6-c-form-control--m-expanded--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
|
|
27
28
|
--pf-v6-c-form-control--m-expanded--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
28
29
|
--pf-v6-c-form-control--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
|
|
@@ -33,8 +34,6 @@
|
|
|
33
34
|
--pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
34
35
|
--pf-v6-c-form-control--m-readonly--BorderColor: transparent;
|
|
35
36
|
--pf-v6-c-form-control--m-readonly--hover--after--BorderColor: revert;
|
|
36
|
-
--pf-v6-c-form-control--m-readonly--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
|
|
37
|
-
--pf-v6-c-form-control--m-readonly--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
38
37
|
--pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
|
|
39
38
|
--pf-v6-c-form-control--m-readonly--m-plain--inset--base: 0;
|
|
40
39
|
--pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
|
|
@@ -135,8 +134,6 @@
|
|
|
135
134
|
}
|
|
136
135
|
.pf-v6-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) {
|
|
137
136
|
--pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--hover--after--BorderColor);
|
|
138
|
-
--pf-v6-c-form-control--focus--after--BorderWidth: var(--pf-v6-c-form-control--m-readonly--focus--after--BorderWidth);
|
|
139
|
-
--pf-v6-c-form-control--focus--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--focus--after--BorderColor);
|
|
140
137
|
}
|
|
141
138
|
.pf-v6-c-form-control.pf-m-readonly.pf-m-plain {
|
|
142
139
|
--pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor);
|
|
@@ -145,10 +142,6 @@
|
|
|
145
142
|
--pf-v6-c-form-control--after--BorderStyle: none;
|
|
146
143
|
--pf-v6-c-form-control--OutlineOffset: var(--pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset);
|
|
147
144
|
}
|
|
148
|
-
.pf-v6-c-form-control:hover {
|
|
149
|
-
--pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--hover--after--BorderColor);
|
|
150
|
-
--pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--hover--after--BorderWidth);
|
|
151
|
-
}
|
|
152
145
|
.pf-v6-c-form-control.pf-m-expanded {
|
|
153
146
|
--pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-expanded--after--BorderColor);
|
|
154
147
|
--pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-expanded--after--BorderWidth);
|
|
@@ -165,6 +158,7 @@
|
|
|
165
158
|
.pf-v6-c-form-control.pf-m-error {
|
|
166
159
|
--pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd);
|
|
167
160
|
--pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
|
|
161
|
+
--pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);
|
|
168
162
|
--pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
|
|
169
163
|
--pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd);
|
|
170
164
|
--pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
|
|
@@ -175,6 +169,7 @@
|
|
|
175
169
|
.pf-v6-c-form-control.pf-m-success {
|
|
176
170
|
--pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd);
|
|
177
171
|
--pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-success--after--BorderColor);
|
|
172
|
+
--pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-success--hover--after--BorderColor);
|
|
178
173
|
--pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-success__icon--m-status--Color);
|
|
179
174
|
--pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd);
|
|
180
175
|
--pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-success--after--BorderWidth);
|
|
@@ -185,6 +180,7 @@
|
|
|
185
180
|
.pf-v6-c-form-control.pf-m-warning {
|
|
186
181
|
--pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd);
|
|
187
182
|
--pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-warning--after--BorderColor);
|
|
183
|
+
--pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-warning--hover--after--BorderColor);
|
|
188
184
|
--pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-warning__icon--m-status--Color);
|
|
189
185
|
--pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd);
|
|
190
186
|
--pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-warning--after--BorderWidth);
|
|
@@ -192,6 +188,10 @@
|
|
|
192
188
|
.pf-v6-c-form-control.pf-m-warning.pf-m-icon {
|
|
193
189
|
--pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
|
|
194
190
|
}
|
|
191
|
+
.pf-v6-c-form-control:hover {
|
|
192
|
+
--pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--hover--after--BorderColor);
|
|
193
|
+
--pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--hover--after--BorderWidth);
|
|
194
|
+
}
|
|
195
195
|
.pf-v6-c-form-control.pf-m-icon {
|
|
196
196
|
--pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--PaddingInlineEnd);
|
|
197
197
|
}
|
|
@@ -27,10 +27,9 @@
|
|
|
27
27
|
// hover
|
|
28
28
|
--#{$form-control}--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
|
|
29
29
|
--#{$form-control}--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
--#{$form-control}--
|
|
33
|
-
--#{$form-control}--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
30
|
+
--#{$form-control}--m-success--hover--after--BorderColor: var(--pf-t--global--border--color--status--success--hover);
|
|
31
|
+
--#{$form-control}--m-warning--hover--after--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
|
|
32
|
+
--#{$form-control}--m-error--hover--after--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
|
|
34
33
|
|
|
35
34
|
// expanded
|
|
36
35
|
--#{$form-control}--m-expanded--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
|
|
@@ -49,8 +48,6 @@
|
|
|
49
48
|
--#{$form-control}--m-readonly--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
50
49
|
--#{$form-control}--m-readonly--BorderColor: transparent;
|
|
51
50
|
--#{$form-control}--m-readonly--hover--after--BorderColor: revert;
|
|
52
|
-
--#{$form-control}--m-readonly--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
|
|
53
|
-
--#{$form-control}--m-readonly--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
54
51
|
|
|
55
52
|
// readonly plain
|
|
56
53
|
--#{$form-control}--m-readonly--m-plain--BackgroundColor: transparent;
|
|
@@ -188,8 +185,6 @@
|
|
|
188
185
|
// stylelint-disable selector-not-notation
|
|
189
186
|
&:not(.pf-m-success, .pf-m-warning, .pf-m-error) {
|
|
190
187
|
--#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-readonly--hover--after--BorderColor);
|
|
191
|
-
--#{$form-control}--focus--after--BorderWidth: var(--#{$form-control}--m-readonly--focus--after--BorderWidth);
|
|
192
|
-
--#{$form-control}--focus--after--BorderColor: var(--#{$form-control}--m-readonly--focus--after--BorderColor);
|
|
193
188
|
}
|
|
194
189
|
|
|
195
190
|
&.pf-m-plain {
|
|
@@ -201,11 +196,6 @@
|
|
|
201
196
|
}
|
|
202
197
|
}
|
|
203
198
|
|
|
204
|
-
&:hover {
|
|
205
|
-
--#{$form-control}--after--BorderColor: var(--#{$form-control}--hover--after--BorderColor);
|
|
206
|
-
--#{$form-control}--after--BorderWidth: var(--#{$form-control}--hover--after--BorderWidth);
|
|
207
|
-
}
|
|
208
|
-
|
|
209
199
|
&.pf-m-expanded {
|
|
210
200
|
--#{$form-control}--after--BorderColor: var(--#{$form-control}--m-expanded--after--BorderColor);
|
|
211
201
|
--#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-expanded--after--BorderWidth);
|
|
@@ -225,6 +215,7 @@
|
|
|
225
215
|
&.pf-m-error {
|
|
226
216
|
--#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-error--PaddingInlineEnd);
|
|
227
217
|
--#{$form-control}--after--BorderColor: var(--#{$form-control}--m-error--after--BorderColor);
|
|
218
|
+
--#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-error--hover--after--BorderColor);
|
|
228
219
|
--#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-error__icon--m-status--Color);
|
|
229
220
|
--#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}__select--m-error--m-status--PaddingInlineEnd);
|
|
230
221
|
--#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-error--after--BorderWidth);
|
|
@@ -237,6 +228,7 @@
|
|
|
237
228
|
&.pf-m-success {
|
|
238
229
|
--#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-success--PaddingInlineEnd);
|
|
239
230
|
--#{$form-control}--after--BorderColor: var(--#{$form-control}--m-success--after--BorderColor);
|
|
231
|
+
--#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-success--hover--after--BorderColor);
|
|
240
232
|
--#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-success__icon--m-status--Color);
|
|
241
233
|
--#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}__select--m-success--m-status--PaddingInlineEnd);
|
|
242
234
|
--#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-success--after--BorderWidth);
|
|
@@ -249,6 +241,7 @@
|
|
|
249
241
|
&.pf-m-warning {
|
|
250
242
|
--#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-warning--PaddingInlineEnd);
|
|
251
243
|
--#{$form-control}--after--BorderColor: var(--#{$form-control}--m-warning--after--BorderColor);
|
|
244
|
+
--#{$form-control}--hover--after--BorderColor: var(--#{$form-control}--m-warning--hover--after--BorderColor);
|
|
252
245
|
--#{$form-control}__icon--m-status--Color: var(--#{$form-control}--m-warning__icon--m-status--Color);
|
|
253
246
|
--#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}__select--m-warning--m-status--PaddingInlineEnd);
|
|
254
247
|
--#{$form-control}--after--BorderWidth: var(--#{$form-control}--m-warning--after--BorderWidth);
|
|
@@ -258,6 +251,11 @@
|
|
|
258
251
|
}
|
|
259
252
|
}
|
|
260
253
|
|
|
254
|
+
&:hover {
|
|
255
|
+
--#{$form-control}--after--BorderColor: var(--#{$form-control}--hover--after--BorderColor);
|
|
256
|
+
--#{$form-control}--after--BorderWidth: var(--#{$form-control}--hover--after--BorderWidth);
|
|
257
|
+
}
|
|
258
|
+
|
|
261
259
|
&.pf-m-icon {
|
|
262
260
|
--#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--m-icon--PaddingInlineEnd);
|
|
263
261
|
}
|
|
@@ -576,10 +576,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
576
576
|
--pf-v6-c-button--FontSize: var(--pf-v6-c-table__favorite--c-button--FontSize);
|
|
577
577
|
}
|
|
578
578
|
.pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button {
|
|
579
|
-
--pf-v6-c-button--m-
|
|
579
|
+
--pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
|
|
580
580
|
}
|
|
581
581
|
.pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
|
|
582
|
-
--pf-v6-c-button--
|
|
582
|
+
--pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
|
|
583
583
|
}
|
|
584
584
|
|
|
585
585
|
.pf-v6-c-table__draggable .pf-v6-c-button {
|
|
@@ -786,10 +786,10 @@
|
|
|
786
786
|
}
|
|
787
787
|
|
|
788
788
|
&.pf-m-favorited .#{$button} {
|
|
789
|
-
--#{$button}--m-
|
|
789
|
+
--#{$button}--m-plain__icon--Color: var(--#{$table}__favorite--m-favorited--c-button--Color);
|
|
790
790
|
|
|
791
791
|
&:is(:hover, :focus) {
|
|
792
|
-
--#{$button}--
|
|
792
|
+
--#{$button}--hover__icon--Color: var(--#{$table}__favorite--m-favorited--c-button--Color);
|
|
793
793
|
}
|
|
794
794
|
}
|
|
795
795
|
}
|
package/components/_index.css
CHANGED
|
@@ -6387,8 +6387,8 @@ ul) {
|
|
|
6387
6387
|
transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
|
|
6388
6388
|
}
|
|
6389
6389
|
.pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label.pf-m-info {
|
|
6390
|
+
--pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
6390
6391
|
flex-direction: column;
|
|
6391
|
-
gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
6392
6392
|
align-items: flex-start;
|
|
6393
6393
|
}
|
|
6394
6394
|
.pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label-main {
|
|
@@ -6415,8 +6415,8 @@ ul) {
|
|
|
6415
6415
|
transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
|
|
6416
6416
|
}
|
|
6417
6417
|
.pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label.pf-m-info {
|
|
6418
|
+
--pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
6418
6419
|
flex-direction: column;
|
|
6419
|
-
gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
6420
6420
|
align-items: flex-start;
|
|
6421
6421
|
}
|
|
6422
6422
|
.pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label-main {
|
|
@@ -6443,8 +6443,8 @@ ul) {
|
|
|
6443
6443
|
transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
|
|
6444
6444
|
}
|
|
6445
6445
|
.pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label.pf-m-info {
|
|
6446
|
+
--pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
6446
6447
|
flex-direction: column;
|
|
6447
|
-
gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
6448
6448
|
align-items: flex-start;
|
|
6449
6449
|
}
|
|
6450
6450
|
.pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label-main {
|
|
@@ -6471,8 +6471,8 @@ ul) {
|
|
|
6471
6471
|
transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
|
|
6472
6472
|
}
|
|
6473
6473
|
.pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label.pf-m-info {
|
|
6474
|
+
--pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
6474
6475
|
flex-direction: column;
|
|
6475
|
-
gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
6476
6476
|
align-items: flex-start;
|
|
6477
6477
|
}
|
|
6478
6478
|
.pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label-main {
|
|
@@ -6499,8 +6499,8 @@ ul) {
|
|
|
6499
6499
|
transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
|
|
6500
6500
|
}
|
|
6501
6501
|
.pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label.pf-m-info {
|
|
6502
|
+
--pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
6502
6503
|
flex-direction: column;
|
|
6503
|
-
gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
6504
6504
|
align-items: flex-start;
|
|
6505
6505
|
}
|
|
6506
6506
|
.pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label-main {
|
|
@@ -6527,8 +6527,8 @@ ul) {
|
|
|
6527
6527
|
transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
|
|
6528
6528
|
}
|
|
6529
6529
|
.pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label.pf-m-info {
|
|
6530
|
+
--pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
6530
6531
|
flex-direction: column;
|
|
6531
|
-
gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
6532
6532
|
align-items: flex-start;
|
|
6533
6533
|
}
|
|
6534
6534
|
.pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label-main {
|
|
@@ -6555,8 +6555,8 @@ ul) {
|
|
|
6555
6555
|
transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
|
|
6556
6556
|
}
|
|
6557
6557
|
.pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label.pf-m-info {
|
|
6558
|
+
--pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
6558
6559
|
flex-direction: column;
|
|
6559
|
-
gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
|
|
6560
6560
|
align-items: flex-start;
|
|
6561
6561
|
}
|
|
6562
6562
|
.pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label-main {
|
|
@@ -6600,6 +6600,7 @@ ul) {
|
|
|
6600
6600
|
}
|
|
6601
6601
|
.pf-v6-c-form__group-label.pf-m-info {
|
|
6602
6602
|
display: flex;
|
|
6603
|
+
gap: var(--pf-v6-c-form__group-label--m-info--Gap);
|
|
6603
6604
|
align-items: flex-end;
|
|
6604
6605
|
}
|
|
6605
6606
|
|
|
@@ -6608,7 +6609,6 @@ ul) {
|
|
|
6608
6609
|
}
|
|
6609
6610
|
|
|
6610
6611
|
.pf-v6-c-form__group-label-info {
|
|
6611
|
-
margin-inline-start: var(--pf-v6-c-form__group-label-info--MarginInlineStart);
|
|
6612
6612
|
font-size: var(--pf-v6-c-form__group-label-info--FontSize);
|
|
6613
6613
|
}
|
|
6614
6614
|
|
|
@@ -6823,8 +6823,9 @@ ul) {
|
|
|
6823
6823
|
--pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
|
|
6824
6824
|
--pf-v6-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
|
|
6825
6825
|
--pf-v6-c-form-control--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
|
|
6826
|
-
--pf-v6-c-form-control--
|
|
6827
|
-
--pf-v6-c-form-control--
|
|
6826
|
+
--pf-v6-c-form-control--m-success--hover--after--BorderColor: var(--pf-t--global--border--color--status--success--hover);
|
|
6827
|
+
--pf-v6-c-form-control--m-warning--hover--after--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
|
|
6828
|
+
--pf-v6-c-form-control--m-error--hover--after--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
|
|
6828
6829
|
--pf-v6-c-form-control--m-expanded--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
|
|
6829
6830
|
--pf-v6-c-form-control--m-expanded--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
6830
6831
|
--pf-v6-c-form-control--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
|
|
@@ -6835,8 +6836,6 @@ ul) {
|
|
|
6835
6836
|
--pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
6836
6837
|
--pf-v6-c-form-control--m-readonly--BorderColor: transparent;
|
|
6837
6838
|
--pf-v6-c-form-control--m-readonly--hover--after--BorderColor: revert;
|
|
6838
|
-
--pf-v6-c-form-control--m-readonly--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
|
|
6839
|
-
--pf-v6-c-form-control--m-readonly--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
|
|
6840
6839
|
--pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
|
|
6841
6840
|
--pf-v6-c-form-control--m-readonly--m-plain--inset--base: 0;
|
|
6842
6841
|
--pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
|
|
@@ -6937,8 +6936,6 @@ ul) {
|
|
|
6937
6936
|
}
|
|
6938
6937
|
.pf-v6-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) {
|
|
6939
6938
|
--pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--hover--after--BorderColor);
|
|
6940
|
-
--pf-v6-c-form-control--focus--after--BorderWidth: var(--pf-v6-c-form-control--m-readonly--focus--after--BorderWidth);
|
|
6941
|
-
--pf-v6-c-form-control--focus--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--focus--after--BorderColor);
|
|
6942
6939
|
}
|
|
6943
6940
|
.pf-v6-c-form-control.pf-m-readonly.pf-m-plain {
|
|
6944
6941
|
--pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor);
|
|
@@ -6947,10 +6944,6 @@ ul) {
|
|
|
6947
6944
|
--pf-v6-c-form-control--after--BorderStyle: none;
|
|
6948
6945
|
--pf-v6-c-form-control--OutlineOffset: var(--pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset);
|
|
6949
6946
|
}
|
|
6950
|
-
.pf-v6-c-form-control:hover {
|
|
6951
|
-
--pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--hover--after--BorderColor);
|
|
6952
|
-
--pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--hover--after--BorderWidth);
|
|
6953
|
-
}
|
|
6954
6947
|
.pf-v6-c-form-control.pf-m-expanded {
|
|
6955
6948
|
--pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-expanded--after--BorderColor);
|
|
6956
6949
|
--pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-expanded--after--BorderWidth);
|
|
@@ -6967,6 +6960,7 @@ ul) {
|
|
|
6967
6960
|
.pf-v6-c-form-control.pf-m-error {
|
|
6968
6961
|
--pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd);
|
|
6969
6962
|
--pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
|
|
6963
|
+
--pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);
|
|
6970
6964
|
--pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
|
|
6971
6965
|
--pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd);
|
|
6972
6966
|
--pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
|
|
@@ -6977,6 +6971,7 @@ ul) {
|
|
|
6977
6971
|
.pf-v6-c-form-control.pf-m-success {
|
|
6978
6972
|
--pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd);
|
|
6979
6973
|
--pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-success--after--BorderColor);
|
|
6974
|
+
--pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-success--hover--after--BorderColor);
|
|
6980
6975
|
--pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-success__icon--m-status--Color);
|
|
6981
6976
|
--pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd);
|
|
6982
6977
|
--pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-success--after--BorderWidth);
|
|
@@ -6987,6 +6982,7 @@ ul) {
|
|
|
6987
6982
|
.pf-v6-c-form-control.pf-m-warning {
|
|
6988
6983
|
--pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd);
|
|
6989
6984
|
--pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-warning--after--BorderColor);
|
|
6985
|
+
--pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-warning--hover--after--BorderColor);
|
|
6990
6986
|
--pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-warning__icon--m-status--Color);
|
|
6991
6987
|
--pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd);
|
|
6992
6988
|
--pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-warning--after--BorderWidth);
|
|
@@ -6994,6 +6990,10 @@ ul) {
|
|
|
6994
6990
|
.pf-v6-c-form-control.pf-m-warning.pf-m-icon {
|
|
6995
6991
|
--pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
|
|
6996
6992
|
}
|
|
6993
|
+
.pf-v6-c-form-control:hover {
|
|
6994
|
+
--pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--hover--after--BorderColor);
|
|
6995
|
+
--pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--hover--after--BorderWidth);
|
|
6996
|
+
}
|
|
6997
6997
|
.pf-v6-c-form-control.pf-m-icon {
|
|
6998
6998
|
--pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--PaddingInlineEnd);
|
|
6999
6999
|
}
|
|
@@ -16770,10 +16770,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
|
16770
16770
|
--pf-v6-c-button--FontSize: var(--pf-v6-c-table__favorite--c-button--FontSize);
|
|
16771
16771
|
}
|
|
16772
16772
|
.pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button {
|
|
16773
|
-
--pf-v6-c-button--m-
|
|
16773
|
+
--pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
|
|
16774
16774
|
}
|
|
16775
16775
|
.pf-v6-c-table__favorite.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
|
|
16776
|
-
--pf-v6-c-button--
|
|
16776
|
+
--pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-table__favorite--m-favorited--c-button--Color);
|
|
16777
16777
|
}
|
|
16778
16778
|
|
|
16779
16779
|
.pf-v6-c-table__draggable .pf-v6-c-button {
|
|
@@ -501,7 +501,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
501
501
|
type="text"
|
|
502
502
|
value="Text input description content"
|
|
503
503
|
id="bulk-edit-table-example-row-1-text-input"
|
|
504
|
-
aria-label="Text input"
|
|
504
|
+
aria-label="Text input for row 1"
|
|
505
505
|
/>
|
|
506
506
|
</span>
|
|
507
507
|
</div>
|
|
@@ -522,14 +522,18 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
522
522
|
type="text"
|
|
523
523
|
value="Text input disabled, description content"
|
|
524
524
|
id="bulk-edit-table-example-row-1-text-input-disabled"
|
|
525
|
-
aria-label="Disabled text input"
|
|
525
|
+
aria-label="Disabled text input for row 1"
|
|
526
526
|
/>
|
|
527
527
|
</span>
|
|
528
528
|
</div>
|
|
529
529
|
</td>
|
|
530
530
|
<td class="pf-v6-c-table__td" role="cell" data-label="Checkboxes">
|
|
531
531
|
<div class="pf-v6-c-inline-edit__value">Check 1, Check 2</div>
|
|
532
|
-
<div
|
|
532
|
+
<div
|
|
533
|
+
class="pf-v6-c-inline-edit__group pf-m-column"
|
|
534
|
+
role="group"
|
|
535
|
+
aria-label="Checkbox group for row 1"
|
|
536
|
+
>
|
|
533
537
|
<div class="pf-v6-c-inline-edit__input">
|
|
534
538
|
<div class="pf-v6-c-check">
|
|
535
539
|
<input
|
|
@@ -567,7 +571,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
567
571
|
<div
|
|
568
572
|
class="pf-v6-c-inline-edit__group pf-m-column"
|
|
569
573
|
role="radiogroup"
|
|
570
|
-
aria-label="Radio group
|
|
574
|
+
aria-label="Radio group for row 1"
|
|
571
575
|
>
|
|
572
576
|
<div class="pf-v6-c-inline-edit__input">
|
|
573
577
|
<div class="pf-v6-c-radio">
|
|
@@ -609,7 +613,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
609
613
|
type="number"
|
|
610
614
|
value="2"
|
|
611
615
|
id="bulk-edit-table-example-row-1-number-input"
|
|
612
|
-
aria-label="Number input"
|
|
616
|
+
aria-label="Number input for row 1"
|
|
613
617
|
/>
|
|
614
618
|
</span>
|
|
615
619
|
</div>
|
|
@@ -686,7 +690,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
686
690
|
type="text"
|
|
687
691
|
value="Text input description content"
|
|
688
692
|
id="bulk-edit-table-example-row-2-text-input"
|
|
689
|
-
aria-label="Text input"
|
|
693
|
+
aria-label="Text input for row 2"
|
|
690
694
|
/>
|
|
691
695
|
</span>
|
|
692
696
|
</div>
|
|
@@ -707,14 +711,18 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
707
711
|
type="text"
|
|
708
712
|
value="Text input disabled, description content"
|
|
709
713
|
id="bulk-edit-table-example-row-2-text-input-disabled"
|
|
710
|
-
aria-label="Disabled text input"
|
|
714
|
+
aria-label="Disabled text input for row 2"
|
|
711
715
|
/>
|
|
712
716
|
</span>
|
|
713
717
|
</div>
|
|
714
718
|
</td>
|
|
715
719
|
<td class="pf-v6-c-table__td" role="cell" data-label="Checkboxes">
|
|
716
720
|
<div class="pf-v6-c-inline-edit__value">Check 1, Check 2</div>
|
|
717
|
-
<div
|
|
721
|
+
<div
|
|
722
|
+
class="pf-v6-c-inline-edit__group pf-m-column"
|
|
723
|
+
role="group"
|
|
724
|
+
aria-label="Checkbox group for row 2"
|
|
725
|
+
>
|
|
718
726
|
<div class="pf-v6-c-inline-edit__input">
|
|
719
727
|
<div class="pf-v6-c-check">
|
|
720
728
|
<input
|
|
@@ -752,7 +760,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
752
760
|
<div
|
|
753
761
|
class="pf-v6-c-inline-edit__group pf-m-column"
|
|
754
762
|
role="radiogroup"
|
|
755
|
-
aria-label="Radio group
|
|
763
|
+
aria-label="Radio group for row 2"
|
|
756
764
|
>
|
|
757
765
|
<div class="pf-v6-c-inline-edit__input">
|
|
758
766
|
<div class="pf-v6-c-radio">
|
|
@@ -794,7 +802,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
|
|
|
794
802
|
type="number"
|
|
795
803
|
value="2"
|
|
796
804
|
id="bulk-edit-table-example-row-2-number-input"
|
|
797
|
-
aria-label="Number input"
|
|
805
|
+
aria-label="Number input for row 2"
|
|
798
806
|
/>
|
|
799
807
|
</span>
|
|
800
808
|
</div>
|
|
@@ -100,7 +100,7 @@ cssPrefix: pf-v6-c-panel
|
|
|
100
100
|
|
|
101
101
|
```html
|
|
102
102
|
<div class="pf-v6-c-panel pf-m-scrollable">
|
|
103
|
-
<div class="pf-v6-c-panel__main">
|
|
103
|
+
<div class="pf-v6-c-panel__main" tabindex="0">
|
|
104
104
|
<div class="pf-v6-c-panel__main-body">
|
|
105
105
|
Main content
|
|
106
106
|
<br />
|
|
@@ -131,7 +131,7 @@ cssPrefix: pf-v6-c-panel
|
|
|
131
131
|
<div class="pf-v6-c-panel pf-m-scrollable">
|
|
132
132
|
<div class="pf-v6-c-panel__header">Header content</div>
|
|
133
133
|
<hr class="pf-v6-c-divider" />
|
|
134
|
-
<div class="pf-v6-c-panel__main">
|
|
134
|
+
<div class="pf-v6-c-panel__main" tabindex="0">
|
|
135
135
|
<div class="pf-v6-c-panel__main-body">
|
|
136
136
|
Main content
|
|
137
137
|
<br />
|
|
@@ -140,7 +140,7 @@ cssPrefix: pf-v6-c-sidebar
|
|
|
140
140
|
### Sticky panel
|
|
141
141
|
|
|
142
142
|
```html
|
|
143
|
-
<div class="pf-v6-c-sidebar">
|
|
143
|
+
<div class="pf-v6-c-sidebar" tabindex="0">
|
|
144
144
|
<div class="pf-v6-c-sidebar__main">
|
|
145
145
|
<div class="pf-v6-c-sidebar__panel pf-m-sticky">Sidebar panel</div>
|
|
146
146
|
<div class="pf-v6-c-sidebar__content">
|
|
@@ -158,7 +158,7 @@ cssPrefix: pf-v6-c-sidebar
|
|
|
158
158
|
### Static panel
|
|
159
159
|
|
|
160
160
|
```html
|
|
161
|
-
<div class="pf-v6-c-sidebar">
|
|
161
|
+
<div class="pf-v6-c-sidebar" tabindex="0">
|
|
162
162
|
<div class="pf-v6-c-sidebar__main">
|
|
163
163
|
<div class="pf-v6-c-sidebar__panel pf-m-static">Sidebar panel</div>
|
|
164
164
|
<div class="pf-v6-c-sidebar__content">
|
|
@@ -176,7 +176,7 @@ cssPrefix: pf-v6-c-sidebar
|
|
|
176
176
|
### Responsive panel width
|
|
177
177
|
|
|
178
178
|
```html
|
|
179
|
-
<div class="pf-v6-c-sidebar">
|
|
179
|
+
<div class="pf-v6-c-sidebar" tabindex="0">
|
|
180
180
|
<div class="pf-v6-c-sidebar__main">
|
|
181
181
|
<div
|
|
182
182
|
class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-width-50 pf-m-width-33-on-lg pf-m-width-75-on-xl"
|