@patternfly/patternfly 4.184.3 → 4.185.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 (42) hide show
  1. package/assets/icons/iconUnicodes.json +1 -0
  2. package/assets/pficon/pficon.scss +6 -0
  3. package/assets/pficon/pficon.woff +0 -0
  4. package/assets/pficon/pficon.woff2 +0 -0
  5. package/base/patternfly-icons.css +5 -1
  6. package/base/patternfly-pf-icons.css +5 -1
  7. package/components/Masthead/masthead.css +1 -1
  8. package/components/Masthead/masthead.scss +1 -1
  9. package/components/Menu/menu.css +1 -0
  10. package/components/Menu/menu.scss +1 -0
  11. package/docs/demos/AboutModal/examples/AboutModal.md +916 -1
  12. package/docs/demos/Alert/examples/Alert.md +2484 -490
  13. package/docs/demos/BackToTop/examples/BackToTop.md +785 -140
  14. package/docs/demos/Banner/examples/Banner.md +2074 -1466
  15. package/docs/demos/Button/examples/Button.md +33 -21
  16. package/docs/demos/CardView/examples/CardView.md +1065 -260
  17. package/docs/demos/ContextSelector/examples/ContextSelector.md +1580 -1638
  18. package/docs/demos/Dashboard/examples/Dashboard.md +40 -6
  19. package/docs/demos/DataList/examples/DataList.md +3777 -1553
  20. package/docs/demos/DescriptionList/examples/DescriptionList.md +55 -61
  21. package/docs/demos/Drawer/examples/Drawer.md +2554 -439
  22. package/docs/demos/JumpLinks/examples/JumpLinks.md +3223 -596
  23. package/docs/demos/Masthead/examples/Masthead.md +9 -20
  24. package/docs/demos/Modal/examples/Modal.md +5521 -34
  25. package/docs/demos/Nav/examples/Nav.md +6453 -1201
  26. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +4036 -940
  27. package/docs/demos/Page/examples/Page.md +14 -35
  28. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +6003 -1512
  29. package/docs/demos/Skeleton/examples/Skeleton.md +831 -149
  30. package/docs/demos/Table/examples/Table.md +26 -65
  31. package/docs/demos/Tabs/examples/Tabs.md +10149 -4897
  32. package/docs/demos/Toolbar/examples/Toolbar.md +797 -149
  33. package/docs/demos/Wizard/examples/Wizard.md +3418 -288
  34. package/docs/pages/icons.md +1 -0
  35. package/icons/pf-icons.json +1 -0
  36. package/package.json +1 -1
  37. package/patternfly-base-no-reset.css +5 -1
  38. package/patternfly-base.css +5 -1
  39. package/patternfly-no-reset.css +7 -2
  40. package/patternfly.css +7 -2
  41. package/patternfly.min.css +1 -1
  42. package/patternfly.min.css.map +1 -1
@@ -8,13 +8,12 @@ cssPrefix: pf-d-description-list
8
8
  ### Basic
9
9
 
