@patternfly/patternfly 4.184.1 → 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 (111) 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/components/Form/examples/Form.md +118 -47
  12. package/docs/components/MenuToggle/examples/MenuToggle.md +17 -0
  13. package/docs/components/ModalBox/examples/ModalBox.md +1 -0
  14. package/docs/components/OptionsMenu/examples/options-menu.md +1 -1
  15. package/docs/components/Page/examples/Page.md +9 -8
  16. package/docs/components/Pagination/examples/Pagination.css +3 -0
  17. package/docs/components/Pagination/examples/Pagination.md +136 -158
  18. package/docs/components/Toolbar/examples/Toolbar.md +22 -26
  19. package/docs/components/Wizard/examples/Wizard.md +19 -18
  20. package/docs/demos/AboutModal/examples/AboutModal.md +916 -1
  21. package/docs/demos/Alert/examples/Alert.md +2484 -490
  22. package/docs/demos/BackToTop/examples/BackToTop.md +785 -140
  23. package/docs/demos/Banner/examples/Banner.md +2074 -1466
  24. package/docs/demos/Button/examples/Button.md +33 -21
  25. package/docs/demos/CardView/examples/CardView.md +1086 -285
  26. package/docs/demos/ContextSelector/examples/ContextSelector.md +1580 -1638
  27. package/docs/demos/Dashboard/examples/Dashboard.md +40 -6
  28. package/docs/demos/DataList/examples/DataList.md +3703 -1495
  29. package/docs/demos/DescriptionList/examples/DescriptionList.md +55 -61
  30. package/docs/demos/Drawer/examples/Drawer.md +2554 -439
  31. package/docs/demos/Form/examples/BasicForms.md +40 -8
  32. package/docs/demos/JumpLinks/examples/JumpLinks.md +3223 -596
  33. package/docs/demos/Masthead/examples/Masthead.md +9 -20
  34. package/docs/demos/Modal/examples/Modal.md +5525 -35
  35. package/docs/demos/Nav/examples/Nav.md +6453 -1201
  36. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +4036 -940
  37. package/docs/demos/Page/examples/Page.md +15 -35
  38. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +5 -1
  39. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +20 -4
  40. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +6829 -2373
  41. package/docs/demos/Skeleton/examples/Skeleton.md +831 -149
  42. package/docs/demos/Table/examples/Table.md +253 -338
  43. package/docs/demos/Tabs/examples/Tabs.md +8171 -2943
  44. package/docs/demos/Toolbar/examples/Toolbar.md +885 -253
  45. package/docs/demos/Wizard/examples/Wizard.md +3422 -292
  46. package/docs/pages/icons.md +1 -0
  47. package/icons/pf-icons.json +1 -0
  48. package/package.json +1 -1
  49. package/patternfly-base-no-reset.css +5 -1
  50. package/patternfly-base.css +5 -1
  51. package/patternfly-no-reset.css +7 -2
  52. package/patternfly-theme-dark.css +21 -21
  53. package/patternfly.css +7 -2
  54. package/patternfly.min.css +1 -1
  55. package/patternfly.min.css.map +1 -1
  56. package/themes/dark/_patternfly-theme-dark.scss +119 -0
  57. package/themes/dark/_variables.scss +94 -0
  58. package/themes/dark/colors.scss +16 -0
  59. package/themes/dark/globals.scss +7 -0
  60. package/themes/dark/mixins.scss +5 -0
  61. package/themes/dark/placeholders.scss +30 -0
  62. package/themes/dark/scss-variables.scss +85 -0
  63. package/components/AboutModalBox/themes/dark/about-modal-box.css +0 -0
  64. package/components/Accordion/themes/dark/accordion.css +0 -0
  65. package/components/Alert/themes/dark/alert.css +0 -0
  66. package/components/AppLauncher/themes/dark/app-launcher.css +0 -0
  67. package/components/Badge/themes/dark/badge.css +0 -0
  68. package/components/Banner/themes/dark/banner.css +0 -0
  69. package/components/Breadcrumb/themes/dark/breadcrumb.css +0 -0
  70. package/components/Button/themes/dark/button.css +0 -0
  71. package/components/CalendarMonth/themes/dark/calendar-month.css +0 -0
  72. package/components/Chip/themes/dark/chip.css +0 -0
  73. package/components/ClipboardCopy/themes/dark/clipboard-copy.css +0 -0
  74. package/components/CodeEditor/themes/dark/code-editor.css +0 -0
  75. package/components/ContextSelector/themes/dark/context-selector.css +0 -0
  76. package/components/DataList/themes/dark/data-list.css +0 -0
  77. package/components/DatePicker/themes/dark/date-picker.css +0 -0
  78. package/components/Drawer/themes/dark/drawer.css +0 -0
  79. package/components/Dropdown/themes/dark/dropdown.css +0 -0
  80. package/components/Form/themes/dark/form.css +0 -0
  81. package/components/FormControl/themes/dark/form-control.css +0 -0
  82. package/components/HelperText/themes/dark/helper-text.css +0 -0
  83. package/components/Hint/themes/dark/hint.css +0 -0
  84. package/components/InputGroup/themes/dark/input-group.css +0 -0
  85. package/components/Label/themes/dark/label.css +0 -0
  86. package/components/LogViewer/themes/dark/log-viewer.css +0 -0
  87. package/components/Login/themes/dark/login.css +0 -0
  88. package/components/Masthead/themes/dark/masthead.css +0 -0
  89. package/components/Menu/themes/dark/menu.css +0 -0
  90. package/components/MenuToggle/themes/dark/menu-toggle.css +0 -0
  91. package/components/ModalBox/themes/dark/modal-box.css +0 -0
  92. package/components/Nav/themes/dark/nav.css +0 -0
  93. package/components/NotificationBadge/themes/dark/notification-badge.css +0 -0
  94. package/components/NotificationDrawer/themes/dark/notification-drawer.css +0 -0
  95. package/components/OptionsMenu/themes/dark/options-menu.css +0 -0
  96. package/components/Page/themes/dark/page.css +0 -0
  97. package/components/Pagination/themes/dark/pagination.css +0 -0
  98. package/components/Popover/themes/dark/popover.css +0 -0
  99. package/components/Progress/themes/dark/progress.css +0 -0
  100. package/components/SearchInput/themes/dark/search-input.css +0 -0
  101. package/components/Select/themes/dark/select.css +0 -0
  102. package/components/SimpleList/themes/dark/simple-list.css +0 -0
  103. package/components/Skeleton/themes/dark/skeleton.css +0 -0
  104. package/components/Switch/themes/dark/switch.css +0 -0
  105. package/components/Table/themes/dark/table.css +0 -0
  106. package/components/Tabs/themes/dark/tabs.css +0 -0
  107. package/components/Tile/themes/dark/tile.css +0 -0
  108. package/components/ToggleGroup/themes/dark/toggle-group.css +0 -0
  109. package/components/Tooltip/themes/dark/tooltip.css +0 -0
  110. package/components/TreeView/themes/dark/tree-view.css +0 -0
  111. package/components/Wizard/themes/dark/wizard.css +0 -0
