@patternfly/patternfly 5.0.0-alpha.52 → 5.0.0-alpha.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/components/Divider/divider.css +12 -12
  2. package/components/FormControl/form-control.css +164 -214
  3. package/components/FormControl/form-control.scss +175 -281
  4. package/components/FormControl/themes/dark/form-control.scss +1 -2
  5. package/components/Masthead/masthead.css +12 -12
  6. package/components/NumberInput/number-input.css +0 -1
  7. package/components/NumberInput/number-input.scss +0 -1
  8. package/components/Pagination/pagination.css +12 -12
  9. package/components/Tabs/tabs.css +24 -24
  10. package/components/Toolbar/toolbar.css +54 -54
  11. package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -28
  12. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +52 -46
  13. package/docs/components/DatePicker/examples/DatePicker.md +55 -49
  14. package/docs/components/FileUpload/examples/FileUpload.md +105 -93
  15. package/docs/components/Form/examples/Form.md +165 -145
  16. package/docs/components/FormControl/examples/FormControl.md +439 -475
  17. package/docs/components/InlineEdit/examples/InlineEdit.md +87 -76
  18. package/docs/components/InputGroup/examples/InputGroup.md +84 -74
  19. package/docs/components/Login/examples/Login.md +92 -82
  20. package/docs/components/NumberInput/examples/NumberInput.md +99 -87
  21. package/docs/components/Pagination/examples/Pagination.md +100 -89
  22. package/docs/components/Select/examples/Select.md +77 -68
  23. package/docs/components/Slider/examples/Slider.md +31 -44
  24. package/docs/components/TextInputGroup/examples/TextInputGroup.md +60 -52
  25. package/docs/components/Toolbar/examples/Toolbar.md +18 -16
  26. package/docs/components/Wizard/examples/Wizard.md +280 -245
  27. package/docs/demos/Alert/examples/Alert.md +69 -57
  28. package/docs/demos/Button/examples/Button.md +54 -48
  29. package/docs/demos/CardView/examples/CardView.md +9 -8
  30. package/docs/demos/DataList/examples/DataList.md +36 -32
  31. package/docs/demos/Form/examples/BasicForms.md +247 -227
  32. package/docs/demos/HelperText/examples/HelperText.md +37 -33
  33. package/docs/demos/Modal/examples/Modal.md +14 -21
  34. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +11 -10
  35. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -40
  36. package/docs/demos/Table/examples/Table.md +99 -88
  37. package/docs/demos/Toolbar/examples/Toolbar.md +28 -25
  38. package/docs/demos/Wizard/examples/Wizard.md +448 -392
  39. package/layouts/Flex/flex.css +60 -120
  40. package/layouts/Flex/flex.scss +1 -1
  41. package/package.json +3 -3
  42. package/patternfly-no-globals.css +335 -446
  43. package/patternfly.css +335 -446
  44. package/patternfly.min.css +1 -1
  45. package/patternfly.min.css.map +1 -1
  46. package/sass-utilities/functions.scss +6 -9
  47. package/docs/components/FormControl/examples/FormControl.css +0 -5
package/docs/demos/HelperText/examples/HelperText.md CHANGED
@@ -12,14 +12,15 @@ section: components
12
12
  <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
13
13
  </div>
14
14
  <div class="pf-v5-c-form__group-control">
15
- <input
16
- class="pf-v5-c-form-control"
17
- required
18
- type="text"
19
- id="helper-text-form-name"
20
- name="helper-text-form-name"
21
- aria-describedby="helper-text-form-name-helper"
22
- />
15
+ <div class="pf-v5-c-form-control">
16
+ <input
17
+ required
18
+ type="text"
19
+ id="helper-text-form-name"
20
+ name="helper-text-form-name"
21
+ aria-describedby="helper-text-form-name-helper"
22
+ />
23
+ </div>
23
24
  <div
24
25
  class="pf-v5-c-form__helper-text"
25
26
  aria-live="polite"
@@ -40,14 +41,15 @@ section: components
40
41
  <span class="pf-v5-c-form__label-text">E-mail</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
41
42
  </div>
42
43
  <div class="pf-v5-c-form__group-control">