10
10
  ```html isFullscreen
11
- <div class="pf-c-page" id="description-list-basic-demo">
11
+ <div class="pf-c-page" id="description-list-basic-example">
12
12
  <a
13
13
  class="pf-c-skip-to-content pf-c-button pf-m-primary"
14
- href="#main-content-description-list-basic-demo"
14
+ href="#main-content-description-list-basic-example"
15
15
  >Skip to content</a>
16
-
17
- <header class="pf-c-masthead" id="description-list-basic-demo-masthead">
16
+ <header class="pf-c-masthead" id="description-list-basic-example-masthead">
18
17
  <span class="pf-c-masthead__toggle">
19
18
  <button
20
19
  class="pf-c-button pf-m-plain"
@@ -45,7 +44,7 @@ cssPrefix: pf-d-description-list
45
44
  <div class="pf-c-masthead__content">
46
45
  <div
47
46
  class="pf-c-toolbar pf-m-full-height pf-m-static"
48
- id="description-list-basic-demo-masthead-toolbar"
47
+ id="description-list-basic-example-masthead-toolbar"
49
48
  >
50
49
  <div class="pf-c-toolbar__content">
51
50
  <div class="pf-c-toolbar__content-section">
@@ -59,7 +58,7 @@ cssPrefix: pf-d-description-list
59
58
  aria-label="Notifications"
60
59
  >
61
60
  <span class="pf-c-notification-badge">
62
- <i class="pf-icon-attention-bell" aria-hidden="true"></i>
61
+ <i class="pf-icon-bell" aria-hidden="true"></i>
63
62
  </span>
64
63
  </button>
65
64
  </div>
@@ -70,12 +69,12 @@ cssPrefix: pf-d-description-list
70
69
  <nav
71
70
  class="pf-c-app-launcher"
72
71
  aria-label="Application launcher"
73
- id="description-list-basic-demo-masthead-icon-group--app-launcher"
72
+ id="description-list-basic-example-masthead-icon-group--app-launcher"
74
73
  >
75
74
  <button
76
75
  class="pf-c-app-launcher__toggle"
77
76
  type="button"
78
- id="description-list-basic-demo-masthead-icon-group--app-launcher-button"
77
+ id="description-list-basic-example-masthead-icon-group--app-launcher-button"
79
78
  aria-expanded="false"
80
79
  aria-label="Application launcher"
81
80
  >
@@ -215,7 +214,7 @@ cssPrefix: pf-d-description-list
215
214
  <div class="pf-c-dropdown">
216
215
  <button
217
216
  class="pf-c-dropdown__toggle pf-m-plain"
218
- id="description-list-basic-demo-masthead-settings-button"
217
+ id="description-list-basic-example-masthead-settings-button"
219
218
  aria-expanded="false"
220
219
  type="button"
221
220
  aria-label="Settings"
@@ -224,7 +223,7 @@ cssPrefix: pf-d-description-list
224
223
  </button>
225
224
  <ul
226
225
  class="pf-c-dropdown__menu pf-m-align-right"
227
- aria-labelledby="description-list-basic-demo-masthead-settings-button"
226
+ aria-labelledby="description-list-basic-example-masthead-settings-button"
228
227
  hidden
229
228
  >
230
229
  <li>
@@ -246,7 +245,7 @@ cssPrefix: pf-d-description-list
246
245
  <div class="pf-c-dropdown">
247
246
  <button
248
247
  class="pf-c-dropdown__toggle pf-m-plain"
249
- id="description-list-basic-demo-masthead-help-button"
248
+ id="description-list-basic-example-masthead-help-button"
250
249
  aria-expanded="false"
251
250
  type="button"
252
251
  aria-label="Help"
@@ -255,7 +254,7 @@ cssPrefix: pf-d-description-list
255
254
  </button>
256
255
  <ul
257
256
  class="pf-c-dropdown__menu pf-m-align-right"
258
- aria-labelledby="description-list-basic-demo-masthead-help-button"
257
+ aria-labelledby="description-list-basic-example-masthead-help-button"
259
258
  hidden
260
259
  >
261
260
  <li>
@@ -306,9 +305,7 @@ cssPrefix: pf-d-description-list
306
305
  >
307
306
  <span class="pf-c-menu__item-description">
308
307
  <div class="pf-u-font-size-sm">Username:</div>
309
- <div
310
- class="pf-u-font-size-md"
311
- >mshaksho@redhat.com</div>
308
+ <div class="pf-u-font-size-md">ned_username</div>
312
309
  </span>
313
310
  </button>
314
311
  </li>
@@ -757,7 +754,7 @@ cssPrefix: pf-d-description-list
757
754
  >
758
755
  <button
759
756
  class="pf-c-dropdown__toggle"
760
- id="description-list-basic-demo-masthead-profile-button"
757
+ id="description-list-basic-example-masthead-profile-button"
761
758
  aria-expanded="false"
762
759
  type="button"
763
760
  >
@@ -813,7 +810,7 @@ cssPrefix: pf-d-description-list
813
810
  <div class="pf-c-page__sidebar-body">
814
811
  <nav
815
812
  class="pf-c-nav"
816
- id="description-list-basic-demo-primary-nav"
813
+ id="description-list-basic-example-primary-nav"
817
814
  aria-label="Global"
818
815
  >
819
816
  <ul class="pf-c-nav__list">
@@ -843,7 +840,7 @@ cssPrefix: pf-d-description-list
843
840
  <main
844
841
  class="pf-c-page__main"
845
842
  tabindex="-1"
846
- id="main-content-description-list-basic-demo"
843
+ id="main-content-description-list-basic-example"
847
844
  >
848
845
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
849
846
  <div class="pf-c-page__main-body">
@@ -991,13 +988,15 @@ cssPrefix: pf-d-description-list
991
988
  ### In drawer
992
989
 
993
990
  ```html isFullscreen
