@patternfly/patternfly 5.0.0-alpha.31 → 5.0.0-alpha.32

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 (27) hide show
  1. package/components/InputGroup/input-group.css +61 -85
  2. package/components/InputGroup/input-group.scss +55 -61
  3. package/components/InputGroup/themes/dark/input-group.scss +11 -25
  4. package/components/OptionsMenu/options-menu.css +0 -5
  5. package/components/OptionsMenu/options-menu.scss +0 -6
  6. package/docs/components/CalendarMonth/examples/CalendarMonth.md +268 -252
  7. package/docs/components/DatePicker/examples/DatePicker.md +115 -91
  8. package/docs/components/FileUpload/examples/FileUpload.md +127 -91
  9. package/docs/components/InputGroup/examples/InputGroup.md +219 -169
  10. package/docs/components/NumberInput/examples/NumberInput.md +299 -227
  11. package/docs/components/SearchInput/examples/SearchInput.md +151 -113
  12. package/docs/components/Slider/examples/Slider.md +60 -38
  13. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -132
  14. package/docs/components/Toolbar/examples/Toolbar.md +374 -345
  15. package/docs/demos/DataList/examples/DataList.md +158 -150
  16. package/docs/demos/Form/examples/BasicForms.md +77 -66
  17. package/docs/demos/Masthead/examples/Masthead.md +279 -258
  18. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +21 -17
  19. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +103 -121
  20. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +266 -232
  21. package/docs/demos/Table/examples/Table.md +950 -902
  22. package/docs/demos/Toolbar/examples/Toolbar.md +313 -294
  23. package/package.json +1 -1
  24. package/patternfly-no-reset.css +60 -79
  25. package/patternfly.css +60 -79
  26. package/patternfly.min.css +1 -1
  27. package/patternfly.min.css.map +1 -1
package/docs/components/NumberInput/examples/NumberInput.md CHANGED
@@ -9,23 +9,29 @@ cssPrefix: pf-c-number-input
9
9
  ```html
10
10
  <div class="pf-c-number-input">
11
11
  <div class="pf-c-input-group">
12
- <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
13
- <span class="pf-c-number-input__icon">
14
- <i class="fas fa-minus" aria-hidden="true"></i>
15
- </span>
16
- </button>
17
- <input
18
- class="pf-c-form-control"
19
- type="number"
20
- value="90"
21
- name="number-input-default-name"
22
- aria-label="Number input"
23
- />
24
- <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
25
- <span class="pf-c-number-input__icon">
26
- <i class="fas fa-plus" aria-hidden="true"></i>
27
- </span>
28
- </button>
12
+ <div class="pf-c-input-group__item">
13
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
14
+ <span class="pf-c-number-input__icon">
15
+ <i class="fas fa-minus" aria-hidden="true"></i>
16
+ </span>
17
+ </button>
18
+ </div>
19
+ <div class="pf-c-input-group__item pf-m-fill">
20
+ <input
21
+ class="pf-c-form-control"
22
+ type="number"
23
+ value="90"
24
+ name="number-input-default-name"
25
+ aria-label="Number input"
26
+ />
27
+ </div>
28
+ <div class="pf-c-input-group__item">
29
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
30
+ <span class="pf-c-number-input__icon">
31
+ <i class="fas fa-plus" aria-hidden="true"></i>
32
+ </span>
33
+ </button>
34
+ </div>
29
35
  </div>
30
36
  </div>
31
37
 
@@ -36,23 +42,29 @@ cssPrefix: pf-c-number-input
36
42
  ```html
37
43
  <div class="pf-c-number-input">
38
44
  <div class="pf-c-input-group">
39
- <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
40
- <span class="pf-c-number-input__icon">
41
- <i class="fas fa-minus" aria-hidden="true"></i>
42
- </span>
43
- </button>
44
- <input
45
- class="pf-c-form-control"
46
- type="number"
47
- value="90"
48
- name="number-input-unit-name"
49
- aria-label="Number input"
50
- />
51
- <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
52
- <span class="pf-c-number-input__icon">
53
- <i class="fas fa-plus" aria-hidden="true"></i>
54
- </span>
55
- </button>
45
+ <div class="pf-c-input-group__item">
46
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
47
+ <span class="pf-c-number-input__icon">
48
+ <i class="fas fa-minus" aria-hidden="true"></i>
49
+ </span>
50
+ </button>
51
+ </div>
52
+ <div class="pf-c-input-group__item pf-m-fill">
53
+ <input
54
+ class="pf-c-form-control"
55
+ type="number"
56
+ value="90"
57
+ name="number-input-unit-name"
58
+ aria-label="Number input"
59
+ />
60
+ </div>
61
+ <div class="pf-c-input-group__item">
62
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
63
+ <span class="pf-c-number-input__icon">
64
+ <i class="fas fa-plus" aria-hidden="true"></i>
65
+ </span>
66
+ </button>
67
+ </div>
56
68
  </div>