43
- <input
44
- class="pf-v5-c-form-control pf-m-warning"
45
- required
46
- type="text"
47
- id="helper-text-form-email"
48
- name="helper-text-form-email"
49
- aria-describedby="helper-text-form-email-helper"
50
- />
44
+ <div class="pf-v5-c-form-control pf-m-warning">
45
+ <input
46
+ required
47
+ type="text"
48
+ id="helper-text-form-email"
49
+ name="helper-text-form-email"
50
+ aria-describedby="helper-text-form-email-helper"
51
+ />
52
+ </div>
51
53
 
52
54
  <div
53
55
  class="pf-v5-c-form__helper-text"
@@ -69,15 +71,16 @@ section: components
69
71
  <span class="pf-v5-c-form__label-text">Address</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
70
72
  </div>
71
73
  <div class="pf-v5-c-form__group-control">
72
- <input
73
- class="pf-v5-c-form-control"
74
- required
75
- type="text"
76
- id="helper-text-form-address"
77
- name="helper-text-form-address"
78
- aria-invalid="true"
79
- aria-describedby="helper-text-form-address-helper"
80
- />
74
+ <div class="pf-v5-c-form-control">
75
+ <input
76
+ required
77
+ type="text"
78
+ id="helper-text-form-address"
79
+ name="helper-text-form-address"
80
+ aria-invalid="true"
81
+ aria-describedby="helper-text-form-address-helper"
82
+ />
83
+ </div>
81
84
 
82
85
  <div
83
86
  class="pf-v5-c-form__helper-text"
@@ -118,14 +121,15 @@ section: components
118
121
  <span class="pf-v5-c-form__label-text">Comment</span></label>
119
122
  </div>
120
123
  <div class="pf-v5-c-form__group-control">
121
- <input
122
- class="pf-v5-c-form-control pf-m-success"
123
- value="This is a valid comment"
124
- type="text"
125
- id="helper-text-form-comment"
126
- name="helper-text-form-comment"
127
- aria-describedby="helper-text-form-comment-helper"
128
- />
124
+ <div class="pf-v5-c-form-control pf-m-success">
125
+ <input
126
+ value="This is a valid comment"
127
+ type="text"
128
+ id="helper-text-form-comment"
129
+ name="helper-text-form-comment"
130
+ aria-describedby="helper-text-form-comment-helper"
131
+ />
132
+ </div>
129
133
 
130
134
  <div
131
135
  class="pf-v5-c-form__helper-text"
package/docs/demos/Modal/examples/Modal.md CHANGED
@@ -6072,13 +6072,9 @@ section: components
6072
6072
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
6073
6073
  </div>
6074
6074
  <div class="pf-v5-c-form__group-control">
6075
- <input
6076
- class="pf-v5-c-form-control"
6077
- type="text"
6078
- id="-form-name"
6079
- name="-form-name"
6080
- required
6081
- />
6075
+ <div class="pf-v5-c-form-control">
6076
+ <input type="text" id="-form-name" name="-form-name" required />
6077
+ </div>
6082
6078
  </div>
6083
6079
  </div>
6084
6080
  <div class="pf-v5-c-form__group">
@@ -6096,13 +6092,9 @@ section: components
6096
6092
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
6097
6093
  </div>
6098
6094
  <div class="pf-v5-c-form__group-control">
6099
- <input
6100
- class="pf-v5-c-form-control"
6101
- type="text"
6102
- id="-form-email"
6103
- name="-form-email"
6104
- required
6105
- />
6095
+ <div class="pf-v5-c-form-control">
6096
+ <input type="text" id="-form-email" name="-form-email" required />
6097
+ </div>
6106
6098
  </div>
6107
6099
  </div>
6108
6100
  <div class="pf-v5-c-form__group">
@@ -6120,13 +6112,14 @@ section: components
6120
6112
  ><i class="pf-v5-pficon pf-v5-pficon-help" aria-hidden="true"></i></span>
6121
6113
  </div>
6122
6114
  <div class="pf-v5-c-form__group-control">