package/docs/demos/Toolbar/examples/Toolbar.md CHANGED
@@ -163,23 +163,21 @@ section: components
163
163
  class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
164
164
  >
165
165
  <div class="pf-c-options-menu">
166
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
166
+ <button
167
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
168
+ type="button"
169
+ id="pagination-options-menu-bottom-example-toggle"
170
+ aria-haspopup="listbox"
171
+ aria-expanded="false"
172
+ >
167
173
  <span class="pf-c-options-menu__toggle-text">
168
174
  <b>1 - 10</b>&nbsp;of&nbsp;
169
175
  <b>36</b>
170
176
  </span>
171
- <button
172
- class="pf-c-options-menu__toggle-button"
173
- id="pagination-options-menu-bottom-example-toggle"
174
- aria-haspopup="listbox"
175
- aria-expanded="false"
176
- aria-label="Items per page"
177
- >
178
- <span class="pf-c-options-menu__toggle-button-icon">
179
- <i class="fas fa-caret-down" aria-hidden="true"></i>
180
- </span>
181
- </button>
182
- </div>
177
+ <div class="pf-c-options-menu__toggle-icon">
178
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
179
+ </div>
180
+ </button>
183
181
  <ul
184
182
  class="pf-c-options-menu__menu"
185
183
  aria-labelledby="pagination-options-menu-bottom-example-toggle"
@@ -307,23 +305,21 @@ section: components
307
305
  class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
308
306
  >
309
307
  <div class="pf-c-options-menu">
310
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
308
+ <button
309
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
310
+ type="button"
311
+ id="pagination-options-menu-bottom-example-toggle"
312
+ aria-haspopup="listbox"
313
+ aria-expanded="false"
314
+ >
311
315
  <span class="pf-c-options-menu__toggle-text">
312
316
  <b>1 - 10</b>&nbsp;of&nbsp;
313
317
  <b>36</b>
314
318
  </span>
315
- <button
316
- class="pf-c-options-menu__toggle-button"
317
- id="pagination-options-menu-bottom-example-toggle"
318
- aria-haspopup="listbox"
319
- aria-expanded="false"
320
- aria-label="Items per page"
321
- >
322
- <span class="pf-c-options-menu__toggle-button-icon">
323
- <i class="fas fa-caret-down" aria-hidden="true"></i>
324
- </span>
325
- </button>
326
- </div>
319
+ <div class="pf-c-options-menu__toggle-icon">
320
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
321
+ </div>
322
+ </button>
327
323
  <ul
328
324
  class="pf-c-options-menu__menu"
329
325
  aria-labelledby="pagination-options-menu-bottom-example-toggle"
@@ -665,23 +661,21 @@ section: components
665
661
  class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
666
662
  >
667
663
  <div class="pf-c-options-menu">
668
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
664
+ <button
665
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
666
+ type="button"
667
+ id="pagination-options-menu-bottom-example-toggle"
668
+ aria-haspopup="listbox"
669
+ aria-expanded="false"
670
+ >
669
671
  <span class="pf-c-options-menu__toggle-text">
670
672
  <b>1 - 10</b>&nbsp;of&nbsp;
671
673
  <b>36</b>
672
674
  </span>
673
- <button
674
- class="pf-c-options-menu__toggle-button"
675
- id="pagination-options-menu-bottom-example-toggle"
676
- aria-haspopup="listbox"
677
- aria-expanded="false"
678
- aria-label="Items per page"
679
- >
680
- <span class="pf-c-options-menu__toggle-button-icon">
681
- <i class="fas fa-caret-down" aria-hidden="true"></i>
682
- </span>
683
- </button>
684
- </div>
675
+ <div class="pf-c-options-menu__toggle-icon">
676
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
677
+ </div>
678
+ </button>
685
679
  <ul
686
680
  class="pf-c-options-menu__menu"
687
681
  aria-labelledby="pagination-options-menu-bottom-example-toggle"
@@ -809,23 +803,21 @@ section: components
809
803
  class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
810
804
  >
811
805
  <div class="pf-c-options-menu">
812
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
806
+ <button
807
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
808
+ type="button"
809
+ id="pagination-options-menu-bottom-example-toggle"
810
+ aria-haspopup="listbox"
811
+ aria-expanded="false"
812
+ >
813
813
  <span class="pf-c-options-menu__toggle-text">
814
814
  <b>1 - 10</b>&nbsp;of&nbsp;
815
815
  <b>36</b>
816
816
  </span>
817
- <button
818
- class="pf-c-options-menu__toggle-button"
819
- id="pagination-options-menu-bottom-example-toggle"
820
- aria-haspopup="listbox"
821
- aria-expanded="false"
822
- aria-label="Items per page"
823
- >
824
- <span class="pf-c-options-menu__toggle-button-icon">
825
- <i class="fas fa-caret-down" aria-hidden="true"></i>
826
- </span>
827
- </button>
828
- </div>
817
+ <div class="pf-c-options-menu__toggle-icon">
818
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
819
+ </div>
820
+ </button>
829
821
  <ul
830
822
  class="pf-c-options-menu__menu"
831
823
  aria-labelledby="pagination-options-menu-bottom-example-toggle"
@@ -1248,23 +1240,21 @@ section: components
1248
1240
  class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
1249
1241
  >
1250
1242
  <div class="pf-c-options-menu">
1251
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
1243
+ <button
1244
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
1245
+ type="button"
1246
+ id="pagination-options-menu-bottom-example-toggle"
1247
+ aria-haspopup="listbox"
1248
+ aria-expanded="false"
1249
+ >
1252
1250
  <span class="pf-c-options-menu__toggle-text">
1253
1251
  <b>1 - 10</b>&nbsp;of&nbsp;
1254
1252
  <b>36</b>
1255
1253
  </span>
1256
- <button
1257
- class="pf-c-options-menu__toggle-button"
1258
- id="pagination-options-menu-bottom-example-toggle"
1259
- aria-haspopup="listbox"
1260
- aria-expanded="false"
1261
- aria-label="Items per page"
1262
- >
1263
- <span class="pf-c-options-menu__toggle-button-icon">
1264
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1265
- </span>
1266
- </button>
1267
- </div>
1254
+ <div class="pf-c-options-menu__toggle-icon">
1255
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1256
+ </div>
1257
+ </button>
1268
1258
  <ul
1269
1259
  class="pf-c-options-menu__menu"
1270
1260
  aria-labelledby="pagination-options-menu-bottom-example-toggle"
@@ -1459,23 +1449,21 @@ section: components
1459
1449
  class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
1460
1450
  >
1461
1451
  <div class="pf-c-options-menu">
1462
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
1452
+ <button
1453
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
1454
+ type="button"
1455
+ id="pagination-options-menu-bottom-example-toggle"
1456
+ aria-haspopup="listbox"
1457
+ aria-expanded="false"
1458
+ >
1463
1459
  <span class="pf-c-options-menu__toggle-text">
1464
1460
  <b>1 - 10</b>&nbsp;of&nbsp;
