@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.
Files changed (49) hide show
  1. package/components/FormControl/form-control.css +164 -214
  2. package/components/FormControl/form-control.scss +175 -281
  3. package/components/FormControl/themes/dark/form-control.scss +1 -2
  4. package/components/NumberInput/number-input.css +0 -1
  5. package/components/NumberInput/number-input.scss +0 -1
  6. package/components/Table/table-grid.css +380 -391
  7. package/components/Table/table-grid.scss +97 -92
  8. package/components/Table/table-tree-view.css +254 -254
  9. package/components/Table/table-tree-view.scss +30 -30
  10. package/components/Table/table.css +232 -232
  11. package/components/Table/table.scss +265 -255
  12. package/docs/components/CalendarMonth/examples/CalendarMonth.md +32 -28
  13. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +52 -46
  14. package/docs/components/DatePicker/examples/DatePicker.md +55 -49
  15. package/docs/components/FileUpload/examples/FileUpload.md +105 -93
  16. package/docs/components/Form/examples/Form.md +165 -145
  17. package/docs/components/FormControl/examples/FormControl.md +439 -475
  18. package/docs/components/InlineEdit/examples/InlineEdit.md +137 -104
  19. package/docs/components/InputGroup/examples/InputGroup.md +84 -74
  20. package/docs/components/Login/examples/Login.md +92 -82
  21. package/docs/components/NumberInput/examples/NumberInput.md +99 -87
  22. package/docs/components/Pagination/examples/Pagination.md +100 -89
  23. package/docs/components/Select/examples/Select.md +77 -68
  24. package/docs/components/Slider/examples/Slider.md +31 -44
  25. package/docs/components/Table/examples/Table.md +6839 -3703
  26. package/docs/components/TextInputGroup/examples/TextInputGroup.md +60 -52
  27. package/docs/components/Toolbar/examples/Toolbar.md +18 -16
  28. package/docs/components/Wizard/examples/Wizard.md +280 -245
  29. package/docs/demos/Alert/examples/Alert.md +69 -57
  30. package/docs/demos/Button/examples/Button.md +54 -48
  31. package/docs/demos/Card/examples/Card.md +73 -34
  32. package/docs/demos/CardView/examples/CardView.md +9 -8
  33. package/docs/demos/DataList/examples/DataList.md +223 -84
  34. package/docs/demos/DescriptionList/examples/DescriptionList.md +63 -23
  35. package/docs/demos/Form/examples/BasicForms.md +247 -227
  36. package/docs/demos/HelperText/examples/HelperText.md +37 -33
  37. package/docs/demos/Modal/examples/Modal.md +14 -21
  38. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +11 -10
  39. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +44 -40
  40. package/docs/demos/Table/examples/Table.md +2765 -1397
  41. package/docs/demos/Tabs/examples/Tabs.md +203 -50
  42. package/docs/demos/Toolbar/examples/Toolbar.md +300 -137
  43. package/docs/demos/Wizard/examples/Wizard.md +448 -392
  44. package/package.json +3 -3
  45. package/patternfly-no-globals.css +1027 -1089
  46. package/patternfly.css +1027 -1089
  47. package/patternfly.min.css +1 -1
  48. package/patternfly.min.css.map +1 -1
  49. package/docs/components/FormControl/examples/FormControl.css +0 -5
@@ -2004,15 +2004,16 @@ section: components
2004
2004
  >&#42;</span></label>
2005
2005
  </div>
2006
2006
  <div class="pf-v5-c-form__group-control">
2007
- <input
2008
- class="pf-v5-c-form-control"
2009
- required
2010
- type="text"
2011
- id="alert-horizontal-example-form-name"
2012
- name="alert-horizontal-example-form-name"
2013
- aria-invalid="true"
2014
- aria-describedby="alert-horizontal-example-form-name-helper"
2015
- />
2007
+ <div class="pf-v5-c-form-control">
2008
+ <input
2009
+ required
2010
+ type="text"
2011
+ id="alert-horizontal-example-form-name"
2012
+ name="alert-horizontal-example-form-name"
2013
+ aria-invalid="true"
2014
+ aria-describedby="alert-horizontal-example-form-name-helper"
2015
+ />
2016
+ </div>
2016
2017
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
2017
2018
  <div class="pf-v5-c-helper-text">
