@patternfly/patternfly 4.176.2 → 4.178.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 (67) hide show
  1. package/UPGRADE-GUIDE.md +3 -0
  2. package/components/Avatar/avatar.css +224 -0
  3. package/components/Avatar/avatar.scss +18 -0
  4. package/components/CodeEditor/code-editor.css +8 -0
  5. package/components/CodeEditor/code-editor.scss +11 -1
  6. package/components/Dropdown/dropdown.css +10 -9
  7. package/components/Dropdown/dropdown.scss +17 -16
  8. package/components/Nav/nav.css +3 -0
  9. package/components/Nav/nav.scss +4 -0
  10. package/components/Table/table.css +2 -1
  11. package/components/Table/table.scss +8 -5
  12. package/docs/components/Avatar/examples/Avatar.md +53 -5
  13. package/docs/components/Brand/examples/Brand.md +6 -6
  14. package/docs/components/CodeEditor/examples/CodeEditor.md +71 -10
  15. package/docs/components/DataList/examples/DataList.md +11 -11
  16. package/docs/components/DescriptionList/examples/DescriptionList.md +19 -19
  17. package/docs/components/Divider/examples/Divider.md +2 -2
  18. package/docs/components/Drawer/examples/Drawer.md +27 -27
  19. package/docs/components/Dropdown/examples/Dropdown.md +2 -2
  20. package/docs/components/JumpLinks/examples/JumpLinks.md +19 -19
  21. package/docs/components/LogViewer/examples/LogViewer.md +19 -19
  22. package/docs/components/Masthead/examples/masthead.md +10 -10
  23. package/docs/components/Menu/examples/Menu.md +2 -2
  24. package/docs/components/Nav/examples/Navigation.css +3 -1
  25. package/docs/components/Nav/examples/Navigation.md +79 -0
  26. package/docs/components/Page/examples/Page.md +4 -4
  27. package/docs/components/Pagination/examples/Pagination.md +2 -2
  28. package/docs/components/Sidebar/examples/Sidebar.md +14 -14
  29. package/docs/components/Table/examples/Table.md +20 -9
  30. package/docs/components/Tabs/examples/Tabs.md +27 -27
  31. package/docs/components/Toolbar/examples/Toolbar.md +31 -31
  32. package/docs/demos/Alert/examples/Alert.md +4 -5
  33. package/docs/demos/BackToTop/examples/BackToTop.md +2 -203
  34. package/docs/demos/Banner/examples/Banner.md +2 -2
  35. package/docs/demos/Card/examples/Card.md +42 -14
  36. package/docs/demos/CardView/examples/CardView.md +1 -1
  37. package/docs/demos/ContextSelector/examples/ContextSelector.md +32 -869
  38. package/docs/demos/DataList/examples/DataList.md +4 -4
  39. package/docs/demos/Drawer/examples/Drawer.md +6 -6
  40. package/docs/demos/JumpLinks/examples/JumpLinks.md +8 -12
  41. package/docs/demos/Masthead/examples/Masthead.md +1645 -1028
  42. package/docs/demos/Nav/examples/Nav.md +16 -17
  43. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +10 -10
  44. package/docs/demos/Page/examples/Page.md +4956 -989
  45. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +7 -7
  46. package/docs/demos/Skeleton/examples/Skeleton.md +1 -1
  47. package/docs/demos/Table/examples/Table.md +18950 -12842
  48. package/docs/demos/Tabs/examples/Tabs.md +8 -102
  49. package/docs/demos/Toolbar/examples/Toolbar.md +2 -3
  50. package/docs/demos/Wizard/examples/Wizard.md +4 -4
  51. package/docs/layouts/Flex/examples/Flex.md +1 -1
  52. package/docs/layouts/Gallery/examples/Gallery.md +2 -2
  53. package/docs/layouts/Grid/examples/Grid.md +9 -9
  54. package/docs/utilities/Accessibility/examples/Accessibility.md +1 -1
  55. package/docs/utilities/Alignment/examples/Alignment.md +1 -1
  56. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +1 -1
  57. package/docs/utilities/Display/examples/Display.md +1 -1
  58. package/docs/utilities/Flex/examples/Flex.md +1 -1
  59. package/docs/utilities/Float/examples/Float.md +1 -1
  60. package/docs/utilities/Sizing/examples/Sizing.md +12 -0
  61. package/docs/utilities/Spacing/examples/Spacing.md +1 -1
  62. package/docs/utilities/Text/examples/Text.md +1 -1
  63. package/package.json +1 -1
  64. package/patternfly-no-reset.css +247 -10
  65. package/patternfly.css +247 -10
  66. package/patternfly.min.css +1 -1
  67. package/patternfly.min.css.map +1 -1
