@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/Alert/examples/Alert.md CHANGED
@@ -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"
package/docs/demos/Button/examples/Button.md CHANGED
@@ -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">
package/docs/demos/CardView/examples/CardView.md CHANGED
@@ -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">
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -1559,14 +1559,15 @@ wrapperTag: div
1559
1559
  </button>
1560
1560
  </div>
1561
1561
  <div class="pf-v5-c-pagination__nav-page-select">
1562
- <input
1563
- class="pf-v5-c-form-control"
1564
- aria-label="Current page"
1565
- type="number"
1566
- min="1"
1567
- max="4"
1568
- value="1"
1569
- />
1562
+ <div class="pf-v5-c-form-control">
1563
+ <input
1564
+ aria-label="Current page"
1565
+ type="number"
1566
+ min="1"
1567
+ max="4"
1568
+ value="1"
1569
+ />
1570
+ </div>
1570
1571
  <span aria-hidden="true">of 4</span>
1571
1572
  </div>
1572
1573
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
@@ -3141,14 +3142,15 @@ wrapperTag: div
3141
3142
  </button>
3142
3143
  </div>
3143
3144
  <div class="pf-v5-c-pagination__nav-page-select">
3144
- <input
3145
- class="pf-v5-c-form-control"
3146
- aria-label="Current page"
3147
- type="number"
3148
- min="1"
3149
- max="4"
3150
- value="1"
3151
- />
3145
+ <div class="pf-v5-c-form-control">
3146
+ <input
3147
+ aria-label="Current page"
3148
+ type="number"
3149
+ min="1"
3150
+ max="4"
3151
+ value="1"
3152
+ />
3153
+ </div>
3152
3154
  <span aria-hidden="true">of 4</span>
3153
3155
  </div>
3154
3156
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
@@ -5360,14 +5362,15 @@ wrapperTag: div
5360
5362
  </button>
5361
5363
  </div>
5362
5364
  <div class="pf-v5-c-pagination__nav-page-select">
5363
- <input
5364
- class="pf-v5-c-form-control"
5365
- aria-label="Current page"
5366
- type="number"
5367
- min="1"
5368
- max="4"
5369
- value="1"
5370
- />
5365
+ <div class="pf-v5-c-form-control">
5366
+ <input
5367
+ aria-label="Current page"
5368
+ type="number"
5369
+ min="1"
5370
+ max="4"
5371
+ value="1"
5372
+ />
5373
+ </div>
5371
5374
  <span aria-hidden="true">of 4</span>
5372
5375
  </div>
5373
5376
  <div class="pf-v5-c-pagination__nav-control pf-m-next">
@@ -6972,14 +6975,15 @@ wrapperTag: div
6972
6975
  </button>
6973
6976
  </div>
6974
6977
  <div class="pf-v5-c-pagination__nav-page-select">
6975
- <input
6976
- class="pf-v5-c-form-control"
6977
- aria-label="Current page"
6978
- type="number"
6979
- min="1"
6980
- max="4"
6981
- value="1"
6982
- />
6978
+ <div class="pf-v5-c-form-control">
6979
+ <input
6980
+ aria-label="Current page"
6981
+ type="number"
6982
+ min="1"
6983
+ max="4"
6984
+ value="1"
6985
+ />
6986
+ </div>
6983
6987
  <span aria-hidden="true">of 4</span>
6984
6988
  </div>
6985
6989
  <div class="pf-v5-c-pagination__nav-control pf-m-next">