994
- <div class="pf-c-page" id="description-list-in-drawer-demo">
991
+ <div class="pf-c-page" id="description-list-in-drawer-example">
995
992
  <a
996
993
  class="pf-c-skip-to-content pf-c-button pf-m-primary"
997
- href="#main-content-description-list-in-drawer-demo"
994
+ href="#main-content-description-list-in-drawer-example"
998
995
  >Skip to content</a>
999
-
1000
- <header class="pf-c-masthead" id="description-list-in-drawer-demo-masthead">
996
+ <header
997
+ class="pf-c-masthead"
998
+ id="description-list-in-drawer-example-masthead"
999
+ >
1001
1000
  <span class="pf-c-masthead__toggle">
1002
1001
  <button
1003
1002
  class="pf-c-button pf-m-plain"
@@ -1028,7 +1027,7 @@ cssPrefix: pf-d-description-list
1028
1027
  <div class="pf-c-masthead__content">
1029
1028
  <div
1030
1029
  class="pf-c-toolbar pf-m-full-height pf-m-static"
1031
- id="description-list-in-drawer-demo-masthead-toolbar"
1030
+ id="description-list-in-drawer-example-masthead-toolbar"
1032
1031
  >
1033
1032
  <div class="pf-c-toolbar__content">
1034
1033
  <div class="pf-c-toolbar__content-section">
@@ -1042,7 +1041,7 @@ cssPrefix: pf-d-description-list
1042
1041
  aria-label="Notifications"
1043
1042
  >
1044
1043
  <span class="pf-c-notification-badge">
1045
- <i class="pf-icon-attention-bell" aria-hidden="true"></i>
1044
+ <i class="pf-icon-bell" aria-hidden="true"></i>
1046
1045
  </span>
1047
1046
  </button>
1048
1047
  </div>
@@ -1053,12 +1052,12 @@ cssPrefix: pf-d-description-list
1053
1052
  <nav
1054
1053
  class="pf-c-app-launcher"
1055
1054
  aria-label="Application launcher"
1056
- id="description-list-in-drawer-demo-masthead-icon-group--app-launcher"
1055
+ id="description-list-in-drawer-example-masthead-icon-group--app-launcher"
1057
1056
  >
1058
1057
  <button
1059
1058
  class="pf-c-app-launcher__toggle"
1060
1059
  type="button"
1061
- id="description-list-in-drawer-demo-masthead-icon-group--app-launcher-button"
1060
+ id="description-list-in-drawer-example-masthead-icon-group--app-launcher-button"
1062
1061
  aria-expanded="false"
1063
1062
  aria-label="Application launcher"
1064
1063
  >
@@ -1198,7 +1197,7 @@ cssPrefix: pf-d-description-list
1198
1197
  <div class="pf-c-dropdown">
1199
1198
  <button
1200
1199
  class="pf-c-dropdown__toggle pf-m-plain"
1201
- id="description-list-in-drawer-demo-masthead-settings-button"
1200
+ id="description-list-in-drawer-example-masthead-settings-button"
1202
1201
  aria-expanded="false"
1203
1202
  type="button"
1204
1203
  aria-label="Settings"
@@ -1207,7 +1206,7 @@ cssPrefix: pf-d-description-list
1207
1206
  </button>
1208
1207
  <ul
1209
1208
  class="pf-c-dropdown__menu pf-m-align-right"