@@ -34,7 +34,6 @@ cssPrefix: pf-d-back-to-top
34
34
  />
35
35
  </a>
36
36
  </div>
37
-
38
37
  <div class="pf-c-page__header-tools">
39
38
  <div class="pf-c-page__header-tools-group">
40
39
  <div
@@ -56,7 +55,7 @@ cssPrefix: pf-d-back-to-top
56
55
  type="button"
57
56
  aria-label="Help"
58
57
  >
59
- <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
58
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
60
59
  </button>
61
60
  </div>
62
61
  </div>
@@ -237,7 +236,7 @@ cssPrefix: pf-d-back-to-top
237
236
  <div class="pf-c-page__main-body">
238
237
  <div class="pf-c-content">
239
238
  <h1>Main title</h1>
240
- <p>This is a demo of the page component.</p>
239
+ <p>This is a full page demo.</p>
241
240
  </div>
242
241
  </div>
243
242
  </section>
@@ -294,206 +293,6 @@ cssPrefix: pf-d-back-to-top
294
293
  <div class="pf-c-card__body">This is a card</div>
295
294
  </div>
296
295
  </div>
297
- <div class="pf-l-gallery__item">
298
- <div class="pf-c-card">
299
- <div class="pf-c-card__body">This is a card</div>
300
- </div>
301
- </div>
302
- <div class="pf-l-gallery__item">
303
- <div class="pf-c-card">
304
- <div class="pf-c-card__body">This is a card</div>
305
- </div>
306
- </div>
307
- <div class="pf-l-gallery__item">
308
- <div class="pf-c-card">
309
- <div class="pf-c-card__body">This is a card</div>
310
- </div>
311
- </div>
312
- <div class="pf-l-gallery__item">
313
- <div class="pf-c-card">
314
- <div class="pf-c-card__body">This is a card</div>
315
- </div>
316
- </div>
317
- <div class="pf-l-gallery__item">
318
- <div class="pf-c-card">
319
- <div class="pf-c-card__body">This is a card</div>
320
- </div>
321
- </div>
322
- <div class="pf-l-gallery__item">
323
- <div class="pf-c-card">
324
- <div class="pf-c-card__body">This is a card</div>
325
- </div>
326
- </div>
327
- <div class="pf-l-gallery__item">
328
- <div class="pf-c-card">
329
- <div class="pf-c-card__body">This is a card</div>
330
- </div>
331
- </div>
332
- <div class="pf-l-gallery__item">
333
- <div class="pf-c-card">
334
- <div class="pf-c-card__body">This is a card</div>
335
- </div>
336
- </div>
337
- <div class="pf-l-gallery__item">
338
- <div class="pf-c-card">
339
- <div class="pf-c-card__body">This is a card</div>
340
- </div>
341
- </div>
342
- <div class="pf-l-gallery__item">
343
- <div class="pf-c-card">
344
- <div class="pf-c-card__body">This is a card</div>
345
- </div>
346
- </div>
347
- <div class="pf-l-gallery__item">
348
- <div class="pf-c-card">
349
- <div class="pf-c-card__body">This is a card</div>
350
- </div>
351
- </div>
352
- <div class="pf-l-gallery__item">
353
- <div class="pf-c-card">
354
- <div class="pf-c-card__body">This is a card</div>
355
- </div>
356
- </div>
357
- <div class="pf-l-gallery__item">
358
- <div class="pf-c-card">
359
- <div class="pf-c-card__body">This is a card</div>
360
- </div>
361
- </div>
362
- <div class="pf-l-gallery__item">
363
- <div class="pf-c-card">
364
- <div class="pf-c-card__body">This is a card</div>
365
- </div>
366
- </div>
367
- <div class="pf-l-gallery__item">
368
- <div class="pf-c-card">
369
- <div class="pf-c-card__body">This is a card</div>
370
- </div>
371
- </div>
372
- <div class="pf-l-gallery__item">
373
- <div class="pf-c-card">
374
- <div class="pf-c-card__body">This is a card</div>
375
- </div>
376
- </div>
377
- <div class="pf-l-gallery__item">
378
- <div class="pf-c-card">
379
- <div class="pf-c-card__body">This is a card</div>
380
- </div>
381
- </div>
382
- <div class="pf-l-gallery__item">
383
- <div class="pf-c-card">
384
- <div class="pf-c-card__body">This is a card</div>
385
- </div>
386
- </div>
387
- <div class="pf-l-gallery__item">
388
- <div class="pf-c-card">
389
- <div class="pf-c-card__body">This is a card</div>
390
- </div>
391
- </div>
392
- <div class="pf-l-gallery__item">
393
- <div class="pf-c-card">
394
- <div class="pf-c-card__body">This is a card</div>
395
- </div>
396
- </div>
397
- <div class="pf-l-gallery__item">
398
- <div class="pf-c-card">
399
- <div class="pf-c-card__body">This is a card</div>
400
- </div>
401
- </div>
402
- <div class="pf-l-gallery__item">
403
- <div class="pf-c-card">
404
- <div class="pf-c-card__body">This is a card</div>
405
- </div>
406
- </div>
407
- <div class="pf-l-gallery__item">
408
- <div class="pf-c-card">
409
- <div class="pf-c-card__body">This is a card</div>
410
- </div>
411
- </div>
412
- <div class="pf-l-gallery__item">
413
- <div class="pf-c-card">
414
- <div class="pf-c-card__body">This is a card</div>
415
- </div>
416
- </div>
417
- <div class="pf-l-gallery__item">
418
- <div class="pf-c-card">
419
- <div class="pf-c-card__body">This is a card</div>
420
- </div>
421
- </div>
422
- <div class="pf-l-gallery__item">
423
- <div class="pf-c-card">
424
- <div class="pf-c-card__body">This is a card</div>
425
- </div>
426
- </div>
427
- <div class="pf-l-gallery__item">
428
- <div class="pf-c-card">
429
- <div class="pf-c-card__body">This is a card</div>
430
- </div>
431
- </div>
432
- <div class="pf-l-gallery__item">
433
- <div class="pf-c-card">
434
- <div class="pf-c-card__body">This is a card</div>
435
- </div>
436
- </div>
437
- <div class="pf-l-gallery__item">
438
- <div class="pf-c-card">
439
- <div class="pf-c-card__body">This is a card</div>
440
- </div>
441
- </div>
442
- <div class="pf-l-gallery__item">
443
- <div class="pf-c-card">
444
- <div class="pf-c-card__body">This is a card</div>
445
- </div>
446
- </div>
447
- <div class="pf-l-gallery__item">
448
- <div class="pf-c-card">
449
- <div class="pf-c-card__body">This is a card</div>
450
- </div>
451
- </div>
452
- <div class="pf-l-gallery__item">
453
- <div class="pf-c-card">
454
- <div class="pf-c-card__body">This is a card</div>
455
- </div>
456
- </div>
457
- <div class="pf-l-gallery__item">
458
- <div class="pf-c-card">
459
- <div class="pf-c-card__body">This is a card</div>
460
- </div>
461
- </div>
462
- <div class="pf-l-gallery__item">
463
- <div class="pf-c-card">
464
- <div class="pf-c-card__body">This is a card</div>
465
- </div>
466
- </div>
467
- <div class="pf-l-gallery__item">
468
- <div class="pf-c-card">
469
- <div class="pf-c-card__body">This is a card</div>
470
- </div>
471
- </div>
472
- <div class="pf-l-gallery__item">
473
- <div class="pf-c-card">
474
- <div class="pf-c-card__body">This is a card</div>
475
- </div>
476
- </div>
477
- <div class="pf-l-gallery__item">
478
- <div class="pf-c-card">
479
- <div class="pf-c-card__body">This is a card</div>
480
- </div>
481
- </div>
482
- <div class="pf-l-gallery__item">
483
- <div class="pf-c-card">
484
- <div class="pf-c-card__body">This is a card</div>
485
- </div>
486
- </div>
487
- <div class="pf-l-gallery__item">
488
- <div class="pf-c-card">
489
- <div class="pf-c-card__body">This is a card</div>
490
- </div>
491
- </div>
492
- <div class="pf-l-gallery__item">
493
- <div class="pf-c-card">
494
- <div class="pf-c-card__body">This is a card</div>
495
- </div>
496
- </div>
497
296
  </div>