6123
- <input
6124
- class="pf-v5-c-form-control"
6125
- type="text"
6126
- id="-form-address"
6127
- name="-form-address"
6128
- required
6129
- />
6115
+ <div class="pf-v5-c-form-control">
6116
+ <input
6117
+ type="text"
6118
+ id="-form-address"
6119
+ name="-form-address"
6120
+ required
6121
+ />
6122
+ </div>
6130
6123
  </div>
6131
6124
  </div>
6132
6125
  </form>
package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md CHANGED
@@ -27,16 +27,17 @@ section: components
27
27
  <div class="pf-v5-c-form__group-control">
28
28
  <div class="pf-v5-c-input-group">
29
29
  <div class="pf-v5-c-input-group__item pf-m-fill">
30
- <input
31
- class="pf-v5-c-form-control"
32
- required
33
- type="password"
34
- id="password-generator-demo--initial-password"
35
- name="password-generator-demo--initial-password"
36
- aria-label="Password input"
37
- value
38
- placeholder="Password"
39
- />
30
+ <div class="pf-v5-c-form-control">
31
+ <input
32
+ required
33
+ type="password"
34
+ id="password-generator-demo--initial-password"
35
+ name="password-generator-demo--initial-password"
36
+ aria-label="Password input"
37
+ value
38
+ placeholder="Password"
39
+ />
40
+ </div>
40
41
  </div>
41
42
  <div class="pf-v5-c-input-group__item">
42
43
  <button
package/docs/demos/PasswordStrength/examples/PasswordStrength.md CHANGED
@@ -27,16 +27,17 @@ section: components
27
27
  <div class="pf-v5-c-form__group-control">
28
28
  <div class="pf-v5-c-input-group">
29
29
  <div class="pf-v5-c-input-group__item pf-m-fill">
30
- <input
31
- class="pf-v5-c-form-control"
32
- required
33
- type="text"
34
- id="password-strength-demo--initial-password"
35
- name="password-strength-demo--initial-password"
36
- aria-label="Password input"
37
- value
38
- placeholder="Password"
39
- />
30
+ <div class="pf-v5-c-form-control">
31
+ <input
32
+ required
33
+ type="text"
34
+ id="password-strength-demo--initial-password"
35
+ name="password-strength-demo--initial-password"
36
+ aria-label="Password input"
37
+ value
38
+ placeholder="Password"
39
+ />
40
+ </div>
40
41
  </div>
41
42
  <div class="pf-v5-c-input-group__item">
42
43
  <button
@@ -112,16 +113,17 @@ section: components
112
113
  <div class="pf-v5-c-form__group-control">
113
114
  <div class="pf-v5-c-input-group">
114
115
  <div class="pf-v5-c-input-group__item pf-m-fill">
115
- <input
116
- class="pf-v5-c-form-control"
117
- required
118
- type="text"
119
- id="password-strength-demo--invalid-password"
120
- name="password-strength-demo--invalid-password"
121
- aria-label="Password input"
122
- value="Marie$RedHat78"
123
- placeholder="Password"
124
- />
116
+ <div class="pf-v5-c-form-control">
117
+ <input
118
+ required
119
+ type="text"
120
+ id="password-strength-demo--invalid-password"
121
+ name="password-strength-demo--invalid-password"
122
+ aria-label="Password input"
123
+ value="Marie$RedHat78"
124
+ placeholder="Password"
125
+ />
126
+ </div>
125
127
  </div>
126
128
  <div class="pf-v5-c-input-group__item">
127
129
  <button
@@ -200,16 +202,17 @@ section: components
200
202
  <div class="pf-v5-c-form__group-control">
201
203
  <div class="pf-v5-c-input-group">
202
204
  <div class="pf-v5-c-input-group__item pf-m-fill">
203
- <input
204
- class="pf-v5-c-form-control"
205
- required
206
- type="text"
207
- id="password-strength-demo--weak-password"
208
- name="password-strength-demo--weak-password"
209
- aria-label="Password input"
210
- value="Marie$Can3Read"
211
- placeholder="Password"
212
- />
205
+ <div class="pf-v5-c-form-control">
206
+ <input
207
+ required
208
+ type="text"
209
+ id="password-strength-demo--weak-password"
210
+ name="password-strength-demo--weak-password"
211
+ aria-label="Password input"
212
+ value="Marie$Can3Read"
213
+ placeholder="Password"
214
+ />
215
+ </div>
213
216
  </div>
