@patternfly/patternfly 6.3.0-prerelease.65 → 6.3.0-prerelease.66
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/FormControl/form-control.css +6 -1
- package/components/FormControl/form-control.scss +8 -3
- package/components/_index.css +6 -1
- package/docs/components/JumpLinks/examples/JumpLinks.md +164 -77
- package/docs/demos/Drawer/examples/Drawer.md +0 -2
- package/docs/demos/JumpLinks/examples/JumpLinks.md +0 -5
- package/package.json +2 -2
- package/patternfly-no-globals.css +6 -1
- package/patternfly.css +6 -1
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -158,6 +158,12 @@
|
|
|
158
158
|
.pf-v6-c-form-control > :is(input, select) {
|
|
159
159
|
text-overflow: ellipsis;
|
|
160
160
|
}
|
|
161
|
+
.pf-v6-c-form-control > select {
|
|
162
|
+
background-color: var(--pf-v6-c-form-control--BackgroundColor);
|
|
163
|
+
}
|
|
164
|
+
.pf-v6-c-form-control > select * {
|
|
165
|
+
color: var(--pf-v6-c-form-control--Color);
|
|
166
|
+
}
|
|
161
167
|
.pf-v6-c-form-control:has(input) {
|
|
162
168
|
--pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__input--PaddingBlockStart);
|
|
163
169
|
--pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__input--PaddingBlockEnd);
|
|
@@ -303,7 +309,6 @@
|
|
|
303
309
|
--pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__select--PaddingInlineStart);
|
|
304
310
|
--pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) + var(--pf-v6-c-form-control__icon--FontSize));
|
|
305
311
|
--pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
|
|
306
|
-
background-color: var(--pf-v6-c-form-control--BackgroundColor);
|
|
307
312
|
}
|
|
308
313
|
.pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
|
|
309
314
|
padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
|
|
@@ -205,6 +205,14 @@
|
|
|
205
205
|
text-overflow: ellipsis;
|
|
206
206
|
}
|
|
207
207
|
|
|
208
|
+
> select {
|
|
209
|
+
background-color: var(--#{$form-control}--BackgroundColor); // needed for OS/browser combos where dark theme styles aren't applied properly. DO NOT REMOVE!
|
|
210
|
+
|
|
211
|
+
* {
|
|
212
|
+
color: var(--#{$form-control}--Color); // needed for OS/browser combos where dark theme styles aren't applied properly. DO NOT REMOVE!
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
|
|
208
216
|
@at-root .#{$form-control} {
|
|
209
217
|
&:has(input) {
|
|
210
218
|
--#{$form-control}--PaddingBlockStart: var(--#{$form-control}__input--PaddingBlockStart);
|
|
@@ -393,9 +401,6 @@
|
|
|
393
401
|
--#{$form-control}--PaddingInlineEnd: calc(var(--#{$form-control}__select--PaddingInlineEnd) - 1px);
|
|
394
402
|
--#{$form-control}--PaddingInlineStart: calc(var(--#{$form-control}__select--PaddingInlineStart) - 4px);
|
|
395
403
|
}
|
|
396
|
-
|
|
397
|
-
// We need this property for certain Linux distros/non-Mac OS where dark theme styles aren't applied properly.
|
|
398
|
-
background-color: var(--#{$form-control}--BackgroundColor);
|
|
399
404
|
}
|
|
400
405
|
|
|
401
406
|
&.pf-m-placeholder > select {
|
package/components/_index.css
CHANGED
|
@@ -7588,6 +7588,12 @@ ul) {
|
|
|
7588
7588
|
.pf-v6-c-form-control > :is(input, select) {
|
|
7589
7589
|
text-overflow: ellipsis;
|
|
7590
7590
|
}
|
|
7591
|
+
.pf-v6-c-form-control > select {
|
|
7592
|
+
background-color: var(--pf-v6-c-form-control--BackgroundColor);
|
|
7593
|
+
}
|
|
7594
|
+
.pf-v6-c-form-control > select * {
|
|
7595
|
+
color: var(--pf-v6-c-form-control--Color);
|
|
7596
|
+
}
|
|
7591
7597
|
.pf-v6-c-form-control:has(input) {
|
|
7592
7598
|
--pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__input--PaddingBlockStart);
|
|
7593
7599
|
--pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__input--PaddingBlockEnd);
|
|
@@ -7733,7 +7739,6 @@ ul) {
|
|
|
7733
7739
|
--pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__select--PaddingInlineStart);
|
|
7734
7740
|
--pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) + var(--pf-v6-c-form-control__icon--FontSize));
|
|
7735
7741
|
--pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
|
|
7736
|
-
background-color: var(--pf-v6-c-form-control--BackgroundColor);
|
|
7737
7742
|
}
|
|
7738
7743
|
.pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
|
|
7739
7744
|
padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
|
|
@@ -7,8 +7,12 @@ cssPrefix: pf-v6-c-jump-links
|
|
|
7
7
|
### Horizontal default
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
-
<nav class="pf-v6-c-jump-links">
|
|
11
|
-
<ul
|
|
10
|
+
<nav class="pf-v6-c-jump-links" aria-label="Horizontal default example">
|
|
11
|
+
<ul
|
|
12
|
+
class="pf-v6-c-jump-links__list"
|
|
13
|
+
role="list"
|
|
14
|
+
aria-label="Horizontal default example"
|
|
15
|
+
>
|
|
12
16
|
<li class="pf-v6-c-jump-links__item">
|
|
13
17
|
<span class="pf-v6-c-jump-links__link">
|
|
14
18
|
<a class="pf-v6-c-button pf-m-link" href="#">
|
|
@@ -18,7 +22,7 @@ cssPrefix: pf-v6-c-jump-links
|
|
|
18
22
|
</a>
|
|
19
23
|
</span>
|
|
20
24
|
</li>
|
|
21
|
-
<li class="pf-v6-c-jump-links__item pf-m-current">
|
|
25
|
+
<li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
|
|
22
26
|
<span class="pf-v6-c-jump-links__link">
|
|
23
27
|
<a class="pf-v6-c-button pf-m-link" href="#">
|
|
24
28
|
<span class="pf-v6-c-button__text">
|
|
@@ -44,8 +48,15 @@ cssPrefix: pf-v6-c-jump-links
|
|
|
44
48
|
### Horizontal with centered list
|
|
45
49
|
|
|
46
50
|
```html
|
|
47
|
-
<nav
|
|
48
|
-
|
|
51
|
+
<nav
|
|
52
|
+
class="pf-v6-c-jump-links pf-m-center"
|
|
53
|
+
aria-label="Horizontal with centered list example"
|
|
54
|
+
>
|
|
55
|
+
<ul
|
|
56
|
+
class="pf-v6-c-jump-links__list"
|
|
57
|
+
role="list"
|
|
58
|
+
aria-label="Horizontal with centered list example"
|
|
59
|
+
>
|
|
49
60
|
<li class="pf-v6-c-jump-links__item">
|
|
50
61
|
<span class="pf-v6-c-jump-links__link">
|
|
51
62
|
<a class="pf-v6-c-button pf-m-link" href="#">
|
|
@@ -55,7 +66,7 @@ cssPrefix: pf-v6-c-jump-links
|
|
|
55
66
|
</a>
|
|
56
67
|
</span>
|
|
57
68
|
</li>
|
|
58
|
-
<li class="pf-v6-c-jump-links__item pf-m-current">
|
|
69
|
+
<li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
|
|
59
70
|
<span class="pf-v6-c-jump-links__link">
|
|
60
71
|
<a class="pf-v6-c-button pf-m-link" href="#">
|
|
61
72
|
<span class="pf-v6-c-button__text">
|
|
@@ -81,12 +92,21 @@ cssPrefix: pf-v6-c-jump-links
|
|
|
81
92
|
### Horizontal with label
|
|
82
93
|
|
|
83
94
|
```html
|
|
84
|
-
<nav class="pf-v6-c-jump-links" aria-label="
|
|
95
|
+
<nav class="pf-v6-c-jump-links" aria-label="Horizontal with label example">
|
|
85
96
|
<div class="pf-v6-c-jump-links__main">
|
|
86
|
-
<div
|
|
87
|
-
|
|
97
|
+
<div
|
|
98
|
+
class="pf-v6-c-jump-links__header"
|
|
99
|
+
id="horizontal-with-label-header-one"
|
|
100
|
+
>
|
|
101
|
+
<div
|
|
102
|
+
class="pf-v6-c-jump-links__label"
|
|
103
|
+
>Jump to horizontal with label example sections one</div>
|
|
88
104
|
</div>
|
|
89
|
-
<ul
|
|
105
|
+
<ul
|
|
106
|
+
class="pf-v6-c-jump-links__list"
|
|
107
|
+
role="list"
|
|
108
|
+
aria-labelledby="horizontal-with-label-header-one"
|
|
109
|
+
>
|
|
90
110
|
<li class="pf-v6-c-jump-links__item">
|
|
91
111
|
<span class="pf-v6-c-jump-links__link">
|
|
92
112
|
<a class="pf-v6-c-button pf-m-link" href="#">
|
|
@@ -96,7 +116,7 @@ cssPrefix: pf-v6-c-jump-links
|
|
|
96
116
|
</a>
|
|
97
117
|
</span>
|
|
98
118
|
</li>
|
|
99
|
-
<li class="pf-v6-c-jump-links__item pf-m-current">
|
|
119
|
+
<li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
|
|
100
120
|
<span class="pf-v6-c-jump-links__link">
|
|
101
121
|
<a class="pf-v6-c-button pf-m-link" href="#">
|
|
102
122
|
<span class="pf-v6-c-button__text">
|
|
@@ -118,12 +138,24 @@ cssPrefix: pf-v6-c-jump-links
|
|
|
118
138
|
</div>
|
|
119
139
|
</nav>
|
|
120
140
|
<br />
|
|
121
|
-
<nav
|
|
141
|
+
<nav
|
|
142
|
+
class="pf-v6-c-jump-links pf-m-center"
|
|
143
|
+
aria-label="Horizontal with label second example"
|
|
144
|
+
>
|
|
122
145
|
<div class="pf-v6-c-jump-links__main">
|
|
123
|
-
<div
|
|
124
|
-
|
|
146
|
+
<div
|
|
147
|
+
class="pf-v6-c-jump-links__header"
|
|
148
|
+
id="horizontal-with-label-header-two"
|
|
149
|
+
>
|
|
150
|
+
<div
|
|
151
|
+
class="pf-v6-c-jump-links__label"
|
|
152
|
+
>Jump to horizontal with label example sections two</div>
|
|
125
153
|
</div>
|
|
126
|
-
<ul
|
|
154
|
+
<ul
|
|
155
|
+
class="pf-v6-c-jump-links__list"
|
|
156
|
+
role="list"
|
|
157
|
+
aria-labelledby="horizontal-with-label-header-two"
|
|
158
|
+
>
|
|
127
159
|
<li class="pf-v6-c-jump-links__item">
|
|
128
160
|
<span class="pf-v6-c-jump-links__link">
|
|
129
161
|
<a class="pf-v6-c-button pf-m-link" href="#">
|
|
@@ -133,7 +165,7 @@ cssPrefix: pf-v6-c-jump-links
|
|
|
133
165
|
</a>
|
|
134
166
|
</span>
|
|
135
167
|
</li>
|
|
136
|
-
<li class="pf-v6-c-jump-links__item pf-m-current">
|
|
168
|
+
<li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
|
|
137
169
|
<span class="pf-v6-c-jump-links__link">
|
|
138
170
|
<a class="pf-v6-c-button pf-m-link" href="#">
|
|
139
171
|
<span class="pf-v6-c-button__text">
|
|
@@ -160,8 +192,15 @@ cssPrefix: pf-v6-c-jump-links
|
|
|
160
192
|
### Vertical default
|
|
161
193
|
|
|
162
194
|
```html
|
|
163
|
-
<nav
|
|
164
|
-
|
|
195
|
+
<nav
|
|
196
|
+
class="pf-v6-c-jump-links pf-m-vertical"
|
|
197
|
+
aria-label="Vertical default example"
|
|
198
|
+
>
|
|
199
|
+
<ul
|
|
200
|
+
class="pf-v6-c-jump-links__list"
|
|
201
|
+
role="list"
|
|
202
|
+
aria-label="Vertical default example"
|
|
203
|
+
>
|
|
165
204
|
<li class="pf-v6-c-jump-links__item">
|
|
166
205
|
<span class="pf-v6-c-jump-links__link">
|
|
167
206
|
<a class="pf-v6-c-button pf-m-link" href="#">
|
|
@@ -171,7 +210,7 @@ cssPrefix: pf-v6-c-jump-links
|
|
|
171
210
|
</a>
|
|
172
211
|
</span>
|
|
173
212
|
</li>
|
|
174
|
-
<li class="pf-v6-c-jump-links__item pf-m-current">
|
|
213
|
+
<li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
|
|
175
214
|
<span class="pf-v6-c-jump-links__link">
|
|
176
215
|
<a class="pf-v6-c-button pf-m-link" href="#">
|
|
177
216
|
<span class="pf-v6-c-button__text">
|
|
@@ -215,11 +254,20 @@ cssPrefix: pf-v6-c-jump-links
|
|
|
215
254
|
### Vertical with label
|
|
216
255
|
|
|
217
256
|
```html
|
|
218
|
-
<nav
|
|
219
|
-
|
|
220
|
-
|
|
257
|
+
<nav
|
|
258
|
+
class="pf-v6-c-jump-links pf-m-vertical"
|
|
259
|
+
aria-label="Vertical with label example"
|
|
260
|
+
>
|
|
261
|
+
<div class="pf-v6-c-jump-links__header" id="vertical-with-label-header">
|
|
262
|
+
<div
|
|
263
|
+
class="pf-v6-c-jump-links__label"
|
|
264
|
+
>Jump to vertical with label example sections</div>
|
|
221
265
|
</div>
|
|
222
|
-
<ul
|
|
266
|
+
<ul
|
|
267
|
+
class="pf-v6-c-jump-links__list"
|
|
268
|
+
role="list"
|
|
269
|
+
aria-labelledby="vertical-with-label-header"
|
|
270
|
+
>
|
|
223
271
|
<li class="pf-v6-c-jump-links__item">
|
|
224
272
|
<span class="pf-v6-c-jump-links__link">
|
|
225
273
|
<a class="pf-v6-c-button pf-m-link" href="#">
|
|
@@ -229,7 +277,7 @@ cssPrefix: pf-v6-c-jump-links
|
|
|
229
277
|
</a>
|
|
230
278
|
</span>
|
|
231
279
|
</li>
|
|
232
|
-
<li class="pf-v6-c-jump-links__item pf-m-current">
|
|
280
|
+
<li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
|
|
233
281
|
<span class="pf-v6-c-jump-links__link">
|
|
234
282
|
<a class="pf-v6-c-button pf-m-link" href="#">
|
|
235
283
|
<span class="pf-v6-c-button__text">
|
|
@@ -273,12 +321,24 @@ cssPrefix: pf-v6-c-jump-links
|
|
|
273
321
|
### Vertical with inactive subsections
|
|
274
322
|
|
|
275
323
|
```html
|
|
276
|
-
<nav
|
|
277
|
-
|
|
278
|
-
|
|
324
|
+
<nav
|
|
325
|
+
class="pf-v6-c-jump-links pf-m-vertical"
|
|
326
|
+
aria-label="Vertical with inactive subsections example"
|
|
327
|
+
>
|
|
328
|
+
<div
|
|
329
|
+
class="pf-v6-c-jump-links__header"
|
|
330
|
+
id="vertical-with-inactive-subsections-header"
|
|
331
|
+
>
|
|
332
|
+
<div
|
|
333
|
+
class="pf-v6-c-jump-links__label"
|
|
334
|
+
>Jump to vertical with inactive subsections example sections</div>
|
|
279
335
|
</div>
|
|
280
|
-
<ul
|
|
281
|
-
|
|
336
|
+
<ul
|
|
337
|
+
class="pf-v6-c-jump-links__list"
|
|
338
|
+
role="list"
|
|
339
|
+
aria-labelledby="vertical-with-inactive-subsections-header"
|
|
340
|
+
>
|
|
341
|
+
<li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
|
|
282
342
|
<span class="pf-v6-c-jump-links__link">
|
|
283
343
|
<a class="pf-v6-c-button pf-m-link" href="#">
|
|
284
344
|
<span class="pf-v6-c-button__text">
|
|
@@ -304,7 +364,11 @@ cssPrefix: pf-v6-c-jump-links
|
|
|
304
364
|
</span>
|
|
305
365
|
</a>
|
|
306
366
|
</span>
|
|
307
|
-
<ul
|
|
367
|
+
<ul
|
|
368
|
+
class="pf-v6-c-jump-links__list"
|
|
369
|
+
role="list"
|
|
370
|
+
aria-label="Second inactive subsection"
|
|
371
|
+
>
|
|
308
372
|
<li class="pf-v6-c-jump-links__item">
|
|
309
373
|
<span class="pf-v6-c-jump-links__link">
|
|
310
374
|
<a class="pf-v6-c-button pf-m-link" href="#">
|
|
@@ -351,11 +415,23 @@ cssPrefix: pf-v6-c-jump-links
|
|
|
351
415
|
### Vertical with active subsections
|
|
352
416
|
|
|
353
417
|
```html
|
|
354
|
-
<nav
|
|
355
|
-
|
|
356
|
-
|
|
418
|
+
<nav
|
|
419
|
+
class="pf-v6-c-jump-links pf-m-vertical"
|
|
420
|
+
aria-label="Vertical with active subsections example"
|
|
421
|
+
>
|
|
422
|
+
<div
|
|
423
|
+
class="pf-v6-c-jump-links__header"
|
|
424
|
+
id="vertical-with-active-subsections-header"
|
|
425
|
+
>
|
|
426
|
+
<div
|
|
427
|
+
class="pf-v6-c-jump-links__label"
|
|
428
|
+
>Jump to vertical with active subsections example sections</div>
|
|
357
429
|
</div>
|
|
358
|
-
<ul
|
|
430
|
+
<ul
|
|
431
|
+
class="pf-v6-c-jump-links__list"
|
|
432
|
+
role="list"
|
|
433
|
+
aria-labelledby="vertical-with-active-subsections-header"
|
|
434
|
+
>
|
|
359
435
|
<li class="pf-v6-c-jump-links__item">
|
|
360
436
|
<span class="pf-v6-c-jump-links__link">
|
|
361
437
|
<a class="pf-v6-c-button pf-m-link" href="#">
|
|
@@ -382,8 +458,15 @@ cssPrefix: pf-v6-c-jump-links
|
|
|
382
458
|
</span>
|
|
383
459
|
</a>
|
|
384
460
|
</span>
|
|
385
|
-
<ul
|
|
386
|
-
|
|
461
|
+
<ul
|
|
462
|
+
class="pf-v6-c-jump-links__list"
|
|
463
|
+
role="list"
|
|
464
|
+
aria-label="Second active subsection"
|
|
465
|
+
>
|
|
466
|
+
<li
|
|
467
|
+
class="pf-v6-c-jump-links__item pf-m-current"
|
|
468
|
+
aria-current="location"
|
|
469
|
+
>
|
|
387
470
|
<span class="pf-v6-c-jump-links__link">
|
|
388
471
|
<a class="pf-v6-c-button pf-m-link" href="#">
|
|
389
472
|
<span class="pf-v6-c-button__text">
|
|
@@ -431,26 +514,26 @@ cssPrefix: pf-v6-c-jump-links
|
|
|
431
514
|
```html
|
|
432
515
|
<nav
|
|
433
516
|
class="pf-v6-c-jump-links pf-m-vertical pf-m-expandable"
|
|
434
|
-
aria-label="
|
|
517
|
+
aria-label="Expandable example"
|
|
435
518
|
>
|
|
436
|
-
<div class="pf-v6-c-jump-links__header">
|
|
519
|
+
<div class="pf-v6-c-jump-links__header" id="expandable-header-header">
|
|
437
520
|
<div class="pf-v6-c-jump-links__toggle">
|
|
438
|
-
<button
|
|
439
|
-
class="pf-v6-c-button pf-m-plain"
|
|
440
|
-
type="button"
|
|
441
|
-
aria-label="Toggle jump links"
|
|
442
|
-
>
|
|
521
|
+
<button class="pf-v6-c-button pf-m-plain" type="button">
|
|
443
522
|
<span class="pf-v6-c-button__icon pf-m-start">
|
|
444
523
|
<span class="pf-v6-c-jump-links__toggle-icon">
|
|
445
524
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
446
525
|
</span>
|
|
447
526
|
</span>
|
|
448
|
-
<span class="pf-v6-c-button__text">Jump to
|
|
527
|
+
<span class="pf-v6-c-button__text">Jump to expandable example sections</span>
|
|
449
528
|
</button>
|
|
450
529
|
</div>
|
|
451
|
-
<div class="pf-v6-c-jump-links__label">Jump to
|
|
530
|
+
<div class="pf-v6-c-jump-links__label">Jump to expandable example sections</div>
|
|
452
531
|
</div>
|
|
453
|
-
<ul
|
|
532
|
+
<ul
|
|
533
|
+
class="pf-v6-c-jump-links__list"
|
|
534
|
+
role="list"
|
|
535
|
+
aria-labelledby="expandable-header-header"
|
|
536
|
+
>
|
|
454
537
|
<li class="pf-v6-c-jump-links__item">
|
|
455
538
|
<span class="pf-v6-c-jump-links__link">
|
|
456
539
|
<a class="pf-v6-c-button pf-m-link" href="#">
|
|
@@ -460,7 +543,7 @@ cssPrefix: pf-v6-c-jump-links
|
|
|
460
543
|
</a>
|
|
461
544
|
</span>
|
|
462
545
|
</li>
|
|
463
|
-
<li class="pf-v6-c-jump-links__item pf-m-current">
|
|
546
|
+
<li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
|
|
464
547
|
<span class="pf-v6-c-jump-links__link">
|
|
465
548
|
<a class="pf-v6-c-button pf-m-link" href="#">
|
|
466
549
|
<span class="pf-v6-c-button__text">
|
|
@@ -506,27 +589,26 @@ cssPrefix: pf-v6-c-jump-links
|
|
|
506
589
|
```html
|
|
507
590
|
<nav
|
|
508
591
|
class="pf-v6-c-jump-links pf-m-vertical pf-m-expandable pf-m-expanded"
|
|
509
|
-
aria-label="
|
|
592
|
+
aria-label="Expanded example"
|
|
510
593
|
>
|
|
511
|
-
<div class="pf-v6-c-jump-links__header">
|
|
594
|
+
<div class="pf-v6-c-jump-links__header" id="expanded-header">
|
|
512
595
|
<div class="pf-v6-c-jump-links__toggle">
|
|
513
|
-
<button
|
|
514
|
-
class="pf-v6-c-button pf-m-plain"
|
|
515
|
-
type="button"
|
|
516
|
-
aria-expanded="true"
|
|
517
|
-
aria-label="Toggle jump links"
|
|
518
|
-
>
|
|
596
|
+
<button class="pf-v6-c-button pf-m-plain" type="button">
|
|
519
597
|
<span class="pf-v6-c-button__icon pf-m-start">
|
|
520
598
|
<span class="pf-v6-c-jump-links__toggle-icon">
|
|
521
599
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
522
600
|
</span>
|
|
523
601
|
</span>
|
|
524
|
-
<span class="pf-v6-c-button__text">Jump to
|
|
602
|
+
<span class="pf-v6-c-button__text">Jump to expanded example sections</span>
|
|
525
603
|
</button>
|
|
526
604
|
</div>
|
|
527
|
-
<div class="pf-v6-c-jump-links__label">Jump to
|
|
605
|
+
<div class="pf-v6-c-jump-links__label">Jump to expanded example sections</div>
|
|
528
606
|
</div>
|
|
529
|
-
<ul
|
|
607
|
+
<ul
|
|
608
|
+
class="pf-v6-c-jump-links__list"
|
|
609
|
+
role="list"
|
|
610
|
+
aria-labelledby="expanded-header"
|
|
611
|
+
>
|
|
530
612
|
<li class="pf-v6-c-jump-links__item">
|
|
531
613
|
<span class="pf-v6-c-jump-links__link">
|
|
532
614
|
<a class="pf-v6-c-button pf-m-link" href="#">
|
|
@@ -536,7 +618,7 @@ cssPrefix: pf-v6-c-jump-links
|
|
|
536
618
|
</a>
|
|
537
619
|
</span>
|
|
538
620
|
</li>
|
|
539
|
-
<li class="pf-v6-c-jump-links__item pf-m-current">
|
|
621
|
+
<li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
|
|
540
622
|
<span class="pf-v6-c-jump-links__link">
|
|
541
623
|
<a class="pf-v6-c-button pf-m-link" href="#">
|
|
542
624
|
<span class="pf-v6-c-button__text">
|
|
@@ -582,26 +664,30 @@ cssPrefix: pf-v6-c-jump-links
|
|
|
582
664
|
```html
|
|
583
665
|
<nav
|
|
584
666
|
class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl pf-m-expandable"
|
|
585
|
-
aria-label="
|
|
667
|
+
aria-label="Expandable responsive"
|
|
586
668
|
>
|
|
587
|
-
<div class="pf-v6-c-jump-links__header">
|
|
669
|
+
<div class="pf-v6-c-jump-links__header" id="expandable-responsive-header">
|
|
588
670
|
<div class="pf-v6-c-jump-links__toggle">
|
|
589
|
-
<button
|
|
590
|
-
class="pf-v6-c-button pf-m-plain"
|
|
591
|
-
type="button"
|
|
592
|
-
aria-label="Toggle jump links"
|
|
593
|
-
>
|
|
671
|
+
<button class="pf-v6-c-button pf-m-plain" type="button">
|
|
594
672
|
<span class="pf-v6-c-button__icon pf-m-start">
|
|
595
673
|
<span class="pf-v6-c-jump-links__toggle-icon">
|
|
596
674
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
597
675
|
</span>
|
|
598
676
|
</span>
|
|
599
|
-
<span
|
|
677
|
+
<span
|
|
678
|
+
class="pf-v6-c-button__text"
|
|
679
|
+
>Jump to expandable responsive example sections</span>
|
|
600
680
|
</button>
|
|
601
681
|
</div>
|
|
602
|
-
<div
|
|
682
|
+
<div
|
|
683
|
+
class="pf-v6-c-jump-links__label"
|
|
684
|
+
>Jump to expandable responsive example sections</div>
|
|
603
685
|
</div>
|
|
604
|
-
<ul
|
|
686
|
+
<ul
|
|
687
|
+
class="pf-v6-c-jump-links__list"
|
|
688
|
+
role="list"
|
|
689
|
+
aria-labelledby="expandable-responsive-header"
|
|
690
|
+
>
|
|
605
691
|
<li class="pf-v6-c-jump-links__item">
|
|
606
692
|
<span class="pf-v6-c-jump-links__link">
|
|
607
693
|
<a class="pf-v6-c-button pf-m-link" href="#">
|
|
@@ -611,7 +697,7 @@ cssPrefix: pf-v6-c-jump-links
|
|
|
611
697
|
</a>
|
|
612
698
|
</span>
|
|
613
699
|
</li>
|
|
614
|
-
<li class="pf-v6-c-jump-links__item pf-m-current">
|
|
700
|
+
<li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
|
|
615
701
|
<span class="pf-v6-c-jump-links__link">
|
|
616
702
|
<a class="pf-v6-c-button pf-m-link" href="#">
|
|
617
703
|
<span class="pf-v6-c-button__text">
|
|
@@ -657,14 +743,11 @@ cssPrefix: pf-v6-c-jump-links
|
|
|
657
743
|
```html
|
|
658
744
|
<nav
|
|
659
745
|
class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl pf-m-expandable"
|
|
746
|
+
aria-label="Expandable responsive with no label"
|
|
660
747
|
>
|
|
661
748
|
<div class="pf-v6-c-jump-links__header">
|
|
662
749
|
<div class="pf-v6-c-jump-links__toggle">
|
|
663
|
-
<button
|
|
664
|
-
class="pf-v6-c-button pf-m-plain"
|
|
665
|
-
type="button"
|
|
666
|
-
aria-label="Toggle jump links"
|
|
667
|
-
>
|
|
750
|
+
<button class="pf-v6-c-button pf-m-plain" type="button">
|
|
668
751
|
<span class="pf-v6-c-button__icon pf-m-start">
|
|
669
752
|
<span class="pf-v6-c-jump-links__toggle-icon">
|
|
670
753
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
@@ -674,7 +757,11 @@ cssPrefix: pf-v6-c-jump-links
|
|
|
674
757
|
</button>
|
|
675
758
|
</div>
|
|
676
759
|
</div>
|
|
677
|
-
<ul
|
|
760
|
+
<ul
|
|
761
|
+
class="pf-v6-c-jump-links__list"
|
|
762
|
+
role="list"
|
|
763
|
+
aria-label="Expandable responsive with no label example"
|
|
764
|
+
>
|
|
678
765
|
<li class="pf-v6-c-jump-links__item">
|
|
679
766
|
<span class="pf-v6-c-jump-links__link">
|
|
680
767
|
<a class="pf-v6-c-button pf-m-link" href="#">
|
|
@@ -684,7 +771,7 @@ cssPrefix: pf-v6-c-jump-links
|
|
|
684
771
|
</a>
|
|
685
772
|
</span>
|
|
686
773
|
</li>
|
|
687
|
-
<li class="pf-v6-c-jump-links__item pf-m-current">
|
|
774
|
+
<li class="pf-v6-c-jump-links__item pf-m-current" aria-current="location">
|
|
688
775
|
<span class="pf-v6-c-jump-links__link">
|
|
689
776
|
<a class="pf-v6-c-button pf-m-link" href="#">
|
|
690
777
|
<span class="pf-v6-c-button__text">
|
|
@@ -1435,7 +1435,6 @@ wrapperTag: div
|
|
|
1435
1435
|
<button
|
|
1436
1436
|
class="pf-v6-c-button pf-m-plain"
|
|
1437
1437
|
type="button"
|
|
1438
|
-
aria-label="Toggle jump links"
|
|
1439
1438
|
>
|
|
1440
1439
|
<span class="pf-v6-c-button__icon pf-m-start">
|
|
1441
1440
|
<span class="pf-v6-c-jump-links__toggle-icon">
|
|
@@ -1857,7 +1856,6 @@ wrapperTag: div
|
|
|
1857
1856
|
<button
|
|
1858
1857
|
class="pf-v6-c-button pf-m-plain"
|
|
1859
1858
|
type="button"
|
|
1860
|
-
aria-label="Toggle jump links"
|
|
1861
1859
|
>
|
|
1862
1860
|
<span class="pf-v6-c-button__icon pf-m-start">
|
|
1863
1861
|
<span class="pf-v6-c-jump-links__toggle-icon">
|
|
@@ -300,7 +300,6 @@ section: components
|
|
|
300
300
|
<button
|
|
301
301
|
class="pf-v6-c-button pf-m-plain"
|
|
302
302
|
type="button"
|
|
303
|
-
aria-label="Toggle jump links"
|
|
304
303
|
>
|
|
305
304
|
<span class="pf-v6-c-button__icon pf-m-start">
|
|
306
305
|
<span class="pf-v6-c-jump-links__toggle-icon">
|
|
@@ -734,7 +733,6 @@ section: components
|
|
|
734
733
|
<button
|
|
735
734
|
class="pf-v6-c-button pf-m-plain"
|
|
736
735
|
type="button"
|
|
737
|
-
aria-label="Toggle jump links"
|
|
738
736
|
>
|
|
739
737
|
<span class="pf-v6-c-button__icon pf-m-start">
|
|
740
738
|
<span class="pf-v6-c-jump-links__toggle-icon">
|
|
@@ -1168,7 +1166,6 @@ section: components
|
|
|
1168
1166
|
<button
|
|
1169
1167
|
class="pf-v6-c-button pf-m-plain"
|
|
1170
1168
|
type="button"
|
|
1171
|
-
aria-label="Toggle jump links"
|
|
1172
1169
|
>
|
|
1173
1170
|
<span class="pf-v6-c-button__icon pf-m-start">
|
|
1174
1171
|
<span class="pf-v6-c-jump-links__toggle-icon">
|
|
@@ -1939,7 +1936,6 @@ section: components
|
|
|
1939
1936
|
<button
|
|
1940
1937
|
class="pf-v6-c-button pf-m-plain"
|
|
1941
1938
|
type="button"
|
|
1942
|
-
aria-label="Toggle jump links"
|
|
1943
1939
|
>
|
|
1944
1940
|
<span class="pf-v6-c-button__icon pf-m-start">
|
|
1945
1941
|
<span class="pf-v6-c-jump-links__toggle-icon">
|
|
@@ -2361,7 +2357,6 @@ section: components
|
|
|
2361
2357
|
<button
|
|
2362
2358
|
class="pf-v6-c-button pf-m-plain"
|
|
2363
2359
|
type="button"
|
|
2364
|
-
aria-label="Toggle jump links"
|
|
2365
2360
|
>
|
|
2366
2361
|
<span class="pf-v6-c-button__icon pf-m-start">
|
|
2367
2362
|
<span class="pf-v6-c-jump-links__toggle-icon">
|
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.3.0-prerelease.
|
|
4
|
+
"version": "6.3.0-prerelease.66",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"engines": {
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"@commitlint/config-conventional": "^19.1.0",
|
|
52
52
|
"@fortawesome/fontawesome": "^1.1.8",
|
|
53
53
|
"@octokit/rest": "^20.1.0",
|
|
54
|
-
"@patternfly/documentation-framework": "6.22.
|
|
54
|
+
"@patternfly/documentation-framework": "6.22.6",
|
|
55
55
|
"@patternfly/patternfly-a11y": "5.1.0",
|
|
56
56
|
"@patternfly/react-code-editor": "6.3.1",
|
|
57
57
|
"@patternfly/react-core": "6.3.1",
|
|
@@ -16255,6 +16255,12 @@ ul) {
|
|
|
16255
16255
|
.pf-v6-c-form-control > :is(input, select) {
|
|
16256
16256
|
text-overflow: ellipsis;
|
|
16257
16257
|
}
|
|
16258
|
+
.pf-v6-c-form-control > select {
|
|
16259
|
+
background-color: var(--pf-v6-c-form-control--BackgroundColor);
|
|
16260
|
+
}
|
|
16261
|
+
.pf-v6-c-form-control > select * {
|
|
16262
|
+
color: var(--pf-v6-c-form-control--Color);
|
|
16263
|
+
}
|
|
16258
16264
|
.pf-v6-c-form-control:has(input) {
|
|
16259
16265
|
--pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__input--PaddingBlockStart);
|
|
16260
16266
|
--pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__input--PaddingBlockEnd);
|
|
@@ -16400,7 +16406,6 @@ ul) {
|
|
|
16400
16406
|
--pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__select--PaddingInlineStart);
|
|
16401
16407
|
--pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) + var(--pf-v6-c-form-control__icon--FontSize));
|
|
16402
16408
|
--pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
|
|
16403
|
-
background-color: var(--pf-v6-c-form-control--BackgroundColor);
|
|
16404
16409
|
}
|
|
16405
16410
|
.pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
|
|
16406
16411
|
padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
|
package/patternfly.css
CHANGED
|
@@ -16395,6 +16395,12 @@ ul) {
|
|
|
16395
16395
|
.pf-v6-c-form-control > :is(input, select) {
|
|
16396
16396
|
text-overflow: ellipsis;
|
|
16397
16397
|
}
|
|
16398
|
+
.pf-v6-c-form-control > select {
|
|
16399
|
+
background-color: var(--pf-v6-c-form-control--BackgroundColor);
|
|
16400
|
+
}
|
|
16401
|
+
.pf-v6-c-form-control > select * {
|
|
16402
|
+
color: var(--pf-v6-c-form-control--Color);
|
|
16403
|
+
}
|
|
16398
16404
|
.pf-v6-c-form-control:has(input) {
|
|
16399
16405
|
--pf-v6-c-form-control--PaddingBlockStart: var(--pf-v6-c-form-control__input--PaddingBlockStart);
|
|
16400
16406
|
--pf-v6-c-form-control--PaddingBlockEnd: var(--pf-v6-c-form-control__input--PaddingBlockEnd);
|
|
@@ -16540,7 +16546,6 @@ ul) {
|
|
|
16540
16546
|
--pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control__select--PaddingInlineStart);
|
|
16541
16547
|
--pf-v6-c-form-control--PaddingInlineEnd: calc(var(--pf-v6-c-form-control__select--PaddingInlineEnd) + var(--pf-v6-c-form-control__icon--FontSize));
|
|
16542
16548
|
--pf-v6-c-form-control__utilities--PaddingInlineEnd: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
|
|
16543
|
-
background-color: var(--pf-v6-c-form-control--BackgroundColor);
|
|
16544
16549
|
}
|
|
16545
16550
|
.pf-v6-c-form-control:has(select) .pf-v6-c-form-control__utilities {
|
|
16546
16551
|
padding-inline-end: var(--pf-v6-c-form-control__utilities--select--PaddingInlineEnd);
|