498
297
  </div>
499
298
  </section>
@@ -57,7 +57,7 @@ wrapperTag: div
57
57
  type="button"
58
58
  aria-label="Help"
59
59
  >
60
- <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
60
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
61
61
  </button>
62
62
  </div>
63
63
  </div>
@@ -856,7 +856,7 @@ wrapperTag: div
856
856
  type="button"
857
857
  aria-label="Help"
858
858
  >
859
- <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
859
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
860
860
  </button>
861
861
  </div>
862
862
  </div>
@@ -1793,16 +1793,24 @@ wrapperTag: div
1793
1793
  ### Utilization card 3
1794
1794
 
1795
1795
  ```html
1796
+ <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to
1797
+ <code>baseline</code> alignment.
1798
+ <br />
1799
+ <br />
1796
1800
  <div
1797
1801
  class="pf-l-gallery pf-m-gutter"
1798
1802
  style="--pf-l-gallery--GridTemplateColumns--min: 360px;"
1799
1803
  >
1800
1804
  <div class="pf-c-card" id="utilization-card-3-example">
1801
- <div class="pf-c-card__header">
1802
- <div class="pf-c-card__title" id="utilization-card-3-example-title1">
1805
+ <div class="pf-c-card__header pf-u-align-items-flex-start">
1806
+ <div
1807
+ class="pf-c-card__title"
1808
+ id="utilization-card-3-example-title1"
1809
+ style="padding-top: 3px;"
1810
+ >
1803
1811
  <h2 class="pf-c-title pf-m-lg">Recommendations</h2>
1804
1812
  </div>
1805
- <div class="pf-c-card__actions">
1813
+ <div class="pf-c-card__actions pf-m-no-offset">
1806
1814
  <div class="pf-c-select">
1807
1815
  <span
1808
1816
  id="utilization-card-3-example-select-dropdown-label"
@@ -1810,7 +1818,7 @@ wrapperTag: div
1810
1818
  >Choose one</span>
1811
1819
 
1812
1820
  <button
1813
- class="pf-c-select__toggle"
1821
+ class="pf-c-select__toggle pf-m-plain"
1814
1822
  type="button"
1815
1823
  id="utilization-card-3-example-select-dropdown-toggle"
1816
1824
  aria-haspopup="true"
@@ -2551,6 +2559,10 @@ wrapperTag: div
2551
2559
  ### Trend card 1
2552
2560
 
2553
2561
  ```html