1465
1461
  <b>36</b>
1466
1462
  </span>
1467
- <button
1468
- class="pf-c-options-menu__toggle-button"
1469
- id="pagination-options-menu-bottom-example-toggle"
1470
- aria-haspopup="listbox"
1471
- aria-expanded="false"
1472
- aria-label="Items per page"
1473
- >
1474
- <span class="pf-c-options-menu__toggle-button-icon">
1475
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1476
- </span>
1477
- </button>
1478
- </div>
1463
+ <div class="pf-c-options-menu__toggle-icon">
1464
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1465
+ </div>
1466
+ </button>
1479
1467
  <ul
1480
1468
  class="pf-c-options-menu__menu"
1481
1469
  aria-labelledby="pagination-options-menu-bottom-example-toggle"
@@ -1770,164 +1758,812 @@ section: components
1770
1758
  ### Toolbar pagination management on mobile
1771
1759
 
1772
1760
  ```html isFullscreen
1773
- <div class="pf-c-page" id="toolbar-pagination-management">
1761
+ <div class="pf-c-page" id="toolbar-pagination-management-example">
1774
1762
  <a
1775
1763
  class="pf-c-skip-to-content pf-c-button pf-m-primary"
1776
- href="#main-content-toolbar-pagination-management"
1764
+ href="#main-content-toolbar-pagination-management-example"
1777
1765
  >Skip to content</a>
1778
- <header class="pf-c-page__header">
1779
- <div class="pf-c-page__header-brand">
1780
- <div class="pf-c-page__header-brand-toggle">
1781
- <button
1782
- class="pf-c-button pf-m-plain"
1783
- type="button"
1784
- id="toolbar-pagination-management-nav-toggle"
1785
- aria-label="Global navigation"
1786
- aria-expanded="true"
1787
- aria-controls="toolbar-pagination-management-primary-nav"
1766
+ <header
1767
+ class="pf-c-masthead"
1768
+ id="toolbar-pagination-management-example-masthead"
1769
+ >
1770
+ <span class="pf-c-masthead__toggle">
1771
+ <button
1772
+ class="pf-c-button pf-m-plain"
1773
+ type="button"
1774
+ aria-label="Global navigation"
1775
+ >
1776
+ <i class="fas fa-bars" aria-hidden="true"></i>
1777
+ </button>
1778
+ </span>
1779
+ <div class="pf-c-masthead__main">
1780
+ <a class="pf-c-masthead__brand" href="#">
1781
+ <picture
1782
+ class="pf-c-brand pf-m-picture"
1783
+ style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
1788
1784
  >
1789
- <i class="fas fa-bars" aria-hidden="true"></i>
1790
- </button>
1791
- </div>
1792
- <a href="#" class="pf-c-page__header-brand-link">
1793
- <img
1794
- class="pf-c-brand"
1795
- src="/assets/images/PF-Masthead-Logo.svg"
1796
- alt="PatternFly logo"
1797
- />
1785
+ <source
1786
+ media="(min-width: 768px)"
1787
+ srcset="/assets/images/logo__pf--reverse-on-md.svg"
1788
+ />
1789
+ <source srcset="/assets/images/logo__pf--reverse--base.svg" />
1790
+ <img
1791
+ src="/assets/images/logo__pf--reverse--base.png"
1792
+ alt="Fallback patternFly default logo"
1793
+ />
1794
+ </picture>
1798
1795
  </a>
1799
1796
  </div>
1800
- <div class="pf-c-page__header-tools">
1801
- <div class="pf-c-page__header-tools-group">
1802
- <div
1803
- class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
1804
- >
1805
- <button
1806
- class="pf-c-button pf-m-plain"
1807
- type="button"
1808
- aria-label="Settings"
1809
- >
1810
- <i class="fas fa-cog" aria-hidden="true"></i>
1811
- </button>
1812
- </div>
1813
- <div
1814
- class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
1815
- >
1816
- <button
1817
- class="pf-c-button pf-m-plain"
1818
- type="button"
1819
- aria-label="Help"
1820
- >
1821
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1822
- </button>
1823
- </div>
1824
- </div>
1825
- <div class="pf-c-page__header-tools-group">
1826
- <div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
1827
- <div class="pf-c-dropdown">
1828
- <button
1829
- class="pf-c-dropdown__toggle pf-m-plain"
1830
- id="toolbar-pagination-management-dropdown-kebab-1-button"
1831
- aria-expanded="false"
1832
- type="button"
1833
- aria-label="Actions"
1834
- >
1835
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1836
- </button>
1837
- <ul
1838
- class="pf-c-dropdown__menu pf-m-align-right"
1839
- aria-labelledby="toolbar-pagination-management-dropdown-kebab-1-button"
1840
- hidden
1797
+ <div class="pf-c-masthead__content">
1798
+ <div
1799
+ class="pf-c-toolbar pf-m-full-height pf-m-static"
1800
+ id="toolbar-pagination-management-example-masthead-toolbar"
1801
+ >
1802
+ <div class="pf-c-toolbar__content">
1803
+ <div class="pf-c-toolbar__content-section">
1804
+ <div
1805
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1841
1806
  >
1842
- <li>
1843
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1844
- </li>
1845
- <li>
1846
- <button class="pf-c-dropdown__menu-item" type="button">Action</button>
1847
- </li>
1848
- <li>
1849
- <a
1850
- class="pf-c-dropdown__menu-item pf-m-disabled"
1851
- href="#"
1852
- aria-disabled="true"
1853
- tabindex="-1"
1854
- >Disabled link</a>
1855
- </li>
1856
- <li>
1807
+ <div class="pf-c-toolbar__item">
1857
1808
  <button
1858
- class="pf-c-dropdown__menu-item"
1809
+ class="pf-c-button pf-m-plain"
1859
1810
  type="button"
1860
- disabled
1861
- >Disabled action</button>
1862
- </li>
1863
- <li class="pf-c-divider" role="separator"></li>
1864
- <li>
1865
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
1866
- </li>
1867
- </ul>
1868
- </div>
1869
- </div>
1870
- <div
1871
- class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
1872
- >
1873
- <div class="pf-c-dropdown">
1874
- <button
1875
- class="pf-c-dropdown__toggle pf-m-plain"
1876
- id="toolbar-pagination-management-dropdown-kebab-2-button"
1877
- aria-expanded="false"
1878
- type="button"
1879
- >
1880
- <span class="pf-c-dropdown__toggle-text">John Smith</span>
1881
- <span class="pf-c-dropdown__toggle-icon">
1882
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1883
- </span>
1884
- </button>
1885
- <ul
1886
- class="pf-c-dropdown__menu"
1887
- aria-labelledby="toolbar-pagination-management-dropdown-kebab-2-button"
1888
- hidden
1889
- >
1890
- <li>
1891
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
1892
- </li>
1893
- <li>
1894
- <button class="pf-c-dropdown__menu-item" type="button">Action</button>
1895
- </li>
1896
- <li>
1897
- <a
1898
- class="pf-c-dropdown__menu-item pf-m-disabled"
1899
- href="#"
1900
- aria-disabled="true"
1901
- tabindex="-1"
1902
- >Disabled link</a>
1903
- </li>
1904
- <li>
1811
+ aria-label="Notifications"
1812
+ >
1813
+ <span class="pf-c-notification-badge">
1814
+ <i class="pf-icon-bell" aria-hidden="true"></i>
1815
+ </span>
1816
+ </button>
1817
+ </div>
1818
+ <div
1819
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1820
+ >
1821
+ <div class="pf-c-toolbar__item">
1822
+ <nav
1823
+ class="pf-c-app-launcher"
1824
+ aria-label="Application launcher"
1825
+ id="toolbar-pagination-management-example-masthead-icon-group--app-launcher"
1826
+ >
1827
+ <button
1828
+ class="pf-c-app-launcher__toggle"
1829
+ type="button"
1830
+ id="toolbar-pagination-management-example-masthead-icon-group--app-launcher-button"
1831
+ aria-expanded="false"
1832
+ aria-label="Application launcher"
1833
+ >
1834
+ <i class="fas fa-th" aria-hidden="true"></i>
1835
+ </button>
1836
+ <div
1837
+ class="pf-c-app-launcher__menu pf-m-align-right"
1838
+ hidden
1839
+ >
1840
+ <div class="pf-c-app-launcher__menu-search">
1841
+ <div class="pf-c-search-input">
1842
+ <div class="pf-c-search-input__bar">
1843
+ <span class="pf-c-search-input__text">
1844
+ <span class="pf-c-search-input__icon">
1845
+ <i
1846
+ class="fas fa-search fa-fw"
1847
+ aria-hidden="true"
1848
+ ></i>
1849
+ </span>
1850
+ <input
1851
+ class="pf-c-search-input__text-input"
1852
+ type="text"
1853
+ placeholder="Filter by name"
1854
+ aria-label="Filter by name"
1855
+ />
1856
+ </span>
1857
+ </div>
1858
+ </div>
1859
+ </div>
1860
+ <section class="pf-c-app-launcher__group">
1861
+ <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
1862
+ <ul>
1863
+ <li
1864
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1865
+ >
1866
+ <a class="pf-c-app-launcher__menu-item">
1867
+ Link 1
1868
+ <span
1869
+ class="pf-c-app-launcher__menu-item-external-icon"
1870
+ >
1871
+ <i
1872
+ class="fas fa-external-link-alt"
1873
+ aria-hidden="true"
1874
+ ></i>
1875
+ </span>
1876
+ <span class="pf-screen-reader">(opens new window)</span>
1877
+ </a>
1878
+ <button
1879
+ class="pf-c-app-launcher__menu-item pf-m-action"
1880
+ type="button"
1881
+ aria-label="Favorite"
1882
+ >
1883
+ <i class="fas fa-star" aria-hidden="true"></i>
1884
+ </button>
1885
+ </li>
1886
+ <li
1887
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
1888
+ >
1889
+ <a class="pf-c-app-launcher__menu-item">
1890
+ Link 2
1891
+ <span
1892
+ class="pf-c-app-launcher__menu-item-external-icon"
1893
+ >
1894
+ <i
1895
+ class="fas fa-external-link-alt"
1896
+ aria-hidden="true"
1897
+ ></i>
1898
+ </span>
1899
+ <span class="pf-screen-reader">(opens new window)</span>
1900
+ </a>
1901
+ <button
1902
+ class="pf-c-app-launcher__menu-item pf-m-action"
1903
+ type="button"
1904
+ aria-label="Favorite"
1905
+ >
1906
+ <i class="fas fa-star" aria-hidden="true"></i>
1907
+ </button>
1908
+ </li>
1909
+ </ul>
1910
+ </section>
1911
+ <hr class="pf-c-divider" />
1912
+ <section class="pf-c-app-launcher__group">
1913
+ <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
1914
+ <ul>
1915
+ <li
1916
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
1917
+ >
1918
+ <a class="pf-c-app-launcher__menu-item">
1919
+ Link 1
1920
+ <span
1921
+ class="pf-c-app-launcher__menu-item-external-icon"
1922
+ >
1923
+ <i
1924
+ class="fas fa-external-link-alt"
1925
+ aria-hidden="true"
1926
+ ></i>
1927
+ </span>
1928
+ <span class="pf-screen-reader">(opens new window)</span>
1929
+ </a>
1930
+ <button
1931
+ class="pf-c-app-launcher__menu-item pf-m-action"
1932
+ type="button"
1933
+ aria-label="Favorite"
1934
+ >
1935
+ <i class="fas fa-star" aria-hidden="true"></i>
1936
+ </button>
1937
+ </li>
1938
+ <li
1939
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1940
+ >
1941
+ <a class="pf-c-app-launcher__menu-item">
1942
+ Link 2
1943
+ <span
1944
+ class="pf-c-app-launcher__menu-item-external-icon"
1945
+ >
1946
+ <i
1947
+ class="fas fa-external-link-alt"
1948
+ aria-hidden="true"
1949
+ ></i>
1950
+ </span>
1951
+ <span class="pf-screen-reader">(opens new window)</span>
1952
+ </a>
1953
+ <button
1954
+ class="pf-c-app-launcher__menu-item pf-m-action"
1955
+ type="button"
1956
+ aria-label="Favorite"
1957
+ >
1958
+ <i class="fas fa-star" aria-hidden="true"></i>
1959
+ </button>
1960
+ </li>
1961
+ </ul>
1962
+ </section>
1963
+ </div>
1964
+ </nav>
1965
+ </div>
1966
+ <div class="pf-c-toolbar__item">
1967
+ <div class="pf-c-dropdown">
1968
+ <button
1969
+ class="pf-c-dropdown__toggle pf-m-plain"
1970
+ id="toolbar-pagination-management-example-masthead-settings-button"
1971
+ aria-expanded="false"
1972
+ type="button"
1973
+ aria-label="Settings"
1974
+ >
1975
+ <i class="fas fa-cog" aria-hidden="true"></i>
1976
+ </button>
1977
+ <ul
1978
+ class="pf-c-dropdown__menu pf-m-align-right"
1979
+ aria-labelledby="toolbar-pagination-management-example-masthead-settings-button"
1980
+ hidden
1981
+ >
1982
+ <li>
1983
+ <button
1984
+ class="pf-c-dropdown__menu-item"
1985
+ type="button"
1986
+ >Settings</button>
1987
+ </li>
1988
+ <li>
1989
+ <button
1990
+ class="pf-c-dropdown__menu-item"
1991
+ type="button"
1992
+ >Use the beta release</button>
1993
+ </li>
1994
+ </ul>
1995
+ </div>
1996
+ </div>
1997
+ <div class="pf-c-toolbar__item">
1998
+ <div class="pf-c-dropdown">
1999
+ <button
2000
+ class="pf-c-dropdown__toggle pf-m-plain"
2001
+ id="toolbar-pagination-management-example-masthead-help-button"
2002
+ aria-expanded="false"
2003
+ type="button"
2004
+ aria-label="Help"
2005
+ >
2006
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
2007
+ </button>
2008
+ <ul
2009
+ class="pf-c-dropdown__menu pf-m-align-right"
2010
+ aria-labelledby="toolbar-pagination-management-example-masthead-help-button"
2011
+ hidden
2012
+ >
2013
+ <li>
2014
+ <button
2015
+ class="pf-c-dropdown__menu-item"
2016
+ type="button"
2017
+ >Support options</button>
2018
+ </li>
2019
+ <li>
2020
+ <button
2021
+ class="pf-c-dropdown__menu-item"
2022
+ type="button"
2023
+ >Open support case</button>
2024
+ </li>
2025
+ <li>
2026
+ <button
2027
+ class="pf-c-dropdown__menu-item"
2028
+ type="button"
2029
+ >API documentation</button>
2030
+ </li>
2031
+ </ul>
2032
+ </div>
2033
+ </div>
2034
+ </div>
2035
+ <div class="pf-c-toolbar__item pf-m-hidden-on-lg">
2036
+ <div class="pf-c-dropdown">
2037
+ <button
2038
+ class="pf-c-menu-toggle pf-m-plain"
2039
+ type="button"
2040
+ aria-expanded="false"
2041
+ aria-label="Actions"
2042
+ >
2043
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2044
+ </button>
2045
+ <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
2046
+ <div class="pf-c-menu__content">
2047
+ <section class="pf-c-menu__group pf-m-hidden-on-sm">
2048
+ <ul class="pf-c-menu__list" role="menu">
2049
+ <li
2050
+ class="pf-c-menu__list-item pf-m-disabled"
2051
+ role="none"
2052
+ >
2053
+ <button
2054
+ class="pf-c-menu__item"
2055
+ type="button"
2056
+ disabled
2057
+ role="menuitem"
2058
+ >
2059
+ <span class="pf-c-menu__item-description">
2060
+ <div class="pf-u-font-size-sm">Username:</div>
2061
+ <div class="pf-u-font-size-md">ned_username</div>
2062
+ </span>
2063
+ </button>
2064
+ </li>
2065
+ <li
2066
+ class="pf-c-menu__list-item pf-m-disabled"
2067
+ role="none"
2068
+ >
2069
+ <button
2070
+ class="pf-c-menu__item"
2071
+ type="button"
2072
+ disabled
2073
+ role="menuitem"
2074
+ >
2075
+ <span class="pf-c-menu__item-description">
2076
+ <div class="pf-u-font-size-sm">Account number:</div>
2077
+ <div class="pf-u-font-size-md">123456789</div>
2078
+ </span>
2079
+ </button>
2080
+ </li>
2081
+ <li class="pf-c-divider" role="separator"></li>
2082
+ <li class="pf-c-menu__list-item" role="none">
2083
+ <button
2084
+ class="pf-c-menu__item"
2085
+ type="button"
2086
+ role="menuitem"
2087
+ >
2088
+ <span class="pf-c-menu__item-main">
2089
+ <span class="pf-c-menu__item-text">My profile</span>
2090
+ </span>
2091
+ </button>
2092
+ </li>
2093
+ <li class="pf-c-menu__list-item" role="none">
2094
+ <button
2095
+ class="pf-c-menu__item"
2096
+ type="button"
2097
+ role="menuitem"
2098
+ >
2099
+ <span class="pf-c-menu__item-main">
2100
+ <span
2101
+ class="pf-c-menu__item-text"
2102
+ >User management</span>
2103
+ </span>
2104
+ </button>
2105
+ </li>
2106
+ <li class="pf-c-menu__list-item" role="none">
2107
+ <button
2108
+ class="pf-c-menu__item"
2109
+ type="button"
2110
+ role="menuitem"
2111
+ >
2112
+ <span class="pf-c-menu__item-main">
2113
+ <span class="pf-c-menu__item-text">Logout</span>
2114
+ </span>
2115
+ </button>
2116
+ </li>
2117
+ </ul>
2118
+ </section>
2119
+ <hr class="pf-c-divider pf-m-hidden-on-sm" />
2120
+ <section class="pf-c-menu__group">
2121
+ <ul class="pf-c-menu__list" role="menu">
2122
+ <li class="pf-c-menu__list-item" role="none">
2123
+ <button
2124
+ class="pf-c-menu__item"
2125
+ type="button"
2126
+ role="menuitem"
2127
+ aria-expanded="false"
2128
+ >
2129
+ <span class="pf-c-menu__item-main">
2130
+ <span class="pf-c-menu__item-icon">
2131
+ <i
2132
+ class="fas fa-fw fa-cog"
2133
+ aria-hidden="true"
2134
+ ></i>
2135
+ </span>
2136
+ <span class="pf-c-menu__item-text">Settings</span>
2137
+ <span class="pf-c-menu__item-toggle-icon">
2138
+ <i class="fas fa-angle-right"></i>
2139
+ </span>
2140
+ </span>
2141
+ </button>
2142
+ <div class="pf-c-menu" hidden>
2143
+ <div class="pf-c-menu__content">
2144
+ <ul class="pf-c-menu__list" role="menu">
2145
+ <li
2146
+ class="pf-c-menu__list-item pf-m-drill-up"
2147
+ role="none"
2148
+ >
2149
+ <button
2150
+ class="pf-c-menu__item"
2151
+ type="button"
2152
+ role="menuitem"
2153
+ >
2154
+ <span class="pf-c-menu__item-main">
2155
+ <span
2156
+ class="pf-c-menu__item-toggle-icon"
2157
+ >
2158
+ <i class="fas fa-angle-left"></i>
2159
+ </span>
2160
+ <span class="pf-c-menu__item-icon">
2161
+ <i
2162
+ class="fas fa-fw fa-cog"
2163
+ aria-hidden="true"
2164
+ ></i>
2165
+ </span>
2166
+ <span
2167
+ class="pf-c-menu__item-text"
2168
+ >Settings</span>
2169
+ </span>
2170
+ </button>
2171
+ </li>
2172
+ <li class="pf-c-divider" role="separator"></li>
2173
+ <li class="pf-c-menu__list-item" role="none">
2174
+ <a
2175
+ class="pf-c-menu__item"
2176
+ href="#"
2177
+ role="menuitem"
2178
+ >
2179
+ <span class="pf-c-menu__item-main">
2180
+ <span
2181
+ class="pf-c-menu__item-text"
2182
+ >Customer support</span>
2183
+ </span>
2184
+ </a>
2185
+ </li>
2186
+ <li class="pf-c-menu__list-item" role="none">
2187
+ <a
2188
+ class="pf-c-menu__item"
2189
+ href="#"
2190
+ role="menuitem"
2191
+ >
2192
+ <span class="pf-c-menu__item-main">
2193
+ <span class="pf-c-menu__item-text">About</span>
2194
+ </span>
2195
+ </a>
2196
+ </li>
2197
+ </ul>
2198
+ </div>
2199
+ </div>
2200
+ </li>
2201
+
2202
+ <li class="pf-c-menu__list-item" role="none">
2203
+ <button
2204
+ class="pf-c-menu__item"
2205
+ type="button"
2206
+ role="menuitem"
2207
+ aria-expanded="false"
2208
+ >
2209
+ <span class="pf-c-menu__item-main">
2210
+ <span class="pf-c-menu__item-icon">
2211
+ <i
2212
+ class="fas fa-fw fa-pf-icon pf-icon-help"
2213
+ aria-hidden="true"
2214
+ ></i>
2215
+ </span>
2216
+ <span class="pf-c-menu__item-text">Help</span>
2217
+ <span class="pf-c-menu__item-toggle-icon">
2218
+ <i class="fas fa-angle-right"></i>
2219
+ </span>
2220
+ </span>
2221
+ </button>
2222
+ <div class="pf-c-menu" hidden>
2223
+ <div class="pf-c-menu__content">
2224
+ <ul class="pf-c-menu__list" role="menu">
2225
+ <li
2226
+ class="pf-c-menu__list-item pf-m-drill-up"
2227
+ role="none"
2228
+ >
2229
+ <button
2230
+ class="pf-c-menu__item"
2231
+ type="button"
2232
+ role="menuitem"
2233
+ >
2234
+ <span class="pf-c-menu__item-main">
2235
+ <span
2236
+ class="pf-c-menu__item-toggle-icon"
2237
+ >
2238
+ <i class="fas fa-angle-left"></i>
2239
+ </span>
2240
+ <span class="pf-c-menu__item-icon">
2241
+ <i
2242
+ class="fas fa-fw fa-pf-icon pf-icon-help"
2243
+ aria-hidden="true"
2244
+ ></i>
2245
+ </span>
2246
+ <span class="pf-c-menu__item-text">Help</span>
2247
+ </span>
2248
+ </button>
2249
+ </li>
2250
+ <li class="pf-c-divider" role="separator"></li>
2251
+ <li class="pf-c-menu__list-item" role="none">
2252
+ <a
2253
+ class="pf-c-menu__item"
2254
+ href="#"
2255
+ role="menuitem"
2256
+ >
2257
+ <span class="pf-c-menu__item-main">
2258
+ <span
2259
+ class="pf-c-menu__item-text"
2260
+ >Support options</span>
2261
+ </span>
2262
+ </a>
2263
+ </li>
2264
+ <li class="pf-c-menu__list-item" role="none">
2265
+ <a
2266
+ class="pf-c-menu__item"
2267
+ href="#"
2268
+ role="menuitem"
2269
+ >
2270
+ <span class="pf-c-menu__item-main">
2271
+ <span
2272
+ class="pf-c-menu__item-text"
2273
+ >Open support case</span>
2274
+ </span>
2275
+ </a>
2276
+ </li>
2277
+ <li class="pf-c-menu__list-item" role="none">
2278
+ <a
2279
+ class="pf-c-menu__item"
2280
+ href="#"
2281
+ role="menuitem"
2282
+ >
2283
+ <span class="pf-c-menu__item-main">
2284
+ <span
2285
+ class="pf-c-menu__item-text"
2286
+ >API documentation</span>
2287
+ </span>
2288
+ </a>
2289
+ </li>
2290
+ </ul>
2291
+ </div>
2292
+ </div>
2293
+ </li>
2294
+
2295
+ <li class="pf-c-menu__list-item" role="none">
2296
+ <button
2297
+ class="pf-c-menu__item"
2298
+ type="button"
2299
+ role="menuitem"
2300
+ >
2301
+ <span class="pf-c-menu__item-main">
2302
+ <span class="pf-c-menu__item-icon">
2303
+ <i class="fas fa-fw fa-th" aria-hidden="true"></i>
2304
+ </span>
2305
+ <span
2306
+ class="pf-c-menu__item-text"
2307
+ >Application launcher</span>
2308
+ <span class="pf-c-menu__item-toggle-icon">
2309
+ <i class="fas fa-angle-right"></i>
2310
+ </span>
2311
+ </span>
2312
+ </button>
2313
+ <div class="pf-c-menu" hidden>
2314
+ <div class="pf-c-menu__header">
2315
+ <button
2316
+ class="pf-c-menu__item"
2317
+ type="button"
2318
+ role="menuitem"
2319
+ >
2320
+ <span class="pf-c-menu__item-main">
2321
+ <span class="pf-c-menu__item-toggle-icon">
2322
+ <i class="fas fa-angle-left"></i>
2323
+ </span>
2324
+ <span class="pf-c-menu__item-icon">
2325
+ <i
2326
+ class="fas fa-fw fa-th"
2327
+ aria-hidden="true"
2328
+ ></i>
2329
+ </span>
2330
+ <span
2331
+ class="pf-c-menu__item-text"
2332
+ >Application launcher</span>
2333
+ </span>
2334
+ </button>
2335
+ </div>
2336
+ <div class="pf-c-menu__search">
2337
+ <div class="pf-c-menu__search-input">
2338
+ <div class="pf-c-search-input">
2339
+ <div class="pf-c-search-input__bar">
2340
+ <span class="pf-c-search-input__text">
2341
+ <span class="pf-c-search-input__icon">
2342
+ <i
2343
+ class="fas fa-search fa-fw"
2344
+ aria-hidden="true"
2345
+ ></i>
2346
+ </span>
2347
+ <input
2348
+ class="pf-c-search-input__text-input"
2349
+ type="text"
2350
+ placeholder="Search"
2351
+ aria-label="Search"
2352
+ />
2353
+ </span>
2354
+ </div>
2355
+ </div>
2356
+ </div>
2357
+ </div>
2358
+ <hr class="pf-c-divider" />
2359
+ <section class="pf-c-menu__group">
2360
+ <h1 class="pf-c-menu__group-title">Favorites</h1>
2361
+ <ul class="pf-c-menu__list" role="menu">
2362
+ <li class="pf-c-menu__list-item" role="none">
2363
+ <a
2364
+ class="pf-c-menu__item"
2365
+ href="#"
2366
+ role="menuitem"
2367
+ >
2368
+ <span class="pf-c-menu__item-main">
2369
+ <span
2370
+ class="pf-c-menu__item-text"
2371
+ >Link 1</span>
2372
+ </span>
2373
+ </a>
2374
+ <button
2375
+ class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
2376
+ type="button"
2377
+ aria-label="Starred"
2378
+ >
2379
+ <span class="pf-c-menu__item-action-icon">
2380
+ <i
2381
+ class="fas fa-star"
2382
+ aria-hidden="true"
2383
+ ></i>
2384
+ </span>
2385
+ </button>
2386
+ </li>
2387
+ <li class="pf-c-menu__list-item" role="none">
2388
+ <a
2389
+ class="pf-c-menu__item"
2390
+ href="#"
2391
+ role="menuitem"
2392
+ target="_blank"
2393
+ >
2394
+ <span class="pf-c-menu__item-main">
2395
+ <span
2396
+ class="pf-c-menu__item-text"
2397
+ >Link 2</span>
2398
+ <span
2399
+ class="pf-c-menu__item-external-icon"
2400
+ >
2401
+ <i
2402
+ class="fas fa-external-link-alt"
2403
+ aria-hidden="true"
2404
+ ></i>
2405
+ </span>
2406
+ <span
2407
+ class="pf-screen-reader"
2408
+ >(opens new window)</span>
2409
+ </span>
2410
+ </a>
2411
+ <button
2412
+ class="pf-c-menu__item-action pf-m-favorite"
2413
+ type="button"
2414
+ aria-label="Not starred"
2415
+ >
2416
+ <span class="pf-c-menu__item-action-icon">
2417
+ <i
2418
+ class="fas fa-star"
2419
+ aria-hidden="true"
2420
+ ></i>
2421
+ </span>
2422
+ </button>
2423
+ </li>
2424
+ </ul>
2425
+ </section>
2426
+ <hr class="pf-c-divider" />
2427
+ <section class="pf-c-menu__group">
2428
+ <h1 class="pf-c-menu__group-title">Group 1</h1>
2429
+ <ul class="pf-c-menu__list" role="menu">
2430
+ <li class="pf-c-menu__list-item" role="none">
2431
+ <a
2432
+ class="pf-c-menu__item"
2433
+ href="#"
2434
+ role="menuitem"
2435
+ >
2436
+ <span class="pf-c-menu__item-main">
2437
+ <span
2438
+ class="pf-c-menu__item-text"
2439
+ >Link 1</span>
2440
+ </span>
2441
+ </a>
2442
+ <button
2443
+ class="pf-c-menu__item-action pf-m-favorite"
2444
+ type="button"
2445
+ aria-label="Not starred"
2446
+ >
2447
+ <span class="pf-c-menu__item-action-icon">
2448
+ <i
2449
+ class="fas fa-star"
2450
+ aria-hidden="true"
2451
+ ></i>
2452
+ </span>
2453
+ </button>
2454
+ </li>
2455
+ <li class="pf-c-menu__list-item" role="none">
2456
+ <a
2457
+ class="pf-c-menu__item"
2458
+ href="#"
2459
+ role="menuitem"
2460
+ target="_blank"
2461
+ >
2462
+ <span class="pf-c-menu__item-main">
2463
+ <span
2464
+ class="pf-c-menu__item-text"
2465
+ >Link 2</span>
2466
+ <span
2467
+ class="pf-c-menu__item-external-icon"
2468
+ >
2469
+ <i
2470
+ class="fas fa-external-link-alt"
2471
+ aria-hidden="true"
2472
+ ></i>
2473
+ </span>
2474
+ <span
2475
+ class="pf-screen-reader"
2476
+ >(opens new window)</span>
2477
+ </span>
2478
+ </a>
2479
+ <button
2480
+ class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
2481
+ type="button"
2482
+ aria-label="Starred"
2483
+ >
2484
+ <span class="pf-c-menu__item-action-icon">
2485
+ <i
2486
+ class="fas fa-star"
2487
+ aria-hidden="true"
2488
+ ></i>
2489
+ </span>
2490
+ </button>
2491
+ </li>
2492
+ </ul>
2493
+ </section>
2494
+ </div>
2495
+ </li>
2496
+ </ul>
2497
+ </section>
2498
+ </div>
2499
+ </div>
2500
+ </div>
2501
+ </div>
2502
+ </div>
2503
+ <div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2504
+ <div
2505
+ class="pf-c-dropdown pf-m-full-height"
2506
+ style="--pf-c-dropdown--MaxWidth: 20ch;"
2507
+ >
1905
2508
  <button
1906
- class="pf-c-dropdown__menu-item"
2509
+ class="pf-c-dropdown__toggle"
2510
+ id="toolbar-pagination-management-example-masthead-profile-button"
2511
+ aria-expanded="false"
1907
2512
  type="button"
1908
- disabled
1909
- >Disabled action</button>
1910
- </li>
1911
- <li class="pf-c-divider" role="separator"></li>
1912
- <li>
1913
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
1914
- </li>
1915
- </ul>
2513
+ >
2514
+ <span class="pf-c-dropdown__toggle-image">
2515
+ <img
2516
+ class="pf-c-avatar"
2517
+ src="/assets/images/img_avatar.svg"
2518
+ alt="Avatar image"
2519
+ />
2520
+ </span>
2521
+ <span class="pf-c-dropdown__toggle-text">Ned Username</span>
2522
+ <span class="pf-c-dropdown__toggle-icon">
2523
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2524
+ </span>
2525
+ </button>
2526
+ <div class="pf-c-dropdown__menu" hidden>
2527
+ <section class="pf-c-dropdown__group">
2528
+ <div class="pf-c-dropdown__menu-item pf-m-text">
2529
+ <div class="pf-u-font-size-sm">Account number:</div>
2530
+ <div>123456789</div>
2531
+ </div>
2532
+ <div class="pf-c-dropdown__menu-item pf-m-text">
2533
+ <div class="pf-u-font-size-sm">Username:</div>
2534
+ <div>mshaksho@redhat.com</div>
2535
+ </div>
2536
+ </section>
2537
+ <hr class="pf-c-divider" />
2538
+ <section class="pf-c-dropdown__group">
2539
+ <ul>
2540
+ <li>
2541
+ <a class="pf-c-dropdown__menu-item" href="#">My profile</a>
2542
+ </li>
2543
+ <li>
2544
+ <a
2545
+ class="pf-c-dropdown__menu-item"
2546
+ href="#"
2547
+ >User management</a>
2548
+ </li>
2549
+ <li>
2550
+ <a class="pf-c-dropdown__menu-item" href="#">Logout</a>
2551
+ </li>
2552
+ </ul>
2553
+ </section>
2554
+ </div>
2555
+ </div>
2556
+ </div>
1916
2557
  </div>
1917
2558
  </div>
1918
2559
  </div>
1919
- <img
1920
- class="pf-c-avatar"
1921
- src="/assets/images/img_avatar.svg"
1922
- alt="Avatar image"
1923
- />
1924
2560
  </div>
1925
2561
  </header>
1926
2562
  <div class="pf-c-page__sidebar">
1927
2563
  <div class="pf-c-page__sidebar-body">
1928
2564
  <nav
1929
2565
  class="pf-c-nav"
1930
- id="toolbar-pagination-management-primary-nav"
2566
+ id="toolbar-pagination-management-example-primary-nav"
1931
2567
  aria-label="Global"
1932
2568
  >
1933
2569
  <ul class="pf-c-nav__list">
@@ -1957,7 +2593,7 @@ section: components
1957
2593
  <main
1958
2594
  class="pf-c-page__main"
1959
2595
  tabindex="-1"
1960
- id="main-content-toolbar-pagination-management"
2596
+ id="main-content-toolbar-pagination-management-example"
1961
2597
  >
1962
2598
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
1963
2599
  <div class="pf-c-page__main-body">
@@ -2006,7 +2642,7 @@ section: components
2006
2642
  <section class="pf-c-page__main-section">
2007
2643
  <div
2008
2644
  class="pf-c-toolbar pf-m-nowrap"
2009
- id="toolbar-pagination-management-mobile-example"
2645
+ id="toolbar-pagination-management-example-toolbar"
2010
2646
  >
2011
2647
  <div class="pf-c-toolbar__content">
2012
2648
  <div class="pf-c-toolbar__content-section pf-m-nowrap">
@@ -2017,7 +2653,7 @@ section: components
2017
2653
  type="button"
2018
2654
  aria-label="Show filters"
2019
2655
  aria-expanded="false"
2020
- aria-controls="toolbar-pagination-management-mobile-example-expandable-content"
2656
+ aria-controls="toolbar-pagination-management-example-toolbar-expandable-content"
2021
2657
  >
2022
2658
  <i class="fas fa-filter" aria-hidden="true"></i>
2023
2659
  </button>
@@ -2027,17 +2663,17 @@ section: components
2027
2663
  <div class="pf-c-input-group">
2028
2664
  <div class="pf-c-select" style="width: 175px">
2029
2665
  <span
2030
- id="toolbar-pagination-management-mobile-example-select-name-label"
2666
+ id="toolbar-pagination-management-example-toolbar-select-name-label"
2031
2667
  hidden
2032
2668
  >Choose one</span>
2033
2669
 
2034
2670
  <button
2035
2671
  class="pf-c-select__toggle"
2036
2672
  type="button"
2037
- id="toolbar-pagination-management-mobile-example-select-name-toggle"
2673
+ id="toolbar-pagination-management-example-toolbar-select-name-toggle"
2038
2674
  aria-haspopup="true"
2039
2675
  aria-expanded="false"
2040
- aria-labelledby="toolbar-pagination-management-mobile-example-select-name-label toolbar-pagination-management-mobile-example-select-name-toggle"
2676
+ aria-labelledby="toolbar-pagination-management-example-toolbar-select-name-label toolbar-pagination-management-example-toolbar-select-name-toggle"
2041
2677
  >
2042
2678
  <div class="pf-c-select__toggle-wrapper">
2043
2679
  <span class="pf-c-select__toggle-icon">
@@ -2053,7 +2689,7 @@ section: components
2053
2689
  <ul
2054
2690
  class="pf-c-select__menu"
2055
2691
  role="listbox"
2056
- aria-labelledby="toolbar-pagination-management-mobile-example-select-name-label"
2692
+ aria-labelledby="toolbar-pagination-management-example-toolbar-select-name-label"
2057
2693
  hidden
2058
2694
  style="width: 175px"
2059
2695
  >
@@ -2117,14 +2753,14 @@ section: components
2117
2753
  <div class="pf-c-toolbar__item pf-m-overflow-menu">
2118
2754
  <div
2119
2755
  class="pf-c-overflow-menu"
2120
- id="toolbar-pagination-management-mobile-example-overflow-menu"
2756
+ id="toolbar-pagination-management-example-toolbar-overflow-menu"
2121
2757
  >
2122
2758
  <div class="pf-c-overflow-menu__control">
2123
2759
  <div class="pf-c-dropdown">
2124
2760
  <button
2125
2761
  class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
2126
2762
  type="button"
2127
- id="toolbar-pagination-management-mobile-example-overflow-menu-dropdown-toggle"
2763
+ id="toolbar-pagination-management-example-toolbar-overflow-menu-dropdown-toggle"
2128
2764
  aria-label="Overflow menu"
2129
2765
  aria-expanded="false"
2130
2766
  >
@@ -2132,7 +2768,7 @@ section: components
2132
2768
  </button>
2133
2769
  <ul
2134
2770
  class="pf-c-dropdown__menu"
2135
- aria-labelledby="toolbar-pagination-management-mobile-example-overflow-menu-dropdown-toggle"
2771
+ aria-labelledby="toolbar-pagination-management-example-toolbar-overflow-menu-dropdown-toggle"
2136
2772
  hidden
2137
2773
  >
2138
2774
  <li>
@@ -2157,23 +2793,21 @@ section: components
2157
2793
  class="pf-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
2158
2794
  >
2159
2795
  <div class="pf-c-options-menu">
2160
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
2796
+ <button
2797
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
2798
+ type="button"
2799
+ id="pagination-options-menu-bottom-example-toggle"
2800
+ aria-haspopup="listbox"
2801
+ aria-expanded="false"
2802
+ >
2161
2803
  <span class="pf-c-options-menu__toggle-text">
2162
2804
  <b>1 - 10</b>&nbsp;of&nbsp;
2163
2805
  <b>36</b>
2164
2806
  </span>
2165
- <button
2166
- class="pf-c-options-menu__toggle-button"
2167
- id="pagination-options-menu-bottom-example-toggle"
2168
- aria-haspopup="listbox"
2169
- aria-expanded="false"
2170
- aria-label="Items per page"
2171
- >
2172
- <span class="pf-c-options-menu__toggle-button-icon">
2173
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2174
- </span>
2175
- </button>
2176
- </div>
2807
+ <div class="pf-c-options-menu__toggle-icon">
2808
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2809
+ </div>
2810
+ </button>
2177
2811
  <ul
2178
2812
  class="pf-c-options-menu__menu"
2179
2813
  aria-labelledby="pagination-options-menu-bottom-example-toggle"
@@ -2231,7 +2865,7 @@ section: components
2231
2865
  </div>
2232
2866
  <div
2233
2867
  class="pf-c-toolbar__expandable-content pf-m-hidden"
2234
- id="toolbar-pagination-management-mobile-example-expandable-content"
2868
+ id="toolbar-pagination-management-example-toolbar-expandable-content"
2235
2869
  hidden
2236
2870
  ></div>
2237
2871
  </div>
@@ -2695,23 +3329,21 @@ section: components
2695
3329
  </table>
2696
3330
  <div class="pf-c-pagination pf-m-bottom">
2697
3331
  <div class="pf-c-options-menu pf-m-top">
2698
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
3332
+ <button
3333
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
3334
+ type="button"
3335
+ id="pagination-options-menu-bottom-collapsed-example-toggle"
3336
+ aria-haspopup="listbox"
3337
+ aria-expanded="false"
3338
+ >
2699
3339
  <span class="pf-c-options-menu__toggle-text">
2700
3340
  <b>1 - 10</b>&nbsp;of&nbsp;
2701
3341
  <b>36</b>
2702
3342
  </span>
2703
- <button
2704
- class="pf-c-options-menu__toggle-button"
2705
- id="pagination-options-menu-bottom-collapsed-example-toggle"
2706
- aria-haspopup="listbox"
2707
- aria-expanded="false"
2708
- aria-label="Items per page"
2709
- >
2710
- <span class="pf-c-options-menu__toggle-button-icon">
2711
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2712
- </span>
2713
- </button>
2714
- </div>
3343
+ <div class="pf-c-options-menu__toggle-icon">
3344
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3345
+ </div>
3346
+ </button>
2715
3347
  <ul
2716
3348
  class="pf-c-options-menu__menu pf-m-top"
2717
3349
  aria-labelledby="pagination-options-menu-bottom-collapsed-example-toggle"