214
217
  <div class="pf-v5-c-input-group__item">
215
218
  <button
@@ -288,16 +291,17 @@ section: components
288
291
  <div class="pf-v5-c-form__group-control">
289
292
  <div class="pf-v5-c-input-group">
290
293
  <div class="pf-v5-c-input-group__item pf-m-fill">
291
- <input
292
- class="pf-v5-c-form-control"
293
- required
294
- type="text"
295
- id="password-strength-demo--strong-password"
296
- name="password-strength-demo--strong-password"
297
- aria-label="Password input"
298
- value="Marie$Can8Read3Pass@Word"
299
- placeholder="Password"
300
- />
294
+ <div class="pf-v5-c-form-control">
295
+ <input
296
+ required
297
+ type="text"
298
+ id="password-strength-demo--strong-password"
299
+ name="password-strength-demo--strong-password"
300
+ aria-label="Password input"
301
+ value="Marie$Can8Read3Pass@Word"
302
+ placeholder="Password"
303
+ />
304
+ </div>
301
305
  </div>
302
306
  <div class="pf-v5-c-input-group__item">
303
307
  <button
package/docs/demos/Table/examples/Table.md CHANGED
@@ -1753,14 +1753,15 @@ wrapperTag: div
1753
1753
  </button>
1754
1754
  </div>
1755
1755
  <div class="pf-v5-c-pagination__nav-page-select">
1756
- <input
1757
- class="pf-v5-c-form-control"
1758
- aria-label="Current page"
1759
- type="number"
1760
- min="1"
1761
- max="4"
1762
- value="1"
1763
- />
1756
+ <div class="pf-v5-c-form-control">
1757
+ <input
1758
+ aria-label="Current page"
1759
+ type="number"
1760
+ min="1"
1761
+ max="4"
1762
+ value="1"
1763
+ />
1764
+ </div>
1764
1765
  <span aria-hidden="true">of 4</span>
1765
1766
  </div>
1766
1767
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
@@ -3721,14 +3722,15 @@ wrapperTag: div
3721
3722
  </button>
3722
3723
  </div>
3723
3724
  <div class="pf-v5-c-pagination__nav-page-select">
3724
- <input
3725
- class="pf-v5-c-form-control"
3726
- aria-label="Current page"
3727
- type="number"
3728
- min="1"
3729
- max="4"
3730
- value="1"
3731
- />
3725
+ <div class="pf-v5-c-form-control">
3726
+ <input
3727
+ aria-label="Current page"
3728
+ type="number"
3729
+ min="1"
3730
+ max="4"
3731
+ value="1"
3732
+ />
3733
+ </div>
3732
3734
  <span aria-hidden="true">of 4</span>
3733
3735
  </div>
3734
3736
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
@@ -5887,14 +5889,15 @@ wrapperTag: div
5887
5889
  </button>
5888
5890
  </div>
5889
5891
  <div class="pf-v5-c-pagination__nav-page-select">
5890
- <input
5891
- class="pf-v5-c-form-control"
5892
- aria-label="Current page"
5893
- type="number"
5894
- min="1"
5895
- max="4"
5896
- value="1"
5897
- />
5892
+ <div class="pf-v5-c-form-control">
5893
+ <input
5894
+ aria-label="Current page"
5895
+ type="number"
5896
+ min="1"
5897
+ max="4"
5898
+ value="1"
5899
+ />
5900
+ </div>
5898
5901
  <span aria-hidden="true">of 4</span>
5899
5902
  </div>
5900
5903
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
@@ -7710,14 +7713,15 @@ wrapperTag: div
7710
7713
  </button>
7711
7714
  </div>
7712
7715
  <div class="pf-v5-c-pagination__nav-page-select">
7713
- <input
7714
- class="pf-v5-c-form-control"
7715
- aria-label="Current page"
7716
- type="number"
7717
- min="1"
7718
- max="4"
7719
- value="1"
7720
- />
7716
+ <div class="pf-v5-c-form-control">
7717
+ <input
7718
+ aria-label="Current page"
7719
+ type="number"
7720
+ min="1"
7721
+ max="4"
7722
+ value="1"
7723
+ />
7724
+ </div>
7721
7725
  <span aria-hidden="true">of 4</span>