57
69
  <span class="pf-c-number-input__unit">%</span>
58
70
  </div>
@@ -62,23 +74,29 @@ cssPrefix: pf-c-number-input
62
74
  <span class="pf-c-number-input__unit">$</span>
63
75
 
64
76
  <div class="pf-c-input-group">
65
- <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
66
- <span class="pf-c-number-input__icon">
67
- <i class="fas fa-minus" aria-hidden="true"></i>
68
- </span>
69
- </button>
70
- <input
71
- class="pf-c-form-control"
72
- type="number"
73
- value="1.00"
74
- name="number-input-unit2-name"
75
- aria-label="Number input"
76
- />
77
- <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
78
- <span class="pf-c-number-input__icon">
79
- <i class="fas fa-plus" aria-hidden="true"></i>
80
- </span>
81
- </button>
77
+ <div class="pf-c-input-group__item">
78
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
79
+ <span class="pf-c-number-input__icon">
80
+ <i class="fas fa-minus" aria-hidden="true"></i>
81
+ </span>
82
+ </button>
83
+ </div>
84
+ <div class="pf-c-input-group__item pf-m-fill">
85
+ <input
86
+ class="pf-c-form-control"
87
+ type="number"
88
+ value="1.00"
89
+ name="number-input-unit2-name"
90
+ aria-label="Number input"
91
+ />
92
+ </div>
93
+ <div class="pf-c-input-group__item">
94
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
95
+ <span class="pf-c-number-input__icon">
96
+ <i class="fas fa-plus" aria-hidden="true"></i>
97
+ </span>
98
+ </button>
99
+ </div>
82
100
  </div>
83
101
  </div>
84
102
 
@@ -89,29 +107,35 @@ cssPrefix: pf-c-number-input
89
107
  ```html
90
108
  <div class="pf-c-number-input">
91
109
  <div class="pf-c-input-group">
92
- <button
93
- class="pf-c-button pf-m-control"
94
- type="button"
95
- aria-label="Minus"
96
- disabled
97
- >
98
- <span class="pf-c-number-input__icon">
99
- <i class="fas fa-minus" aria-hidden="true"></i>
100
- </span>
101
- </button>
102
- <input
103
- class="pf-c-form-control"
104
- type="number"
105
- value="0"
106
- min="0"
107
- name="number-input-unit-lower-threshold-name"
108
- aria-label="Number input"
109
- />
110
- <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
111
- <span class="pf-c-number-input__icon">
112
- <i class="fas fa-plus" aria-hidden="true"></i>
113
- </span>
114
- </button>
110
+ <div class="pf-c-input-group__item">
111
+ <button
112
+ class="pf-c-button pf-m-control"
113
+ type="button"
114
+ aria-label="Minus"
115
+ disabled
116
+ >
117
+ <span class="pf-c-number-input__icon">
118
+ <i class="fas fa-minus" aria-hidden="true"></i>
119
+ </span>
120
+ </button>
121
+ </div>
122
+ <div class="pf-c-input-group__item pf-m-fill">
123
+ <input
124
+ class="pf-c-form-control"
125
+ type="number"
126
+ value="0"
127
+ min="0"
128
+ name="number-input-unit-lower-threshold-name"
129
+ aria-label="Number input"
130
+ />
131
+ </div>
132
+ <div class="pf-c-input-group__item">
133
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
134
+ <span class="pf-c-number-input__icon">
135
+ <i class="fas fa-plus" aria-hidden="true"></i>
136
+ </span>
137
+ </button>
138
+ </div>
115
139
  </div>
116
140
  <span class="pf-c-number-input__unit">%</span>
117
141
  </div>
@@ -123,29 +147,35 @@ cssPrefix: pf-c-number-input
123
147
  ```html
124
148
  <div class="pf-c-number-input">
125
149
  <div class="pf-c-input-group">