1210
- aria-labelledby="description-list-in-drawer-demo-masthead-settings-button"
1209
+ aria-labelledby="description-list-in-drawer-example-masthead-settings-button"
1211
1210
  hidden
1212
1211
  >
1213
1212
  <li>
@@ -1229,7 +1228,7 @@ cssPrefix: pf-d-description-list
1229
1228
  <div class="pf-c-dropdown">
1230
1229
  <button
1231
1230
  class="pf-c-dropdown__toggle pf-m-plain"
1232
- id="description-list-in-drawer-demo-masthead-help-button"
1231
+ id="description-list-in-drawer-example-masthead-help-button"
1233
1232
  aria-expanded="false"
1234
1233
  type="button"
1235
1234
  aria-label="Help"
@@ -1238,7 +1237,7 @@ cssPrefix: pf-d-description-list
1238
1237
  </button>
1239
1238
  <ul
1240
1239
  class="pf-c-dropdown__menu pf-m-align-right"
1241
- aria-labelledby="description-list-in-drawer-demo-masthead-help-button"
1240
+ aria-labelledby="description-list-in-drawer-example-masthead-help-button"
1242
1241
  hidden
1243
1242
  >
1244
1243
  <li>
@@ -1289,9 +1288,7 @@ cssPrefix: pf-d-description-list
1289
1288
  >
1290
1289
  <span class="pf-c-menu__item-description">
1291
1290
  <div class="pf-u-font-size-sm">Username:</div>
1292
- <div
1293
- class="pf-u-font-size-md"
1294
- >mshaksho@redhat.com</div>
1291
+ <div class="pf-u-font-size-md">ned_username</div>
1295
1292
  </span>
1296
1293
  </button>
1297
1294
  </li>
@@ -1740,7 +1737,7 @@ cssPrefix: pf-d-description-list
1740
1737
  >
1741
1738
  <button
1742
1739
  class="pf-c-dropdown__toggle"
1743
- id="description-list-in-drawer-demo-masthead-profile-button"
1740
+ id="description-list-in-drawer-example-masthead-profile-button"
1744
1741
  aria-expanded="false"
1745
1742
  type="button"
1746
1743
  >
@@ -1796,7 +1793,7 @@ cssPrefix: pf-d-description-list
1796
1793
  <div class="pf-c-page__sidebar-body">
1797
1794
  <nav
1798
1795
  class="pf-c-nav"
1799
- id="description-list-in-drawer-demo-primary-nav"
1796
+ id="description-list-in-drawer-example-primary-nav"
1800
1797
  aria-label="Global"
1801
1798
  >
1802
1799
  <ul class="pf-c-nav__list">
@@ -1831,7 +1828,7 @@ cssPrefix: pf-d-description-list
1831
1828
  <main
1832
1829
  class="pf-c-page__main"
1833
1830
  tabindex="-1"
1834
- id="main-content-description-list-in-drawer-demo"
1831
+ id="main-content-description-list-in-drawer-example"
1835
1832
  >
1836
1833
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
1837
1834
  <div class="pf-c-page__main-body">
@@ -1989,7 +1986,7 @@ cssPrefix: pf-d-description-list
1989
1986
  <div class="pf-l-flex__item">
1990
1987
  <h2
1991
1988
  class="pf-c-title pf-m-xl"
1992
- id="description-list-in-drawer-demo-drawer-label"
1989
+ id="description-list-in-drawer-example-drawer-label"
1993
1990
  >mary-test</h2>
1994
1991
  </div>
1995
1992
  </div>
@@ -2001,7 +1998,7 @@ cssPrefix: pf-d-description-list
2001
1998
  <li class="pf-c-tabs__item pf-m-current">
2002
1999
  <button
2003
2000
  class="pf-c-tabs__link"
2004
- id="description-list-in-drawer-demo-panel-tabs-tab1-link"
2001
+ id="description-list-in-drawer-example-panel-tabs-tab1-link"
2005
2002
  >
2006
2003
  <span class="pf-c-tabs__item-text">Overview</span>
2007
2004
  </button>
@@ -2009,7 +2006,7 @@ cssPrefix: pf-d-description-list
2009
2006
  <li class="pf-c-tabs__item">