2562
+ <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to
2563
+ <code>baseline</code> alignment.
2564
+ <br />
2565
+ <br />
2554
2566
  <div
2555
2567
  class="pf-l-gallery pf-m-gutter"
2556
2568
  style="--pf-l-gallery--GridTemplateColumns--min: 360px;"
@@ -2563,7 +2575,7 @@ wrapperTag: div
2563
2575
  </div>
2564
2576
  <span class="pf-u-color-200">Workload</span>
2565
2577
  </div>
2566
- <div class="pf-c-card__actions">
2578
+ <div class="pf-c-card__actions pf-m-no-offset" style="padding-top: 1px;">
2567
2579
  <div class="pf-c-select">
2568
2580
  <span
2569
2581
  id="trend-card-1-example-select-dropdown-label"
@@ -2571,7 +2583,7 @@ wrapperTag: div
2571
2583
  >Choose one</span>
2572
2584
 
2573
2585
  <button
2574
- class="pf-c-select__toggle"
2586
+ class="pf-c-select__toggle pf-m-plain"
2575
2587
  type="button"
2576
2588
  id="trend-card-1-example-select-dropdown-toggle"
2577
2589
  aria-haspopup="true"
@@ -2672,13 +2684,17 @@ wrapperTag: div
2672
2684
  ### Log view