126
- <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
127
- <span class="pf-c-number-input__icon">
128
- <i class="fas fa-minus" aria-hidden="true"></i>
129
- </span>
130
- </button>
131
- <input
132
- class="pf-c-form-control"
133
- type="number"
134
- value="100"
135
- max="100"
136
- name="number-input-unit-upper-threshold-name"
137
- aria-label="Number input"
138
- />
139
- <button
140
- class="pf-c-button pf-m-control"
141
- type="button"
142
- aria-label="Plus"
143
- disabled
144
- >
145
- <span class="pf-c-number-input__icon">
146
- <i class="fas fa-plus" aria-hidden="true"></i>
147
- </span>
148
- </button>
150
+ <div class="pf-c-input-group__item">
151
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
152
+ <span class="pf-c-number-input__icon">
153
+ <i class="fas fa-minus" aria-hidden="true"></i>
154
+ </span>
155
+ </button>
156
+ </div>
157
+ <div class="pf-c-input-group__item pf-m-fill">
158
+ <input
159
+ class="pf-c-form-control"
160
+ type="number"
161
+ value="100"
162
+ max="100"
163
+ name="number-input-unit-upper-threshold-name"
164
+ aria-label="Number input"
165
+ />
166
+ </div>
167
+ <div class="pf-c-input-group__item">
168
+ <button
169
+ class="pf-c-button pf-m-control"
170
+ type="button"
171
+ aria-label="Plus"
172
+ disabled
173
+ >
174
+ <span class="pf-c-number-input__icon">
175
+ <i class="fas fa-plus" aria-hidden="true"></i>
176
+ </span>
177
+ </button>
178
+ </div>
149
179
  </div>
150
180
  <span class="pf-c-number-input__unit">%</span>
151
181
  </div>
@@ -157,34 +187,40 @@ cssPrefix: pf-c-number-input
157
187
  ```html
158
188
  <div class="pf-c-number-input">
159
189
  <div class="pf-c-input-group">
160
- <button
161
- class="pf-c-button pf-m-control"
162
- type="button"
163
- aria-label="Minus"
164
- disabled
165
- >
166
- <span class="pf-c-number-input__icon">
167
- <i class="fas fa-minus" aria-hidden="true"></i>
168
- </span>
169
- </button>
170
- <input
171
- class="pf-c-form-control"
172
- type="number"
173
- value="100"
174
- name="number-input-disabled-name"
175
- aria-label="Number input"
176
- disabled
177
- />
178
- <button
179
- class="pf-c-button pf-m-control"
180
- type="button"
181
- aria-label="Plus"
182
- disabled
183
- >
184
- <span class="pf-c-number-input__icon">
185
- <i class="fas fa-plus" aria-hidden="true"></i>
186
- </span>
187
- </button>
190
+ <div class="pf-c-input-group__item">
191
+ <button
192
+ class="pf-c-button pf-m-control"
193
+ type="button"
194
+ aria-label="Minus"
195
+ disabled
196
+ >
197
+ <span class="pf-c-number-input__icon">
198
+ <i class="fas fa-minus" aria-hidden="true"></i>
199
+ </span>
200
+ </button>
201
+ </div>
202
+ <div class="pf-c-input-group__item pf-m-fill">
203
+ <input
204
+ class="pf-c-form-control"
205
+ type="number"
206
+ value="100"
207
+ name="number-input-disabled-name"
208
+ aria-label="Number input"
209
+ disabled
210
+ />
211
+ </div>
212
+ <div class="pf-c-input-group__item">
213
+ <button
214
+ class="pf-c-button pf-m-control"
215
+ type="button"
216
+ aria-label="Plus"
217
+ disabled
218
+ >
219
+ <span class="pf-c-number-input__icon">
220
+ <i class="fas fa-plus" aria-hidden="true"></i>
221
+ </span>
222
+ </button>
223
+ </div>
188
224
  </div>
189
225
  <span class="pf-c-number-input__unit">%</span>
190
226
  </div>
@@ -196,46 +232,58 @@ cssPrefix: pf-c-number-input
196
232
  ```html
197
233
  <div class="pf-c-number-input pf-m-status">
198
234
  <div class="pf-c-input-group">
