@patternfly/patternfly 4.180.0 → 4.182.0

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 (33) hide show
  1. package/assets/images/status-icon-sprite.svg +38 -0
  2. package/components/FormControl/form-control.css +26 -0
  3. package/components/FormControl/form-control.scss +30 -1
  4. package/components/Masthead/masthead.css +21 -27
  5. package/components/Masthead/masthead.scss +21 -27
  6. package/components/Menu/menu.css +10 -0
  7. package/components/Menu/menu.scss +14 -0
  8. package/components/MenuToggle/menu-toggle.css +141 -7
  9. package/components/MenuToggle/menu-toggle.scss +208 -8
  10. package/docs/components/FormControl/examples/FormControl.md +151 -0
  11. package/docs/components/Menu/examples/Menu.md +67 -2
  12. package/docs/components/MenuToggle/examples/MenuToggle.md +552 -20
  13. package/docs/components/Page/examples/Page.md +11 -2
  14. package/docs/components/Table/examples/Table.md +8 -0
  15. package/docs/components/Wizard/examples/Wizard.md +6 -6
  16. package/docs/demos/Alert/examples/Alert.md +20 -40
  17. package/docs/demos/BackToTop/examples/BackToTop.md +149 -249
  18. package/docs/demos/ContextSelector/examples/ContextSelector.md +86 -166
  19. package/docs/demos/DescriptionList/examples/DescriptionList.md +3358 -0
  20. package/docs/demos/Drawer/examples/Drawer.md +60 -120
  21. package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -31
  22. package/docs/demos/Masthead/examples/Masthead.md +144 -284
  23. package/docs/demos/Nav/examples/Nav.md +203 -343
  24. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +100 -200
  25. package/docs/demos/Page/examples/Page.md +589 -1137
  26. package/docs/demos/Table/examples/Table.md +26 -26
  27. package/docs/demos/Tabs/examples/Tabs.md +11 -19
  28. package/docs/demos/Wizard/examples/Wizard.md +6 -2
  29. package/package.json +1 -1
  30. package/patternfly-no-reset.css +198 -34
  31. package/patternfly.css +198 -34
  32. package/patternfly.min.css +1 -1
  33. package/patternfly.min.css.map +1 -1
package/docs/components/Wizard/examples/Wizard.md CHANGED
@@ -21,7 +21,7 @@ wrapperTag: div
21
21
  </button>
22
22
  <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
23
23
 
24
- <p class="pf-c-wizard__description">Here is where the description goes</p>
24
+ <div class="pf-c-wizard__description">Here is where the description goes</div>
25
25
  </div>
26
26
  <button
27
27
  aria-label="Wizard Header Toggle"
@@ -248,7 +248,7 @@ wrapperTag: div
248
248
  </button>
249
249
  <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
250
250
 
251
- <p class="pf-c-wizard__description">Here is where the description goes</p>
251
+ <div class="pf-c-wizard__description">Here is where the description goes</div>
252
252
  </div>
253
253
  <button
254
254
  aria-label="Wizard Header Toggle"
@@ -475,7 +475,7 @@ wrapperTag: div
475
475
  </button>
476
476
  <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
477
477
 
478
- <p class="pf-c-wizard__description">Here is where the description goes</p>
478
+ <div class="pf-c-wizard__description">Here is where the description goes</div>
479
479
  </div>
480
480
  <button
481
481
  aria-label="Wizard Header Toggle"
@@ -730,7 +730,7 @@ wrapperTag: div
730
730
  </button>
731
731
  <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
732
732
 
733
- <p class="pf-c-wizard__description">Here is where the description goes</p>
733
+ <div class="pf-c-wizard__description">Here is where the description goes</div>
734
734
  </div>
735
735
  <button
736
736
  aria-label="Wizard Header Toggle"
@@ -988,7 +988,7 @@ wrapperTag: div
988
988
  </button>
989
989
  <h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
990
990
 
991
- <p class="pf-c-wizard__description">Here is where the description goes</p>
991
+ <div class="pf-c-wizard__description">Here is where the description goes</div>
992
992
  </div>