2018
2019
  <div
@@ -2036,14 +2037,15 @@ section: components
2036
2037
  >&#42;</span></label>
2037
2038
  </div>
2038
2039
  <div class="pf-v5-c-form__group-control">
2039
- <input
2040
- class="pf-v5-c-form-control"
2041
- type="text"
2042
- value="patternfly@patternfly.com"
2043
- id="alert-horizontal-example-form-email"
2044
- name="alert-horizontal-example-form-email"
2045
- required
2046
- />
2040
+ <div class="pf-v5-c-form-control">
2041
+ <input
2042
+ type="text"
2043
+ value="patternfly@patternfly.com"
2044
+ id="alert-horizontal-example-form-email"
2045
+ name="alert-horizontal-example-form-email"
2046
+ required
2047
+ />
2048
+ </div>
2047
2049
  </div>
2048
2050
  </div>
2049
2051
  <div class="pf-v5-c-form__group">
@@ -2057,15 +2059,16 @@ section: components
2057
2059
  >&#42;</span></label>
2058
2060
  </div>
2059
2061
  <div class="pf-v5-c-form__group-control">
2060
- <input
2061
- class="pf-v5-c-form-control"
2062
- required
2063
- type="text"
2064
- id="alert-horizontal-example-form-phone"
2065
- name="alert-horizontal-example-form-phone"
2066
- aria-invalid="true"
2067
- aria-describedby="alert-horizontal-example-form-phone-helper"
2068
- />
2062
+ <div class="pf-v5-c-form-control">
2063
+ <input
2064
+ required
2065
+ type="text"
2066
+ id="alert-horizontal-example-form-phone"
2067
+ name="alert-horizontal-example-form-phone"
2068
+ aria-invalid="true"
2069
+ aria-describedby="alert-horizontal-example-form-phone-helper"
2070
+ />
2071
+ </div>
2069
2072
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
2070
2073
  <div class="pf-v5-c-helper-text">
2071
2074
  <div
@@ -3115,15 +3118,16 @@ section: components
3115
3118
  >&#42;</span></label>
3116
3119
  </div>
3117
3120
  <div class="pf-v5-c-form__group-control">
3118
- <input
3119
- class="pf-v5-c-form-control"
3120
- required
3121
- type="text"
3122
- id="alert-stacked-example-form-name"
3123
- name="alert-stacked-example-form-name"
3124
- aria-invalid="true"
3125
- aria-describedby="alert-stacked-example-form-helper"
3126
- />
3121
+ <div class="pf-v5-c-form-control">
3122
+ <input
3123
+ required
3124
+ type="text"
3125
+ id="alert-stacked-example-form-name"
3126
+ name="alert-stacked-example-form-name"
3127
+ aria-invalid="true"
3128
+ aria-describedby="alert-stacked-example-form-helper"
3129
+ />
3130
+ </div>
3127
3131
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
3128
3132
  <div class="pf-v5-c-helper-text">
3129
3133
  <div
@@ -3147,14 +3151,15 @@ section: components
3147
3151
  >&#42;</span></label>
3148
3152
  </div>
3149
3153
  <div class="pf-v5-c-form__group-control">
3150
- <input
3151
- class="pf-v5-c-form-control"
3152
- type="text"
3153
- value="patternfly.com"
3154
- id="alert-stacked-example-form-email"
3155
- name="alert-stacked-example-form-email"
3156
- required
3157
- />
3154
+ <div class="pf-v5-c-form-control">
3155
+ <input
3156
+ type="text"
3157
+ value="patternfly.com"
3158
+ id="alert-stacked-example-form-email"
3159
+ name="alert-stacked-example-form-email"
3160
+ required
3161
+ />
3162
+ </div>
3158
3163
  </div>
3159
3164
  <div class="pf-v5-c-form__helper-text" aria-live="polite">
3160
3165
  <div class="pf-v5-c-helper-text">
@@ -3179,20 +3184,27 @@ section: components
3179
3184
  aria-hidden="true"
3180
3185
  >&#42;</span></label>
3181
3186
  </div>