199
- <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
200
- <span class="pf-c-number-input__icon">
201
- <i class="fas fa-minus" aria-hidden="true"></i>
202
- </span>
203
- </button>
204
- <input
205
- class="pf-c-form-control"
206
- type="number"
207
- value="90"
208
- name="number-input-status-name"
209
- aria-label="Number input"
210
- />
211
- <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
212
- <span class="pf-c-number-input__icon">
213
- <i class="fas fa-plus" aria-hidden="true"></i>
214
- </span>
215
- </button>
235
+ <div class="pf-c-input-group__item">
236
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
237
+ <span class="pf-c-number-input__icon">
238
+ <i class="fas fa-minus" aria-hidden="true"></i>
239
+ </span>
240
+ </button>
241
+ </div>
242
+ <div class="pf-c-input-group__item pf-m-fill">
243
+ <input
244
+ class="pf-c-form-control"
245
+ type="number"
246
+ value="90"
247
+ name="number-input-status-name"
248
+ aria-label="Number input"
249
+ />
250
+ </div>
251
+ <div class="pf-c-input-group__item">
252
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
253
+ <span class="pf-c-number-input__icon">
254
+ <i class="fas fa-plus" aria-hidden="true"></i>
255
+ </span>
256
+ </button>
257
+ </div>
216
258
  </div>
217
259
  </div>
218
260
  <br />
219
261
  <br />
220
262
  <div class="pf-c-number-input pf-m-status">
221
263
  <div class="pf-c-input-group">
222
- <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
223
- <span class="pf-c-number-input__icon">
224
- <i class="fas fa-minus" aria-hidden="true"></i>
225
- </span>
226
- </button>
227
- <input
228
- class="pf-c-form-control pf-m-warning"
229
- type="number"
230
- value="90"
231
- name="number-input-status-warning-name"
232
- aria-label="Number input"
233
- />
234
- <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
235
- <span class="pf-c-number-input__icon">
236
- <i class="fas fa-plus" aria-hidden="true"></i>
237
- </span>
238
- </button>
264
+ <div class="pf-c-input-group__item">
265
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
266
+ <span class="pf-c-number-input__icon">
267
+ <i class="fas fa-minus" aria-hidden="true"></i>
268
+ </span>
269
+ </button>
270
+ </div>
271
+ <div class="pf-c-input-group__item pf-m-fill">
272
+ <input
273
+ class="pf-c-form-control pf-m-warning"
274
+ type="number"
275
+ value="90"
276
+ name="number-input-status-warning-name"
277
+ aria-label="Number input"
278
+ />
279
+ </div>
280
+ <div class="pf-c-input-group__item">
281
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
282
+ <span class="pf-c-number-input__icon">
283
+ <i class="fas fa-plus" aria-hidden="true"></i>
284
+ </span>
285
+ </button>
286
+ </div>
239
287
  </div>
240
288
  </div>
241
289
 
@@ -249,23 +297,29 @@ cssPrefix: pf-c-number-input
249
297
  style="--pf-c-number-input--c-form-control--width-chars: 1;"
250
298
  >
251
299
  <div class="pf-c-input-group">
252
- <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
253
- <span class="pf-c-number-input__icon">
254
- <i class="fas fa-minus" aria-hidden="true"></i>
255
- </span>
256
- </button>
257
- <input
258
- class="pf-c-form-control"
259
- type="number"
260
- value="1"
261
- name="number-input-sizes-name"
262
- aria-label="Number input"
263
- />
264
- <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
265
- <span class="pf-c-number-input__icon">
266
- <i class="fas fa-plus" aria-hidden="true"></i>
267
- </span>
268
- </button>
300
+ <div class="pf-c-input-group__item">
301
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
302
+ <span class="pf-c-number-input__icon">
303
+ <i class="fas fa-minus" aria-hidden="true"></i>
304
+ </span>
305
+ </button>
306
+ </div>
307
+ <div class="pf-c-input-group__item pf-m-fill">
308
+ <input
309
+ class="pf-c-form-control"
310
+ type="number"
311
+ value="1"
312
+ name="number-input-sizes-name"
313
+ aria-label="Number input"
314
+ />
315
+ </div>
316
+ <div class="pf-c-input-group__item">
317
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
318
+ <span class="pf-c-number-input__icon">
319
+ <i class="fas fa-plus" aria-hidden="true"></i>
320
+ </span>
321
+ </button>
322
+ </div>
269
323
  </div>
270
324
  </div>
271
325
  <br />
@@ -275,23 +329,29 @@ cssPrefix: pf-c-number-input
275
329
  style="--pf-c-number-input--c-form-control--width-chars: 10;"
276
330
  >
277
331
  <div class="pf-c-input-group">