993
993
  <button
994
994
  aria-label="Wizard Header Toggle"
@@ -1128,7 +1128,7 @@ wrapperTag: div
1128
1128
  | `.pf-c-wizard__header` | `<header>` | Initiates the header. **Required** when the wizard is in a modal. Not recommended to use when the wizard is placed on a page. |
1129
1129
  | `.pf-c-wizard__close` | `.pf-c-button.pf-m-plain` | Initiates the close button. **Required** |
1130
1130
  | `.pf-c-wizard__title` | `.pf-c-title.pf-m-3xl` | Initiates the title. **Required** |
1131
- | `.pf-c-wizard__description` | `<p>` | Initiates the description. |
1131
+ | `.pf-c-wizard__description` | `<div>`, `<p>` | Initiates the description. |
1132
1132
  | `.pf-c-wizard__toggle` | `<button>` | Initiates the mobile steps menu toggle button. **Required** |
1133
1133
  | `.pf-c-wizard__toggle-list` | `<span>` | Initiates the toggle list. **Required** |
1134
1134
  | `.pf-c-wizard__toggle-list-item` | `<span>` | Initiates a toggle list item. **Required** |
package/docs/demos/Alert/examples/Alert.md CHANGED
@@ -242,55 +242,35 @@ section: components
242
242
  <section class="pf-c-page__main-section pf-m-limit-width">
243
243
  <div class="pf-c-page__main-body">
244
244
  <div class="pf-l-gallery pf-m-gutter">
245
- <div class="pf-l-gallery__item">
246
- <div class="pf-c-card">
247
- <div class="pf-c-card__body">This is a card</div>
248
- </div>
245
+ <div class="pf-c-card">
246
+ <div class="pf-c-card__body">This is a card</div>
249
247
  </div>
250
- <div class="pf-l-gallery__item">
251
- <div class="pf-c-card">
252
- <div class="pf-c-card__body">This is a card</div>
253
- </div>
248
+ <div class="pf-c-card">
249
+ <div class="pf-c-card__body">This is a card</div>
254
250
  </div>
255
- <div class="pf-l-gallery__item">
256
- <div class="pf-c-card">
257
- <div class="pf-c-card__body">This is a card</div>
258
- </div>
251
+ <div class="pf-c-card">
252
+ <div class="pf-c-card__body">This is a card</div>
259
253
  </div>
260
- <div class="pf-l-gallery__item">
261
- <div class="pf-c-card">
262
- <div class="pf-c-card__body">This is a card</div>
263
- </div>
254
+ <div class="pf-c-card">
255
+ <div class="pf-c-card__body">This is a card</div>
264
256
  </div>
265
- <div class="pf-l-gallery__item">
266
- <div class="pf-c-card">
267
- <div class="pf-c-card__body">This is a card</div>
268
- </div>
257
+ <div class="pf-c-card">
258
+ <div class="pf-c-card__body">This is a card</div>
269
259
  </div>
270
- <div class="pf-l-gallery__item">
271
- <div class="pf-c-card">
272
- <div class="pf-c-card__body">This is a card</div>
273
- </div>
260
+ <div class="pf-c-card">
261
+ <div class="pf-c-card__body">This is a card</div>
274
262
  </div>
275
- <div class="pf-l-gallery__item">
276
- <div class="pf-c-card">
277
- <div class="pf-c-card__body">This is a card</div>
278
- </div>
263
+ <div class="pf-c-card">
264
+ <div class="pf-c-card__body">This is a card</div>
279
265
  </div>
280
- <div class="pf-l-gallery__item">
281
- <div class="pf-c-card">
282
- <div class="pf-c-card__body">This is a card</div>
283
- </div>
266
+ <div class="pf-c-card">
267
+ <div class="pf-c-card__body">This is a card</div>
284
268
  </div>
285
- <div class="pf-l-gallery__item">
286
- <div class="pf-c-card">
287
- <div class="pf-c-card__body">This is a card</div>
288
- </div>
269
+ <div class="pf-c-card">
270
+ <div class="pf-c-card__body">This is a card</div>
289
271
  </div>
