@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/BackToTop/examples/BackToTop.md CHANGED
@@ -7,164 +7,809 @@ cssPrefix: pf-d-back-to-top
7
7
  ### Basic
8
8
 
9
9
  ```html isFullscreen
10
- <div class="pf-c-page" id="back-to-top-basic">
10
+ <div class="pf-c-page" id="back-to-top-basic-example">
11
11
  <a
12
12
  class="pf-c-skip-to-content pf-c-button pf-m-primary"
13
- href="#main-content-back-to-top-basic"
13
+ href="#main-content-back-to-top-basic-example"
14
14
  >Skip to content</a>
15
- <header class="pf-c-page__header">
16
- <div class="pf-c-page__header-brand">
17
- <div class="pf-c-page__header-brand-toggle">
18
- <button
19
- class="pf-c-button pf-m-plain"
20
- type="button"
21
- id="back-to-top-basic-nav-toggle"
22
- aria-label="Global navigation"
23
- aria-expanded="true"
24
- aria-controls="back-to-top-basic-primary-nav"
15
+ <header class="pf-c-masthead" id="back-to-top-basic-example-masthead">
16
+ <span class="pf-c-masthead__toggle">
17
+ <button
18
+ class="pf-c-button pf-m-plain"
19
+ type="button"
20
+ aria-label="Global navigation"
21
+ >
22
+ <i class="fas fa-bars" aria-hidden="true"></i>
23
+ </button>
24
+ </span>
25
+ <div class="pf-c-masthead__main">
26
+ <a class="pf-c-masthead__brand" href="#">
27
+ <picture
28
+ class="pf-c-brand pf-m-picture"
29
+ style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
25
30
  >
26
- <i class="fas fa-bars" aria-hidden="true"></i>
27
- </button>
28
- </div>
29
- <a href="#" class="pf-c-page__header-brand-link">
30
- <img
31
- class="pf-c-brand"
32
- src="/assets/images/PF-Masthead-Logo.svg"
33
- alt="PatternFly logo"
34
- />
31
+ <source
32
+ media="(min-width: 768px)"
33
+ srcset="/assets/images/logo__pf--reverse-on-md.svg"
34
+ />
35
+ <source srcset="/assets/images/logo__pf--reverse--base.svg" />
36
+ <img
37
+ src="/assets/images/logo__pf--reverse--base.png"
38
+ alt="Fallback patternFly default logo"
39
+ />
40
+ </picture>
35
41
  </a>
36
42
  </div>
37
- <div class="pf-c-page__header-tools">
38
- <div class="pf-c-page__header-tools-group">
39
- <div
40
- class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
41
- >
42
- <button
43
- class="pf-c-button pf-m-plain"
44
- type="button"
45
- aria-label="Settings"
46
- >
47
- <i class="fas fa-cog" aria-hidden="true"></i>
48
- </button>
49
- </div>
50
- <div
51
- class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
52
- >
53
- <button
54
- class="pf-c-button pf-m-plain"
55
- type="button"
56
- aria-label="Help"
57
- >
58
- <i class="fas fa-question-circle" aria-hidden="true"></i>
59
- </button>
60
- </div>
61
- </div>
62
- <div class="pf-c-page__header-tools-group">
63
- <div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
64
- <div class="pf-c-dropdown">
65
- <button
66
- class="pf-c-dropdown__toggle pf-m-plain"
67
- id="back-to-top-basic-dropdown-kebab-1-button"
68
- aria-expanded="false"
69
- type="button"
70
- aria-label="Actions"
71
- >
72
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
73
- </button>
74
- <ul
75
- class="pf-c-dropdown__menu pf-m-align-right"
76
- aria-labelledby="back-to-top-basic-dropdown-kebab-1-button"
77
- hidden
43
+ <div class="pf-c-masthead__content">
44
+ <div
45
+ class="pf-c-toolbar pf-m-full-height pf-m-static"
46
+ id="back-to-top-basic-example-masthead-toolbar"
47
+ >
48
+ <div class="pf-c-toolbar__content">
49
+ <div class="pf-c-toolbar__content-section">
50
+ <div
51
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
78
52
  >
79
- <li>
80
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
81
- </li>
82
- <li>
83
- <button class="pf-c-dropdown__menu-item" type="button">Action</button>
84
- </li>
85
- <li>
86
- <a
87
- class="pf-c-dropdown__menu-item pf-m-disabled"
88
- href="#"
89
- aria-disabled="true"
90
- tabindex="-1"
91
- >Disabled link</a>
92
- </li>
93
- <li>
53
+ <div class="pf-c-toolbar__item">
94
54
  <button
95
- class="pf-c-dropdown__menu-item"
55
+ class="pf-c-button pf-m-plain"
96
56
  type="button"
97
- disabled
98
- >Disabled action</button>
99
- </li>
100
- <li class="pf-c-divider" role="separator"></li>
101
- <li>
102
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
103
- </li>
104
- </ul>
105
- </div>
106
- </div>
107
- <div
108
- class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
109
- >
110
- <div class="pf-c-dropdown">
111
- <button
112
- class="pf-c-dropdown__toggle pf-m-plain"
113
- id="back-to-top-basic-dropdown-kebab-2-button"
114
- aria-expanded="false"
115
- type="button"
116
- >
117
- <span class="pf-c-dropdown__toggle-text">John Smith</span>
118
- <span class="pf-c-dropdown__toggle-icon">
119
- <i class="fas fa-caret-down" aria-hidden="true"></i>
120
- </span>
121
- </button>
122
- <ul
123
- class="pf-c-dropdown__menu"
124
- aria-labelledby="back-to-top-basic-dropdown-kebab-2-button"
125
- hidden
126
- >
127
- <li>
128
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
129
- </li>
130
- <li>
131
- <button class="pf-c-dropdown__menu-item" type="button">Action</button>
132
- </li>
133
- <li>
134
- <a
135
- class="pf-c-dropdown__menu-item pf-m-disabled"
136
- href="#"
137
- aria-disabled="true"
138
- tabindex="-1"
139
- >Disabled link</a>
140
- </li>
141
- <li>
57
+ aria-label="Notifications"
58
+ >
59
+ <span class="pf-c-notification-badge">
60
+ <i class="pf-icon-bell" aria-hidden="true"></i>
61
+ </span>
62
+ </button>
63
+ </div>
64
+ <div
65
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
66
+ >
67
+ <div class="pf-c-toolbar__item">
68
+ <nav
69
+ class="pf-c-app-launcher"
70
+ aria-label="Application launcher"
71
+ id="back-to-top-basic-example-masthead-icon-group--app-launcher"
72
+ >
73
+ <button
74
+ class="pf-c-app-launcher__toggle"
75
+ type="button"
76
+ id="back-to-top-basic-example-masthead-icon-group--app-launcher-button"
77
+ aria-expanded="false"
78
+ aria-label="Application launcher"
79
+ >
80
+ <i class="fas fa-th" aria-hidden="true"></i>
81
+ </button>
82
+ <div
83
+ class="pf-c-app-launcher__menu pf-m-align-right"
84
+ hidden
85
+ >
86
+ <div class="pf-c-app-launcher__menu-search">
87
+ <div class="pf-c-search-input">
88
+ <div class="pf-c-search-input__bar">
89
+ <span class="pf-c-search-input__text">
90
+ <span class="pf-c-search-input__icon">
91
+ <i
92
+ class="fas fa-search fa-fw"
93
+ aria-hidden="true"
94
+ ></i>
95
+ </span>
96
+ <input
97
+ class="pf-c-search-input__text-input"
98
+ type="text"
99
+ placeholder="Filter by name"
100
+ aria-label="Filter by name"
101
+ />
102
+ </span>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ <section class="pf-c-app-launcher__group">
107
+ <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
108
+ <ul>
109
+ <li
110
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
111
+ >
112
+ <a class="pf-c-app-launcher__menu-item">
113
+ Link 1
114
+ <span
115
+ class="pf-c-app-launcher__menu-item-external-icon"
116
+ >
117
+ <i
118
+ class="fas fa-external-link-alt"
119
+ aria-hidden="true"
120
+ ></i>
121
+ </span>
122
+ <span class="pf-screen-reader">(opens new window)</span>
123
+ </a>
124
+ <button
125
+ class="pf-c-app-launcher__menu-item pf-m-action"
126
+ type="button"
127
+ aria-label="Favorite"
128
+ >
129
+ <i class="fas fa-star" aria-hidden="true"></i>
130
+ </button>
131
+ </li>
132
+ <li
133
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
134
+ >
135
+ <a class="pf-c-app-launcher__menu-item">
136
+ Link 2
137
+ <span
138
+ class="pf-c-app-launcher__menu-item-external-icon"
139
+ >
140
+ <i
141
+ class="fas fa-external-link-alt"
142
+ aria-hidden="true"
143
+ ></i>
144
+ </span>
145
+ <span class="pf-screen-reader">(opens new window)</span>
146
+ </a>
147
+ <button
148
+ class="pf-c-app-launcher__menu-item pf-m-action"
149
+ type="button"
150
+ aria-label="Favorite"
151
+ >
152
+ <i class="fas fa-star" aria-hidden="true"></i>
153
+ </button>
154
+ </li>
155
+ </ul>
156
+ </section>
157
+ <hr class="pf-c-divider" />
158
+ <section class="pf-c-app-launcher__group">
159
+ <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
160
+ <ul>
161
+ <li
162
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
163
+ >
164
+ <a class="pf-c-app-launcher__menu-item">
165
+ Link 1
166
+ <span
167
+ class="pf-c-app-launcher__menu-item-external-icon"
168
+ >
169
+ <i
170
+ class="fas fa-external-link-alt"
171
+ aria-hidden="true"
172
+ ></i>
173
+ </span>
174
+ <span class="pf-screen-reader">(opens new window)</span>
175
+ </a>
176
+ <button
177
+ class="pf-c-app-launcher__menu-item pf-m-action"
178
+ type="button"
179
+ aria-label="Favorite"
180
+ >
181
+ <i class="fas fa-star" aria-hidden="true"></i>
182
+ </button>
183
+ </li>
184
+ <li
185
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
186
+ >
187
+ <a class="pf-c-app-launcher__menu-item">
188
+ Link 2
189
+ <span
190
+ class="pf-c-app-launcher__menu-item-external-icon"
191
+ >
192
+ <i
193
+ class="fas fa-external-link-alt"
194
+ aria-hidden="true"
195
+ ></i>
196
+ </span>
197
+ <span class="pf-screen-reader">(opens new window)</span>
198
+ </a>
199
+ <button
200
+ class="pf-c-app-launcher__menu-item pf-m-action"
201
+ type="button"
202
+ aria-label="Favorite"
203
+ >
204
+ <i class="fas fa-star" aria-hidden="true"></i>
205
+ </button>
206
+ </li>
207
+ </ul>
208
+ </section>
209
+ </div>
210
+ </nav>
211
+ </div>
212
+ <div class="pf-c-toolbar__item">
213
+ <div class="pf-c-dropdown">
214
+ <button
215
+ class="pf-c-dropdown__toggle pf-m-plain"
216
+ id="back-to-top-basic-example-masthead-settings-button"
217
+ aria-expanded="false"
218
+ type="button"
219
+ aria-label="Settings"
220
+ >
221
+ <i class="fas fa-cog" aria-hidden="true"></i>
222
+ </button>
223
+ <ul
224
+ class="pf-c-dropdown__menu pf-m-align-right"
225
+ aria-labelledby="back-to-top-basic-example-masthead-settings-button"
226
+ hidden
227
+ >
228
+ <li>
229
+ <button
230
+ class="pf-c-dropdown__menu-item"
231
+ type="button"
232
+ >Settings</button>
233
+ </li>
234
+ <li>
235
+ <button
236
+ class="pf-c-dropdown__menu-item"
237
+ type="button"
238
+ >Use the beta release</button>
239
+ </li>
240
+ </ul>
241
+ </div>
242
+ </div>
243
+ <div class="pf-c-toolbar__item">
244
+ <div class="pf-c-dropdown">
245
+ <button
246
+ class="pf-c-dropdown__toggle pf-m-plain"
247
+ id="back-to-top-basic-example-masthead-help-button"
248
+ aria-expanded="false"
249
+ type="button"
250
+ aria-label="Help"
251
+ >
252
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
253
+ </button>
254
+ <ul
255
+ class="pf-c-dropdown__menu pf-m-align-right"
256
+ aria-labelledby="back-to-top-basic-example-masthead-help-button"
257
+ hidden
258
+ >
259
+ <li>
260
+ <button
261
+ class="pf-c-dropdown__menu-item"
262
+ type="button"
263
+ >Support options</button>
264
+ </li>
265
+ <li>
266
+ <button
267
+ class="pf-c-dropdown__menu-item"
268
+ type="button"
269
+ >Open support case</button>
270
+ </li>
271
+ <li>
272
+ <button
273
+ class="pf-c-dropdown__menu-item"
274
+ type="button"
275
+ >API documentation</button>
276
+ </li>
277
+ </ul>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ <div class="pf-c-toolbar__item pf-m-hidden-on-lg">
282
+ <div class="pf-c-dropdown">
283
+ <button
284
+ class="pf-c-menu-toggle pf-m-plain"
285
+ type="button"
286
+ aria-expanded="false"
287
+ aria-label="Actions"
288
+ >
289
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
290
+ </button>
291
+ <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
292
+ <div class="pf-c-menu__content">
293
+ <section class="pf-c-menu__group pf-m-hidden-on-sm">
294
+ <ul class="pf-c-menu__list" role="menu">
295
+ <li
296
+ class="pf-c-menu__list-item pf-m-disabled"
297
+ role="none"
298
+ >
299
+ <button
300
+ class="pf-c-menu__item"
301
+ type="button"
302
+ disabled
303
+ role="menuitem"
304
+ >
305
+ <span class="pf-c-menu__item-description">
306
+ <div class="pf-u-font-size-sm">Username:</div>
307
+ <div class="pf-u-font-size-md">ned_username</div>
308
+ </span>
309
+ </button>
310
+ </li>
311
+ <li
312
+ class="pf-c-menu__list-item pf-m-disabled"
313
+ role="none"
314
+ >
315
+ <button
316
+ class="pf-c-menu__item"
317
+ type="button"
318
+ disabled
319
+ role="menuitem"
320
+ >
321
+ <span class="pf-c-menu__item-description">
322
+ <div class="pf-u-font-size-sm">Account number:</div>
323
+ <div class="pf-u-font-size-md">123456789</div>
324
+ </span>
325
+ </button>
326
+ </li>
327
+ <li class="pf-c-divider" role="separator"></li>
328
+ <li class="pf-c-menu__list-item" role="none">
329
+ <button
330
+ class="pf-c-menu__item"
331
+ type="button"
332
+ role="menuitem"
333
+ >
334
+ <span class="pf-c-menu__item-main">
335
+ <span class="pf-c-menu__item-text">My profile</span>
336
+ </span>
337
+ </button>
338
+ </li>
339
+ <li class="pf-c-menu__list-item" role="none">
340
+ <button
341
+ class="pf-c-menu__item"
342
+ type="button"
343
+ role="menuitem"
344
+ >
345
+ <span class="pf-c-menu__item-main">
346
+ <span
347
+ class="pf-c-menu__item-text"
348
+ >User management</span>
349
+ </span>
350
+ </button>
351
+ </li>
352
+ <li class="pf-c-menu__list-item" role="none">
353
+ <button
354
+ class="pf-c-menu__item"
355
+ type="button"
356
+ role="menuitem"
357
+ >
358
+ <span class="pf-c-menu__item-main">
359
+ <span class="pf-c-menu__item-text">Logout</span>
360
+ </span>
361
+ </button>
362
+ </li>
363
+ </ul>
364
+ </section>
365
+ <hr class="pf-c-divider pf-m-hidden-on-sm" />
366
+ <section class="pf-c-menu__group">
367
+ <ul class="pf-c-menu__list" role="menu">
368
+ <li class="pf-c-menu__list-item" role="none">
369
+ <button
370
+ class="pf-c-menu__item"
371
+ type="button"
372
+ role="menuitem"
373
+ aria-expanded="false"
374
+ >
375
+ <span class="pf-c-menu__item-main">
376
+ <span class="pf-c-menu__item-icon">
377
+ <i
378
+ class="fas fa-fw fa-cog"
379
+ aria-hidden="true"
380
+ ></i>
381
+ </span>
382
+ <span class="pf-c-menu__item-text">Settings</span>
383
+ <span class="pf-c-menu__item-toggle-icon">
384
+ <i class="fas fa-angle-right"></i>
385
+ </span>
386
+ </span>
387
+ </button>
388
+ <div class="pf-c-menu" hidden>
389
+ <div class="pf-c-menu__content">
390
+ <ul class="pf-c-menu__list" role="menu">
391
+ <li
392
+ class="pf-c-menu__list-item pf-m-drill-up"
393
+ role="none"
394
+ >
395
+ <button
396
+ class="pf-c-menu__item"
397
+ type="button"
398
+ role="menuitem"
399
+ >
400
+ <span class="pf-c-menu__item-main">
401
+ <span
402
+ class="pf-c-menu__item-toggle-icon"
403
+ >
404
+ <i class="fas fa-angle-left"></i>
405
+ </span>
406
+ <span class="pf-c-menu__item-icon">
407
+ <i
408
+ class="fas fa-fw fa-cog"
409
+ aria-hidden="true"
410
+ ></i>
411
+ </span>
412
+ <span
413
+ class="pf-c-menu__item-text"
414
+ >Settings</span>
415
+ </span>
416
+ </button>
417
+ </li>
418
+ <li class="pf-c-divider" role="separator"></li>
419
+ <li class="pf-c-menu__list-item" role="none">
420
+ <a
421
+ class="pf-c-menu__item"
422
+ href="#"
423
+ role="menuitem"
424
+ >
425
+ <span class="pf-c-menu__item-main">
426
+ <span
427
+ class="pf-c-menu__item-text"
428
+ >Customer support</span>
429
+ </span>
430
+ </a>
431
+ </li>
432
+ <li class="pf-c-menu__list-item" role="none">
433
+ <a
434
+ class="pf-c-menu__item"
435
+ href="#"
436
+ role="menuitem"
437
+ >
438
+ <span class="pf-c-menu__item-main">
439
+ <span class="pf-c-menu__item-text">About</span>
440
+ </span>
441
+ </a>
442
+ </li>
443
+ </ul>
444
+ </div>
445
+ </div>
446
+ </li>
447
+
448
+ <li class="pf-c-menu__list-item" role="none">
449
+ <button
450
+ class="pf-c-menu__item"
451
+ type="button"
452
+ role="menuitem"
453
+ aria-expanded="false"
454
+ >
455
+ <span class="pf-c-menu__item-main">
456
+ <span class="pf-c-menu__item-icon">
457
+ <i
458
+ class="fas fa-fw fa-pf-icon pf-icon-help"
459
+ aria-hidden="true"
460
+ ></i>
461
+ </span>
462
+ <span class="pf-c-menu__item-text">Help</span>
463
+ <span class="pf-c-menu__item-toggle-icon">
464
+ <i class="fas fa-angle-right"></i>
465
+ </span>
466
+ </span>
467
+ </button>
468
+ <div class="pf-c-menu" hidden>
469
+ <div class="pf-c-menu__content">
470
+ <ul class="pf-c-menu__list" role="menu">
471
+ <li
472
+ class="pf-c-menu__list-item pf-m-drill-up"
473
+ role="none"
474
+ >
475
+ <button
476
+ class="pf-c-menu__item"
477
+ type="button"
478
+ role="menuitem"
479
+ >
480
+ <span class="pf-c-menu__item-main">
481
+ <span
482
+ class="pf-c-menu__item-toggle-icon"
483
+ >
484
+ <i class="fas fa-angle-left"></i>
485
+ </span>
486
+ <span class="pf-c-menu__item-icon">
487
+ <i
488
+ class="fas fa-fw fa-pf-icon pf-icon-help"
489
+ aria-hidden="true"
490
+ ></i>
491
+ </span>
492
+ <span class="pf-c-menu__item-text">Help</span>
493
+ </span>
494
+ </button>
495
+ </li>
496
+ <li class="pf-c-divider" role="separator"></li>
497
+ <li class="pf-c-menu__list-item" role="none">
498
+ <a
499
+ class="pf-c-menu__item"
500
+ href="#"
501
+ role="menuitem"
502
+ >
503
+ <span class="pf-c-menu__item-main">
504
+ <span
505
+ class="pf-c-menu__item-text"
506
+ >Support options</span>
507
+ </span>
508
+ </a>
509
+ </li>
510
+ <li class="pf-c-menu__list-item" role="none">
511
+ <a
512
+ class="pf-c-menu__item"
513
+ href="#"
514
+ role="menuitem"
515
+ >
516
+ <span class="pf-c-menu__item-main">
517
+ <span
518
+ class="pf-c-menu__item-text"
519
+ >Open support case</span>
520
+ </span>
521
+ </a>
522
+ </li>
523
+ <li class="pf-c-menu__list-item" role="none">
524
+ <a
525
+ class="pf-c-menu__item"
526
+ href="#"
527
+ role="menuitem"
528
+ >
529
+ <span class="pf-c-menu__item-main">
530
+ <span
531
+ class="pf-c-menu__item-text"
532
+ >API documentation</span>
533
+ </span>
534
+ </a>
535
+ </li>
536
+ </ul>
537
+ </div>
538
+ </div>
539
+ </li>
540
+
541
+ <li class="pf-c-menu__list-item" role="none">
542
+ <button
543
+ class="pf-c-menu__item"
544
+ type="button"
545
+ role="menuitem"
546
+ >
547
+ <span class="pf-c-menu__item-main">
548
+ <span class="pf-c-menu__item-icon">
549
+ <i class="fas fa-fw fa-th" aria-hidden="true"></i>
550
+ </span>
551
+ <span
552
+ class="pf-c-menu__item-text"
553
+ >Application launcher</span>
554
+ <span class="pf-c-menu__item-toggle-icon">
555
+ <i class="fas fa-angle-right"></i>
556
+ </span>
557
+ </span>
558
+ </button>
559
+ <div class="pf-c-menu" hidden>
560
+ <div class="pf-c-menu__header">
561
+ <button
562
+ class="pf-c-menu__item"
563
+ type="button"
564
+ role="menuitem"
565
+ >
566
+ <span class="pf-c-menu__item-main">
567
+ <span class="pf-c-menu__item-toggle-icon">
568
+ <i class="fas fa-angle-left"></i>
569
+ </span>
570
+ <span class="pf-c-menu__item-icon">
571
+ <i
572
+ class="fas fa-fw fa-th"
573
+ aria-hidden="true"
574
+ ></i>
575
+ </span>
576
+ <span
577
+ class="pf-c-menu__item-text"
578
+ >Application launcher</span>
579
+ </span>
580
+ </button>
581
+ </div>
582
+ <div class="pf-c-menu__search">
583
+ <div class="pf-c-menu__search-input">
584
+ <div class="pf-c-search-input">
585
+ <div class="pf-c-search-input__bar">
586
+ <span class="pf-c-search-input__text">
587
+ <span class="pf-c-search-input__icon">
588
+ <i
589
+ class="fas fa-search fa-fw"
590
+ aria-hidden="true"
591
+ ></i>
592
+ </span>
593
+ <input
594
+ class="pf-c-search-input__text-input"
595
+ type="text"
596
+ placeholder="Search"
597
+ aria-label="Search"
598
+ />
599
+ </span>
600
+ </div>
601
+ </div>
602
+ </div>
603
+ </div>
604
+ <hr class="pf-c-divider" />
605
+ <section class="pf-c-menu__group">
606
+ <h1 class="pf-c-menu__group-title">Favorites</h1>
607
+ <ul class="pf-c-menu__list" role="menu">
608
+ <li class="pf-c-menu__list-item" role="none">
609
+ <a
610
+ class="pf-c-menu__item"
611
+ href="#"
612
+ role="menuitem"
613
+ >
614
+ <span class="pf-c-menu__item-main">
615
+ <span
616
+ class="pf-c-menu__item-text"
617
+ >Link 1</span>
618
+ </span>
619
+ </a>
620
+ <button
621
+ class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
622
+ type="button"
623
+ aria-label="Starred"
624
+ >
625
+ <span class="pf-c-menu__item-action-icon">
626
+ <i
627
+ class="fas fa-star"
628
+ aria-hidden="true"
629
+ ></i>
630
+ </span>
631
+ </button>
632
+ </li>
633
+ <li class="pf-c-menu__list-item" role="none">
634
+ <a
635
+ class="pf-c-menu__item"
636
+ href="#"
637
+ role="menuitem"
638
+ target="_blank"
639
+ >
640
+ <span class="pf-c-menu__item-main">
641
+ <span
642
+ class="pf-c-menu__item-text"
643
+ >Link 2</span>
644
+ <span
645
+ class="pf-c-menu__item-external-icon"
646
+ >
647
+ <i
648
+ class="fas fa-external-link-alt"
649
+ aria-hidden="true"
650
+ ></i>
651
+ </span>
652
+ <span
653
+ class="pf-screen-reader"
654
+ >(opens new window)</span>
655
+ </span>
656
+ </a>
657
+ <button
658
+ class="pf-c-menu__item-action pf-m-favorite"
659
+ type="button"
660
+ aria-label="Not starred"
661
+ >
662
+ <span class="pf-c-menu__item-action-icon">
663
+ <i
664
+ class="fas fa-star"
665
+ aria-hidden="true"
666
+ ></i>
667
+ </span>
668
+ </button>
669
+ </li>
670
+ </ul>
671
+ </section>
672
+ <hr class="pf-c-divider" />
673
+ <section class="pf-c-menu__group">
674
+ <h1 class="pf-c-menu__group-title">Group 1</h1>
675
+ <ul class="pf-c-menu__list" role="menu">
676
+ <li class="pf-c-menu__list-item" role="none">
677
+ <a
678
+ class="pf-c-menu__item"
679
+ href="#"
680
+ role="menuitem"
681
+ >
682
+ <span class="pf-c-menu__item-main">
683
+ <span
684
+ class="pf-c-menu__item-text"
685
+ >Link 1</span>
686
+ </span>
687
+ </a>
688
+ <button
689
+ class="pf-c-menu__item-action pf-m-favorite"
690
+ type="button"
691
+ aria-label="Not starred"
692
+ >
693
+ <span class="pf-c-menu__item-action-icon">
694
+ <i
695
+ class="fas fa-star"
696
+ aria-hidden="true"
697
+ ></i>
698
+ </span>
699
+ </button>
700
+ </li>
701
+ <li class="pf-c-menu__list-item" role="none">
702
+ <a
703
+ class="pf-c-menu__item"
704
+ href="#"
705
+ role="menuitem"
706
+ target="_blank"
707
+ >
708
+ <span class="pf-c-menu__item-main">
709
+ <span
710
+ class="pf-c-menu__item-text"
711
+ >Link 2</span>
712
+ <span
713
+ class="pf-c-menu__item-external-icon"
714
+ >
715
+ <i
716
+ class="fas fa-external-link-alt"
717
+ aria-hidden="true"
718
+ ></i>
719
+ </span>
720
+ <span
721
+ class="pf-screen-reader"
722
+ >(opens new window)</span>
723
+ </span>
724
+ </a>
725
+ <button
726
+ class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
727
+ type="button"
728
+ aria-label="Starred"
729
+ >
730
+ <span class="pf-c-menu__item-action-icon">
731
+ <i
732
+ class="fas fa-star"
733
+ aria-hidden="true"
734
+ ></i>
735
+ </span>
736
+ </button>
737
+ </li>
738
+ </ul>
739
+ </section>
740
+ </div>
741
+ </li>
742
+ </ul>
743
+ </section>
744
+ </div>
745
+ </div>
746
+ </div>
747
+ </div>
748
+ </div>
749
+ <div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
750
+ <div
751
+ class="pf-c-dropdown pf-m-full-height"
752
+ style="--pf-c-dropdown--MaxWidth: 20ch;"
753
+ >
142
754
  <button
143
- class="pf-c-dropdown__menu-item"
755
+ class="pf-c-dropdown__toggle"
756
+ id="back-to-top-basic-example-masthead-profile-button"
757
+ aria-expanded="false"
144
758
  type="button"
145
- disabled
146
- >Disabled action</button>
147
- </li>
148
- <li class="pf-c-divider" role="separator"></li>
149
- <li>
150
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
151
- </li>
152
- </ul>
759
+ >
760
+ <span class="pf-c-dropdown__toggle-image">
761
+ <img
762
+ class="pf-c-avatar"
763
+ src="/assets/images/img_avatar.svg"
764
+ alt="Avatar image"
765
+ />
766
+ </span>
767
+ <span class="pf-c-dropdown__toggle-text">Ned Username</span>
768
+ <span class="pf-c-dropdown__toggle-icon">
769
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
770
+ </span>
771
+ </button>
772
+ <div class="pf-c-dropdown__menu" hidden>
773
+ <section class="pf-c-dropdown__group">
774
+ <div class="pf-c-dropdown__menu-item pf-m-text">
775
+ <div class="pf-u-font-size-sm">Account number:</div>
776
+ <div>123456789</div>
777
+ </div>
778
+ <div class="pf-c-dropdown__menu-item pf-m-text">
779
+ <div class="pf-u-font-size-sm">Username:</div>
780
+ <div>mshaksho@redhat.com</div>
781
+ </div>
782
+ </section>
783
+ <hr class="pf-c-divider" />
784
+ <section class="pf-c-dropdown__group">
785
+ <ul>
786
+ <li>
787
+ <a class="pf-c-dropdown__menu-item" href="#">My profile</a>
788
+ </li>
789
+ <li>
790
+ <a
791
+ class="pf-c-dropdown__menu-item"
792
+ href="#"
793
+ >User management</a>
794
+ </li>
795
+ <li>
796
+ <a class="pf-c-dropdown__menu-item" href="#">Logout</a>
797
+ </li>
798
+ </ul>
799
+ </section>
800
+ </div>
801
+ </div>
802
+ </div>
153
803
  </div>
154
804
  </div>
155
805
  </div>
156
- <img
157
- class="pf-c-avatar"
158
- src="/assets/images/img_avatar.svg"
159
- alt="Avatar image"
160
- />
161
806
  </div>
162
807
  </header>
163
808
  <div class="pf-c-page__sidebar">
164
809
  <div class="pf-c-page__sidebar-body">
165
810
  <nav
166
811
  class="pf-c-nav"
167
- id="back-to-top-basic-primary-nav"
812
+ id="back-to-top-basic-example-primary-nav"
168
813
  aria-label="Global"
169
814
  >
170
815
  <ul class="pf-c-nav__list">
@@ -194,7 +839,7 @@ cssPrefix: pf-d-back-to-top
194
839
  <main
195
840
  class="pf-c-page__main"
196
841
  tabindex="-1"
197
- id="main-content-back-to-top-basic"
842
+ id="main-content-back-to-top-basic-example"
198
843
  >
199
844
  <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
200
845
  <div class="pf-c-page__main-body">
@@ -399,7 +1044,7 @@ cssPrefix: pf-d-back-to-top
399
1044
  <div class="pf-c-back-to-top">
400
1045
  <a
401
1046
  class="pf-c-button pf-m-primary"
402
- href="#main-content-back-to-top-basic"
1047
+ href="#main-content-back-to-top-basic-example"
403
1048
  >
404
1049
  Back to top
405
1050
  <span class="pf-c-button__icon pf-m-end">