3182
- <select
3183
- class="pf-v5-c-form-control"
3184
- required
3185
- aria-invalid="true"
3186
- id="select-group-error"
3187
- name="select-group-error"
3188
- aria-label="Error state select group example"
3189
- >
3190
- <option value>Select a state</option>
3191
- <option value="Option 1">CA</option>
3192
- <option value="Option 2">FL</option>
3193
- <option value="Option 3">MA</option>
3194
- <option value="Option 4">NY</option>
3195
- </select>
3187
+ <div class="pf-v5-c-form-control">
3188
+ <select
3189
+ class
3190
+ required
3191
+ aria-invalid="true"
3192
+ id="select-group-error"
3193
+ name="select-group-error"
3194
+ aria-label="Error state select group example"
3195
+ >
3196
+ <option value>Select a state</option>
3197
+ <option value="Option 1">CA</option>
3198
+ <option value="Option 2">FL</option>
3199
+ <option value="Option 3">MA</option>
3200
+ <option value="Option 4">NY</option>
3201
+ </select>
3202
+ <div class="pf-v5-c-form-control__utilities">
3203
+ <div class="pf-v5-c-form-control__toggle-icon">
3204
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3205
+ </div>
3206
+ </div>
3207
+ </div>
3196
3208
  <div
3197
3209
  class="pf-v5-c-form__helper-text"
3198
3210
  aria-live="polite"
@@ -13,14 +13,15 @@ cssPrefix: pf-d-button
13
13
  <span class="pf-v5-c-form__label-text">Username</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
14
14
  </div>
15
15
  <div class="pf-v5-c-form__group-control">
16
- <input
17
- class="pf-v5-c-form-control"
18
- type="text"
19
- id="progress-button-example-login"
20
- name="progress-button-example-login"
21
- value="johndoe"
22
- required
23
- />
16
+ <div class="pf-v5-c-form-control">
17
+ <input
18
+ type="text"
19
+ id="progress-button-example-login"
20
+ name="progress-button-example-login"
21
+ value="johndoe"
22
+ required
23
+ />
24
+ </div>
24
25
  </div>
25
26
  </div>
26
27
  <div class="pf-v5-c-form__group">
@@ -28,14 +29,15 @@ cssPrefix: pf-d-button
28
29
  <span class="pf-v5-c-form__label-text">Password</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
29
30
  </div>
30
31
  <div class="pf-v5-c-form__group-control">
31
- <input
32
- class="pf-v5-c-form-control"
33
- type="password"
34
- value="p@ssw0rd"
35
- id="progress-button-example-password"
36
- name="progress-button-example-password"
37
- required
38
- />
32
+ <div class="pf-v5-c-form-control">
33
+ <input
34
+ type="password"
35
+ value="p@ssw0rd"
36
+ id="progress-button-example-password"
37
+ name="progress-button-example-password"
38
+ required
39
+ />
40
+ </div>
39
41
  </div>
40
42
  </div>
41
43
  <div class="pf-v5-c-form__group pf-m-action">
@@ -62,14 +64,15 @@ cssPrefix: pf-d-button
62
64
  <span class="pf-v5-c-form__label-text">Username</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
63
65
  </div>
64
66
  <div class="pf-v5-c-form__group-control">
65
- <input
66
- class="pf-v5-c-form-control"
67
- type="text"
68
- id="progress-button-loading-example-login"
69
- name="progress-button-loading-example-login"
70
- value="johndoe"
71
- required
72
- />
67
+ <div class="pf-v5-c-form-control">
68
+ <input
69
+ type="text"
70
+ id="progress-button-loading-example-login"
71
+ name="progress-button-loading-example-login"
72
+ value="johndoe"
73
+ required
74
+ />
75
+ </div>
73
76
  </div>
74
77
  </div>
75
78
  <div class="pf-v5-c-form__group">
@@ -80,14 +83,15 @@ cssPrefix: pf-d-button
80
83
  <span class="pf-v5-c-form__label-text">Password</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
81
84
  </div>
82
85
  <div class="pf-v5-c-form__group-control">