2673
2685
 
2674
2686
  ```html
2687
+ <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to
2688
+ <code>baseline</code> alignment.
2689
+ <br />
2690
+ <br />
2675
2691
  <div
2676
2692
  class="pf-l-gallery pf-m-gutter"
2677
2693
  style="--pf-l-gallery--GridTemplateColumns--min: 360px;"
2678
2694
  >
2679
2695
  <div class="pf-c-card" id="card-log-view-example">
2680
- <div class="pf-c-card__header">
2681
- <div class="pf-c-card__actions">
2696
+ <div class="pf-c-card__header pf-u-align-items-flex-start">
2697
+ <div class="pf-c-card__actions pf-m-no-offset">
2682
2698
  <div class="pf-c-select">
2683
2699
  <span
2684
2700
  id="card-log-view-example-select-dropdown-label"
@@ -2686,7 +2702,7 @@ wrapperTag: div
2686
2702
  >Choose one</span>
2687
2703
 
2688
2704
  <button
2689
- class="pf-c-select__toggle"
2705
+ class="pf-c-select__toggle pf-m-plain"
2690
2706
  type="button"
2691
2707
  id="card-log-view-example-select-dropdown-toggle"
2692
2708
  aria-haspopup="true"
@@ -2737,7 +2753,11 @@ wrapperTag: div
2737
2753
  </ul>
2738
2754
  </div>
2739
2755
  </div>
2740
- <div class="pf-c-card__title" id="card-log-view-example-title1">
2756
+ <div
2757
+ class="pf-c-card__title"
2758
+ id="card-log-view-example-title1"
2759
+ style="padding-top: 3px;"
2760
+ >
2741
2761
  <h2 class="pf-c-title pf-m-lg">Activity</h2>
2742
2762
  </div>
2743
2763
  </div>
@@ -2809,13 +2829,17 @@ wrapperTag: div
2809
2829
  ### Events view
2810
2830
 
2811
2831
  ```html
2832
+ <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to
2833
+ <code>baseline</code> alignment.
2834
+ <br />
2835
+ <br />
2812
2836
  <div
2813
2837
  class="pf-l-gallery pf-m-gutter"
2814
2838
  style="--pf-l-gallery--GridTemplateColumns--min: 360px;"
2815
2839
  >
2816
2840
  <div class="pf-c-card" id="card-events-view-example">
2817
- <div class="pf-c-card__header">
2818
- <div class="pf-c-card__actions">
2841
+ <div class="pf-c-card__header pf-u-align-items-flex-start">
2842
+ <div class="pf-c-card__actions pf-m-no-offset">
2819
2843
  <div class="pf-c-select">
2820
2844
  <span
2821
2845
  id="card-events-view-example-select-dropdown-label"
@@ -2823,7 +2847,7 @@ wrapperTag: div
2823
2847
  >Choose one</span>
2824
2848
 
2825
2849
  <button
2826
- class="pf-c-select__toggle"
2850
+ class="pf-c-select__toggle pf-m-plain"
2827
2851
  type="button"
2828
2852
  id="card-events-view-example-select-dropdown-toggle"
2829
2853
  aria-haspopup="true"
@@ -2874,7 +2898,11 @@ wrapperTag: div
2874
2898
  </ul>
2875
2899
  </div>
2876
2900
  </div>
2877
- <div class="pf-c-card__title" id="card-events-view-example-title1">
2901
+ <div
2902
+ class="pf-c-card__title"
2903
+ id="card-events-view-example-title1"
2904
+ style="padding-top: 3px;"
2905
+ >
2878
2906
  <h2 class="pf-c-title pf-m-lg">Events</h2>
2879
2907
  </div>
2880
2908
  </div>
@@ -55,7 +55,7 @@ section: demos
55
55
  type="button"
56
56
  aria-label="Help"
57
57
  >
58
- <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
58
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
59
59
  </button>
60
60
  </div>
61
61
  </div>