@patternfly/patternfly 5.0.0-alpha.53 → 5.0.0-alpha.55
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 +164 -214
- package/components/FormControl/form-control.scss +175 -281
- package/components/FormControl/themes/dark/form-control.scss +1 -2
- package/components/NumberInput/number-input.css +0 -1
- package/components/NumberInput/number-input.scss +0 -1
- package/components/Table/table-grid.css +380 -391
- package/components/Table/table-grid.scss +97 -92
- package/components/Table/table-tree-view.css +254 -254
- package/components/Table/table-tree-view.scss +30 -30
- package/components/Table/table.css +232 -232
- package/components/Table/table.scss +265 -255
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -28
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +52 -46
- package/docs/components/DatePicker/examples/DatePicker.md +55 -49
- package/docs/components/FileUpload/examples/FileUpload.md +105 -93
- package/docs/components/Form/examples/Form.md +165 -145
- package/docs/components/FormControl/examples/FormControl.md +439 -475
- package/docs/components/InlineEdit/examples/InlineEdit.md +137 -104
- package/docs/components/InputGroup/examples/InputGroup.md +84 -74
- package/docs/components/Login/examples/Login.md +92 -82
- package/docs/components/NumberInput/examples/NumberInput.md +99 -87
- package/docs/components/Pagination/examples/Pagination.md +100 -89
- package/docs/components/Select/examples/Select.md +77 -68
- package/docs/components/Slider/examples/Slider.md +31 -44
- package/docs/components/Table/examples/Table.md +6839 -3703
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +60 -52
- package/docs/components/Toolbar/examples/Toolbar.md +18 -16
- package/docs/components/Wizard/examples/Wizard.md +280 -245
- package/docs/demos/Alert/examples/Alert.md +69 -57
- package/docs/demos/Button/examples/Button.md +54 -48
- package/docs/demos/Card/examples/Card.md +73 -34
- package/docs/demos/CardView/examples/CardView.md +9 -8
- package/docs/demos/DataList/examples/DataList.md +223 -84
- package/docs/demos/DescriptionList/examples/DescriptionList.md +63 -23
- package/docs/demos/Form/examples/BasicForms.md +247 -227
- package/docs/demos/HelperText/examples/HelperText.md +37 -33
- package/docs/demos/Modal/examples/Modal.md +14 -21
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +11 -10
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -40
- package/docs/demos/Table/examples/Table.md +2765 -1397
- package/docs/demos/Tabs/examples/Tabs.md +203 -50
- package/docs/demos/Toolbar/examples/Toolbar.md +300 -137
- package/docs/demos/Wizard/examples/Wizard.md +448 -392
- package/package.json +3 -3
- package/patternfly-no-globals.css +1027 -1089
- package/patternfly.css +1027 -1089
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/docs/components/FormControl/examples/FormControl.css +0 -5
|
@@ -48,14 +48,15 @@ wrapperTag: div
|
|
|
48
48
|
aria-hidden="true"
|
|
49
49
|
>*</span></label>
|
|
50
50
|
|
|
51
|
-
<
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
51
|
+
<div class="pf-v5-c-form-control">
|
|
52
|
+
<input
|
|
53
|
+
required
|
|
54
|
+
input="true"
|
|
55
|
+
type="text"
|
|
56
|
+
id="login-demo-form-username"
|
|
57
|
+
name="login-demo-form-username"
|
|
58
|
+
/>
|
|
59
|
+
</div>
|
|
59
60
|
</div>
|
|
60
61
|
<div class="pf-v5-c-form__group"><label class="pf-v5-c-form__label" for="login-demo-form-password">
|
|
61
62
|
<span class="pf-v5-c-form__label-text">Password</span> <span
|
|
@@ -63,14 +64,15 @@ wrapperTag: div
|
|
|
63
64
|
aria-hidden="true"
|
|
64
65
|
>*</span></label>
|
|
65
66
|
|
|
66
|
-
<
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
67
|
+
<div class="pf-v5-c-form-control">
|
|
68
|
+
<input
|
|
69
|
+
required
|
|
70
|
+
input="true"
|
|
71
|
+
type="password"
|
|
72
|
+
id="login-demo-form-password"
|
|
73
|
+
name="login-demo-form-password"
|
|
74
|
+
/>
|
|
75
|
+
</div>
|
|
74
76
|
</div>
|
|
75
77
|
<div class="pf-v5-c-form__group">
|
|
76
78
|
<div class="pf-v5-c-check">
|
|
@@ -259,14 +261,15 @@ wrapperTag: div
|
|
|
259
261
|
aria-hidden="true"
|
|
260
262
|
>*</span></label>
|
|
261
263
|
|
|
262
|
-
<
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
264
|
+
<div class="pf-v5-c-form-control">
|
|
265
|
+
<input
|
|
266
|
+
required
|
|
267
|
+
type="text"
|
|
268
|
+
id="invalid-login-demo-form-username"
|
|
269
|
+
name="invalid-login-demo-form-username"
|
|
270
|
+
aria-invalid="true"
|
|
271
|
+
/>
|
|
272
|
+
</div>
|
|
270
273
|
</div>
|
|
271
274
|
<div class="pf-v5-c-form__group"><label
|
|
272
275
|
class="pf-v5-c-form__label"
|
|
@@ -277,14 +280,15 @@ wrapperTag: div
|
|
|
277
280
|
aria-hidden="true"
|
|
278
281
|
>*</span></label>
|
|
279
282
|
|
|
280
|
-
<
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
283
|
+
<div class="pf-v5-c-form-control">
|
|
284
|
+
<input
|
|
285
|
+
required
|
|
286
|
+
type="password"
|
|
287
|
+
id="invalid-login-demo-form-password"
|
|
288
|
+
name="invalid-login-demo-form-password"
|
|
289
|
+
aria-invalid="true"
|
|
290
|
+
/>
|
|
291
|
+
</div>
|
|
288
292
|
</div>
|
|
289
293
|
<div class="pf-v5-c-form__group">
|
|
290
294
|
<div class="pf-v5-c-check">
|
|
@@ -470,14 +474,15 @@ wrapperTag: div
|
|
|
470
474
|
aria-hidden="true"
|
|
471
475
|
>*</span></label>
|
|
472
476
|
|
|
473
|
-
<
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
477
|
+
<div class="pf-v5-c-form-control">
|
|
478
|
+
<input
|
|
479
|
+
required
|
|
480
|
+
input="true"
|
|
481
|
+
type="text"
|
|
482
|
+
id="login-demo-form-username"
|
|
483
|
+
name="login-demo-form-username"
|
|
484
|
+
/>
|
|
485
|
+
</div>
|
|
481
486
|
</div>
|
|
482
487
|
<div class="pf-v5-c-form__group"><label class="pf-v5-c-form__label" for="login-demo-form-password">
|
|
483
488
|
<span class="pf-v5-c-form__label-text">Password</span> <span
|
|
@@ -486,15 +491,16 @@ wrapperTag: div
|
|
|
486
491
|
>*</span></label>
|
|
487
492
|
|
|
488
493
|
<div class="pf-v5-c-input-group">
|
|
489
|
-
<
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
494
|
+
<div class="pf-v5-c-form-control">
|
|
495
|
+
<input
|
|
496
|
+
required
|
|
497
|
+
input="true"
|
|
498
|
+
type="password"
|
|
499
|
+
id="login-demo-form-password"
|
|
500
|
+
name="login-demo-form-password"
|
|
501
|
+
value="abcd1234"
|
|
502
|
+
/>
|
|
503
|
+
</div>
|
|
498
504
|
|
|
499
505
|
<button
|
|
500
506
|
class="pf-v5-c-button pf-m-control"
|
|
@@ -696,14 +702,15 @@ wrapperTag: div
|
|
|
696
702
|
aria-hidden="true"
|
|
697
703
|
>*</span></label>
|
|
698
704
|
|
|
699
|
-
<
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
705
|
+
<div class="pf-v5-c-form-control">
|
|
706
|
+
<input
|
|
707
|
+
required
|
|
708
|
+
input="true"
|
|
709
|
+
type="text"
|
|
710
|
+
id="login-demo-form-username"
|
|
711
|
+
name="login-demo-form-username"
|
|
712
|
+
/>
|
|
713
|
+
</div>
|
|
707
714
|
</div>
|
|
708
715
|
<div class="pf-v5-c-form__group"><label class="pf-v5-c-form__label" for="login-demo-form-password">
|
|
709
716
|
<span class="pf-v5-c-form__label-text">Password</span> <span
|
|
@@ -712,15 +719,16 @@ wrapperTag: div
|
|
|
712
719
|
>*</span></label>
|
|
713
720
|
|
|
714
721
|
<div class="pf-v5-c-input-group">
|
|
715
|
-
<
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
722
|
+
<div class="pf-v5-c-form-control">
|
|
723
|
+
<input
|
|
724
|
+
required
|
|
725
|
+
input="true"
|
|
726
|
+
type="text"
|
|
727
|
+
id="login-demo-form-password"
|
|
728
|
+
name="login-demo-form-password"
|
|
729
|
+
value="abcd1234"
|
|
730
|
+
/>
|
|
731
|
+
</div>
|
|
724
732
|
|
|
725
733
|
<button
|
|
726
734
|
class="pf-v5-c-button pf-m-control"
|
|
@@ -961,14 +969,15 @@ wrapperTag: div
|
|
|
961
969
|
aria-hidden="true"
|
|
962
970
|
>*</span></label>
|
|
963
971
|
|
|
964
|
-
<
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
+
<div class="pf-v5-c-form-control">
|
|
973
|
+
<input
|
|
974
|
+
required
|
|
975
|
+
input="true"
|
|
976
|
+
type="text"
|
|
977
|
+
id="login-demo-form-username"
|
|
978
|
+
name="login-demo-form-username"
|
|
979
|
+
/>
|
|
980
|
+
</div>
|
|
972
981
|
</div>
|
|
973
982
|
<div class="pf-v5-c-form__group"><label class="pf-v5-c-form__label" for="login-demo-form-password">
|
|
974
983
|
<span class="pf-v5-c-form__label-text">Password</span> <span
|
|
@@ -976,14 +985,15 @@ wrapperTag: div
|
|
|
976
985
|
aria-hidden="true"
|
|
977
986
|
>*</span></label>
|
|
978
987
|
|
|
979
|
-
<
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
988
|
+
<div class="pf-v5-c-form-control">
|
|
989
|
+
<input
|
|
990
|
+
required
|
|
991
|
+
input="true"
|
|
992
|
+
type="password"
|
|
993
|
+
id="login-demo-form-password"
|
|
994
|
+
name="login-demo-form-password"
|
|
995
|
+
/>
|
|
996
|
+
</div>
|
|
987
997
|
</div>
|
|
988
998
|
<div class="pf-v5-c-form__group">
|
|
989
999
|
<div class="pf-v5-c-check">
|
|
@@ -21,13 +21,14 @@ cssPrefix: pf-v5-c-number-input
|
|
|
21
21
|
</button>
|
|
22
22
|
</div>
|
|
23
23
|
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
24
|
-
<
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
24
|
+
<div class="pf-v5-c-form-control">
|
|
25
|
+
<input
|
|
26
|
+
type="number"
|
|
27
|
+
value="90"
|
|
28
|
+
name="number-input-default-name"
|
|
29
|
+
aria-label="Number input"
|
|
30
|
+
/>
|
|
31
|
+
</div>
|
|
31
32
|
</div>
|
|
32
33
|
<div class="pf-v5-c-input-group__item">
|
|
33
34
|
<button
|
|
@@ -62,13 +63,14 @@ cssPrefix: pf-v5-c-number-input
|
|
|
62
63
|
</button>
|
|
63
64
|
</div>
|
|
64
65
|
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
65
|
-
<
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
66
|
+
<div class="pf-v5-c-form-control">
|
|
67
|
+
<input
|
|
68
|
+
type="number"
|
|
69
|
+
value="90"
|
|
70
|
+
name="number-input-unit-name"
|
|
71
|
+
aria-label="Number input"
|
|
72
|
+
/>
|
|
73
|
+
</div>
|
|
72
74
|
</div>
|
|
73
75
|
<div class="pf-v5-c-input-group__item">
|
|
74
76
|
<button
|
|
@@ -102,13 +104,14 @@ cssPrefix: pf-v5-c-number-input
|
|
|
102
104
|
</button>
|
|
103
105
|
</div>
|
|
104
106
|
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
105
|
-
<
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
107
|
+
<div class="pf-v5-c-form-control">
|
|
108
|
+
<input
|
|
109
|
+
type="number"
|
|
110
|
+
value="1.00"
|
|
111
|
+
name="number-input-unit2-name"
|
|
112
|
+
aria-label="Number input"
|
|
113
|
+
/>
|
|
114
|
+
</div>
|
|
112
115
|
</div>
|
|
113
116
|
<div class="pf-v5-c-input-group__item">
|
|
114
117
|
<button
|
|
@@ -144,14 +147,15 @@ cssPrefix: pf-v5-c-number-input
|
|
|
144
147
|
</button>
|
|
145
148
|
</div>
|
|
146
149
|
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
147
|
-
<
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
150
|
+
<div class="pf-v5-c-form-control">
|
|
151
|
+
<input
|
|
152
|
+
type="number"
|
|
153
|
+
value="0"
|
|
154
|
+
min="0"
|
|
155
|
+
name="number-input-unit-lower-threshold-name"
|
|
156
|
+
aria-label="Number input"
|
|
157
|
+
/>
|
|
158
|
+
</div>
|
|
155
159
|
</div>
|
|
156
160
|
<div class="pf-v5-c-input-group__item">
|
|
157
161
|
<button
|
|
@@ -187,14 +191,15 @@ cssPrefix: pf-v5-c-number-input
|
|
|
187
191
|
</button>
|
|
188
192
|
</div>
|
|
189
193
|
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
190
|
-
<
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
194
|
+
<div class="pf-v5-c-form-control">
|
|
195
|
+
<input
|
|
196
|
+
type="number"
|
|
197
|
+
value="100"
|
|
198
|
+
max="100"
|
|
199
|
+
name="number-input-unit-upper-threshold-name"
|
|
200
|
+
aria-label="Number input"
|
|
201
|
+
/>
|
|
202
|
+
</div>
|
|
198
203
|
</div>
|
|
199
204
|
<div class="pf-v5-c-input-group__item">
|
|
200
205
|
<button
|
|
@@ -232,14 +237,15 @@ cssPrefix: pf-v5-c-number-input
|
|
|
232
237
|
</button>
|
|
233
238
|
</div>
|
|
234
239
|
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
235
|
-
<
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
240
|
+
<div class="pf-v5-c-form-control">
|
|
241
|
+
<input
|
|
242
|
+
type="number"
|
|
243
|
+
value="100"
|
|
244
|
+
name="number-input-disabled-name"
|
|
245
|
+
aria-label="Number input"
|
|
246
|
+
disabled
|
|
247
|
+
/>
|
|
248
|
+
</div>
|
|
243
249
|
</div>
|
|
244
250
|
<div class="pf-v5-c-input-group__item">
|
|
245
251
|
<button
|
|
@@ -276,13 +282,14 @@ cssPrefix: pf-v5-c-number-input
|
|
|
276
282
|
</button>
|
|
277
283
|
</div>
|
|
278
284
|
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
279
|
-
<
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
285
|
+
<div class="pf-v5-c-form-control">
|
|
286
|
+
<input
|
|
287
|
+
type="number"
|
|
288
|
+
value="90"
|
|
289
|
+
name="number-input-status-name"
|
|
290
|
+
aria-label="Number input"
|
|
291
|
+
/>
|
|
292
|
+
</div>
|
|
286
293
|
</div>
|
|
287
294
|
<div class="pf-v5-c-input-group__item">
|
|
288
295
|
<button
|
|
@@ -313,13 +320,14 @@ cssPrefix: pf-v5-c-number-input
|
|
|
313
320
|
</button>
|
|
314
321
|
</div>
|
|
315
322
|
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
316
|
-
<
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
+
<div class="pf-v5-c-form-control pf-m-warning">
|
|
324
|
+
<input
|
|
325
|
+
type="number"
|
|
326
|
+
value="90"
|
|
327
|
+
name="number-input-status-warning-name"
|
|
328
|
+
aria-label="Number input"
|
|
329
|
+
/>
|
|
330
|
+
</div>
|
|
323
331
|
</div>
|
|
324
332
|
<div class="pf-v5-c-input-group__item">
|
|
325
333
|
<button
|
|
@@ -357,13 +365,14 @@ cssPrefix: pf-v5-c-number-input
|
|
|
357
365
|
</button>
|
|
358
366
|
</div>
|
|
359
367
|
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
360
|
-
<
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
368
|
+
<div class="pf-v5-c-form-control">
|
|
369
|
+
<input
|
|
370
|
+
type="number"
|
|
371
|
+
value="1"
|
|
372
|
+
name="number-input-sizes-name"
|
|
373
|
+
aria-label="Number input"
|
|
374
|
+
/>
|
|
375
|
+
</div>
|
|
367
376
|
</div>
|
|
368
377
|
<div class="pf-v5-c-input-group__item">
|
|
369
378
|
<button
|
|
@@ -397,13 +406,14 @@ cssPrefix: pf-v5-c-number-input
|
|
|
397
406
|
</button>
|
|
398
407
|
</div>
|
|
399
408
|
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
400
|
-
<
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
409
|
+
<div class="pf-v5-c-form-control">
|
|
410
|
+
<input
|
|
411
|
+
type="number"
|
|
412
|
+
value="1234567890"
|
|
413
|
+
name="number-input-sizes2-name"
|
|
414
|
+
aria-label="Number input"
|
|
415
|
+
/>
|
|
416
|
+
</div>
|
|
407
417
|
</div>
|
|
408
418
|
<div class="pf-v5-c-input-group__item">
|
|
409
419
|
<button
|
|
@@ -437,13 +447,14 @@ cssPrefix: pf-v5-c-number-input
|
|
|
437
447
|
</button>
|
|
438
448
|
</div>
|
|
439
449
|
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
440
|
-
<
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
450
|
+
<div class="pf-v5-c-form-control">
|
|
451
|
+
<input
|
|
452
|
+
type="number"
|
|
453
|
+
value="5"
|
|
454
|
+
name="number-input-sizes3-name"
|
|
455
|
+
aria-label="Number input"
|
|
456
|
+
/>
|
|
457
|
+
</div>
|
|
447
458
|
</div>
|
|
448
459
|
<div class="pf-v5-c-input-group__item">
|
|
449
460
|
<button
|
|
@@ -477,13 +488,14 @@ cssPrefix: pf-v5-c-number-input
|
|
|
477
488
|
</button>
|
|
478
489
|
</div>
|
|
479
490
|
<div class="pf-v5-c-input-group__item pf-m-fill">
|
|
480
|
-
<
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
491
|
+
<div class="pf-v5-c-form-control">
|
|
492
|
+
<input
|
|
493
|
+
type="number"
|
|
494
|
+
value="12345"
|
|
495
|
+
name="number-input-sizes4-name"
|
|
496
|
+
aria-label="Number input"
|
|
497
|
+
/>
|
|
498
|
+
</div>
|
|
487
499
|
</div>
|
|
488
500
|
<div class="pf-v5-c-input-group__item">
|
|
489
501
|
<button
|