83
- <input
84
- class="pf-v5-c-form-control"
85
- type="password"
86
- value="p@ssw0rd"
87
- id="progress-button-loading-example-password"
88
- name="progress-button-loading-example-password"
89
- required
90
- />
86
+ <div class="pf-v5-c-form-control">
87
+ <input
88
+ type="password"
89
+ value="p@ssw0rd"
90
+ id="progress-button-loading-example-password"
91
+ name="progress-button-loading-example-password"
92
+ required
93
+ />
94
+ </div>
91
95
  </div>
92
96
  </div>
93
97
  <div class="pf-v5-c-form__group pf-m-action">
@@ -132,14 +136,15 @@ cssPrefix: pf-d-button
132
136
  <span class="pf-v5-c-form__label-text">Username</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
133
137
  </div>
134
138
  <div class="pf-v5-c-form__group-control">
135
- <input
136
- class="pf-v5-c-form-control"
137
- type="text"
138
- id="progress-button-complete-example-login"
139
- name="progress-button-complete-example-login"
140
- value="johndoe"
141
- required
142
- />
139
+ <div class="pf-v5-c-form-control">
140
+ <input
141
+ type="text"
142
+ id="progress-button-complete-example-login"
143
+ name="progress-button-complete-example-login"
144
+ value="johndoe"
145
+ required
146
+ />
147
+ </div>
143
148
  </div>
144
149
  </div>
145
150
  <div class="pf-v5-c-form__group">
@@ -150,14 +155,15 @@ cssPrefix: pf-d-button
150
155
  <span class="pf-v5-c-form__label-text">Password</span>&nbsp;<span class="pf-v5-c-form__label-required" aria-hidden="true">&#42;</span></label>
151
156
  </div>
152
157
  <div class="pf-v5-c-form__group-control">
153
- <input
154
- class="pf-v5-c-form-control"
155
- type="password"
156
- value="p@ssw0rd"
157
- id="progress-button-complete-example-password"
158
- name="progress-button-complete-example-password"
159
- required
160
- />
158
+ <div class="pf-v5-c-form-control">
159
+ <input
160
+ type="password"
161
+ value="p@ssw0rd"
162
+ id="progress-button-complete-example-password"
163
+ name="progress-button-complete-example-password"
164
+ required
165
+ />
166
+ </div>
161
167
  </div>
162
168
  </div>
163
169
  <div class="pf-v5-c-form__group pf-m-action">
@@ -1400,18 +1400,24 @@ wrapperTag: div
1400
1400
  aria-label="Control panel table"
1401
1401
  id="status-card-expanded-with-popover-example-popover-table"
1402
1402
  >
1403
- <thead>
1404
- <tr>
1405
- <td role="cell"></td>
1406
-
1407
- <th scope="col">Components</th>
1408
- <th class="pf-m-fit-content" scope="col">Response rate</th>
1403
+ <thead class="pf-v5-c-table__thead">
1404
+ <tr class="pf-v5-c-table__tr">
1405
+ <td class="pf-v5-c-table__td" role="cell"></td>
1406
+
1407
+ <th class="pf-v5-c-table__th" scope="col">Components</th>
1408
+ <th
1409
+ class="pf-v5-c-table__th pf-m-fit-content"
1410
+ scope="col"
1411
+ >Response rate</th>
1409
1412
  </tr>
1410
1413
  </thead>
1411
1414
 
1412
- <tbody class="pf-m-expanded">
1413
- <tr>
1414
- <td class="pf-v5-c-table__toggle" role="cell">
1415
+ <tbody class="pf-v5-c-table__tbody pf-m-expanded">
1416
+ <tr class="pf-v5-c-table__tr">
1417
+ <td
1418
+ class="pf-v5-c-table__td pf-v5-c-table__toggle"
1419
+ role="cell"
1420
+ >
1415
1421
  <button
1416
1422
  class="pf-v5-c-button pf-m-plain pf-m-expanded"
1417
1423
  aria-labelledby="status-card-expanded-with-popover-example-popover-table-node1 expandable-toggle1"
@@ -1427,14 +1433,18 @@ wrapperTag: div
1427
1433
  </td>
1428
1434
 
1429
1435
  <td
1430
- class
1436
+ class="pf-v5-c-table__td"
1431
1437
  role="cell"
1432
1438
  id="{{table--id}}-node1"
1433
1439
  data-label="Branches"
1434
1440
  >
