@patternfly/patternfly 6.3.0-prerelease.50 → 6.3.0-prerelease.51
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/README.md
CHANGED
|
@@ -16,11 +16,13 @@ Any of the files above are meant for use in consuming the library. The recommend
|
|
|
16
16
|
|
|
17
17
|
## Development
|
|
18
18
|
|
|
19
|
-
**PatternFly Development requires Node
|
|
19
|
+
**PatternFly Development requires Node v20.18.3 or greater**
|
|
20
20
|
|
|
21
21
|
To setup the PatternFly development environment:
|
|
22
22
|
|
|
23
23
|
- clone the project
|
|
24
|
+
- ensure you have Node.js v20.18.3 or greater installed
|
|
25
|
+
- enable corepack: `corepack enable`
|
|
24
26
|
- run `yarn install` from the project root
|
|
25
27
|
- run `yarn start`
|
|
26
28
|
- open your browser to `http://localhost:8001`
|
|
@@ -21,8 +21,7 @@ cssPrefix: pf-v6-c-clipboard-copy
|
|
|
21
21
|
class="pf-v6-c-button pf-m-control"
|
|
22
22
|
id="basic-editable-copy-button"
|
|
23
23
|
type="button"
|
|
24
|
-
aria-
|
|
25
|
-
aria-label="Copy to clipboard"
|
|
24
|
+
aria-label="Copy to clipboard basic editable example"
|
|
26
25
|
>
|
|
27
26
|
<span class="pf-v6-c-button__icon">
|
|
28
27
|
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
@@ -46,8 +45,7 @@ cssPrefix: pf-v6-c-clipboard-copy
|
|
|
46
45
|
class="pf-v6-c-button pf-m-control"
|
|
47
46
|
id="basic-readonly-copy-button"
|
|
48
47
|
type="button"
|
|
49
|
-
aria-
|
|
50
|
-
aria-label="Copy to clipboard"
|
|
48
|
+
aria-label="Copy to clipboard basic read-only example"
|
|
51
49
|
>
|
|
52
50
|
<span class="pf-v6-c-button__icon">
|
|
53
51
|
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
@@ -67,8 +65,9 @@ cssPrefix: pf-v6-c-clipboard-copy
|
|
|
67
65
|
<button
|
|
68
66
|
class="pf-v6-c-button pf-m-control"
|
|
69
67
|
type="button"
|
|
68
|
+
aria-expanded="false"
|
|
70
69
|
id="expandable-not-expanded-editable-toggle"
|
|
71
|
-
aria-
|
|
70
|
+
aria-label="Toggle unexpanded editable example"
|
|
72
71
|
aria-controls="expandable-not-expanded-editable-content"
|
|
73
72
|
>
|
|
74
73
|
<span class="pf-v6-c-button__icon">
|
|
@@ -88,9 +87,8 @@ cssPrefix: pf-v6-c-clipboard-copy
|
|
|
88
87
|
<button
|
|
89
88
|
class="pf-v6-c-button pf-m-control"
|
|
90
89
|
type="button"
|
|
91
|
-
aria-label="Copy to clipboard"
|
|
90
|
+
aria-label="Copy to clipboard unexpanded editable example"
|
|
92
91
|
id="expandable-not-expanded-editable-copy-button"
|
|
93
|
-
aria-labelledby="expandable-not-expanded-editable-copy-button expandable-not-expanded-editable-text-input"
|
|
94
92
|
>
|
|
95
93
|
<span class="pf-v6-c-button__icon">
|
|
96
94
|
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
@@ -111,7 +109,7 @@ cssPrefix: pf-v6-c-clipboard-copy
|
|
|
111
109
|
type="button"
|
|
112
110
|
aria-expanded="true"
|
|
113
111
|
id="expandable-expanded-editable-toggle"
|
|
114
|
-
aria-
|
|
112
|
+
aria-label="Toggle expanded editable example"
|
|
115
113
|
aria-controls="expandable-expanded-editable-content"
|
|
116
114
|
>
|
|
117
115
|
<span class="pf-v6-c-button__icon">
|
|
@@ -132,9 +130,8 @@ cssPrefix: pf-v6-c-clipboard-copy
|
|
|
132
130
|
<button
|
|
133
131
|
class="pf-v6-c-button pf-m-control"
|
|
134
132
|
type="button"
|
|
135
|
-
aria-label="Copy to clipboard"
|
|
133
|
+
aria-label="Copy to clipboard expanded editable example"
|
|
136
134
|
id="expandable-expanded-editable-copy-button"
|
|
137
|
-
aria-labelledby="expandable-expanded-editable-copy-button expandable-expanded-editable-text-input"
|
|
138
135
|
>
|
|
139
136
|
<span class="pf-v6-c-button__icon">
|
|
140
137
|
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
@@ -154,8 +151,9 @@ cssPrefix: pf-v6-c-clipboard-copy
|
|
|
154
151
|
<button
|
|
155
152
|
class="pf-v6-c-button pf-m-control"
|
|
156
153
|
type="button"
|
|
154
|
+
aria-expanded="false"
|
|
157
155
|
id="expandable-not-expanded-readonly-toggle"
|
|
158
|
-
aria-
|
|
156
|
+
aria-label="Toggle read-only unexpanded example"
|
|
159
157
|
aria-controls="expandable-not-expanded-readonly-content"
|
|
160
158
|
>
|
|
161
159
|
<span class="pf-v6-c-button__icon">
|
|
@@ -176,9 +174,8 @@ cssPrefix: pf-v6-c-clipboard-copy
|
|
|
176
174
|
<button
|
|
177
175
|
class="pf-v6-c-button pf-m-control"
|
|
178
176
|
type="button"
|
|
179
|
-
aria-label="Copy to clipboard"
|
|
177
|
+
aria-label="Copy to clipboard read-only collapsed example"
|
|
180
178
|
id="expandable-not-expanded-readonly-copy-button"
|
|
181
|
-
aria-labelledby="expandable-not-expanded-readonly-copy-button expandable-not-expanded-readonly-text-input"
|
|
182
179
|
>
|
|
183
180
|
<span class="pf-v6-c-button__icon">
|
|
184
181
|
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
@@ -199,7 +196,7 @@ cssPrefix: pf-v6-c-clipboard-copy
|
|
|
199
196
|
type="button"
|
|
200
197
|
aria-expanded="true"
|
|
201
198
|
id="expandable-expanded-readonly-toggle"
|
|
202
|
-
aria-
|
|
199
|
+
aria-label="Toggle read-only expanded example"
|
|
203
200
|
aria-controls="expandable-expanded-readonly-content"
|
|
204
201
|
>
|
|
205
202
|
<span class="pf-v6-c-button__icon">
|
|
@@ -220,9 +217,8 @@ cssPrefix: pf-v6-c-clipboard-copy
|
|
|
220
217
|
<button
|
|
221
218
|
class="pf-v6-c-button pf-m-control"
|
|
222
219
|
type="button"
|
|
223
|
-
aria-label="Copy to clipboard"
|
|
220
|
+
aria-label="Copy to clipboard read-only expanded example"
|
|
224
221
|
id="expandable-expanded-readonly-copy-button"
|
|
225
|
-
aria-labelledby="expandable-expanded-readonly-copy-button expandable-expanded-readonly-text-input"
|
|
226
222
|
>
|
|
227
223
|
<span class="pf-v6-c-button__icon">
|
|
228
224
|
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
@@ -241,8 +237,9 @@ cssPrefix: pf-v6-c-clipboard-copy
|
|
|
241
237
|
<button
|
|
242
238
|
class="pf-v6-c-button pf-m-control"
|
|
243
239
|
type="button"
|
|
240
|
+
aria-expanded="false"
|
|
244
241
|
id="expandable-not-expanded-code-toggle"
|
|
245
|
-
aria-
|
|
242
|
+
aria-label="Toggle code unexpanded example"
|
|
246
243
|
aria-controls="expandable-not-expanded-code-content"
|
|
247
244
|
>
|
|
248
245
|
<span class="pf-v6-c-button__icon">
|
|
@@ -263,9 +260,8 @@ cssPrefix: pf-v6-c-clipboard-copy
|
|
|
263
260
|
<button
|
|
264
261
|
class="pf-v6-c-button pf-m-control"
|
|
265
262
|
type="button"
|
|
266
|
-
aria-label="Copy to clipboard"
|
|
263
|
+
aria-label="Copy to clipboard code unexpanded example"
|
|
267
264
|
id="expandable-not-expanded-code-copy-button"
|
|
268
|
-
aria-labelledby="expandable-not-expanded-code-copy-button expandable-not-expanded-code-text-input"
|
|
269
265
|
>
|
|
270
266
|
<span class="pf-v6-c-button__icon">
|
|
271
267
|
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
@@ -299,7 +295,7 @@ cssPrefix: pf-v6-c-clipboard-copy
|
|
|
299
295
|
type="button"
|
|
300
296
|
aria-expanded="true"
|
|
301
297
|
id="expandable-expanded-code-toggle"
|
|
302
|
-
aria-
|
|
298
|
+
aria-label="Toggle code expanded example"
|
|
303
299
|
aria-controls="expandable-expanded-code-content"
|
|
304
300
|
>
|
|
305
301
|
<span class="pf-v6-c-button__icon">
|
|
@@ -321,9 +317,8 @@ cssPrefix: pf-v6-c-clipboard-copy
|
|
|
321
317
|
<button
|
|
322
318
|
class="pf-v6-c-button pf-m-control"
|
|
323
319
|
type="button"
|
|
324
|
-
aria-label="Copy to clipboard"
|
|
320
|
+
aria-label="Copy to clipboard code expanded example"
|
|
325
321
|
id="expandable-expanded-code-copy-button"
|
|
326
|
-
aria-labelledby="expandable-expanded-code-copy-button expandable-expanded-code-text-input"
|
|
327
322
|
>
|
|
328
323
|
<span class="pf-v6-c-button__icon">
|
|
329
324
|
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
@@ -362,7 +357,7 @@ cssPrefix: pf-v6-c-clipboard-copy
|
|
|
362
357
|
<button
|
|
363
358
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
364
359
|
type="button"
|
|
365
|
-
aria-label="Copy to clipboard"
|
|
360
|
+
aria-label="Copy to clipboard inline compact example"
|
|
366
361
|
>
|
|
367
362
|
<span class="pf-v6-c-button__icon">
|
|
368
363
|
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
@@ -384,7 +379,7 @@ cssPrefix: pf-v6-c-clipboard-copy
|
|
|
384
379
|
<button
|
|
385
380
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
386
381
|
type="button"
|
|
387
|
-
aria-label="Copy to clipboard"
|
|
382
|
+
aria-label="Copy to clipboard inline compact code example"
|
|
388
383
|
>
|
|
389
384
|
<span class="pf-v6-c-button__icon">
|
|
390
385
|
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
@@ -406,7 +401,7 @@ cssPrefix: pf-v6-c-clipboard-copy
|
|
|
406
401
|
<button
|
|
407
402
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
408
403
|
type="button"
|
|
409
|
-
aria-label="Copy to clipboard"
|
|
404
|
+
aria-label="Copy to clipboard inline compact with additional action example"
|
|
410
405
|
>
|
|
411
406
|
<span class="pf-v6-c-button__icon">
|
|
412
407
|
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
@@ -442,7 +437,7 @@ cssPrefix: pf-v6-c-clipboard-copy
|
|
|
442
437
|
<button
|
|
443
438
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
444
439
|
type="button"
|
|
445
|
-
aria-label="Copy to clipboard"
|
|
440
|
+
aria-label="Copy to clipboard basic inline compact example"
|
|
446
441
|
>
|
|
447
442
|
<span class="pf-v6-c-button__icon">
|
|
448
443
|
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
@@ -467,7 +462,7 @@ cssPrefix: pf-v6-c-clipboard-copy
|
|
|
467
462
|
<button
|
|
468
463
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
469
464
|
type="button"
|
|
470
|
-
aria-label="Copy to clipboard"
|
|
465
|
+
aria-label="Copy to clipboard long inline compact example"
|
|
471
466
|
>
|
|
472
467
|
<span class="pf-v6-c-button__icon">
|
|
473
468
|
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
@@ -491,7 +486,7 @@ cssPrefix: pf-v6-c-clipboard-copy
|
|
|
491
486
|
<button
|
|
492
487
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
493
488
|
type="button"
|
|
494
|
-
aria-label="Copy to clipboard"
|
|
489
|
+
aria-label="Copy to clipboard long block compact example"
|
|
495
490
|
>
|
|
496
491
|
<span class="pf-v6-c-button__icon">
|
|
497
492
|
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
@@ -519,7 +514,7 @@ cssPrefix: pf-v6-c-clipboard-copy
|
|
|
519
514
|
<button
|
|
520
515
|
class="pf-v6-c-button pf-m-no-padding pf-m-plain"
|
|
521
516
|
type="button"
|
|
522
|
-
aria-label="Copy to clipboard"
|
|
517
|
+
aria-label="Copy to clipboard inline compact with truncation example"
|
|
523
518
|
>
|
|
524
519
|
<span class="pf-v6-c-button__icon">
|
|
525
520
|
<i class="fas fa-copy" aria-hidden="true"></i>
|
|
@@ -16,7 +16,7 @@ cssPrefix: pf-v6-c-text-input-group
|
|
|
16
16
|
class="pf-v6-c-text-input-group__text-input"
|
|
17
17
|
type="text"
|
|
18
18
|
value
|
|
19
|
-
aria-label="
|
|
19
|
+
aria-label="Basic"
|
|
20
20
|
/>
|
|
21
21
|
</span>
|
|
22
22
|
</div>
|
|
@@ -35,7 +35,7 @@ cssPrefix: pf-v6-c-text-input-group
|
|
|
35
35
|
type="text"
|
|
36
36
|
disabled
|
|
37
37
|
value="Disabled"
|
|
38
|
-
aria-label="Disabled
|
|
38
|
+
aria-label="Disabled"
|
|
39
39
|
/>
|
|
40
40
|
</span>
|
|
41
41
|
</div>
|
|
@@ -56,7 +56,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
|
|
|
56
56
|
class="pf-v6-c-text-input-group__text-input"
|
|
57
57
|
type="text"
|
|
58
58
|
value="Text input group with plain styling"
|
|
59
|
-
aria-label="
|
|
59
|
+
aria-label="Plain"
|
|
60
60
|
/>
|
|
61
61
|
</span>
|
|
62
62
|
</div>
|
|
@@ -78,7 +78,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
|
|
|
78
78
|
type="text"
|
|
79
79
|
placeholder="placeholder"
|
|
80
80
|
value
|
|
81
|
-
aria-label="
|
|
81
|
+
aria-label="Utilities and icon with placeholder"
|
|
82
82
|
/>
|
|
83
83
|
</span>
|
|
84
84
|
</div>
|
|
@@ -86,7 +86,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
|
|
|
86
86
|
<button
|
|
87
87
|
class="pf-v6-c-button pf-m-plain"
|
|
88
88
|
type="button"
|
|
89
|
-
aria-label="Clear
|
|
89
|
+
aria-label="Clear utilities and icon with placeholder example"
|
|
90
90
|
>
|
|
91
91
|
<span class="pf-v6-c-button__icon">
|
|
92
92
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
@@ -107,7 +107,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
|
|
|
107
107
|
class="pf-v6-c-text-input-group__text-input"
|
|
108
108
|
type="text"
|
|
109
109
|
value="Success validation"
|
|
110
|
-
aria-label="
|
|
110
|
+
aria-label="Success validation"
|
|
111
111
|
/>
|
|
112
112
|
<span class="pf-v6-c-text-input-group__icon pf-m-status">
|
|
113
113
|
<i aria-hidden="true" class="fas fa-check-circle"></i>
|
|
@@ -126,7 +126,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
|
|
|
126
126
|
class="pf-v6-c-text-input-group__text-input"
|
|
127
127
|
type="text"
|
|
128
128
|
value="Warning validation with icon at start"
|
|
129
|
-
aria-label="
|
|
129
|
+
aria-label="Warning validation"
|
|
130
130
|
/>
|
|
131
131
|
<span class="pf-v6-c-text-input-group__icon pf-m-status">
|
|
132
132
|
<i aria-hidden="true" class="fas fa-exclamation-triangle"></i>
|
|
@@ -145,7 +145,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
|
|
|
145
145
|
class="pf-v6-c-text-input-group__text-input"
|
|
146
146
|
type="text"
|
|
147
147
|
value="Error validation with icon at start and utilities"
|
|
148
|
-
aria-label="
|
|
148
|
+
aria-label="Error validation"
|
|
149
149
|
/>
|
|
150
150
|
<span class="pf-v6-c-text-input-group__icon pf-m-status">
|
|
151
151
|
<i aria-hidden="true" class="fas fa-exclamation-circle"></i>
|
|
@@ -156,7 +156,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
|
|
|
156
156
|
<button
|
|
157
157
|
class="pf-v6-c-button pf-m-plain"
|
|
158
158
|
type="button"
|
|
159
|
-
aria-label="Clear
|
|
159
|
+
aria-label="Clear error validation example"
|
|
160
160
|
>
|
|
161
161
|
<span class="pf-v6-c-button__text">
|
|
162
162
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
@@ -362,7 +362,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
|
|
|
362
362
|
class="pf-v6-c-text-input-group__text-input"
|
|
363
363
|
type="text"
|
|
364
364
|
value
|
|
365
|
-
aria-label="
|
|
365
|
+
aria-label="Filters"
|
|
366
366
|
/>
|
|
367
367
|
</span>
|
|
368
368
|
</div>
|
|
@@ -370,7 +370,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
|
|
|
370
370
|
<button
|
|
371
371
|
class="pf-v6-c-button pf-m-plain"
|
|
372
372
|
type="button"
|
|
373
|
-
aria-label="Clear
|
|
373
|
+
aria-label="Clear filter example"
|
|
374
374
|
>
|
|
375
375
|
<span class="pf-v6-c-button__icon">
|
|
376
376
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
@@ -723,7 +723,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
|
|
|
723
723
|
class="pf-v6-c-text-input-group__text-input"
|
|
724
724
|
type="text"
|
|
725
725
|
value
|
|
726
|
-
aria-label="
|
|
726
|
+
aria-label="Filters expanded"
|
|
727
727
|
/>
|
|
728
728
|
</span>
|
|
729
729
|
</div>
|
|
@@ -731,7 +731,7 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
|
|
|
731
731
|
<button
|
|
732
732
|
class="pf-v6-c-button pf-m-plain"
|
|
733
733
|
type="button"
|
|
734
|
-
aria-label="Clear
|
|
734
|
+
aria-label="Clear filters expanded example"
|
|
735
735
|
>
|
|
736
736
|
<span class="pf-v6-c-button__icon">
|
|
737
737
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
@@ -783,7 +783,7 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
783
783
|
type="text"
|
|
784
784
|
placeholder="Find by name"
|
|
785
785
|
value
|
|
786
|
-
aria-label="Search input"
|
|
786
|
+
aria-label="Search input group"
|
|
787
787
|
/>
|
|
788
788
|
</span>
|
|
789
789
|
</div>
|
|
@@ -805,7 +805,7 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
805
805
|
type="text"
|
|
806
806
|
placeholder="Find by name"
|
|
807
807
|
value="Joh"
|
|
808
|
-
aria-label="Search input"
|
|
808
|
+
aria-label="Search input group no match"
|
|
809
809
|
/>
|
|
810
810
|
</span>
|
|
811
811
|
</div>
|
|
@@ -813,7 +813,7 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
813
813
|
<button
|
|
814
814
|
class="pf-v6-c-button pf-m-plain"
|
|
815
815
|
type="button"
|
|
816
|
-
aria-label="Clear input"
|
|
816
|
+
aria-label="Clear search input group no match"
|
|
817
817
|
>
|
|
818
818
|
<span class="pf-v6-c-button__icon">
|
|
819
819
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
@@ -838,16 +838,19 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
838
838
|
type="text"
|
|
839
839
|
placeholder="Find by name"
|
|
840
840
|
value="John Doe"
|
|
841
|
-
aria-label="Search input"
|
|
841
|
+
aria-label="Search input group match with result count"
|
|
842
842
|
/>
|
|
843
843
|
</span>
|
|
844
844
|
</div>
|
|
845
845
|
<div class="pf-v6-c-text-input-group__utilities">
|
|
846
|
-
<span class="pf-v6-c-badge pf-m-read">
|
|
846
|
+
<span class="pf-v6-c-badge pf-m-read">
|
|
847
|
+
<span aria-hidden="true">3</span>
|
|
848
|
+
<span class="pf-v6-screen-reader">3 matching results</span>
|
|
849
|
+
</span>
|
|
847
850
|
<button
|
|
848
851
|
class="pf-v6-c-button pf-m-plain"
|
|
849
852
|
type="button"
|
|
850
|
-
aria-label="Clear input"
|
|
853
|
+
aria-label="Clear search input group match with result count"
|
|
851
854
|
>
|
|
852
855
|
<span class="pf-v6-c-button__icon">
|
|
853
856
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
@@ -872,16 +875,36 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
872
875
|
type="text"
|
|
873
876
|
placeholder="Find by name"
|
|
874
877
|
value="John Doe"
|
|
875
|
-
aria-label="Search input"
|
|
878
|
+
aria-label="Search input group match with navigable options"
|
|
876
879
|
/>
|
|
877
880
|
</span>
|
|
878
881
|
</div>
|
|
879
882
|
<div class="pf-v6-c-text-input-group__utilities">
|
|
880
|
-
<span class="pf-v6-c-badge pf-m-read">
|
|
883
|
+
<span class="pf-v6-c-badge pf-m-read">
|
|
884
|
+
<span aria-hidden="true">1 / 3</span>
|
|
885
|
+
<span class="pf-v6-screen-reader">Showing result 1 / 3</span>
|
|
886
|
+
</span>
|
|
887
|
+
<div class="pf-v6-c-text-input-group__group">
|
|
888
|
+
<button
|
|
889
|
+
class="pf-v6-c-button pf-m-plain"
|
|
890
|
+
type="button"
|
|
891
|
+
aria-label="Previous"
|
|
892
|
+
disabled
|
|
893
|
+
>
|
|
894
|
+
<span class="pf-v6-c-button__icon">
|
|
895
|
+
<i class="fas fa-angle-up fa-fw" aria-hidden="true"></i>
|
|
896
|
+
</span>
|
|
897
|
+
</button>
|
|
898
|
+
<button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Next">
|
|
899
|
+
<span class="pf-v6-c-button__icon">
|
|
900
|
+
<i class="fas fa-angle-down fa-fw" aria-hidden="true"></i>
|
|
901
|
+
</span>
|
|
902
|
+
</button>
|
|
903
|
+
</div>
|
|
881
904
|
<button
|
|
882
905
|
class="pf-v6-c-button pf-m-plain"
|
|
883
906
|
type="button"
|
|
884
|
-
aria-label="Clear input"
|
|
907
|
+
aria-label="Clear search input group match with navigable options"
|
|
885
908
|
>
|
|
886
909
|
<span class="pf-v6-c-button__icon">
|
|
887
910
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
@@ -910,7 +933,7 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
910
933
|
type="text"
|
|
911
934
|
placeholder="Search"
|
|
912
935
|
value
|
|
913
|
-
aria-label="Search input"
|
|
936
|
+
aria-label="Search input group collapsed"
|
|
914
937
|
/>
|
|
915
938
|
</span>
|
|
916
939
|
</div>
|
|
@@ -920,7 +943,7 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
920
943
|
<button
|
|
921
944
|
class="pf-v6-c-button pf-m-plain"
|
|
922
945
|
type="button"
|
|
923
|
-
aria-label="Open search"
|
|
946
|
+
aria-label="Open search input group collapsed"
|
|
924
947
|
>
|
|
925
948
|
<span class="pf-v6-c-button__icon">
|
|
926
949
|
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
@@ -928,7 +951,11 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
928
951
|
</button>
|
|
929
952
|
</div>
|
|
930
953
|
<div class="pf-v6-c-input-group__item pf-m-search-action pf-m-plain">
|
|
931
|
-
<button
|
|
954
|
+
<button
|
|
955
|
+
class="pf-v6-c-button pf-m-plain"
|
|
956
|
+
type="button"
|
|
957
|
+
aria-label="Close search input group expandable"
|
|
958
|
+
>
|
|
932
959
|
<span class="pf-v6-c-button__icon">
|
|
933
960
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
934
961
|
</span>
|
|
@@ -954,7 +981,7 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
954
981
|
type="text"
|
|
955
982
|
placeholder="Search"
|
|
956
983
|
value
|
|
957
|
-
aria-label="Search input"
|
|
984
|
+
aria-label="Search input group expanded"
|
|
958
985
|
/>
|
|
959
986
|
</span>
|
|
960
987
|
</div>
|
|
@@ -964,7 +991,7 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
964
991
|
<button
|
|
965
992
|
class="pf-v6-c-button pf-m-plain"
|
|
966
993
|
type="button"
|
|
967
|
-
aria-label="Open search"
|
|
994
|
+
aria-label="Open search input group collapsed"
|
|
968
995
|
>
|
|
969
996
|
<span class="pf-v6-c-button__icon">
|
|
970
997
|
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
@@ -972,7 +999,11 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
972
999
|
</button>
|
|
973
1000
|
</div>
|
|
974
1001
|
<div class="pf-v6-c-input-group__item pf-m-search-action pf-m-plain">
|
|
975
|
-
<button
|
|
1002
|
+
<button
|
|
1003
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1004
|
+
type="button"
|
|
1005
|
+
aria-label="Close search input group expandable"
|
|
1006
|
+
>
|
|
976
1007
|
<span class="pf-v6-c-button__icon">
|
|
977
1008
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
978
1009
|
</span>
|
|
@@ -998,7 +1029,7 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
998
1029
|
type="text"
|
|
999
1030
|
placeholder="Find by name"
|
|
1000
1031
|
value
|
|
1001
|
-
aria-label="Search input"
|
|
1032
|
+
aria-label="Search input group with submit button"
|
|
1002
1033
|
/>
|
|
1003
1034
|
</span>
|
|
1004
1035
|
</div>
|
|
@@ -1008,7 +1039,7 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
1008
1039
|
<button
|
|
1009
1040
|
class="pf-v6-c-button pf-m-control"
|
|
1010
1041
|
type="submit"
|
|
1011
|
-
aria-label="
|
|
1042
|
+
aria-label="Submit search input group"
|
|
1012
1043
|
>
|
|
1013
1044
|
<span class="pf-v6-c-button__icon">
|
|
1014
1045
|
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
@@ -1034,7 +1065,7 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
1034
1065
|
class="pf-v6-c-text-input-group__text-input"
|
|
1035
1066
|
type="text"
|
|
1036
1067
|
value="username:root firstname:ned"
|
|
1037
|
-
aria-label="Search input"
|
|
1068
|
+
aria-label="Search input group advanced search"
|
|
1038
1069
|
/>
|
|
1039
1070
|
</span>
|
|
1040
1071
|
</div>
|
|
@@ -1042,7 +1073,7 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
1042
1073
|
<button
|
|
1043
1074
|
class="pf-v6-c-button pf-m-plain"
|
|
1044
1075
|
type="button"
|
|
1045
|
-
aria-label="Clear input"
|
|
1076
|
+
aria-label="Clear advance search input group collapsed"
|
|
1046
1077
|
>
|
|
1047
1078
|
<span class="pf-v6-c-button__icon">
|
|
1048
1079
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
@@ -1056,7 +1087,7 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
1056
1087
|
class="pf-v6-c-button pf-m-control"
|
|
1057
1088
|
type="button"
|
|
1058
1089
|
aria-expanded="false"
|
|
1059
|
-
aria-label="Advanced search"
|
|
1090
|
+
aria-label="Advanced search collapsed"
|
|
1060
1091
|
>
|
|
1061
1092
|
<span class="pf-v6-c-button__icon">
|
|
1062
1093
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
@@ -1067,7 +1098,7 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
1067
1098
|
<button
|
|
1068
1099
|
class="pf-v6-c-button pf-m-control"
|
|
1069
1100
|
type="submit"
|
|
1070
|
-
aria-label="Search"
|
|
1101
|
+
aria-label="Search advance search input group collapsed"
|
|
1071
1102
|
>
|
|
1072
1103
|
<span class="pf-v6-c-button__icon">
|
|
1073
1104
|
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
@@ -1093,7 +1124,7 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
1093
1124
|
class="pf-v6-c-text-input-group__text-input"
|
|
1094
1125
|
type="text"
|
|
1095
1126
|
value="username:root firstname:ned"
|
|
1096
|
-
aria-label="Search input"
|
|
1127
|
+
aria-label="Search input group advanced search expanded"
|
|
1097
1128
|
/>
|
|
1098
1129
|
</span>
|
|
1099
1130
|
</div>
|
|
@@ -1101,7 +1132,7 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
1101
1132
|
<button
|
|
1102
1133
|
class="pf-v6-c-button pf-m-plain"
|
|
1103
1134
|
type="button"
|
|
1104
|
-
aria-label="Clear input"
|
|
1135
|
+
aria-label="Clear advance search input group expanded"
|
|
1105
1136
|
>
|
|
1106
1137
|
<span class="pf-v6-c-button__icon">
|
|
1107
1138
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
@@ -1115,7 +1146,7 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
1115
1146
|
class="pf-v6-c-button pf-m-expanded pf-m-control"
|
|
1116
1147
|
type="button"
|
|
1117
1148
|
aria-expanded="true"
|
|
1118
|
-
aria-label="Advanced search"
|
|
1149
|
+
aria-label="Advanced search expanded"
|
|
1119
1150
|
>
|
|
1120
1151
|
<span class="pf-v6-c-button__icon">
|
|
1121
1152
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
@@ -1126,7 +1157,7 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
1126
1157
|
<button
|
|
1127
1158
|
class="pf-v6-c-button pf-m-control"
|
|
1128
1159
|
type="submit"
|
|
1129
|
-
aria-label="Search"
|
|
1160
|
+
aria-label="Search advance search input group expanded"
|
|
1130
1161
|
>
|
|
1131
1162
|
<span class="pf-v6-c-button__icon">
|
|
1132
1163
|
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
@@ -1211,10 +1242,20 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
1211
1242
|
</div>
|
|
1212
1243
|
<div class="pf-v6-c-form__group pf-m-action">
|
|
1213
1244
|
<div class="pf-v6-c-form__actions">
|
|
1214
|
-
<button
|
|
1245
|
+
<button
|
|
1246
|
+
class="pf-v6-c-button pf-m-primary"
|
|
1247
|
+
id="submit-advanced-search-expanded"
|
|
1248
|
+
type="submit"
|
|
1249
|
+
aria-labelledby="submit-advanced-search-expanded search-input-group-advanced-search-expanded"
|
|
1250
|
+
>
|
|
1215
1251
|
<span class="pf-v6-c-button__text">Submit</span>
|
|
1216
1252
|
</button>
|
|
1217
|
-
<button
|
|
1253
|
+
<button
|
|
1254
|
+
class="pf-v6-c-button pf-m-link"
|
|
1255
|
+
id="reset-advanced-search-expanded"
|
|
1256
|
+
type="reset"
|
|
1257
|
+
aria-labelledby="reset-advanced-search-expanded search-input-group-advanced-search-expanded"
|
|
1258
|
+
>
|
|
1218
1259
|
<span class="pf-v6-c-button__text">Reset</span>
|
|
1219
1260
|
</button>
|
|
1220
1261
|
</div>
|
|
@@ -1239,7 +1280,7 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
1239
1280
|
class="pf-v6-c-text-input-group__text-input"
|
|
1240
1281
|
type="text"
|
|
1241
1282
|
value="app"
|
|
1242
|
-
aria-label="Search input"
|
|
1283
|
+
aria-label="Search input group autocomplete"
|
|
1243
1284
|
/>
|
|
1244
1285
|
</span>
|
|
1245
1286
|
</div>
|
|
@@ -1247,7 +1288,7 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
1247
1288
|
<button
|
|
1248
1289
|
class="pf-v6-c-button pf-m-plain"
|
|
1249
1290
|
type="button"
|
|
1250
|
-
aria-label="Clear input"
|
|
1291
|
+
aria-label="Clear autocomplete search input group"
|
|
1251
1292
|
>
|
|
1252
1293
|
<span class="pf-v6-c-button__icon">
|
|
1253
1294
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
@@ -1315,7 +1356,7 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
1315
1356
|
<button
|
|
1316
1357
|
class="pf-v6-c-button pf-m-plain"
|
|
1317
1358
|
type="button"
|
|
1318
|
-
aria-label="Clear input"
|
|
1359
|
+
aria-label="Clear autocomple search input group last option hint"
|
|
1319
1360
|
>
|
|
1320
1361
|
<span class="pf-v6-c-button__icon">
|
|
1321
1362
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
@@ -1356,7 +1397,7 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
1356
1397
|
class="pf-v6-c-text-input-group__text-input"
|
|
1357
1398
|
type="text"
|
|
1358
1399
|
value="username:root firstname:n"
|
|
1359
|
-
aria-label="Search input"
|
|
1400
|
+
aria-label="Search input group advanced search expanded with autocomplete"
|
|
1360
1401
|
/>
|
|
1361
1402
|
</span>
|
|
1362
1403
|
</div>
|
|
@@ -1364,7 +1405,7 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
1364
1405
|
<button
|
|
1365
1406
|
class="pf-v6-c-button pf-m-plain"
|
|
1366
1407
|
type="button"
|
|
1367
|
-
aria-label="Clear input"
|
|
1408
|
+
aria-label="Clear advance search input group expanded with autocomplete"
|
|
1368
1409
|
>
|
|
1369
1410
|
<span class="pf-v6-c-button__icon">
|
|
1370
1411
|
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
@@ -1378,7 +1419,7 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
1378
1419
|
class="pf-v6-c-button pf-m-expanded pf-m-control"
|
|
1379
1420
|
type="button"
|
|
1380
1421
|
aria-expanded="true"
|
|
1381
|
-
aria-label="Advanced search"
|
|
1422
|
+
aria-label="Advanced search expanded with autocomplete"
|
|
1382
1423
|
>
|
|
1383
1424
|
<span class="pf-v6-c-button__icon">
|
|
1384
1425
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
@@ -1389,7 +1430,7 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
1389
1430
|
<button
|
|
1390
1431
|
class="pf-v6-c-button pf-m-control"
|
|
1391
1432
|
type="submit"
|
|
1392
|
-
aria-label="Search"
|
|
1433
|
+
aria-label="Search advanced search input group expanded with autocomplete"
|
|
1393
1434
|
>
|
|
1394
1435
|
<span class="pf-v6-c-button__icon">
|
|
1395
1436
|
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
@@ -1474,10 +1515,20 @@ The React implementation can be found in the [search input](/components/search-i
|
|
|
1474
1515
|
</div>
|
|
1475
1516
|
<div class="pf-v6-c-form__group pf-m-action">
|
|
1476
1517
|
<div class="pf-v6-c-form__actions">
|
|
1477
|
-
<button
|
|
1518
|
+
<button
|
|
1519
|
+
class="pf-v6-c-button pf-m-primary"
|
|
1520
|
+
id="submit-advanced-search-expanded-with-autocomplete"
|
|
1521
|
+
type="submit"
|
|
1522
|
+
aria-labelledby="submit-advanced-search-expanded-with-autocomplete search-input-group-advanced-search-expanded-with-autocomplete"
|
|
1523
|
+
>
|
|
1478
1524
|
<span class="pf-v6-c-button__text">Submit</span>
|
|
1479
1525
|
</button>
|
|
1480
|
-
<button
|
|
1526
|
+
<button
|
|
1527
|
+
class="pf-v6-c-button pf-m-link"
|
|
1528
|
+
id="reset-advanced-search-expanded-with-autocomplete"
|
|
1529
|
+
type="submit"
|
|
1530
|
+
aria-labelledby="reset-advanced-search-expanded-with-autocomplete search-input-group-advanced-search-expanded-with-autocomplete"
|
|
1531
|
+
>
|
|
1481
1532
|
<span class="pf-v6-c-button__text">Reset</span>
|
|
1482
1533
|
</button>
|
|
1483
1534
|
</div>
|
package/package.json
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
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.51",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
7
|
+
"engines": {
|
|
8
|
+
"node": ">=20.18.3 <22"
|
|
9
|
+
},
|
|
7
10
|
"scripts": {
|
|
8
11
|
"a11y": "patternfly-a11y --config patternfly-a11y.config",
|
|
9
12
|
"backstop:clean": "rimraf -- backstop_data/bitmaps_test backstop_data/html_report",
|
|
@@ -47,7 +50,7 @@
|
|
|
47
50
|
"@commitlint/config-conventional": "^19.1.0",
|
|
48
51
|
"@fortawesome/fontawesome": "^1.1.8",
|
|
49
52
|
"@octokit/rest": "^20.1.0",
|
|
50
|
-
"@patternfly/documentation-framework": "6.18.
|
|
53
|
+
"@patternfly/documentation-framework": "6.18.7",
|
|
51
54
|
"@patternfly/patternfly-a11y": "5.1.0",
|
|
52
55
|
"@patternfly/react-code-editor": "6.3.1",
|
|
53
56
|
"@patternfly/react-core": "6.3.1",
|
|
@@ -109,5 +112,5 @@
|
|
|
109
112
|
"registry": "https://registry.npmjs.org/",
|
|
110
113
|
"access": "public"
|
|
111
114
|
},
|
|
112
|
-
"packageManager": "yarn@
|
|
115
|
+
"packageManager": "yarn@4.9.3"
|
|
113
116
|
}
|