2010
2007
  <button
2011
2008
  class="pf-c-tabs__link"
2012
- id="description-list-in-drawer-demo-panel-tabs-tab2-link"
2009
+ id="description-list-in-drawer-example-panel-tabs-tab2-link"
2013
2010
  >
2014
2011
  <span class="pf-c-tabs__item-text">Activity</span>
2015
2012
  </button>
@@ -2020,8 +2017,8 @@ cssPrefix: pf-d-description-list
2020
2017
  <div class="pf-c-drawer__body">
2021
2018
  <section
2022
2019
  class="pf-c-tab-content"
2023
- id="description-list-in-drawer-demo-panel-tabs-tab1-panel"
2024
- aria-labelledby="description-list-in-drawer-demo-panel-tabs-tab1-link"
2020
+ id="description-list-in-drawer-example-panel-tabs-tab1-panel"
2021
+ aria-labelledby="description-list-in-drawer-example-panel-tabs-tab1-link"
2025
2022
  role="tabpanel"
2026
2023
  tabindex="0"
2027
2024
  >
@@ -2237,8 +2234,8 @@ cssPrefix: pf-d-description-list
2237
2234
  </section>
2238
2235
  <section
2239
2236
  class="pf-c-tab-content"
2240
- id="description-list-in-drawer-demo-panel-tabs-tab2-panel"
2241
- aria-labelledby="description-list-in-drawer-demo-panel-tabs-tab2-link"
2237
+ id="description-list-in-drawer-example-panel-tabs-tab2-panel"
2238
+ aria-labelledby="description-list-in-drawer-example-panel-tabs-tab2-link"
2242
2239
  role="tabpanel"
2243
2240
  tabindex="0"
2244
2241
  hidden
@@ -2257,15 +2254,14 @@ cssPrefix: pf-d-description-list
2257
2254
  ### Complex content
2258
2255
 