278
- <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
279
- <span class="pf-c-number-input__icon">
280
- <i class="fas fa-minus" aria-hidden="true"></i>
281
- </span>
282
- </button>
283
- <input
284
- class="pf-c-form-control"
285
- type="number"
286
- value="1234567890"
287
- name="number-input-sizes2-name"
288
- aria-label="Number input"
289
- />
290
- <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
291
- <span class="pf-c-number-input__icon">
292
- <i class="fas fa-plus" aria-hidden="true"></i>
293
- </span>
294
- </button>
332
+ <div class="pf-c-input-group__item">
333
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
334
+ <span class="pf-c-number-input__icon">
335
+ <i class="fas fa-minus" aria-hidden="true"></i>
336
+ </span>
337
+ </button>
338
+ </div>
339
+ <div class="pf-c-input-group__item pf-m-fill">
340
+ <input
341
+ class="pf-c-form-control"
342
+ type="number"
343
+ value="1234567890"
344
+ name="number-input-sizes2-name"
345
+ aria-label="Number input"
346
+ />
347
+ </div>
348
+ <div class="pf-c-input-group__item">
349
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
350
+ <span class="pf-c-number-input__icon">
351
+ <i class="fas fa-plus" aria-hidden="true"></i>
352
+ </span>
353
+ </button>
354
+ </div>
295
355
  </div>
296
356
  </div>
297
357
  <br />
@@ -301,23 +361,29 @@ cssPrefix: pf-c-number-input
301
361
  style="--pf-c-number-input--c-form-control--width-chars: 5;"
302
362
  >
303
363
  <div class="pf-c-input-group">
304
- <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
305
- <span class="pf-c-number-input__icon">
306
- <i class="fas fa-minus" aria-hidden="true"></i>
307
- </span>
308
- </button>
309
- <input
310
- class="pf-c-form-control"
311
- type="number"
312
- value="5"
313
- name="number-input-sizes3-name"
314
- aria-label="Number input"
315
- />
316
- <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
317
- <span class="pf-c-number-input__icon">
318
- <i class="fas fa-plus" aria-hidden="true"></i>
319
- </span>
320
- </button>
364
+ <div class="pf-c-input-group__item">
365
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
366
+ <span class="pf-c-number-input__icon">
367
+ <i class="fas fa-minus" aria-hidden="true"></i>
368
+ </span>
369
+ </button>
370
+ </div>
371
+ <div class="pf-c-input-group__item pf-m-fill">
372
+ <input
373
+ class="pf-c-form-control"
374
+ type="number"
375
+ value="5"
376
+ name="number-input-sizes3-name"
377
+ aria-label="Number input"
378
+ />
379
+ </div>
380
+ <div class="pf-c-input-group__item">
381
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
382
+ <span class="pf-c-number-input__icon">
383
+ <i class="fas fa-plus" aria-hidden="true"></i>
384
+ </span>
385
+ </button>
386
+ </div>
321
387
  </div>
322
388
  </div>
323
389
  <br />
@@ -327,23 +393,29 @@ cssPrefix: pf-c-number-input
327
393
  style="--pf-c-number-input--c-form-control--width-chars: 5;"
328
394
  >
329
395
  <div class="pf-c-input-group">
330
- <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
331
- <span class="pf-c-number-input__icon">
332
- <i class="fas fa-minus" aria-hidden="true"></i>
333
- </span>
334
- </button>
335
- <input
336
- class="pf-c-form-control"
337
- type="number"
338
- value="12345"
339
- name="number-input-sizes4-name"
340
- aria-label="Number input"
341
- />
342
- <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
343
- <span class="pf-c-number-input__icon">
344
- <i class="fas fa-plus" aria-hidden="true"></i>
345
- </span>
346
- </button>
396
+ <div class="pf-c-input-group__item">
397
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Minus">
398
+ <span class="pf-c-number-input__icon">
399
+ <i class="fas fa-minus" aria-hidden="true"></i>
400
+ </span>
401
+ </button>
402
+ </div>
403
+ <div class="pf-c-input-group__item pf-m-fill">
404
+ <input
405
+ class="pf-c-form-control"
406
+ type="number"
407
+ value="12345"
408
+ name="number-input-sizes4-name"
409
+ aria-label="Number input"
410
+ />
411
+ </div>
412
+ <div class="pf-c-input-group__item">
413
+ <button class="pf-c-button pf-m-control" type="button" aria-label="Plus">
414
+ <span class="pf-c-number-input__icon">
415
+ <i class="fas fa-plus" aria-hidden="true"></i>
416
+ </span>
417
+ </button>
418
+ </div>
347
419
  </div>
348
420
  </div>
349
421