@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.
- package/components/InputGroup/input-group.css +61 -85
- package/components/InputGroup/input-group.scss +55 -61
- package/components/InputGroup/themes/dark/input-group.scss +11 -25
- package/components/OptionsMenu/options-menu.css +0 -5
- package/components/OptionsMenu/options-menu.scss +0 -6
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +268 -252
- package/docs/components/DatePicker/examples/DatePicker.md +115 -91
- package/docs/components/FileUpload/examples/FileUpload.md +127 -91
- package/docs/components/InputGroup/examples/InputGroup.md +219 -169
- package/docs/components/NumberInput/examples/NumberInput.md +299 -227
- package/docs/components/SearchInput/examples/SearchInput.md +151 -113
- package/docs/components/Slider/examples/Slider.md +60 -38
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -132
- package/docs/components/Toolbar/examples/Toolbar.md +374 -345
- package/docs/demos/DataList/examples/DataList.md +158 -150
- package/docs/demos/Form/examples/BasicForms.md +77 -66
- package/docs/demos/Masthead/examples/Masthead.md +279 -258
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +21 -17
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +103 -121
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +266 -232
- package/docs/demos/Table/examples/Table.md +950 -902
- package/docs/demos/Toolbar/examples/Toolbar.md +313 -294
- package/package.json +1 -1
- package/patternfly-no-reset.css +60 -79
- package/patternfly.css +60 -79
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -139,22 +139,30 @@ cssPrefix: pf-c-search-input
|
|
|
139
139
|
```html
|
|
140
140
|
<div class="pf-c-search-input">
|
|
141
141
|
<div class="pf-c-input-group">
|
|
142
|
-
<div class="pf-c-
|
|
143
|
-
<
|
|
144
|
-
<span class="pf-c-search-
|
|
145
|
-
<
|
|
142
|
+
<div class="pf-c-input-group__item pf-m-fill">
|
|
143
|
+
<div class="pf-c-search-input__bar">
|
|
144
|
+
<span class="pf-c-search-input__text">
|
|
145
|
+
<span class="pf-c-search-input__icon">
|
|
146
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
147
|
+
</span>
|
|
148
|
+
<input
|
|
149
|
+
class="pf-c-search-input__text-input"
|
|
150
|
+
type="text"
|
|
151
|
+
placeholder="Find by name"
|
|
152
|
+
aria-label="Find by name"
|
|
153
|
+
/>
|
|
146
154
|
</span>
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
<div class="pf-c-input-group__item">
|
|
158
|
+
<button
|
|
159
|
+
class="pf-c-button pf-m-control"
|
|
160
|
+
type="submit"
|
|
161
|
+
aria-label="Search"
|
|
162
|
+
>
|
|
163
|
+
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
164
|
+
</button>
|
|
154
165
|
</div>
|
|
155
|
-
<button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
|
|
156
|
-
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
157
|
-
</button>
|
|
158
166
|
</div>
|
|
159
167
|
</div>
|
|
160
168
|
|
|
@@ -165,42 +173,52 @@ cssPrefix: pf-c-search-input
|
|
|
165
173
|
```html
|
|
166
174
|
<div class="pf-c-search-input">
|
|
167
175
|
<div class="pf-c-input-group">
|
|
168
|
-
<div class="pf-c-
|
|
169
|
-
<
|
|
170
|
-
<span class="pf-c-search-
|
|
171
|
-
<
|
|
176
|
+
<div class="pf-c-input-group__item pf-m-fill">
|
|
177
|
+
<div class="pf-c-search-input__bar">
|
|
178
|
+
<span class="pf-c-search-input__text">
|
|
179
|
+
<span class="pf-c-search-input__icon">
|
|
180
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
181
|
+
</span>
|
|
182
|
+
<input
|
|
183
|
+
class="pf-c-search-input__text-input"
|
|
184
|
+
type="text"
|
|
185
|
+
placeholder="username:admin firstname:joe"
|
|
186
|
+
aria-label="username:admin firstname:joe"
|
|
187
|
+
value="username:root firstname:ned"
|
|
188
|
+
/>
|
|
172
189
|
</span>
|
|
173
|
-
<
|
|
174
|
-
class="pf-c-search-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
<button
|
|
184
|
-
class="pf-c-button pf-m-plain"
|
|
185
|
-
type="button"
|
|
186
|
-
aria-label="Clear"
|
|
187
|
-
>
|
|
188
|
-
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
189
|
-
</button>
|
|
190
|
+
<span class="pf-c-search-input__utilities">
|
|
191
|
+
<span class="pf-c-search-input__clear">
|
|
192
|
+
<button
|
|
193
|
+
class="pf-c-button pf-m-plain"
|
|
194
|
+
type="button"
|
|
195
|
+
aria-label="Clear"
|
|
196
|
+
>
|
|
197
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
198
|
+
</button>
|
|
199
|
+
</span>
|
|
190
200
|
</span>
|
|
191
|
-
</
|
|
201
|
+
</div>
|
|
202
|
+
</div>
|
|
203
|
+
<div class="pf-c-input-group__item">
|
|
204
|
+
<button
|
|
205
|
+
class="pf-c-button pf-m-control"
|
|
206
|
+
type="button"
|
|
207
|
+
aria-expanded="false"
|
|
208
|
+
aria-label="Advanced search"
|
|
209
|
+
>
|
|
210
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
211
|
+
</button>
|
|
212
|
+
</div>
|
|
213
|
+
<div class="pf-c-input-group__item">
|
|
214
|
+
<button
|
|
215
|
+
class="pf-c-button pf-m-control"
|
|
216
|
+
type="submit"
|
|
217
|
+
aria-label="Search"
|
|
218
|
+
>
|
|
219
|
+
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
220
|
+
</button>
|
|
192
221
|
</div>
|
|
193
|
-
<button
|
|
194
|
-
class="pf-c-button pf-m-control"
|
|
195
|
-
type="button"
|
|
196
|
-
aria-expanded="false"
|
|
197
|
-
aria-label="Advanced search"
|
|
198
|
-
>
|
|
199
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
200
|
-
</button>
|
|
201
|
-
<button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
|
|
202
|
-
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
203
|
-
</button>
|
|
204
222
|
</div>
|
|
205
223
|
</div>
|
|
206
224
|
|
|
@@ -211,42 +229,52 @@ cssPrefix: pf-c-search-input
|
|
|
211
229
|
```html
|
|
212
230
|
<div class="pf-c-search-input">
|
|
213
231
|
<div class="pf-c-input-group">
|
|
214
|
-
<div class="pf-c-
|
|
215
|
-
<
|
|
216
|
-
<span class="pf-c-search-
|
|
217
|
-
<
|
|
232
|
+
<div class="pf-c-input-group__item pf-m-fill">
|
|
233
|
+
<div class="pf-c-search-input__bar">
|
|
234
|
+
<span class="pf-c-search-input__text">
|
|
235
|
+
<span class="pf-c-search-input__icon">
|
|
236
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
237
|
+
</span>
|
|
238
|
+
<input
|
|
239
|
+
class="pf-c-search-input__text-input"
|
|
240
|
+
type="text"
|
|
241
|
+
placeholder="username:admin firstname:joe"
|
|
242
|
+
aria-label="username:admin firstname:joe"
|
|
243
|
+
value="username:root firstname:ned"
|
|
244
|
+
/>
|
|
218
245
|
</span>
|
|
219
|
-
<
|
|
220
|
-
class="pf-c-search-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
<button
|
|
230
|
-
class="pf-c-button pf-m-plain"
|
|
231
|
-
type="button"
|
|
232
|
-
aria-label="Clear"
|
|
233
|
-
>
|
|
234
|
-
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
235
|
-
</button>
|
|
246
|
+
<span class="pf-c-search-input__utilities">
|
|
247
|
+
<span class="pf-c-search-input__clear">
|
|
248
|
+
<button
|
|
249
|
+
class="pf-c-button pf-m-plain"
|
|
250
|
+
type="button"
|
|
251
|
+
aria-label="Clear"
|
|
252
|
+
>
|
|
253
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
254
|
+
</button>
|
|
255
|
+
</span>
|
|
236
256
|
</span>
|
|
237
|
-
</
|
|
257
|
+
</div>
|
|
258
|
+
</div>
|
|
259
|
+
<div class="pf-c-input-group__item">
|
|
260
|
+
<button
|
|
261
|
+
class="pf-c-button pf-m-control pf-m-expanded"
|
|
262
|
+
type="button"
|
|
263
|
+
aria-expanded="true"
|
|
264
|
+
aria-label="Advanced search"
|
|
265
|
+
>
|
|
266
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
267
|
+
</button>
|
|
268
|
+
</div>
|
|
269
|
+
<div class="pf-c-input-group__item">
|
|
270
|
+
<button
|
|
271
|
+
class="pf-c-button pf-m-control"
|
|
272
|
+
type="submit"
|
|
273
|
+
aria-label="Search"
|
|
274
|
+
>
|
|
275
|
+
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
276
|
+
</button>
|
|
238
277
|
</div>
|
|
239
|
-
<button
|
|
240
|
-
class="pf-c-button pf-m-control pf-m-expanded"
|
|
241
|
-
type="button"
|
|
242
|
-
aria-expanded="true"
|
|
243
|
-
aria-label="Advanced search"
|
|
244
|
-
>
|
|
245
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
246
|
-
</button>
|
|
247
|
-
<button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
|
|
248
|
-
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
249
|
-
</button>
|
|
250
278
|
</div>
|
|
251
279
|
<div class="pf-c-search-input__menu">
|
|
252
280
|
<div class="pf-c-search-input__menu-body">
|
|
@@ -436,42 +464,52 @@ cssPrefix: pf-c-search-input
|
|
|
436
464
|
```html
|
|
437
465
|
<div class="pf-c-search-input">
|
|
438
466
|
<div class="pf-c-input-group">
|
|
439
|
-
<div class="pf-c-
|
|
440
|
-
<
|
|
441
|
-
<span class="pf-c-search-
|
|
442
|
-
<
|
|
467
|
+
<div class="pf-c-input-group__item pf-m-fill">
|
|
468
|
+
<div class="pf-c-search-input__bar">
|
|
469
|
+
<span class="pf-c-search-input__text">
|
|
470
|
+
<span class="pf-c-search-input__icon">
|
|
471
|
+
<i class="fas fa-search fa-fw" aria-hidden="true"></i>
|
|
472
|
+
</span>
|
|
473
|
+
<input
|
|
474
|
+
class="pf-c-search-input__text-input"
|
|
475
|
+
type="text"
|
|
476
|
+
placeholder="username:admin firstname:joe"
|
|
477
|
+
aria-label="username:admin firstname:joe"
|
|
478
|
+
value="username:root firstname:n"
|
|
479
|
+
/>
|
|
443
480
|
</span>
|
|
444
|
-
<
|
|
445
|
-
class="pf-c-search-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
<button
|
|
455
|
-
class="pf-c-button pf-m-plain"
|
|
456
|
-
type="button"
|
|
457
|
-
aria-label="Clear"
|
|
458
|
-
>
|
|
459
|
-
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
460
|
-
</button>
|
|
481
|
+
<span class="pf-c-search-input__utilities">
|
|
482
|
+
<span class="pf-c-search-input__clear">
|
|
483
|
+
<button
|
|
484
|
+
class="pf-c-button pf-m-plain"
|
|
485
|
+
type="button"
|
|
486
|
+
aria-label="Clear"
|
|
487
|
+
>
|
|
488
|
+
<i class="fas fa-times fa-fw" aria-hidden="true"></i>
|
|
489
|
+
</button>
|
|
490
|
+
</span>
|
|
461
491
|
</span>
|
|
462
|
-
</
|
|
492
|
+
</div>
|
|
493
|
+
</div>
|
|
494
|
+
<div class="pf-c-input-group__item">
|
|
495
|
+
<button
|
|
496
|
+
class="pf-c-button pf-m-control pf-m-expanded"
|
|
497
|
+
type="button"
|
|
498
|
+
aria-expanded="true"
|
|
499
|
+
aria-label="Advanced search"
|
|
500
|
+
>
|
|
501
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
502
|
+
</button>
|
|
503
|
+
</div>
|
|
504
|
+
<div class="pf-c-input-group__item">
|
|
505
|
+
<button
|
|
506
|
+
class="pf-c-button pf-m-control"
|
|
507
|
+
type="submit"
|
|
508
|
+
aria-label="Search"
|
|
509
|
+
>
|
|
510
|
+
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
511
|
+
</button>
|
|
463
512
|
</div>
|
|
464
|
-
<button
|
|
465
|
-
class="pf-c-button pf-m-control pf-m-expanded"
|
|
466
|
-
type="button"
|
|
467
|
-
aria-expanded="true"
|
|
468
|
-
aria-label="Advanced search"
|
|
469
|
-
>
|
|
470
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
471
|
-
</button>
|
|
472
|
-
<button class="pf-c-button pf-m-control" type="submit" aria-label="Search">
|
|
473
|
-
<i class="fas fa-arrow-right" aria-hidden="true"></i>
|
|
474
|
-
</button>
|
|
475
513
|
</div>
|
|
476
514
|
<div class="pf-c-search-input__menu">
|
|
477
515
|
<div class="pf-c-search-input__menu-body">
|
|
@@ -261,13 +261,17 @@ cssPrefix: pf-c-slider
|
|
|
261
261
|
</div>
|
|
262
262
|
<div class="pf-c-slider__value">
|
|
263
263
|
<div class="pf-c-input-group">
|
|
264
|
-
<input
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
264
|
+
<div class="pf-c-input-group__item pf-m-fill">
|
|
265
|
+
<input
|
|
266
|
+
class="pf-c-form-control"
|
|
267
|
+
type="number"
|
|
268
|
+
value="50"
|
|
269
|
+
aria-label="Slider value input"
|
|
270
|
+
/>
|
|
271
|
+
</div>
|
|
272
|
+
<div class="pf-c-input-group__item">
|
|
273
|
+
<span class="pf-c-input-group__text">%</span>
|
|
274
|
+
</div>
|
|
271
275
|
</div>
|
|
272
276
|
</div>
|
|
273
277
|
</div>
|
|
@@ -291,13 +295,17 @@ cssPrefix: pf-c-slider
|
|
|
291
295
|
</div>
|
|
292
296
|
<div class="pf-c-slider__value">
|
|
293
297
|
<div class="pf-c-input-group">
|
|
294
|
-
<input
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
298
|
+
<div class="pf-c-input-group__item pf-m-fill">
|
|
299
|
+
<input
|
|
300
|
+
class="pf-c-form-control"
|
|
301
|
+
type="number"
|
|
302
|
+
value="50"
|
|
303
|
+
aria-label="Slider value input"
|
|
304
|
+
/>
|
|
305
|
+
</div>
|
|
306
|
+
<div class="pf-c-input-group__item">
|
|
307
|
+
<span class="pf-c-input-group__text">%</span>
|
|
308
|
+
</div>
|
|
301
309
|
</div>
|
|
302
310
|
</div>
|
|
303
311
|
</div>
|
|
@@ -322,13 +330,15 @@ cssPrefix: pf-c-slider
|
|
|
322
330
|
tabindex="0"
|
|
323
331
|
></div>
|
|
324
332
|
<div class="pf-c-slider__value pf-m-floating">
|
|
325
|
-
<div class="pf-c-input-
|
|
333
|
+
<div class="pf-c-input-group__item pf-m-fill">
|
|
326
334
|
<input
|
|
327
335
|
class="pf-c-form-control"
|
|
328
336
|
type="number"
|
|
329
337
|
value="50"
|
|
330
338
|
aria-label="Slider value input"
|
|
331
339
|
/>
|
|
340
|
+
</div>
|
|
341
|
+
<div class="pf-c-input-group__item">
|
|
332
342
|
<span class="pf-c-input-group__text">%</span>
|
|
333
343
|
</div>
|
|
334
344
|
</div>
|
|
@@ -386,14 +396,18 @@ cssPrefix: pf-c-slider
|
|
|
386
396
|
></div>
|
|
387
397
|
<div class="pf-c-slider__value pf-m-floating">
|
|
388
398
|
<div class="pf-c-input-group">
|
|
389
|
-
<input
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
399
|
+
<div class="pf-c-input-group__item pf-m-fill">
|
|
400
|
+
<input
|
|
401
|
+
class="pf-c-form-control"
|
|
402
|
+
disabled
|
|
403
|
+
type="number"
|
|
404
|
+
value="50"
|
|
405
|
+
aria-label="Slider value input"
|
|
406
|
+
/>
|
|
407
|
+
</div>
|
|
408
|
+
<div class="pf-c-input-group__item">
|
|
409
|
+
<span class="pf-c-input-group__text pf-m-disabled">%</span>
|
|
410
|
+
</div>
|
|
397
411
|
</div>
|
|
398
412
|
</div>
|
|
399
413
|
</div>
|
|
@@ -423,13 +437,17 @@ cssPrefix: pf-c-slider
|
|
|
423
437
|
></div>
|
|
424
438
|
<div class="pf-c-slider__value pf-m-floating">
|
|
425
439
|
<div class="pf-c-input-group">
|
|
426
|
-
<input
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
440
|
+
<div class="pf-c-input-group__item pf-m-fill">
|
|
441
|
+
<input
|
|
442
|
+
class="pf-c-form-control"
|
|
443
|
+
type="number"
|
|
444
|
+
value="50"
|
|
445
|
+
aria-label="Slider value input"
|
|
446
|
+
/>
|
|
447
|
+
</div>
|
|
448
|
+
<div class="pf-c-input-group__item">
|
|
449
|
+
<span class="pf-c-input-group__text">%</span>
|
|
450
|
+
</div>
|
|
433
451
|
</div>
|
|
434
452
|
</div>
|
|
435
453
|
</div>
|
|
@@ -563,14 +581,18 @@ cssPrefix: pf-c-slider
|
|
|
563
581
|
</div>
|
|
564
582
|
<div class="pf-c-slider__value">
|
|
565
583
|
<div class="pf-c-input-group">
|
|
566
|
-
<input
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
584
|
+
<div class="pf-c-input-group__item pf-m-fill">
|
|
585
|
+
<input
|
|
586
|
+
class="pf-c-form-control"
|
|
587
|
+
disabled
|
|
588
|
+
type="number"
|
|
589
|
+
value="50"
|
|
590
|
+
aria-label="Slider value input"
|
|
591
|
+
/>
|
|
592
|
+
</div>
|
|
593
|
+
<div class="pf-c-input-group__item">
|
|
594
|
+
<span class="pf-c-input-group__text pf-m-disabled">%</span>
|
|
595
|
+
</div>
|
|
574
596
|
</div>
|
|
575
597
|
</div>
|
|
576
598
|
</div>
|