2259
2256
  ```html isFullscreen
2260
- <div class="pf-c-page" id="description-list-complex-content-demo">
2257
+ <div class="pf-c-page" id="description-list-complex-content-example">
2261
2258
  <a
2262
2259
  class="pf-c-skip-to-content pf-c-button pf-m-primary"
2263
- href="#main-content-description-list-complex-content-demo"
2260
+ href="#main-content-description-list-complex-content-example"
2264
2261
  >Skip to content</a>
2265
-
2266
2262
  <header
2267
2263
  class="pf-c-masthead"
2268
- id="description-list-complex-content-demo-masthead"
2264
+ id="description-list-complex-content-example-masthead"
2269
2265
  >
2270
2266
  <span class="pf-c-masthead__toggle">
2271
2267
  <button
@@ -2297,7 +2293,7 @@ cssPrefix: pf-d-description-list
2297
2293
  <div class="pf-c-masthead__content">
2298
2294
  <div
2299
2295
  class="pf-c-toolbar pf-m-full-height pf-m-static"
2300
- id="description-list-complex-content-demo-masthead-toolbar"
2296
+ id="description-list-complex-content-example-masthead-toolbar"
2301
2297
  >
2302
2298
  <div class="pf-c-toolbar__content">
2303
2299
  <div class="pf-c-toolbar__content-section">
@@ -2311,7 +2307,7 @@ cssPrefix: pf-d-description-list
2311
2307
  aria-label="Notifications"
2312
2308
  >
2313
2309
  <span class="pf-c-notification-badge">
2314
- <i class="pf-icon-attention-bell" aria-hidden="true"></i>
2310
+ <i class="pf-icon-bell" aria-hidden="true"></i>
2315
2311
  </span>
2316
2312
  </button>
2317
2313
  </div>
@@ -2322,12 +2318,12 @@ cssPrefix: pf-d-description-list
2322
2318
  <nav
2323
2319
  class="pf-c-app-launcher"
2324
2320
  aria-label="Application launcher"
2325
- id="description-list-complex-content-demo-masthead-icon-group--app-launcher"
2321
+ id="description-list-complex-content-example-masthead-icon-group--app-launcher"
2326
2322
  >
2327
2323
  <button
2328
2324
  class="pf-c-app-launcher__toggle"
2329
2325
  type="button"
2330
- id="description-list-complex-content-demo-masthead-icon-group--app-launcher-button"
2326
+ id="description-list-complex-content-example-masthead-icon-group--app-launcher-button"
2331
2327
  aria-expanded="false"
2332
2328
  aria-label="Application launcher"
2333
2329
  >
@@ -2467,7 +2463,7 @@ cssPrefix: pf-d-description-list
2467
2463
  <div class="pf-c-dropdown">
2468
2464
  <button
2469
2465
  class="pf-c-dropdown__toggle pf-m-plain"
2470
- id="description-list-complex-content-demo-masthead-settings-button"
2466
+ id="description-list-complex-content-example-masthead-settings-button"
2471
2467
  aria-expanded="false"
2472
2468
  type="button"
2473
2469
  aria-label="Settings"
@@ -2476,7 +2472,7 @@ cssPrefix: pf-d-description-list
2476
2472
  </button>
2477
2473
  <ul
2478
2474
  class="pf-c-dropdown__menu pf-m-align-right"
2479
- aria-labelledby="description-list-complex-content-demo-masthead-settings-button"
2475
+ aria-labelledby="description-list-complex-content-example-masthead-settings-button"
2480
2476
  hidden
2481
2477
  >
2482
2478
  <li>
@@ -2498,7 +2494,7 @@ cssPrefix: pf-d-description-list
2498
2494
  <div class="pf-c-dropdown">
2499
2495
  <button
2500
2496
  class="pf-c-dropdown__toggle pf-m-plain"
2501
- id="description-list-complex-content-demo-masthead-help-button"
2497
+ id="description-list-complex-content-example-masthead-help-button"
2502
2498
  aria-expanded="false"
2503
2499
  type="button"
2504
2500
  aria-label="Help"
@@ -2507,7 +2503,7 @@ cssPrefix: pf-d-description-list
2507
2503
  </button>
2508
2504
  <ul
2509
2505
  class="pf-c-dropdown__menu pf-m-align-right"
2510
- aria-labelledby="description-list-complex-content-demo-masthead-help-button"
2506
+ aria-labelledby="description-list-complex-content-example-masthead-help-button"
2511
2507
  hidden
2512
2508
  >
2513
2509
  <li>
@@ -2558,9 +2554,7 @@ cssPrefix: pf-d-description-list
2558
2554
  >
2559
2555
  <span class="pf-c-menu__item-description">
2560
2556
  <div class="pf-u-font-size-sm">Username:</div>
2561
- <div
2562
- class="pf-u-font-size-md"
2563
- >mshaksho@redhat.com</div>
2557
+ <div class="pf-u-font-size-md">ned_username</div>
2564
2558
  </span>
2565
2559
  </button>
2566
2560
  </li>
@@ -3009,7 +3003,7 @@ cssPrefix: pf-d-description-list
3009
3003
  >
3010
3004
  <button
3011
3005
  class="pf-c-dropdown__toggle"
3012
- id="description-list-complex-content-demo-masthead-profile-button"
3006
+ id="description-list-complex-content-example-masthead-profile-button"
3013
3007
  aria-expanded="false"
3014
3008
  type="button"
3015
3009
  >
@@ -3065,7 +3059,7 @@ cssPrefix: pf-d-description-list
3065
3059
  <div class="pf-c-page__sidebar-body">
3066
3060
  <nav
3067
3061
  class="pf-c-nav"
3068
- id="description-list-complex-content-demo-primary-nav"
3062
+ id="description-list-complex-content-example-primary-nav"
3069
3063
  aria-label="Global"
3070
3064
  >
3071
3065
  <ul class="pf-c-nav__list">
@@ -3095,7 +3089,7 @@ cssPrefix: pf-d-description-list
3095
3089
  <main
3096
3090
  class="pf-c-page__main"
3097
3091
  tabindex="-1"
3098
- id="main-content-description-list-complex-content-demo"
3092
+ id="main-content-description-list-complex-content-example"
3099
3093
  >
3100
3094
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
3101
3095
  <div class="pf-c-page__main-body">