1435
1441
  <span class="pf-v5-c-table__text">API Servers</span>
1436
1442
  </td>
1437
- <td role="cell" data-label="Pull requests">
1443
+ <td
1444
+ class="pf-v5-c-table__td"
1445
+ role="cell"
1446
+ data-label="Pull requests"
1447
+ >
1438
1448
  <span class="pf-v5-c-table__text">
1439
1449
  20%&nbsp;
1440
1450
  <i
@@ -1445,9 +1455,11 @@ wrapperTag: div
1445
1455
  </td>
1446
1456
  </tr>
1447
1457
 
1448
- <tr class="pf-v5-c-table__expandable-row pf-m-expanded">
1458
+ <tr
1459
+ class="pf-v5-c-table__tr pf-v5-c-table__expandable-row pf-m-expanded"
1460
+ >
1449
1461
  <td
1450
- class
1462
+ class="pf-v5-c-table__td"
1451
1463
  role="cell"
1452
1464
  colspan="3"
1453
1465
  id="status-card-expanded-with-popover-example-popover-table-content1"
@@ -1475,9 +1487,12 @@ wrapperTag: div
1475
1487
  </tr>
1476
1488
  </tbody>
1477
1489
 
1478
- <tbody>
1479
- <tr>
1480
- <td class="pf-v5-c-table__toggle" role="cell">
1490
+ <tbody class="pf-v5-c-table__tbody">
1491
+ <tr class="pf-v5-c-table__tr">
1492
+ <td
1493
+ class="pf-v5-c-table__td pf-v5-c-table__toggle"
1494
+ role="cell"
1495
+ >
1481
1496
  <button
1482
1497
  class="pf-v5-c-button pf-m-plain"
1483
1498
  aria-labelledby="status-card-expanded-with-popover-example-popover-table-node1 expandable-toggle2"
@@ -1492,7 +1507,7 @@ wrapperTag: div
1492
1507
  </td>
1493
1508
 
1494
1509
  <td
1495
- class
1510
+ class="pf-v5-c-table__td"
1496
1511
  role="cell"
1497
1512
  id="{{table--id}}-node2"
1498
1513
  data-label="Branches"
@@ -1501,7 +1516,11 @@ wrapperTag: div
1501
1516
  class="pf-v5-c-table__text"
1502
1517
  >Controller Managers</span>
1503
1518
  </td>
1504
- <td role="cell" data-label="Pull requests">
1519
+ <td
1520
+ class="pf-v5-c-table__td"
1521
+ role="cell"
1522
+ data-label="Pull requests"
1523
+ >
1505
1524
  <span class="pf-v5-c-table__text">
1506
1525
  100%&nbsp;
1507
1526
  <i
@@ -1512,9 +1531,11 @@ wrapperTag: div
1512
1531
  </td>
1513
1532
  </tr>
1514
1533
 
1515
- <tr class="pf-v5-c-table__expandable-row">
1534
+ <tr
1535
+ class="pf-v5-c-table__tr pf-v5-c-table__expandable-row"
1536
+ >
1516
1537
  <td
1517
- class
1538
+ class="pf-v5-c-table__td"
1518
1539
  role="cell"
1519
1540
  colspan="3"
1520
1541
  id="status-card-expanded-with-popover-example-popover-table-content2"
@@ -1526,9 +1547,12 @@ wrapperTag: div
1526
1547
  </tr>
1527
1548
  </tbody>
1528
1549
 
1529
- <tbody>
1530
- <tr>
1531
- <td class="pf-v5-c-table__toggle" role="cell">
1550
+ <tbody class="pf-v5-c-table__tbody">
1551
+ <tr class="pf-v5-c-table__tr">
1552
+ <td
1553
+ class="pf-v5-c-table__td pf-v5-c-table__toggle"
1554
+ role="cell"
1555
+ >
1532
1556
  <button
1533
1557
  class="pf-v5-c-button pf-m-plain"
1534
1558
  aria-labelledby="status-card-expanded-with-popover-example-popover-table-node1 expandable-toggle3"
@@ -1543,14 +1567,18 @@ wrapperTag: div
1543
1567
  </td>
1544
1568
 
1545
1569
  <td