7722
7726
  </div>
7723
7727
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
@@ -12862,14 +12866,15 @@ wrapperTag: div
12862
12866
  </button>
12863
12867
  </div>
12864
12868
  <div class="pf-v5-c-pagination__nav-page-select">
12865
- <input
12866
- class="pf-v5-c-form-control"
12867
- aria-label="Current page"
12868
- type="number"
12869
- min="1"
12870
- max="4"
12871
- value="1"
12872
- />
12869
+ <div class="pf-v5-c-form-control">
12870
+ <input
12871
+ aria-label="Current page"
12872
+ type="number"
12873
+ min="1"
12874
+ max="4"
12875
+ value="1"
12876
+ />
12877
+ </div>
12873
12878
  <span aria-hidden="true">of 4</span>
12874
12879
  </div>
12875
12880
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
@@ -16813,14 +16818,15 @@ wrapperTag: div
16813
16818
  </button>
16814
16819
  </div>
16815
16820
  <div class="pf-v5-c-pagination__nav-page-select">
16816
- <input
16817
- class="pf-v5-c-form-control"
16818
- aria-label="Current page"
16819
- type="number"
16820
- min="1"
16821
- max="4"
16822
- value="1"
16823
- />
16821
+ <div class="pf-v5-c-form-control">
16822
+ <input
16823
+ aria-label="Current page"
16824
+ type="number"
16825
+ min="1"
16826
+ max="4"
16827
+ value="1"
16828
+ />
16829
+ </div>
16824
16830
  <span aria-hidden="true">of 4</span>
16825
16831
  </div>
16826
16832
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
@@ -20833,14 +20839,15 @@ wrapperTag: div
20833
20839
  </button>
20834
20840
  </div>
20835
20841
  <div class="pf-v5-c-pagination__nav-page-select">
20836
- <input
20837
- class="pf-v5-c-form-control"
20838
- aria-label="Current page"
20839
- type="number"
20840
- min="1"
20841
- max="4"
20842
- value="1"
20843
- />
20842
+ <div class="pf-v5-c-form-control">
20843
+ <input
20844
+ aria-label="Current page"
20845
+ type="number"
20846
+ min="1"
20847
+ max="4"
20848
+ value="1"
20849
+ />
20850
+ </div>
20844
20851
  <span aria-hidden="true">of 4</span>
20845
20852
  </div>
20846
20853
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
@@ -22710,14 +22717,15 @@ wrapperTag: div
22710
22717
  </button>
22711
22718
  </div>
22712
22719
  <div class="pf-v5-c-pagination__nav-page-select">
22713
- <input
22714
- class="pf-v5-c-form-control"
22715
- aria-label="Current page"
22716
- type="number"
22717
- min="1"
22718
- max="4"
22719
- value="1"
22720
- />
22720
+ <div class="pf-v5-c-form-control">
22721
+ <input
22722
+ aria-label="Current page"
22723
+ type="number"
22724
+ min="1"
22725
+ max="4"
22726
+ value="1"
22727
+ />
22728
+ </div>
22721
22729
  <span aria-hidden="true">of 4</span>
22722
22730
  </div>
22723
22731
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
@@ -24607,14 +24615,15 @@ wrapperTag: div
24607
24615
  </button>
24608
24616
  </div>
24609
24617
  <div class="pf-v5-c-pagination__nav-page-select">
24610
- <input
24611
- class="pf-v5-c-form-control"
24612
- aria-label="Current page"
24613
- type="number"
24614
- min="1"
24615
- max="4"
24616
- value="1"
24617
- />
24618
+ <div class="pf-v5-c-form-control">
24619
+ <input
24620
+ aria-label="Current page"
24621
+ type="number"
24622
+ min="1"
24623
+ max="4"
24624
+ value="1"
24625
+ />
24626
+ </div>
24618
24627
  <span aria-hidden="true">of 4</span>
24619
24628
  </div>
24620
24629
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
@@ -26503,14 +26512,15 @@ wrapperTag: div
26503
26512
  </button>
26504
26513
  </div>