290
- <div class="pf-l-gallery__item">
291
- <div class="pf-c-card">
292
- <div class="pf-c-card__body">This is a card</div>
293
- </div>
272
+ <div class="pf-c-card">
273
+ <div class="pf-c-card__body">This is a card</div>
294
274
  </div>
295
275
  </div>
296
276
  </div>
package/docs/demos/BackToTop/examples/BackToTop.md CHANGED
@@ -243,255 +243,155 @@ cssPrefix: pf-d-back-to-top
243
243
  <section class="pf-c-page__main-section pf-m-limit-width">
244
244
  <div class="pf-c-page__main-body">
245
245
  <div class="pf-l-gallery pf-m-gutter">
246
- <div class="pf-l-gallery__item">
247
- <div class="pf-c-card">
248
- <div class="pf-c-card__body">This is a card</div>
249
- </div>
250
- </div>
251
- <div class="pf-l-gallery__item">
252
- <div class="pf-c-card">
253
- <div class="pf-c-card__body">This is a card</div>
254
- </div>
255
- </div>
256
- <div class="pf-l-gallery__item">
257
- <div class="pf-c-card">
258
- <div class="pf-c-card__body">This is a card</div>
259
- </div>
260
- </div>
261
- <div class="pf-l-gallery__item">
262
- <div class="pf-c-card">
263
- <div class="pf-c-card__body">This is a card</div>
264
- </div>
265
- </div>
266
- <div class="pf-l-gallery__item">
267
- <div class="pf-c-card">
268
- <div class="pf-c-card__body">This is a card</div>
269
- </div>
270
- </div>
271
- <div class="pf-l-gallery__item">
272
- <div class="pf-c-card">
273
- <div class="pf-c-card__body">This is a card</div>
274
- </div>
275
- </div>
276
- <div class="pf-l-gallery__item">
277
- <div class="pf-c-card">
278
- <div class="pf-c-card__body">This is a card</div>
279
- </div>
280
- </div>
281
- <div class="pf-l-gallery__item">
282
- <div class="pf-c-card">
283
- <div class="pf-c-card__body">This is a card</div>
284
- </div>
285
- </div>
286
- <div class="pf-l-gallery__item">
287
- <div class="pf-c-card">
288
- <div class="pf-c-card__body">This is a card</div>
289
- </div>
290
- </div>
291
- <div class="pf-l-gallery__item">
292
- <div class="pf-c-card">
293
- <div class="pf-c-card__body">This is a card</div>
294
- </div>
295
- </div>
296
- <div class="pf-l-gallery__item">
297
- <div class="pf-c-card">
298
- <div class="pf-c-card__body">This is a card</div>
299
- </div>
300
- </div>
301
- <div class="pf-l-gallery__item">
302
- <div class="pf-c-card">
303
- <div class="pf-c-card__body">This is a card</div>
304
- </div>
305
- </div>
306
- <div class="pf-l-gallery__item">
307
- <div class="pf-c-card">
308
- <div class="pf-c-card__body">This is a card</div>
309
- </div>
310
- </div>
311
- <div class="pf-l-gallery__item">
312
- <div class="pf-c-card">
313
- <div class="pf-c-card__body">This is a card</div>
314
- </div>
315
- </div>
316
- <div class="pf-l-gallery__item">
317
- <div class="pf-c-card">
318
- <div class="pf-c-card__body">This is a card</div>
319
- </div>
320
- </div>
321
- <div class="pf-l-gallery__item">
322
- <div class="pf-c-card">
323
- <div class="pf-c-card__body">This is a card</div>
324
- </div>
325
- </div>
326
- <div class="pf-l-gallery__item">
327
- <div class="pf-c-card">
328
- <div class="pf-c-card__body">This is a card</div>
329
- </div>
330
- </div>
331
- <div class="pf-l-gallery__item">
332
- <div class="pf-c-card">
333
- <div class="pf-c-card__body">This is a card</div>
334
- </div>
335
- </div>
336
- <div class="pf-l-gallery__item">
337
- <div class="pf-c-card">
338
- <div class="pf-c-card__body">This is a card</div>
339
- </div>
340
- </div>
341
- <div class="pf-l-gallery__item">
342
- <div class="pf-c-card">
343
- <div class="pf-c-card__body">This is a card</div>
344
- </div>
345
- </div>
346
- <div class="pf-l-gallery__item">
347
- <div class="pf-c-card">
348
- <div class="pf-c-card__body">This is a card</div>
349
- </div>
350
- </div>
351
- <div class="pf-l-gallery__item">
352
- <div class="pf-c-card">
353
- <div class="pf-c-card__body">This is a card</div>
354
- </div>
355
- </div>
356
- <div class="pf-l-gallery__item">
357
- <div class="pf-c-card">
358
- <div class="pf-c-card__body">This is a card</div>
359
- </div>
360
- </div>
361
- <div class="pf-l-gallery__item">
362
- <div class="pf-c-card">
363
- <div class="pf-c-card__body">This is a card</div>
364
- </div>
365
- </div>
366
- <div class="pf-l-gallery__item">
367
- <div class="pf-c-card">
368
- <div class="pf-c-card__body">This is a card</div>
369
- </div>
370
- </div>
371
- <div class="pf-l-gallery__item">
372
- <div class="pf-c-card">
373
- <div class="pf-c-card__body">This is a card</div>
374
- </div>
375
- </div>
376
- <div class="pf-l-gallery__item">
377
- <div class="pf-c-card">
378
- <div class="pf-c-card__body">This is a card</div>
379
- </div>
380
- </div>
381
- <div class="pf-l-gallery__item">
382
- <div class="pf-c-card">
383
- <div class="pf-c-card__body">This is a card</div>
384
- </div>
385
- </div>
386
- <div class="pf-l-gallery__item">
387
- <div class="pf-c-card">
388
- <div class="pf-c-card__body">This is a card</div>
389
- </div>
390
- </div>
391
- <div class="pf-l-gallery__item">
392
- <div class="pf-c-card">
393
- <div class="pf-c-card__body">This is a card</div>
394
- </div>
395
- </div>
396
- <div class="pf-l-gallery__item">
397
- <div class="pf-c-card">
398
- <div class="pf-c-card__body">This is a card</div>
399
- </div>
400
- </div>
401
- <div class="pf-l-gallery__item">
402
- <div class="pf-c-card">
403
- <div class="pf-c-card__body">This is a card</div>
404
- </div>
405
- </div>
406
- <div class="pf-l-gallery__item">
407
- <div class="pf-c-card">
408
- <div class="pf-c-card__body">This is a card</div>
409
- </div>
410
- </div>
411
- <div class="pf-l-gallery__item">
412
- <div class="pf-c-card">
413
- <div class="pf-c-card__body">This is a card</div>
414
- </div>
415
- </div>
416
- <div class="pf-l-gallery__item">
417
- <div class="pf-c-card">
418
- <div class="pf-c-card__body">This is a card</div>
419
- </div>
420
- </div>
421
- <div class="pf-l-gallery__item">
422
- <div class="pf-c-card">
423
- <div class="pf-c-card__body">This is a card</div>
424
- </div>
425
- </div>
426
- <div class="pf-l-gallery__item">
427
- <div class="pf-c-card">
428
- <div class="pf-c-card__body">This is a card</div>
429
- </div>
430
- </div>
431
- <div class="pf-l-gallery__item">
432
- <div class="pf-c-card">
433
- <div class="pf-c-card__body">This is a card</div>
434
- </div>
435
- </div>
436
- <div class="pf-l-gallery__item">
437
- <div class="pf-c-card">
438
- <div class="pf-c-card__body">This is a card</div>
439
- </div>
440
- </div>
441
- <div class="pf-l-gallery__item">
442
- <div class="pf-c-card">
443
- <div class="pf-c-card__body">This is a card</div>
444
- </div>
445
- </div>
446
- <div class="pf-l-gallery__item">
447
- <div class="pf-c-card">
448
- <div class="pf-c-card__body">This is a card</div>
449
- </div>
450
- </div>
451
- <div class="pf-l-gallery__item">
452
- <div class="pf-c-card">
453
- <div class="pf-c-card__body">This is a card</div>
454
- </div>
455
- </div>
456
- <div class="pf-l-gallery__item">
457
- <div class="pf-c-card">
458
- <div class="pf-c-card__body">This is a card</div>
459
- </div>
460
- </div>
461
- <div class="pf-l-gallery__item">
462
- <div class="pf-c-card">
463
- <div class="pf-c-card__body">This is a card</div>
464
- </div>
465
- </div>
466
- <div class="pf-l-gallery__item">
467
- <div class="pf-c-card">
468
- <div class="pf-c-card__body">This is a card</div>
469
- </div>
470
- </div>
471
- <div class="pf-l-gallery__item">
472
- <div class="pf-c-card">
473
- <div class="pf-c-card__body">This is a card</div>
474
- </div>
475
- </div>
476
- <div class="pf-l-gallery__item">
477
- <div class="pf-c-card">
478
- <div class="pf-c-card__body">This is a card</div>
479
- </div>
480
- </div>
481
- <div class="pf-l-gallery__item">
482
- <div class="pf-c-card">
483
- <div class="pf-c-card__body">This is a card</div>
484
- </div>
485
- </div>
486
- <div class="pf-l-gallery__item">
487
- <div class="pf-c-card">
488
- <div class="pf-c-card__body">This is a card</div>
489
- </div>
490
- </div>
491
- <div class="pf-l-gallery__item">
492
- <div class="pf-c-card">
493
- <div class="pf-c-card__body">This is a card</div>
494
- </div>
246
+ <div class="pf-c-card">
247
+ <div class="pf-c-card__body">This is a card</div>
248
+ </div>
249
+ <div class="pf-c-card">
250
+ <div class="pf-c-card__body">This is a card</div>
251
+ </div>
252
+ <div class="pf-c-card">
253
+ <div class="pf-c-card__body">This is a card</div>
254
+ </div>
255
+ <div class="pf-c-card">
256
+ <div class="pf-c-card__body">This is a card</div>
257
+ </div>
258
+ <div class="pf-c-card">
259
+ <div class="pf-c-card__body">This is a card</div>
260
+ </div>
261
+ <div class="pf-c-card">
262
+ <div class="pf-c-card__body">This is a card</div>
263
+ </div>
264
+ <div class="pf-c-card">
265
+ <div class="pf-c-card__body">This is a card</div>
266
+ </div>
267
+ <div class="pf-c-card">
268
+ <div class="pf-c-card__body">This is a card</div>
269
+ </div>
270
+ <div class="pf-c-card">
271
+ <div class="pf-c-card__body">This is a card</div>
272
+ </div>
273
+ <div class="pf-c-card">
274
+ <div class="pf-c-card__body">This is a card</div>
275
+ </div>
276
+ <div class="pf-c-card">
277
+ <div class="pf-c-card__body">This is a card</div>
278
+ </div>
279
+ <div class="pf-c-card">
280
+ <div class="pf-c-card__body">This is a card</div>
281
+ </div>
282
+ <div class="pf-c-card">
283
+ <div class="pf-c-card__body">This is a card</div>
284
+ </div>
285
+ <div class="pf-c-card">
286
+ <div class="pf-c-card__body">This is a card</div>
287
+ </div>
288
+ <div class="pf-c-card">
289
+ <div class="pf-c-card__body">This is a card</div>
290
+ </div>
291
+ <div class="pf-c-card">
292
+ <div class="pf-c-card__body">This is a card</div>
293
+ </div>
294
+ <div class="pf-c-card">
295
+ <div class="pf-c-card__body">This is a card</div>
296
+ </div>
297
+ <div class="pf-c-card">
298
+ <div class="pf-c-card__body">This is a card</div>
299
+ </div>
300
+ <div class="pf-c-card">
301
+ <div class="pf-c-card__body">This is a card</div>
302
+ </div>
303
+ <div class="pf-c-card">
304
+ <div class="pf-c-card__body">This is a card</div>
305
+ </div>
306
+ <div class="pf-c-card">
307
+ <div class="pf-c-card__body">This is a card</div>
308
+ </div>
309
+ <div class="pf-c-card">
310
+ <div class="pf-c-card__body">This is a card</div>
311
+ </div>
312
+ <div class="pf-c-card">
313
+ <div class="pf-c-card__body">This is a card</div>
314
+ </div>
315
+ <div class="pf-c-card">
316
+ <div class="pf-c-card__body">This is a card</div>
317
+ </div>
318
+ <div class="pf-c-card">
319
+ <div class="pf-c-card__body">This is a card</div>
320
+ </div>
321
+ <div class="pf-c-card">
322
+ <div class="pf-c-card__body">This is a card</div>
323
+ </div>
324
+ <div class="pf-c-card">
325
+ <div class="pf-c-card__body">This is a card</div>
326
+ </div>
327
+ <div class="pf-c-card">
328
+ <div class="pf-c-card__body">This is a card</div>
329
+ </div>
330
+ <div class="pf-c-card">
331
+ <div class="pf-c-card__body">This is a card</div>
332
+ </div>
333
+ <div class="pf-c-card">
334
+ <div class="pf-c-card__body">This is a card</div>
335
+ </div>
336
+ <div class="pf-c-card">
337
+ <div class="pf-c-card__body">This is a card</div>
338
+ </div>
339
+ <div class="pf-c-card">
340
+ <div class="pf-c-card__body">This is a card</div>
341
+ </div>
342
+ <div class="pf-c-card">
343
+ <div class="pf-c-card__body">This is a card</div>
344
+ </div>
345
+ <div class="pf-c-card">
346
+ <div class="pf-c-card__body">This is a card</div>
347
+ </div>
348
+ <div class="pf-c-card">
349
+ <div class="pf-c-card__body">This is a card</div>
350
+ </div>
351
+ <div class="pf-c-card">
352
+ <div class="pf-c-card__body">This is a card</div>
353
+ </div>
354
+ <div class="pf-c-card">
355
+ <div class="pf-c-card__body">This is a card</div>
356
+ </div>
357
+ <div class="pf-c-card">
358
+ <div class="pf-c-card__body">This is a card</div>
359
+ </div>
360
+ <div class="pf-c-card">
361
+ <div class="pf-c-card__body">This is a card</div>
362
+ </div>
363
+ <div class="pf-c-card">
364
+ <div class="pf-c-card__body">This is a card</div>
365
+ </div>
366
+ <div class="pf-c-card">
367
+ <div class="pf-c-card__body">This is a card</div>
368
+ </div>
369
+ <div class="pf-c-card">
370
+ <div class="pf-c-card__body">This is a card</div>
371
+ </div>
372
+ <div class="pf-c-card">
373
+ <div class="pf-c-card__body">This is a card</div>
374
+ </div>
375
+ <div class="pf-c-card">
376
+ <div class="pf-c-card__body">This is a card</div>
377
+ </div>
378
+ <div class="pf-c-card">
379
+ <div class="pf-c-card__body">This is a card</div>
380
+ </div>
381
+ <div class="pf-c-card">
382
+ <div class="pf-c-card__body">This is a card</div>
383
+ </div>
384
+ <div class="pf-c-card">
385
+ <div class="pf-c-card__body">This is a card</div>
386
+ </div>
387
+ <div class="pf-c-card">
388
+ <div class="pf-c-card__body">This is a card</div>
389
+ </div>
390
+ <div class="pf-c-card">
391
+ <div class="pf-c-card__body">This is a card</div>
392
+ </div>
393
+ <div class="pf-c-card">
394
+ <div class="pf-c-card__body">This is a card</div>
495
395
  </div>
496
396
  </div>
497
397
  </div>