1546
- class
1570
+ class="pf-v5-c-table__td"
1547
1571
  role="cell"
1548
1572
  id="{{table--id}}-node3"
1549
1573
  data-label="Branches"
1550
1574
  >
1551
1575
  <span class="pf-v5-c-table__text">Schedulers</span>
1552
1576
  </td>
1553
- <td role="cell" data-label="Pull requests">
1577
+ <td
1578
+ class="pf-v5-c-table__td"
1579
+ role="cell"
1580
+ data-label="Pull requests"
1581
+ >
1554
1582
  <span class="pf-v5-c-table__text">
1555
1583
  100%&nbsp;
1556
1584
  <i
@@ -1561,9 +1589,11 @@ wrapperTag: div
1561
1589
  </td>
1562
1590
  </tr>
1563
1591
 
1564
- <tr class="pf-v5-c-table__expandable-row">
1592
+ <tr
1593
+ class="pf-v5-c-table__tr pf-v5-c-table__expandable-row"
1594
+ >
1565
1595
  <td
1566
- class
1596
+ class="pf-v5-c-table__td"
1567
1597
  role="cell"
1568
1598
  colspan="3"
1569
1599
  id="status-card-expanded-with-popover-example-popover-table-content3"
@@ -1575,9 +1605,12 @@ wrapperTag: div
1575
1605
  </tr>
1576
1606
  </tbody>
1577
1607
 
1578
- <tbody>
1579
- <tr>
1580
- <td class="pf-v5-c-table__toggle" role="cell">
1608
+ <tbody class="pf-v5-c-table__tbody">
1609
+ <tr class="pf-v5-c-table__tr">
1610
+ <td
1611
+ class="pf-v5-c-table__td pf-v5-c-table__toggle"
1612
+ role="cell"
1613
+ >
1581
1614
  <button
1582
1615
  class="pf-v5-c-button pf-m-plain"
1583
1616
  aria-labelledby="status-card-expanded-with-popover-example-popover-table-node1 expandable-toggle4"
@@ -1592,14 +1625,18 @@ wrapperTag: div
1592
1625
  </td>
1593
1626
 
1594
1627
  <td
1595
- class
1628
+ class="pf-v5-c-table__td"
1596
1629
  role="cell"
1597
1630
  id="{{table--id}}-node4"
1598
1631
  data-label="Branches"
1599
1632
  >
1600
1633
  <span class="pf-v5-c-table__text">etcd</span>
1601
1634
  </td>
1602
- <td role="cell" data-label="Pull requests">
1635
+ <td
1636
+ class="pf-v5-c-table__td"
1637
+ role="cell"
1638
+ data-label="Pull requests"
1639
+ >
1603
1640
  <span class="pf-v5-c-table__text">
1604
1641
  91%&nbsp;
1605
1642
  <i
@@ -1610,9 +1647,11 @@ wrapperTag: div
1610
1647
  </td>
1611
1648
  </tr>
1612
1649
 
1613
- <tr class="pf-v5-c-table__expandable-row">
1650
+ <tr
1651
+ class="pf-v5-c-table__tr pf-v5-c-table__expandable-row"
1652
+ >
1614
1653
  <td
1615
- class
1654
+ class="pf-v5-c-table__td"
1616
1655
  role="cell"
1617
1656
  colspan="3"
1618
1657
  id="status-card-expanded-with-popover-example-popover-table-content4"
@@ -2237,14 +2237,15 @@ section: patterns
2237
2237
  </button>
2238
2238
  </div>
2239
2239
  <div class="pf-v5-c-pagination__nav-page-select">
2240
- <input
2241
- class="pf-v5-c-form-control"
2242
- aria-label="Current page"
2243
- type="number"
2244
- min="1"
2245
- max="4"
2246
- value="1"
2247
- />
2240
+ <div class="pf-v5-c-form-control">
2241
+ <input
2242
+ aria-label="Current page"
2243
+ type="number"
2244
+ min="1"
2245
+ max="4"
2246
+ value="1"
2247
+ />
2248
+ </div>
2248
2249
  <span aria-hidden="true">of 4</span>
2249
2250
  </div>
2250
2251
  <div class="pf-v5-c-pagination__nav-control pf-m-next">