26505
26514
  <div class="pf-v5-c-pagination__nav-page-select">
26506
- <input
26507
- class="pf-v5-c-form-control"
26508
- aria-label="Current page"
26509
- type="number"
26510
- min="1"
26511
- max="4"
26512
- value="1"
26513
- />
26515
+ <div class="pf-v5-c-form-control">
26516
+ <input
26517
+ aria-label="Current page"
26518
+ type="number"
26519
+ min="1"
26520
+ max="4"
26521
+ value="1"
26522
+ />
26523
+ </div>
26514
26524
  <span aria-hidden="true">of 4</span>
26515
26525
  </div>
26516
26526
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
@@ -28379,14 +28389,15 @@ wrapperTag: div
28379
28389
  </button>
28380
28390
  </div>
28381
28391
  <div class="pf-v5-c-pagination__nav-page-select">
28382
- <input
28383
- class="pf-v5-c-form-control"
28384
- aria-label="Current page"
28385
- type="number"
28386
- min="1"
28387
- max="4"
28388
- value="1"
28389
- />
28392
+ <div class="pf-v5-c-form-control">
28393
+ <input
28394
+ aria-label="Current page"
28395
+ type="number"
28396
+ min="1"
28397
+ max="4"
28398
+ value="1"
28399
+ />
28400
+ </div>
28390
28401
  <span aria-hidden="true">of 4</span>
28391
28402
  </div>
28392
28403
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
package/docs/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -1287,14 +1287,15 @@ section: components
1287
1287
  aria-label="search filter"
1288
1288
  role="group"
1289
1289
  >
1290
- <input
1291
- class="pf-v5-c-form-control"
1292
- type="text"
1293
- value="2020-03-05"
1294
- id="toolbar-with-validation-example-helper-text-input"
1295
- name="toolbar-with-validation-example-helper-text-input"
1296
- aria-label="Date picker"
1297
- />
1290
+ <div class="pf-v5-c-form-control">
1291
+ <input
1292
+ type="text"
1293
+ value="2020-03-05"
1294
+ id="toolbar-with-validation-example-helper-text-input"
1295
+ name="toolbar-with-validation-example-helper-text-input"
1296
+ aria-label="Date picker"
1297
+ />
1298
+ </div>
1298
1299
  <button
1299
1300
  class="pf-v5-c-button pf-m-control"
1300
1301
  type="button"
@@ -1321,15 +1322,16 @@ section: components
1321
1322
  aria-label="search filter"
1322
1323
  role="group"
1323
1324
  >
1324
- <input
1325
- class="pf-v5-c-form-control"
1326
- aria-invalid="true"
1327
- type="text"
1328
- value="2020-03-05"
1329
- id="toolbar-with-validation-example-invalid-input"
1330
- name="toolbar-with-validation-example-invalid-input"
1331
- aria-label="Date picker"
1332
- />
1325
+ <div class="pf-v5-c-form-control">
1326
+ <input
1327
+ aria-invalid="true"
1328
+ type="text"
1329
+ value="2020-03-05"
1330
+ id="toolbar-with-validation-example-invalid-input"
1331
+ name="toolbar-with-validation-example-invalid-input"
1332
+ aria-label="Date picker"
1333
+ />
1334
+ </div>
1333
1335
  <button
1334
1336
  class="pf-v5-c-button pf-m-control"
1335
1337
  type="button"
@@ -5231,14 +5233,15 @@ section: components
5231
5233
  </button>
5232
5234
  </div>
5233
5235
  <div class="pf-v5-c-pagination__nav-page-select">
5234
- <input
5235
- class="pf-v5-c-form-control"
5236
- aria-label="Current page"
5237
- type="number"
5238
- min="1"
5239
- max="4"
5240
- value="1"
5241
- />
5236
+ <div class="pf-v5-c-form-control">
5237
+ <input
5238
+ aria-label="Current page"
5239
+ type="number"
5240
+ min="1"
5241
+ max="4"
5242
+ value="1"
5243
+ />
5244
+ </div>
5242
5245
  <span aria-hidden="true">of 4</span>
5243
5246
  </div>
5244
5247
  <div class="pf-v5-c-pagination__nav-control pf-m-next">