@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/ContextSelector/examples/ContextSelector.md CHANGED
@@ -11,7 +11,6 @@ section: components
11
11
  class="pf-c-skip-to-content pf-c-button pf-m-primary"
12
12
  href="#main-content-context-selector-in-masthead"
13
13
  >Skip to content</a>
14
-
15
14
  <header class="pf-c-masthead" id="context-selector-in-masthead-masthead">
16
15
  <span class="pf-c-masthead__toggle">
17
16
  <button
@@ -305,861 +304,806 @@ section: components
305
304
  ### Context selector in sidebar
306
305
 
307
306
  ```html isFullscreen
308
- <div class="pf-c-page" id="context-selector-in-sidebar">
309
- <header class="pf-c-page__header">
310
- <a
311
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
312
- href="#main-content-context-selector-in-sidebar"
313
- >Skip to content</a>
314
-
315
- <header class="pf-c-masthead">
316
- <span class="pf-c-masthead__toggle">
317
- <button
318
- class="pf-c-button pf-m-plain"
319
- type="button"
320
- aria-label="Global navigation"
307
+ <div class="pf-c-page" id="context-selector-in-sidebar-example">
308
+ <a
309
+ class="pf-c-skip-to-content pf-c-button pf-m-primary"
310
+ href="#main-content-context-selector-in-sidebar-example"
311
+ >Skip to content</a>
312
+ <header
313
+ class="pf-c-masthead"
314
+ id="context-selector-in-sidebar-example-masthead"
315
+ >
316
+ <span class="pf-c-masthead__toggle">
317
+ <button
318
+ class="pf-c-button pf-m-plain"
319
+ type="button"
320
+ aria-label="Global navigation"
321
+ >
322
+ <i class="fas fa-bars" aria-hidden="true"></i>
323
+ </button>
324
+ </span>
325
+ <div class="pf-c-masthead__main">
326
+ <a class="pf-c-masthead__brand" href="#">
327
+ <picture
328
+ class="pf-c-brand pf-m-picture"
329
+ style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
321
330
  >
322
- <i class="fas fa-bars" aria-hidden="true"></i>
323
- </button>
324
- </span>
325
- <div class="pf-c-masthead__main">
326
- <a class="pf-c-masthead__brand" href="#">
327
- <picture
328
- class="pf-c-brand pf-m-picture"
329
- style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
330
- >
331
- <source
332
- media="(min-width: 768px)"
333
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
334
- />
335
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
336
- <img
337
- src="/assets/images/logo__pf--reverse--base.png"
338
- alt="Fallback patternFly default logo"
339
- />
340
- </picture>
341
- </a>
342
- </div>
343
- <div class="pf-c-masthead__content">
344
- <div class="pf-c-toolbar pf-m-full-height pf-m-static" id="-toolbar">
345
- <div class="pf-c-toolbar__content">
346
- <div class="pf-c-toolbar__content-section">
331
+ <source
332
+ media="(min-width: 768px)"
333
+ srcset="/assets/images/logo__pf--reverse-on-md.svg"
334
+ />
335
+ <source srcset="/assets/images/logo__pf--reverse--base.svg" />
336
+ <img
337
+ src="/assets/images/logo__pf--reverse--base.png"
338
+ alt="Fallback patternFly default logo"
339
+ />
340
+ </picture>
341
+ </a>
342
+ </div>
343
+ <div class="pf-c-masthead__content">
344
+ <div
345
+ class="pf-c-toolbar pf-m-full-height pf-m-static"
346
+ id="context-selector-in-sidebar-example-masthead-toolbar"
347
+ >
348
+ <div class="pf-c-toolbar__content">
349
+ <div class="pf-c-toolbar__content-section">
350
+ <div
351
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
352
+ >
353
+ <div class="pf-c-toolbar__item">
354
+ <button
355
+ class="pf-c-button pf-m-plain"
356
+ type="button"
357
+ aria-label="Notifications"
358
+ >
359
+ <span class="pf-c-notification-badge">
360
+ <i class="pf-icon-bell" aria-hidden="true"></i>
361
+ </span>
362
+ </button>
363
+ </div>
347
364
  <div
348
- class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
365
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
349
366
  >
350
367
  <div class="pf-c-toolbar__item">
351
- <button
352
- class="pf-c-button pf-m-plain"
353
- type="button"
354
- aria-label="Notifications"
368
+ <nav
369
+ class="pf-c-app-launcher"
370
+ aria-label="Application launcher"
371
+ id="context-selector-in-sidebar-example-masthead-icon-group--app-launcher"
355
372
  >
356
- <span class="pf-c-notification-badge">
357
- <i class="pf-icon-attention-bell" aria-hidden="true"></i>
358
- </span>
359
- </button>
360
- </div>
361
- <div
362
- class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
363
- >
364
- <div class="pf-c-toolbar__item">
365
- <nav
366
- class="pf-c-app-launcher"
373
+ <button
374
+ class="pf-c-app-launcher__toggle"
375
+ type="button"
376
+ id="context-selector-in-sidebar-example-masthead-icon-group--app-launcher-button"
377
+ aria-expanded="false"
367
378
  aria-label="Application launcher"
368
- id="-icon-group--app-launcher"
369
379
  >
370
- <button
371
- class="pf-c-app-launcher__toggle"
372
- type="button"
373
- id="-icon-group--app-launcher-button"
374
- aria-expanded="false"
375
- aria-label="Application launcher"
376
- >
377
- <i class="fas fa-th" aria-hidden="true"></i>
378
- </button>
379
- <div
380
- class="pf-c-app-launcher__menu pf-m-align-right"
381
- hidden
382
- >
383
- <div class="pf-c-app-launcher__menu-search">
384
- <div class="pf-c-search-input">
385
- <div class="pf-c-search-input__bar">
386
- <span class="pf-c-search-input__text">
387
- <span class="pf-c-search-input__icon">
388
- <i
389
- class="fas fa-search fa-fw"
390
- aria-hidden="true"
391
- ></i>
392
- </span>
393
- <input
394
- class="pf-c-search-input__text-input"
395
- type="text"
396
- placeholder="Filter by name"
397
- aria-label="Filter by name"
398
- />
380
+ <i class="fas fa-th" aria-hidden="true"></i>
381
+ </button>
382
+ <div
383
+ class="pf-c-app-launcher__menu pf-m-align-right"
384
+ hidden
385
+ >
386
+ <div class="pf-c-app-launcher__menu-search">
387
+ <div class="pf-c-search-input">
388
+ <div class="pf-c-search-input__bar">
389
+ <span class="pf-c-search-input__text">
390
+ <span class="pf-c-search-input__icon">
391
+ <i
392
+ class="fas fa-search fa-fw"
393
+ aria-hidden="true"
394
+ ></i>
399
395
  </span>
400
- </div>
396
+ <input
397
+ class="pf-c-search-input__text-input"
398
+ type="text"
399
+ placeholder="Filter by name"
400
+ aria-label="Filter by name"
401
+ />
402
+ </span>
401
403
  </div>
402
404
  </div>
403
- <section class="pf-c-app-launcher__group">
404
- <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
405
- <ul>
406
- <li
407
- class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
408
- >
409
- <a class="pf-c-app-launcher__menu-item">
410
- Link 1
411
- <span
412
- class="pf-c-app-launcher__menu-item-external-icon"
413
- >
414
- <i
415
- class="fas fa-external-link-alt"
416
- aria-hidden="true"
417
- ></i>
418
- </span>
419
- <span
420
- class="pf-screen-reader"
421
- >(opens new window)</span>
422
- </a>
423
- <button
424
- class="pf-c-app-launcher__menu-item pf-m-action"
425
- type="button"
426
- aria-label="Favorite"
405
+ </div>
406
+ <section class="pf-c-app-launcher__group">
407
+ <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
408
+ <ul>
409
+ <li
410
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
411
+ >
412
+ <a class="pf-c-app-launcher__menu-item">
413
+ Link 1
414
+ <span
415
+ class="pf-c-app-launcher__menu-item-external-icon"
427
416
  >
428
- <i class="fas fa-star" aria-hidden="true"></i>
429
- </button>
430
- </li>
431
- <li
432
- class="pf-c-app-launcher__menu-wrapper pf-m-external"
417
+ <i
418
+ class="fas fa-external-link-alt"
419
+ aria-hidden="true"
420
+ ></i>
421
+ </span>
422
+ <span class="pf-screen-reader">(opens new window)</span>
423
+ </a>
424
+ <button
425
+ class="pf-c-app-launcher__menu-item pf-m-action"
426
+ type="button"
427
+ aria-label="Favorite"
433
428
  >
434
- <a class="pf-c-app-launcher__menu-item">
435
- Link 2
436
- <span
437
- class="pf-c-app-launcher__menu-item-external-icon"
438
- >
439
- <i
440
- class="fas fa-external-link-alt"
441
- aria-hidden="true"
442
- ></i>
443
- </span>
444
- <span
445
- class="pf-screen-reader"
446
- >(opens new window)</span>
447
- </a>
448
- <button
449
- class="pf-c-app-launcher__menu-item pf-m-action"
450
- type="button"
451
- aria-label="Favorite"
429
+ <i class="fas fa-star" aria-hidden="true"></i>
430
+ </button>
431
+ </li>
432
+ <li
433
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
434
+ >
435
+ <a class="pf-c-app-launcher__menu-item">
436
+ Link 2
437
+ <span
438
+ class="pf-c-app-launcher__menu-item-external-icon"
452
439
  >
453
- <i class="fas fa-star" aria-hidden="true"></i>
454
- </button>
455
- </li>
456
- </ul>
457
- </section>
458
- <hr class="pf-c-divider" />
459
- <section class="pf-c-app-launcher__group">
460
- <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
461
- <ul>
462
- <li
463
- class="pf-c-app-launcher__menu-wrapper pf-m-external"
440
+ <i
441
+ class="fas fa-external-link-alt"
442
+ aria-hidden="true"
443
+ ></i>
444
+ </span>
445
+ <span class="pf-screen-reader">(opens new window)</span>
446
+ </a>
447
+ <button
448
+ class="pf-c-app-launcher__menu-item pf-m-action"
449
+ type="button"
450
+ aria-label="Favorite"
464
451
  >
465
- <a class="pf-c-app-launcher__menu-item">
466
- Link 1
467
- <span
468
- class="pf-c-app-launcher__menu-item-external-icon"
469
- >
470
- <i
471
- class="fas fa-external-link-alt"
472
- aria-hidden="true"
473
- ></i>
474
- </span>
475
- <span
476
- class="pf-screen-reader"
477
- >(opens new window)</span>
478
- </a>
479
- <button
480
- class="pf-c-app-launcher__menu-item pf-m-action"
481
- type="button"
482
- aria-label="Favorite"
452
+ <i class="fas fa-star" aria-hidden="true"></i>
453
+ </button>
454
+ </li>
455
+ </ul>
456
+ </section>
457
+ <hr class="pf-c-divider" />
458
+ <section class="pf-c-app-launcher__group">
459
+ <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
460
+ <ul>
461
+ <li
462
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
463
+ >
464
+ <a class="pf-c-app-launcher__menu-item">
465
+ Link 1
466
+ <span
467
+ class="pf-c-app-launcher__menu-item-external-icon"
483
468
  >
484
- <i class="fas fa-star" aria-hidden="true"></i>
485
- </button>
486
- </li>
487
- <li
488
- class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
469
+ <i
470
+ class="fas fa-external-link-alt"
471
+ aria-hidden="true"
472
+ ></i>
473
+ </span>
474
+ <span class="pf-screen-reader">(opens new window)</span>
475
+ </a>
476
+ <button
477
+ class="pf-c-app-launcher__menu-item pf-m-action"
478
+ type="button"
479
+ aria-label="Favorite"
489
480
  >
490
- <a class="pf-c-app-launcher__menu-item">
491
- Link 2
492
- <span
493
- class="pf-c-app-launcher__menu-item-external-icon"
494
- >
495
- <i
496
- class="fas fa-external-link-alt"
497
- aria-hidden="true"
498
- ></i>
499
- </span>
500
- <span
501
- class="pf-screen-reader"
502
- >(opens new window)</span>
503
- </a>
504
- <button
505
- class="pf-c-app-launcher__menu-item pf-m-action"
506
- type="button"
507
- aria-label="Favorite"
481
+ <i class="fas fa-star" aria-hidden="true"></i>
482
+ </button>
483
+ </li>
484
+ <li
485
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
486
+ >
487
+ <a class="pf-c-app-launcher__menu-item">
488
+ Link 2
489
+ <span
490
+ class="pf-c-app-launcher__menu-item-external-icon"
508
491
  >
509
- <i class="fas fa-star" aria-hidden="true"></i>
510
- </button>
511
- </li>
512
- </ul>
513
- </section>
514
- </div>
515
- </nav>
516
- </div>
517
- <div class="pf-c-toolbar__item">
518
- <div class="pf-c-dropdown">
519
- <button
520
- class="pf-c-dropdown__toggle pf-m-plain"
521
- id="-settings-button"
522
- aria-expanded="false"
523
- type="button"
524
- aria-label="Settings"
525
- >
526
- <i class="fas fa-cog" aria-hidden="true"></i>
527
- </button>
528
- <ul
529
- class="pf-c-dropdown__menu pf-m-align-right"
530
- aria-labelledby="-settings-button"
531
- hidden
532
- >
533
- <li>
534
- <button
535
- class="pf-c-dropdown__menu-item"
536
- type="button"
537
- >Settings</button>
538
- </li>
539
- <li>
540
- <button
541
- class="pf-c-dropdown__menu-item"
542
- type="button"
543
- >Use the beta release</button>
544
- </li>
545
- </ul>
546
- </div>
547
- </div>
548
- <div class="pf-c-toolbar__item">
549
- <div class="pf-c-dropdown">
550
- <button
551
- class="pf-c-dropdown__toggle pf-m-plain"
552
- id="-help-button"
553
- aria-expanded="false"
554
- type="button"
555
- aria-label="Help"
556
- >
557
- <i class="fas fa-question-circle" aria-hidden="true"></i>
558
- </button>
559
- <ul
560
- class="pf-c-dropdown__menu pf-m-align-right"
561
- aria-labelledby="-help-button"
562
- hidden
563
- >
564
- <li>
565
- <button
566
- class="pf-c-dropdown__menu-item"
567
- type="button"
568
- >Support options</button>
569
- </li>
570
- <li>
571
- <button
572
- class="pf-c-dropdown__menu-item"
573
- type="button"
574
- >Open support case</button>
575
- </li>
576
- <li>
577
- <button
578
- class="pf-c-dropdown__menu-item"
579
- type="button"
580
- >API documentation</button>
581
- </li>
582
- </ul>
492
+ <i
493
+ class="fas fa-external-link-alt"
494
+ aria-hidden="true"
495
+ ></i>
496
+ </span>
497
+ <span class="pf-screen-reader">(opens new window)</span>
498
+ </a>
499
+ <button
500
+ class="pf-c-app-launcher__menu-item pf-m-action"
501
+ type="button"
502
+ aria-label="Favorite"
503
+ >
504
+ <i class="fas fa-star" aria-hidden="true"></i>
505
+ </button>
506
+ </li>
507
+ </ul>
508
+ </section>
583
509
  </div>
584
- </div>
510
+ </nav>
585
511
  </div>
586
- <div class="pf-c-toolbar__item pf-m-hidden-on-lg">
512
+ <div class="pf-c-toolbar__item">
587
513
  <div class="pf-c-dropdown">
588
514
  <button
589
- class="pf-c-menu-toggle pf-m-plain"
590
- type="button"
515
+ class="pf-c-dropdown__toggle pf-m-plain"
516
+ id="context-selector-in-sidebar-example-masthead-settings-button"
591
517
  aria-expanded="false"
592
- aria-label="Actions"
518
+ type="button"
519
+ aria-label="Settings"
593
520
  >
594
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
521
+ <i class="fas fa-cog" aria-hidden="true"></i>
595
522
  </button>
596
- <div
597
- class="pf-c-menu pf-m-drilldown pf-m-align-right"
523
+ <ul
524
+ class="pf-c-dropdown__menu pf-m-align-right"
525
+ aria-labelledby="context-selector-in-sidebar-example-masthead-settings-button"
598
526
  hidden
599
527
  >
600
- <div class="pf-c-menu__content">
601
- <section class="pf-c-menu__group pf-m-hidden-on-sm">
602
- <ul class="pf-c-menu__list" role="menu">
603
- <li
604
- class="pf-c-menu__list-item pf-m-disabled"
605
- role="none"
528
+ <li>
529
+ <button
530
+ class="pf-c-dropdown__menu-item"
531
+ type="button"
532
+ >Settings</button>
533
+ </li>
534
+ <li>
535
+ <button
536
+ class="pf-c-dropdown__menu-item"
537
+ type="button"
538
+ >Use the beta release</button>
539
+ </li>
540
+ </ul>
541
+ </div>
542
+ </div>
543
+ <div class="pf-c-toolbar__item">
544
+ <div class="pf-c-dropdown">
545
+ <button
546
+ class="pf-c-dropdown__toggle pf-m-plain"
547
+ id="context-selector-in-sidebar-example-masthead-help-button"
548
+ aria-expanded="false"
549
+ type="button"
550
+ aria-label="Help"
551
+ >
552
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
553
+ </button>
554
+ <ul
555
+ class="pf-c-dropdown__menu pf-m-align-right"
556
+ aria-labelledby="context-selector-in-sidebar-example-masthead-help-button"
557
+ hidden
558
+ >
559
+ <li>
560
+ <button
561
+ class="pf-c-dropdown__menu-item"
562
+ type="button"
563
+ >Support options</button>
564
+ </li>
565
+ <li>
566
+ <button
567
+ class="pf-c-dropdown__menu-item"
568
+ type="button"
569
+ >Open support case</button>
570
+ </li>
571
+ <li>
572
+ <button
573
+ class="pf-c-dropdown__menu-item"
574
+ type="button"
575
+ >API documentation</button>
576
+ </li>
577
+ </ul>
578
+ </div>
579
+ </div>
580
+ </div>
581
+ <div class="pf-c-toolbar__item pf-m-hidden-on-lg">
582
+ <div class="pf-c-dropdown">
583
+ <button
584
+ class="pf-c-menu-toggle pf-m-plain"
585
+ type="button"
586
+ aria-expanded="false"
587
+ aria-label="Actions"
588
+ >
589
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
590
+ </button>
591
+ <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
592
+ <div class="pf-c-menu__content">
593
+ <section class="pf-c-menu__group pf-m-hidden-on-sm">
594
+ <ul class="pf-c-menu__list" role="menu">
595
+ <li
596
+ class="pf-c-menu__list-item pf-m-disabled"
597
+ role="none"
598
+ >
599
+ <button
600
+ class="pf-c-menu__item"
601
+ type="button"
602
+ disabled
603
+ role="menuitem"
606
604
  >
607
- <button
608
- class="pf-c-menu__item"
609
- type="button"
610
- disabled
611
- role="menuitem"
612
- >
613
- <span class="pf-c-menu__item-description">
614
- <div class="pf-u-font-size-sm">Username:</div>
615
- <div
616
- class="pf-u-font-size-md"
617
- >mshaksho@redhat.com</div>
618
- </span>
619
- </button>
620
- </li>
621
- <li
622
- class="pf-c-menu__list-item pf-m-disabled"
623
- role="none"
605
+ <span class="pf-c-menu__item-description">
606
+ <div class="pf-u-font-size-sm">Username:</div>
607
+ <div class="pf-u-font-size-md">ned_username</div>
608
+ </span>
609
+ </button>
610
+ </li>
611
+ <li
612
+ class="pf-c-menu__list-item pf-m-disabled"
613
+ role="none"
614
+ >
615
+ <button
616
+ class="pf-c-menu__item"
617
+ type="button"
618
+ disabled
619
+ role="menuitem"
624
620
  >
625
- <button
626
- class="pf-c-menu__item"
627
- type="button"
628
- disabled
629
- role="menuitem"
630
- >
631
- <span class="pf-c-menu__item-description">
632
- <div class="pf-u-font-size-sm">Account number:</div>
633
- <div class="pf-u-font-size-md">123456789</div>
634
- </span>
635
- </button>
636
- </li>
637
- <li class="pf-c-divider" role="separator"></li>
638
- <li class="pf-c-menu__list-item" role="none">
639
- <button
640
- class="pf-c-menu__item"
641
- type="button"
642
- role="menuitem"
643
- >
644
- <span class="pf-c-menu__item-main">
645
- <span class="pf-c-menu__item-text">My profile</span>
646
- </span>
647
- </button>
648
- </li>
649
- <li class="pf-c-menu__list-item" role="none">
650
- <button
651
- class="pf-c-menu__item"
652
- type="button"
653
- role="menuitem"
654
- >
655
- <span class="pf-c-menu__item-main">
656
- <span
657
- class="pf-c-menu__item-text"
658
- >User management</span>
659
- </span>
660
- </button>
661
- </li>
662
- <li class="pf-c-menu__list-item" role="none">
663
- <button
664
- class="pf-c-menu__item"
665
- type="button"
666
- role="menuitem"
667
- >
668
- <span class="pf-c-menu__item-main">
669
- <span class="pf-c-menu__item-text">Logout</span>
670
- </span>
671
- </button>
672
- </li>
673
- </ul>
674
- </section>
675
- <hr class="pf-c-divider pf-m-hidden-on-sm" />
676
- <section class="pf-c-menu__group">
677
- <ul class="pf-c-menu__list" role="menu">
678
- <li class="pf-c-menu__list-item" role="none">
679
- <button
680
- class="pf-c-menu__item"
681
- type="button"
682
- role="menuitem"
683
- aria-expanded="false"
684
- >
685
- <span class="pf-c-menu__item-main">
686
- <span class="pf-c-menu__item-icon">
687
- <i
688
- class="fas fa-fw fa-cog"
689
- aria-hidden="true"
690
- ></i>
691
- </span>
692
- <span class="pf-c-menu__item-text">Settings</span>
693
- <span class="pf-c-menu__item-toggle-icon">
694
- <i class="fas fa-angle-right"></i>
695
- </span>
696
- </span>
697
- </button>
698
- <div class="pf-c-menu" hidden>
699
- <div class="pf-c-menu__content">
700
- <ul class="pf-c-menu__list" role="menu">
701
- <li
702
- class="pf-c-menu__list-item pf-m-drill-up"
703
- role="none"
704
- >
705
- <button
706
- class="pf-c-menu__item"
707
- type="button"
708
- role="menuitem"
709
- >
710
- <span class="pf-c-menu__item-main">
711
- <span
712
- class="pf-c-menu__item-toggle-icon"
713
- >
714
- <i class="fas fa-angle-left"></i>
715
- </span>
716
- <span class="pf-c-menu__item-icon">
717
- <i
718
- class="fas fa-fw fa-cog"
719
- aria-hidden="true"
720
- ></i>
721
- </span>
722
- <span
723
- class="pf-c-menu__item-text"
724
- >Settings</span>
725
- </span>
726
- </button>
727
- </li>
728
- <li class="pf-c-divider" role="separator"></li>
729
- <li
730
- class="pf-c-menu__list-item"
731
- role="none"
732
- >
733
- <a
734
- class="pf-c-menu__item"
735
- href="#"
736
- role="menuitem"
737
- >
738
- <span class="pf-c-menu__item-main">
739
- <span
740
- class="pf-c-menu__item-text"
741
- >Customer support</span>
742
- </span>
743
- </a>
744
- </li>
745
- <li
746
- class="pf-c-menu__list-item"
747
- role="none"
748
- >
749
- <a
750
- class="pf-c-menu__item"
751
- href="#"
752
- role="menuitem"
753
- >
754
- <span class="pf-c-menu__item-main">
755
- <span
756
- class="pf-c-menu__item-text"
757
- >About</span>
758
- </span>
759
- </a>
760
- </li>
761
- </ul>
762
- </div>
763
- </div>
764
- </li>
765
-
766
- <li class="pf-c-menu__list-item" role="none">
767
- <button
768
- class="pf-c-menu__item"
769
- type="button"
770
- role="menuitem"
771
- aria-expanded="false"
772
- >
773
- <span class="pf-c-menu__item-main">
774
- <span class="pf-c-menu__item-icon">
775
- <i
776
- class="fas fa-fw fa-pf-icon pf-icon-help"
777
- aria-hidden="true"
778
- ></i>
779
- </span>
780
- <span class="pf-c-menu__item-text">Help</span>
781
- <span class="pf-c-menu__item-toggle-icon">
782
- <i class="fas fa-angle-right"></i>
783
- </span>
621
+ <span class="pf-c-menu__item-description">
622
+ <div class="pf-u-font-size-sm">Account number:</div>
623
+ <div class="pf-u-font-size-md">123456789</div>
624
+ </span>
625
+ </button>
626
+ </li>
627
+ <li class="pf-c-divider" role="separator"></li>
628
+ <li class="pf-c-menu__list-item" role="none">
629
+ <button
630
+ class="pf-c-menu__item"
631
+ type="button"
632
+ role="menuitem"
633
+ >
634
+ <span class="pf-c-menu__item-main">
635
+ <span class="pf-c-menu__item-text">My profile</span>
636
+ </span>
637
+ </button>
638
+ </li>
639
+ <li class="pf-c-menu__list-item" role="none">
640
+ <button
641
+ class="pf-c-menu__item"
642
+ type="button"
643
+ role="menuitem"
644
+ >
645
+ <span class="pf-c-menu__item-main">
646
+ <span
647
+ class="pf-c-menu__item-text"
648
+ >User management</span>
649
+ </span>
650
+ </button>
651
+ </li>
652
+ <li class="pf-c-menu__list-item" role="none">
653
+ <button
654
+ class="pf-c-menu__item"
655
+ type="button"
656
+ role="menuitem"
657
+ >
658
+ <span class="pf-c-menu__item-main">
659
+ <span class="pf-c-menu__item-text">Logout</span>
660
+ </span>
661
+ </button>
662
+ </li>
663
+ </ul>
664
+ </section>
665
+ <hr class="pf-c-divider pf-m-hidden-on-sm" />
666
+ <section class="pf-c-menu__group">
667
+ <ul class="pf-c-menu__list" role="menu">
668
+ <li class="pf-c-menu__list-item" role="none">
669
+ <button
670
+ class="pf-c-menu__item"
671
+ type="button"
672
+ role="menuitem"
673
+ aria-expanded="false"
674
+ >
675
+ <span class="pf-c-menu__item-main">
676
+ <span class="pf-c-menu__item-icon">
677
+ <i
678
+ class="fas fa-fw fa-cog"
679
+ aria-hidden="true"
680
+ ></i>
784
681
  </span>
785
- </button>
786
- <div class="pf-c-menu" hidden>
787
- <div class="pf-c-menu__content">
788
- <ul class="pf-c-menu__list" role="menu">
789
- <li
790
- class="pf-c-menu__list-item pf-m-drill-up"
791
- role="none"
792
- >
793
- <button
794
- class="pf-c-menu__item"
795
- type="button"
796
- role="menuitem"
797
- >
798
- <span class="pf-c-menu__item-main">
799
- <span
800
- class="pf-c-menu__item-toggle-icon"
801
- >
802
- <i class="fas fa-angle-left"></i>
803
- </span>
804
- <span class="pf-c-menu__item-icon">
805
- <i
806
- class="fas fa-fw fa-pf-icon pf-icon-help"
807
- aria-hidden="true"
808
- ></i>
809
- </span>
810
- <span
811
- class="pf-c-menu__item-text"
812
- >Help</span>
813
- </span>
814
- </button>
815
- </li>
816
- <li class="pf-c-divider" role="separator"></li>
817
- <li
818
- class="pf-c-menu__list-item"
819
- role="none"
820
- >
821
- <a
822
- class="pf-c-menu__item"
823
- href="#"
824
- role="menuitem"
825
- >
826
- <span class="pf-c-menu__item-main">
827
- <span
828
- class="pf-c-menu__item-text"
829
- >Support options</span>
830
- </span>
831
- </a>
832
- </li>
833
- <li
834
- class="pf-c-menu__list-item"
835
- role="none"
836
- >
837
- <a
838
- class="pf-c-menu__item"
839
- href="#"
840
- role="menuitem"
841
- >
842
- <span class="pf-c-menu__item-main">
843
- <span
844
- class="pf-c-menu__item-text"
845
- >Open support case</span>
846
- </span>
847
- </a>
848
- </li>
849
- <li
850
- class="pf-c-menu__list-item"
851
- role="none"
852
- >
853
- <a
854
- class="pf-c-menu__item"
855
- href="#"
856
- role="menuitem"
857
- >
858
- <span class="pf-c-menu__item-main">
859
- <span
860
- class="pf-c-menu__item-text"
861
- >API documentation</span>
862
- </span>
863
- </a>
864
- </li>
865
- </ul>
866
- </div>
867
- </div>
868
- </li>
869
-
870
- <li class="pf-c-menu__list-item" role="none">
871
- <button
872
- class="pf-c-menu__item"
873
- type="button"
874
- role="menuitem"
875
- >
876
- <span class="pf-c-menu__item-main">
877
- <span class="pf-c-menu__item-icon">
878
- <i
879
- class="fas fa-fw fa-th"
880
- aria-hidden="true"
881
- ></i>
882
- </span>
883
- <span
884
- class="pf-c-menu__item-text"
885
- >Application launcher</span>
886
- <span class="pf-c-menu__item-toggle-icon">
887
- <i class="fas fa-angle-right"></i>
888
- </span>
682
+ <span class="pf-c-menu__item-text">Settings</span>
683
+ <span class="pf-c-menu__item-toggle-icon">
684
+ <i class="fas fa-angle-right"></i>
889
685
  </span>
890
- </button>
891
- <div class="pf-c-menu" hidden>
892
- <div class="pf-c-menu__header">
893
- <button
894
- class="pf-c-menu__item"
895
- type="button"
896
- role="menuitem"
686
+ </span>
687
+ </button>
688
+ <div class="pf-c-menu" hidden>
689
+ <div class="pf-c-menu__content">
690
+ <ul class="pf-c-menu__list" role="menu">
691
+ <li
692
+ class="pf-c-menu__list-item pf-m-drill-up"
693
+ role="none"
897
694
  >
898
- <span class="pf-c-menu__item-main">
899
- <span class="pf-c-menu__item-toggle-icon">
900
- <i class="fas fa-angle-left"></i>
901
- </span>
902
- <span class="pf-c-menu__item-icon">
903
- <i
904
- class="fas fa-fw fa-th"
905
- aria-hidden="true"
906
- ></i>
907
- </span>
908
- <span
909
- class="pf-c-menu__item-text"
910
- >Application launcher</span>
911
- </span>
912
- </button>
913
- </div>
914
- <div class="pf-c-menu__search">
915
- <div class="pf-c-menu__search-input">
916
- <div class="pf-c-search-input">
917
- <div class="pf-c-search-input__bar">
918
- <span class="pf-c-search-input__text">
919
- <span class="pf-c-search-input__icon">
920
- <i
921
- class="fas fa-search fa-fw"
922
- aria-hidden="true"
923
- ></i>
924
- </span>
925
- <input
926
- class="pf-c-search-input__text-input"
927
- type="text"
928
- placeholder="Search"
929
- aria-label="Search"
930
- />
931
- </span>
932
- </div>
933
- </div>
934
- </div>
935
- </div>
936
- <hr class="pf-c-divider" />
937
- <section class="pf-c-menu__group">
938
- <h1 class="pf-c-menu__group-title">Favorites</h1>
939
- <ul class="pf-c-menu__list" role="menu">
940
- <li
941
- class="pf-c-menu__list-item"
942
- role="none"
695
+ <button
696
+ class="pf-c-menu__item"
697
+ type="button"
698
+ role="menuitem"
943
699
  >
944
- <a
945
- class="pf-c-menu__item"
946
- href="#"
947
- role="menuitem"
948
- >
949
- <span class="pf-c-menu__item-main">
950
- <span
951
- class="pf-c-menu__item-text"
952
- >Link 1</span>
953
- </span>
954
- </a>
955
- <button
956
- class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
957
- type="button"
958
- aria-label="Starred"
959
- >
700
+ <span class="pf-c-menu__item-main">
960
701
  <span
961
- class="pf-c-menu__item-action-icon"
702
+ class="pf-c-menu__item-toggle-icon"
962
703
  >
963
- <i
964
- class="fas fa-star"
965
- aria-hidden="true"
966
- ></i>
967
- </span>
968
- </button>
969
- </li>
970
- <li
971
- class="pf-c-menu__list-item"
972
- role="none"
973
- >
974
- <a
975
- class="pf-c-menu__item"
976
- href="#"
977
- role="menuitem"
978
- target="_blank"
979
- >
980
- <span class="pf-c-menu__item-main">
981
- <span
982
- class="pf-c-menu__item-text"
983
- >Link 2</span>
984
- <span
985
- class="pf-c-menu__item-external-icon"
986
- >
987
- <i
988
- class="fas fa-external-link-alt"
989
- aria-hidden="true"
990
- ></i>
991
- </span>
992
- <span
993
- class="pf-screen-reader"
994
- >(opens new window)</span>
704
+ <i class="fas fa-angle-left"></i>
995
705
  </span>
996
- </a>
997
- <button
998
- class="pf-c-menu__item-action pf-m-favorite"
999
- type="button"
1000
- aria-label="Not starred"
1001
- >
1002
- <span
1003
- class="pf-c-menu__item-action-icon"
1004
- >
706
+ <span class="pf-c-menu__item-icon">
1005
707
  <i
1006
- class="fas fa-star"
708
+ class="fas fa-fw fa-cog"
1007
709
  aria-hidden="true"
1008
710
  ></i>
1009
711
  </span>
1010
- </button>
1011
- </li>
1012
- </ul>
1013
- </section>
1014
- <hr class="pf-c-divider" />
1015
- <section class="pf-c-menu__group">
1016
- <h1 class="pf-c-menu__group-title">Group 1</h1>
1017
- <ul class="pf-c-menu__list" role="menu">
1018
- <li
1019
- class="pf-c-menu__list-item"
1020
- role="none"
1021
- >
1022
- <a
1023
- class="pf-c-menu__item"
1024
- href="#"
1025
- role="menuitem"
1026
- >
1027
- <span class="pf-c-menu__item-main">
1028
- <span
1029
- class="pf-c-menu__item-text"
1030
- >Link 1</span>
1031
- </span>
1032
- </a>
1033
- <button
1034
- class="pf-c-menu__item-action pf-m-favorite"
1035
- type="button"
1036
- aria-label="Not starred"
1037
- >
1038
712
  <span
1039
- class="pf-c-menu__item-action-icon"
1040
- >
1041
- <i
1042
- class="fas fa-star"
1043
- aria-hidden="true"
1044
- ></i>
1045
- </span>
1046
- </button>
1047
- </li>
1048
- <li
1049
- class="pf-c-menu__list-item"
1050
- role="none"
713
+ class="pf-c-menu__item-text"
714
+ >Settings</span>
715
+ </span>
716
+ </button>
717
+ </li>
718
+ <li class="pf-c-divider" role="separator"></li>
719
+ <li class="pf-c-menu__list-item" role="none">
720
+ <a
721
+ class="pf-c-menu__item"
722
+ href="#"
723
+ role="menuitem"
1051
724
  >
1052
- <a
1053
- class="pf-c-menu__item"
1054
- href="#"
1055
- role="menuitem"
1056
- target="_blank"
1057
- >
1058
- <span class="pf-c-menu__item-main">
1059
- <span
1060
- class="pf-c-menu__item-text"
1061
- >Link 2</span>
1062
- <span
1063
- class="pf-c-menu__item-external-icon"
1064
- >
1065
- <i
1066
- class="fas fa-external-link-alt"
1067
- aria-hidden="true"
1068
- ></i>
1069
- </span>
1070
- <span
1071
- class="pf-screen-reader"
1072
- >(opens new window)</span>
1073
- </span>
1074
- </a>
1075
- <button
1076
- class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
1077
- type="button"
1078
- aria-label="Starred"
1079
- >
725
+ <span class="pf-c-menu__item-main">
1080
726
  <span
1081
- class="pf-c-menu__item-action-icon"
1082
- >
1083
- <i
1084
- class="fas fa-star"
1085
- aria-hidden="true"
1086
- ></i>
1087
- </span>
1088
- </button>
1089
- </li>
1090
- </ul>
1091
- </section>
1092
- </div>
1093
- </li>
1094
- </ul>
1095
- </section>
1096
- </div>
1097
- </div>
1098
- </div>
727
+ class="pf-c-menu__item-text"
728
+ >Customer support</span>
729
+ </span>
730
+ </a>
731
+ </li>
732
+ <li class="pf-c-menu__list-item" role="none">
733
+ <a
734
+ class="pf-c-menu__item"
735
+ href="#"
736
+ role="menuitem"
737
+ >
738
+ <span class="pf-c-menu__item-main">
739
+ <span class="pf-c-menu__item-text">About</span>
740
+ </span>
741
+ </a>
742
+ </li>
743
+ </ul>
744
+ </div>
745
+ </div>
746
+ </li>
747
+
748
+ <li class="pf-c-menu__list-item" role="none">
749
+ <button
750
+ class="pf-c-menu__item"
751
+ type="button"
752
+ role="menuitem"
753
+ aria-expanded="false"
754
+ >
755
+ <span class="pf-c-menu__item-main">
756
+ <span class="pf-c-menu__item-icon">
757
+ <i
758
+ class="fas fa-fw fa-pf-icon pf-icon-help"
759
+ aria-hidden="true"
760
+ ></i>
761
+ </span>
762
+ <span class="pf-c-menu__item-text">Help</span>
763
+ <span class="pf-c-menu__item-toggle-icon">
764
+ <i class="fas fa-angle-right"></i>
765
+ </span>
766
+ </span>
767
+ </button>
768
+ <div class="pf-c-menu" hidden>
769
+ <div class="pf-c-menu__content">
770
+ <ul class="pf-c-menu__list" role="menu">
771
+ <li
772
+ class="pf-c-menu__list-item pf-m-drill-up"
773
+ role="none"
774
+ >
775
+ <button
776
+ class="pf-c-menu__item"
777
+ type="button"
778
+ role="menuitem"
779
+ >
780
+ <span class="pf-c-menu__item-main">
781
+ <span
782
+ class="pf-c-menu__item-toggle-icon"
783
+ >
784
+ <i class="fas fa-angle-left"></i>
785
+ </span>
786
+ <span class="pf-c-menu__item-icon">
787
+ <i
788
+ class="fas fa-fw fa-pf-icon pf-icon-help"
789
+ aria-hidden="true"
790
+ ></i>
791
+ </span>
792
+ <span class="pf-c-menu__item-text">Help</span>
793
+ </span>
794
+ </button>
795
+ </li>
796
+ <li class="pf-c-divider" role="separator"></li>
797
+ <li class="pf-c-menu__list-item" role="none">
798
+ <a
799
+ class="pf-c-menu__item"
800
+ href="#"
801
+ role="menuitem"
802
+ >
803
+ <span class="pf-c-menu__item-main">
804
+ <span
805
+ class="pf-c-menu__item-text"
806
+ >Support options</span>
807
+ </span>
808
+ </a>
809
+ </li>
810
+ <li class="pf-c-menu__list-item" role="none">
811
+ <a
812
+ class="pf-c-menu__item"
813
+ href="#"
814
+ role="menuitem"
815
+ >
816
+ <span class="pf-c-menu__item-main">
817
+ <span
818
+ class="pf-c-menu__item-text"
819
+ >Open support case</span>
820
+ </span>
821
+ </a>
822
+ </li>
823
+ <li class="pf-c-menu__list-item" role="none">
824
+ <a
825
+ class="pf-c-menu__item"
826
+ href="#"
827
+ role="menuitem"
828
+ >
829
+ <span class="pf-c-menu__item-main">
830
+ <span
831
+ class="pf-c-menu__item-text"
832
+ >API documentation</span>
833
+ </span>
834
+ </a>
835
+ </li>
836
+ </ul>
837
+ </div>
838
+ </div>
839
+ </li>
840
+
841
+ <li class="pf-c-menu__list-item" role="none">
842
+ <button
843
+ class="pf-c-menu__item"
844
+ type="button"
845
+ role="menuitem"
846
+ >
847
+ <span class="pf-c-menu__item-main">
848
+ <span class="pf-c-menu__item-icon">
849
+ <i class="fas fa-fw fa-th" aria-hidden="true"></i>
850
+ </span>
851
+ <span
852
+ class="pf-c-menu__item-text"
853
+ >Application launcher</span>
854
+ <span class="pf-c-menu__item-toggle-icon">
855
+ <i class="fas fa-angle-right"></i>
856
+ </span>
857
+ </span>
858
+ </button>
859
+ <div class="pf-c-menu" hidden>
860
+ <div class="pf-c-menu__header">
861
+ <button
862
+ class="pf-c-menu__item"
863
+ type="button"
864
+ role="menuitem"
865
+ >
866
+ <span class="pf-c-menu__item-main">
867
+ <span class="pf-c-menu__item-toggle-icon">
868
+ <i class="fas fa-angle-left"></i>
869
+ </span>
870
+ <span class="pf-c-menu__item-icon">
871
+ <i
872
+ class="fas fa-fw fa-th"
873
+ aria-hidden="true"
874
+ ></i>
875
+ </span>
876
+ <span
877
+ class="pf-c-menu__item-text"
878
+ >Application launcher</span>
879
+ </span>
880
+ </button>
881
+ </div>
882
+ <div class="pf-c-menu__search">
883
+ <div class="pf-c-menu__search-input">
884
+ <div class="pf-c-search-input">
885
+ <div class="pf-c-search-input__bar">
886
+ <span class="pf-c-search-input__text">
887
+ <span class="pf-c-search-input__icon">
888
+ <i
889
+ class="fas fa-search fa-fw"
890
+ aria-hidden="true"
891
+ ></i>
892
+ </span>
893
+ <input
894
+ class="pf-c-search-input__text-input"
895
+ type="text"
896
+ placeholder="Search"
897
+ aria-label="Search"
898
+ />
899
+ </span>
900
+ </div>
901
+ </div>
902
+ </div>
903
+ </div>
904
+ <hr class="pf-c-divider" />
905
+ <section class="pf-c-menu__group">
906
+ <h1 class="pf-c-menu__group-title">Favorites</h1>
907
+ <ul class="pf-c-menu__list" role="menu">
908
+ <li class="pf-c-menu__list-item" role="none">
909
+ <a
910
+ class="pf-c-menu__item"
911
+ href="#"
912
+ role="menuitem"
913
+ >
914
+ <span class="pf-c-menu__item-main">
915
+ <span
916
+ class="pf-c-menu__item-text"
917
+ >Link 1</span>
918
+ </span>
919
+ </a>
920
+ <button
921
+ class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
922
+ type="button"
923
+ aria-label="Starred"
924
+ >
925
+ <span class="pf-c-menu__item-action-icon">
926
+ <i
927
+ class="fas fa-star"
928
+ aria-hidden="true"
929
+ ></i>
930
+ </span>
931
+ </button>
932
+ </li>
933
+ <li class="pf-c-menu__list-item" role="none">
934
+ <a
935
+ class="pf-c-menu__item"
936
+ href="#"
937
+ role="menuitem"
938
+ target="_blank"
939
+ >
940
+ <span class="pf-c-menu__item-main">
941
+ <span
942
+ class="pf-c-menu__item-text"
943
+ >Link 2</span>
944
+ <span
945
+ class="pf-c-menu__item-external-icon"
946
+ >
947
+ <i
948
+ class="fas fa-external-link-alt"
949
+ aria-hidden="true"
950
+ ></i>
951
+ </span>
952
+ <span
953
+ class="pf-screen-reader"
954
+ >(opens new window)</span>
955
+ </span>
956
+ </a>
957
+ <button
958
+ class="pf-c-menu__item-action pf-m-favorite"
959
+ type="button"
960
+ aria-label="Not starred"
961
+ >
962
+ <span class="pf-c-menu__item-action-icon">
963
+ <i
964
+ class="fas fa-star"
965
+ aria-hidden="true"
966
+ ></i>
967
+ </span>
968
+ </button>
969
+ </li>
970
+ </ul>
971
+ </section>
972
+ <hr class="pf-c-divider" />
973
+ <section class="pf-c-menu__group">
974
+ <h1 class="pf-c-menu__group-title">Group 1</h1>
975
+ <ul class="pf-c-menu__list" role="menu">
976
+ <li class="pf-c-menu__list-item" role="none">
977
+ <a
978
+ class="pf-c-menu__item"
979
+ href="#"
980
+ role="menuitem"
981
+ >
982
+ <span class="pf-c-menu__item-main">
983
+ <span
984
+ class="pf-c-menu__item-text"
985
+ >Link 1</span>
986
+ </span>
987
+ </a>
988
+ <button
989
+ class="pf-c-menu__item-action pf-m-favorite"
990
+ type="button"
991
+ aria-label="Not starred"
992
+ >
993
+ <span class="pf-c-menu__item-action-icon">
994
+ <i
995
+ class="fas fa-star"
996
+ aria-hidden="true"
997
+ ></i>
998
+ </span>
999
+ </button>
1000
+ </li>
1001
+ <li class="pf-c-menu__list-item" role="none">
1002
+ <a
1003
+ class="pf-c-menu__item"
1004
+ href="#"
1005
+ role="menuitem"
1006
+ target="_blank"
1007
+ >
1008
+ <span class="pf-c-menu__item-main">
1009
+ <span
1010
+ class="pf-c-menu__item-text"
1011
+ >Link 2</span>
1012
+ <span
1013
+ class="pf-c-menu__item-external-icon"
1014
+ >
1015
+ <i
1016
+ class="fas fa-external-link-alt"
1017
+ aria-hidden="true"
1018
+ ></i>
1019
+ </span>
1020
+ <span
1021
+ class="pf-screen-reader"
1022
+ >(opens new window)</span>
1023
+ </span>
1024
+ </a>
1025
+ <button
1026
+ class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
1027
+ type="button"
1028
+ aria-label="Starred"
1029
+ >
1030
+ <span class="pf-c-menu__item-action-icon">
1031
+ <i
1032
+ class="fas fa-star"
1033
+ aria-hidden="true"
1034
+ ></i>
1035
+ </span>
1036
+ </button>
1037
+ </li>
1038
+ </ul>
1039
+ </section>
1040
+ </div>
1041
+ </li>
1042
+ </ul>
1043
+ </section>
1044
+ </div>
1045
+ </div>
1099
1046
  </div>
1100
1047
  </div>
1101
- <div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1102
- <div
1103
- class="pf-c-dropdown pf-m-full-height"
1104
- style="--pf-c-dropdown--MaxWidth: 20ch;"
1048
+ </div>
1049
+ <div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1050
+ <div
1051
+ class="pf-c-dropdown pf-m-full-height"
1052
+ style="--pf-c-dropdown--MaxWidth: 20ch;"
1053
+ >
1054
+ <button
1055
+ class="pf-c-dropdown__toggle"
1056
+ id="context-selector-in-sidebar-example-masthead-profile-button"
1057
+ aria-expanded="false"
1058
+ type="button"
1105
1059
  >
1106
- <button
1107
- class="pf-c-dropdown__toggle"
1108
- id="-profile-button"
1109
- aria-expanded="false"
1110
- type="button"
1111
- >
1112
- <span class="pf-c-dropdown__toggle-image">
1113
- <img
1114
- class="pf-c-avatar"
1115
- src="/assets/images/img_avatar.svg"
1116
- alt="Avatar image"
1117
- />
1118
- </span>
1119
- <span class="pf-c-dropdown__toggle-text">Ned Username</span>
1120
- <span class="pf-c-dropdown__toggle-icon">
1121
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1122
- </span>
1123
- </button>
1124
- <div class="pf-c-dropdown__menu" hidden>
1125
- <section class="pf-c-dropdown__group">
1126
- <div class="pf-c-dropdown__menu-item pf-m-text">
1127
- <div class="pf-u-font-size-sm">Account number:</div>
1128
- <div>123456789</div>
1129
- </div>
1130
- <div class="pf-c-dropdown__menu-item pf-m-text">
1131
- <div class="pf-u-font-size-sm">Username:</div>
1132
- <div>mshaksho@redhat.com</div>
1133
- </div>
1134
- </section>
1135
- <hr class="pf-c-divider" />
1136
- <section class="pf-c-dropdown__group">
1137
- <ul>
1138
- <li>
1139
- <a
1140
- class="pf-c-dropdown__menu-item"
1141
- href="#"
1142
- >My profile</a>
1143
- </li>
1144
- <li>
1145
- <a
1146
- class="pf-c-dropdown__menu-item"
1147
- href="#"
1148
- >User management</a>
1149
- </li>
1150
- <li>
1151
- <a class="pf-c-dropdown__menu-item" href="#">Logout</a>
1152
- </li>
1153
- </ul>
1154
- </section>
1155
- </div>
1060
+ <span class="pf-c-dropdown__toggle-image">
1061
+ <img
1062
+ class="pf-c-avatar"
1063
+ src="/assets/images/img_avatar.svg"
1064
+ alt="Avatar image"
1065
+ />
1066
+ </span>
1067
+ <span class="pf-c-dropdown__toggle-text">Ned Username</span>
1068
+ <span class="pf-c-dropdown__toggle-icon">
1069
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1070
+ </span>
1071
+ </button>
1072
+ <div class="pf-c-dropdown__menu" hidden>
1073
+ <section class="pf-c-dropdown__group">
1074
+ <div class="pf-c-dropdown__menu-item pf-m-text">
1075
+ <div class="pf-u-font-size-sm">Account number:</div>
1076
+ <div>123456789</div>
1077
+ </div>
1078
+ <div class="pf-c-dropdown__menu-item pf-m-text">
1079
+ <div class="pf-u-font-size-sm">Username:</div>
1080
+ <div>mshaksho@redhat.com</div>
1081
+ </div>
1082
+ </section>
1083
+ <hr class="pf-c-divider" />
1084
+ <section class="pf-c-dropdown__group">
1085
+ <ul>
1086
+ <li>
1087
+ <a class="pf-c-dropdown__menu-item" href="#">My profile</a>
1088
+ </li>
1089
+ <li>
1090
+ <a
1091
+ class="pf-c-dropdown__menu-item"
1092
+ href="#"
1093
+ >User management</a>
1094
+ </li>
1095
+ <li>
1096
+ <a class="pf-c-dropdown__menu-item" href="#">Logout</a>
1097
+ </li>
1098
+ </ul>
1099
+ </section>
1156
1100
  </div>
1157
1101
  </div>
1158
1102
  </div>
1159
1103
  </div>
1160
1104
  </div>
1161
1105
  </div>
1162
- </header>
1106
+ </div>
1163
1107
  </header>
1164
1108
  <div class="pf-c-page__sidebar">
1165
1109
  <div class="pf-c-page__sidebar-body pf-m-menu">
@@ -1289,7 +1233,7 @@ section: components
1289
1233
  <div class="pf-c-page__sidebar-body">
1290
1234
  <nav
1291
1235
  class="pf-c-nav"
1292
- id="context-selector-in-sidebar-primary-nav"
1236
+ id="context-selector-in-sidebar-example-primary-nav"
1293
1237
  aria-label="Global"
1294
1238
  >
1295
1239
  <ul class="pf-c-nav__list">
@@ -1319,11 +1263,45 @@ section: components
1319
1263
  <main
1320
1264
  class="pf-c-page__main"
1321
1265
  tabindex="-1"
1322
- id="main-content-context-selector-in-sidebar"
1266
+ id="main-content-context-selector-in-sidebar-example"
1323
1267
  >
1324
- <section
1325
- class="pf-c-page__main-section pf-m-limit-width pf-m-light pf-m-shadow-bottom"
1326
- >
1268
+ <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
1269
+ <div class="pf-c-page__main-body">
1270
+ <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
1271
+ <ol class="pf-c-breadcrumb__list">
1272
+ <li class="pf-c-breadcrumb__item">
1273
+ <a href="#" class="pf-c-breadcrumb__link">Section home</a>
1274
+ </li>
1275
+ <li class="pf-c-breadcrumb__item">
1276
+ <span class="pf-c-breadcrumb__item-divider">
1277
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1278
+ </span>
1279
+
1280
+ <a href="#" class="pf-c-breadcrumb__link">Section title</a>
1281
+ </li>
1282
+ <li class="pf-c-breadcrumb__item">
1283
+ <span class="pf-c-breadcrumb__item-divider">
1284
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1285
+ </span>
1286
+
1287
+ <a href="#" class="pf-c-breadcrumb__link">Section title</a>
1288
+ </li>
1289
+ <li class="pf-c-breadcrumb__item">
1290
+ <span class="pf-c-breadcrumb__item-divider">
1291
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1292
+ </span>
1293
+
1294
+ <a
1295
+ href="#"
1296
+ class="pf-c-breadcrumb__link pf-m-current"
1297
+ aria-current="page"
1298
+ >Section landing</a>
1299
+ </li>
1300
+ </ol>
1301
+ </nav>
1302
+ </div>
1303
+ </section>
1304
+ <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
1327
1305
  <div class="pf-c-page__main-body">
1328
1306
  <div class="pf-c-content">
1329
1307
  <h1>Main title</h1>
@@ -1331,9 +1309,7 @@ section: components
1331
1309
  </div>
1332
1310
  </div>
1333
1311
  </section>
1334
- <section
1335
- class="pf-c-page__main-section pf-m-limit-width pf-m-overflow-scroll"
1336
- >
1312
+ <section class="pf-c-page__main-section pf-m-limit-width">
1337
1313
  <div class="pf-c-page__main-body">
1338
1314
  <div class="pf-l-gallery pf-m-gutter">
1339
1315
  <div class="pf-c-card">
@@ -1369,13 +1345,6 @@ section: components
1369
1345
  </div>
1370
1346
  </div>
1371
1347
  </section>
1372
- <section
1373
- class="pf-c-page__main-section pf-m-limit-width pf-m-no-fill pf-m-light pf-m-shadow-top"
1374
- >
1375
- <div class="pf-c-page__main-body">
1376
- <p>PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.</p>
1377
- </div>
1378
- </section>
1379
1348
  </main>
1380
1349
  </div>
1381
1350
 
@@ -1384,861 +1353,806 @@ section: components
1384
1353
  ### Context selector in sidebar expanded
1385
1354
 
1386
1355
  ```html isFullscreen
1387
- <div class="pf-c-page" id="context-selector-in-sidebar-expanded">
1388
- <header class="pf-c-page__header">
1389
- <a
1390
- class="pf-c-skip-to-content pf-c-button pf-m-primary"
1391
- href="#main-content-context-selector-in-sidebar-expanded"
1392
- >Skip to content</a>
1393
-
1394
- <header class="pf-c-masthead">
1395
- <span class="pf-c-masthead__toggle">
1396
- <button
1397
- class="pf-c-button pf-m-plain"
1398
- type="button"
1399
- aria-label="Global navigation"
1356
+ <div class="pf-c-page" id="context-selector-in-sidebar-expanded-example">
1357
+ <a
1358
+ class="pf-c-skip-to-content pf-c-button pf-m-primary"
1359
+ href="#main-content-context-selector-in-sidebar-expanded-example"
1360
+ >Skip to content</a>
1361
+ <header
1362
+ class="pf-c-masthead"
1363
+ id="context-selector-in-sidebar-expanded-example-masthead"
1364
+ >
1365
+ <span class="pf-c-masthead__toggle">
1366
+ <button
1367
+ class="pf-c-button pf-m-plain"
1368
+ type="button"
1369
+ aria-label="Global navigation"
1370
+ >
1371
+ <i class="fas fa-bars" aria-hidden="true"></i>
1372
+ </button>
1373
+ </span>
1374
+ <div class="pf-c-masthead__main">
1375
+ <a class="pf-c-masthead__brand" href="#">
1376
+ <picture
1377
+ class="pf-c-brand pf-m-picture"
1378
+ style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
1400
1379
  >
1401
- <i class="fas fa-bars" aria-hidden="true"></i>
1402
- </button>
1403
- </span>
1404
- <div class="pf-c-masthead__main">
1405
- <a class="pf-c-masthead__brand" href="#">
1406
- <picture
1407
- class="pf-c-brand pf-m-picture"
1408
- style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
1409
- >
1410
- <source
1411
- media="(min-width: 768px)"
1412
- srcset="/assets/images/logo__pf--reverse-on-md.svg"
1413
- />
1414
- <source srcset="/assets/images/logo__pf--reverse--base.svg" />
1415
- <img
1416
- src="/assets/images/logo__pf--reverse--base.png"
1417
- alt="Fallback patternFly default logo"
1418
- />
1419
- </picture>
1420
- </a>
1421
- </div>
1422
- <div class="pf-c-masthead__content">
1423
- <div class="pf-c-toolbar pf-m-full-height pf-m-static" id="-toolbar">
1424
- <div class="pf-c-toolbar__content">
1425
- <div class="pf-c-toolbar__content-section">
1380
+ <source
1381
+ media="(min-width: 768px)"
1382
+ srcset="/assets/images/logo__pf--reverse-on-md.svg"
1383
+ />
1384
+ <source srcset="/assets/images/logo__pf--reverse--base.svg" />
1385
+ <img
1386
+ src="/assets/images/logo__pf--reverse--base.png"
1387
+ alt="Fallback patternFly default logo"
1388
+ />
1389
+ </picture>
1390
+ </a>
1391
+ </div>
1392
+ <div class="pf-c-masthead__content">
1393
+ <div
1394
+ class="pf-c-toolbar pf-m-full-height pf-m-static"
1395
+ id="context-selector-in-sidebar-expanded-example-masthead-toolbar"
1396
+ >
1397
+ <div class="pf-c-toolbar__content">
1398
+ <div class="pf-c-toolbar__content-section">
1399
+ <div
1400
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1401
+ >
1402
+ <div class="pf-c-toolbar__item">
1403
+ <button
1404
+ class="pf-c-button pf-m-plain"
1405
+ type="button"
1406
+ aria-label="Notifications"
1407
+ >
1408
+ <span class="pf-c-notification-badge">
1409
+ <i class="pf-icon-bell" aria-hidden="true"></i>
1410
+ </span>
1411
+ </button>
1412
+ </div>
1426
1413
  <div
1427
- class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1414
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1428
1415
  >
1429
1416
  <div class="pf-c-toolbar__item">
1430
- <button
1431
- class="pf-c-button pf-m-plain"
1432
- type="button"
1433
- aria-label="Notifications"
1417
+ <nav
1418
+ class="pf-c-app-launcher"
1419
+ aria-label="Application launcher"
1420
+ id="context-selector-in-sidebar-expanded-example-masthead-icon-group--app-launcher"
1434
1421
  >
1435
- <span class="pf-c-notification-badge">
1436
- <i class="pf-icon-attention-bell" aria-hidden="true"></i>
1437
- </span>
1438
- </button>
1439
- </div>
1440
- <div
1441
- class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1442
- >
1443
- <div class="pf-c-toolbar__item">
1444
- <nav
1445
- class="pf-c-app-launcher"
1422
+ <button
1423
+ class="pf-c-app-launcher__toggle"
1424
+ type="button"
1425
+ id="context-selector-in-sidebar-expanded-example-masthead-icon-group--app-launcher-button"
1426
+ aria-expanded="false"
1446
1427
  aria-label="Application launcher"
1447
- id="-icon-group--app-launcher"
1448
1428
  >
1449
- <button
1450
- class="pf-c-app-launcher__toggle"
1451
- type="button"
1452
- id="-icon-group--app-launcher-button"
1453
- aria-expanded="false"
1454
- aria-label="Application launcher"
1455
- >
1456
- <i class="fas fa-th" aria-hidden="true"></i>
1457
- </button>
1458
- <div
1459
- class="pf-c-app-launcher__menu pf-m-align-right"
1460
- hidden
1461
- >
1462
- <div class="pf-c-app-launcher__menu-search">
1463
- <div class="pf-c-search-input">
1464
- <div class="pf-c-search-input__bar">
1465
- <span class="pf-c-search-input__text">
1466
- <span class="pf-c-search-input__icon">
1467
- <i
1468
- class="fas fa-search fa-fw"
1469
- aria-hidden="true"
1470
- ></i>
1471
- </span>
1472
- <input
1473
- class="pf-c-search-input__text-input"
1474
- type="text"
1475
- placeholder="Filter by name"
1476
- aria-label="Filter by name"
1477
- />
1429
+ <i class="fas fa-th" aria-hidden="true"></i>
1430
+ </button>
1431
+ <div
1432
+ class="pf-c-app-launcher__menu pf-m-align-right"
1433
+ hidden
1434
+ >
1435
+ <div class="pf-c-app-launcher__menu-search">
1436
+ <div class="pf-c-search-input">
1437
+ <div class="pf-c-search-input__bar">
1438
+ <span class="pf-c-search-input__text">
1439
+ <span class="pf-c-search-input__icon">
1440
+ <i
1441
+ class="fas fa-search fa-fw"
1442
+ aria-hidden="true"
1443
+ ></i>
1478
1444
  </span>
1479
- </div>
1445
+ <input
1446
+ class="pf-c-search-input__text-input"
1447
+ type="text"
1448
+ placeholder="Filter by name"
1449
+ aria-label="Filter by name"
1450
+ />
1451
+ </span>
1480
1452
  </div>
1481
1453
  </div>
1482
- <section class="pf-c-app-launcher__group">
1483
- <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
1484
- <ul>
1485
- <li
1486
- class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1454
+ </div>
1455
+ <section class="pf-c-app-launcher__group">
1456
+ <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
1457
+ <ul>
1458
+ <li
1459
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1460
+ >
1461
+ <a class="pf-c-app-launcher__menu-item">
1462
+ Link 1
1463
+ <span
1464
+ class="pf-c-app-launcher__menu-item-external-icon"
1465
+ >
1466
+ <i
1467
+ class="fas fa-external-link-alt"
1468
+ aria-hidden="true"
1469
+ ></i>
1470
+ </span>
1471
+ <span class="pf-screen-reader">(opens new window)</span>
1472
+ </a>
1473
+ <button
1474
+ class="pf-c-app-launcher__menu-item pf-m-action"
1475
+ type="button"
1476
+ aria-label="Favorite"
1487
1477
  >
1488
- <a class="pf-c-app-launcher__menu-item">
1489
- Link 1
1490
- <span
1491
- class="pf-c-app-launcher__menu-item-external-icon"
1492
- >
1493
- <i
1494
- class="fas fa-external-link-alt"
1495
- aria-hidden="true"
1496
- ></i>
1497
- </span>
1498
- <span
1499
- class="pf-screen-reader"
1500
- >(opens new window)</span>
1501
- </a>
1502
- <button
1503
- class="pf-c-app-launcher__menu-item pf-m-action"
1504
- type="button"
1505
- aria-label="Favorite"
1478
+ <i class="fas fa-star" aria-hidden="true"></i>
1479
+ </button>
1480
+ </li>
1481
+ <li
1482
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
1483
+ >
1484
+ <a class="pf-c-app-launcher__menu-item">
1485
+ Link 2
1486
+ <span
1487
+ class="pf-c-app-launcher__menu-item-external-icon"
1506
1488
  >
1507
- <i class="fas fa-star" aria-hidden="true"></i>
1508
- </button>
1509
- </li>
1510
- <li
1511
- class="pf-c-app-launcher__menu-wrapper pf-m-external"
1489
+ <i
1490
+ class="fas fa-external-link-alt"
1491
+ aria-hidden="true"
1492
+ ></i>
1493
+ </span>
1494
+ <span class="pf-screen-reader">(opens new window)</span>
1495
+ </a>
1496
+ <button
1497
+ class="pf-c-app-launcher__menu-item pf-m-action"
1498
+ type="button"
1499
+ aria-label="Favorite"
1512
1500
  >
1513
- <a class="pf-c-app-launcher__menu-item">
1514
- Link 2
1515
- <span
1516
- class="pf-c-app-launcher__menu-item-external-icon"
1517
- >
1518
- <i
1519
- class="fas fa-external-link-alt"
1520
- aria-hidden="true"
1521
- ></i>
1522
- </span>
1523
- <span
1524
- class="pf-screen-reader"
1525
- >(opens new window)</span>
1526
- </a>
1527
- <button
1528
- class="pf-c-app-launcher__menu-item pf-m-action"
1529
- type="button"
1530
- aria-label="Favorite"
1501
+ <i class="fas fa-star" aria-hidden="true"></i>
1502
+ </button>
1503
+ </li>
1504
+ </ul>
1505
+ </section>
1506
+ <hr class="pf-c-divider" />
1507
+ <section class="pf-c-app-launcher__group">
1508
+ <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
1509
+ <ul>
1510
+ <li
1511
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
1512
+ >
1513
+ <a class="pf-c-app-launcher__menu-item">
1514
+ Link 1
1515
+ <span
1516
+ class="pf-c-app-launcher__menu-item-external-icon"
1531
1517
  >
1532
- <i class="fas fa-star" aria-hidden="true"></i>
1533
- </button>
1534
- </li>
1535
- </ul>
1536
- </section>
1537
- <hr class="pf-c-divider" />
1538
- <section class="pf-c-app-launcher__group">
1539
- <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
1540
- <ul>
1541
- <li
1542
- class="pf-c-app-launcher__menu-wrapper pf-m-external"
1518
+ <i
1519
+ class="fas fa-external-link-alt"
1520
+ aria-hidden="true"
1521
+ ></i>
1522
+ </span>
1523
+ <span class="pf-screen-reader">(opens new window)</span>
1524
+ </a>
1525
+ <button
1526
+ class="pf-c-app-launcher__menu-item pf-m-action"
1527
+ type="button"
1528
+ aria-label="Favorite"
1543
1529
  >
1544
- <a class="pf-c-app-launcher__menu-item">
1545
- Link 1
1546
- <span
1547
- class="pf-c-app-launcher__menu-item-external-icon"
1548
- >
1549
- <i
1550
- class="fas fa-external-link-alt"
1551
- aria-hidden="true"
1552
- ></i>
1553
- </span>
1554
- <span
1555
- class="pf-screen-reader"
1556
- >(opens new window)</span>
1557
- </a>
1558
- <button
1559
- class="pf-c-app-launcher__menu-item pf-m-action"
1560
- type="button"
1561
- aria-label="Favorite"
1530
+ <i class="fas fa-star" aria-hidden="true"></i>
1531
+ </button>
1532
+ </li>
1533
+ <li
1534
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1535
+ >
1536
+ <a class="pf-c-app-launcher__menu-item">
1537
+ Link 2
1538
+ <span
1539
+ class="pf-c-app-launcher__menu-item-external-icon"
1562
1540
  >
1563
- <i class="fas fa-star" aria-hidden="true"></i>
1564
- </button>
1565
- </li>
1566
- <li
1567
- class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1541
+ <i
1542
+ class="fas fa-external-link-alt"
1543
+ aria-hidden="true"
1544
+ ></i>
1545
+ </span>
1546
+ <span class="pf-screen-reader">(opens new window)</span>
1547
+ </a>
1548
+ <button
1549
+ class="pf-c-app-launcher__menu-item pf-m-action"
1550
+ type="button"
1551
+ aria-label="Favorite"
1568
1552
  >
1569
- <a class="pf-c-app-launcher__menu-item">
1570
- Link 2
1571
- <span
1572
- class="pf-c-app-launcher__menu-item-external-icon"
1573
- >
1574
- <i
1575
- class="fas fa-external-link-alt"
1576
- aria-hidden="true"
1577
- ></i>
1578
- </span>
1579
- <span
1580
- class="pf-screen-reader"
1581
- >(opens new window)</span>
1582
- </a>
1583
- <button
1584
- class="pf-c-app-launcher__menu-item pf-m-action"
1585
- type="button"
1586
- aria-label="Favorite"
1587
- >
1588
- <i class="fas fa-star" aria-hidden="true"></i>
1589
- </button>
1590
- </li>
1591
- </ul>
1592
- </section>
1593
- </div>
1594
- </nav>
1595
- </div>
1596
- <div class="pf-c-toolbar__item">
1597
- <div class="pf-c-dropdown">
1598
- <button
1599
- class="pf-c-dropdown__toggle pf-m-plain"
1600
- id="-settings-button"
1601
- aria-expanded="false"
1602
- type="button"
1603
- aria-label="Settings"
1604
- >
1605
- <i class="fas fa-cog" aria-hidden="true"></i>
1606
- </button>
1607
- <ul
1608
- class="pf-c-dropdown__menu pf-m-align-right"
1609
- aria-labelledby="-settings-button"
1610
- hidden
1611
- >
1612
- <li>
1613
- <button
1614
- class="pf-c-dropdown__menu-item"
1615
- type="button"
1616
- >Settings</button>
1617
- </li>
1618
- <li>
1619
- <button
1620
- class="pf-c-dropdown__menu-item"
1621
- type="button"
1622
- >Use the beta release</button>
1623
- </li>
1624
- </ul>
1625
- </div>
1626
- </div>
1627
- <div class="pf-c-toolbar__item">
1628
- <div class="pf-c-dropdown">
1629
- <button
1630
- class="pf-c-dropdown__toggle pf-m-plain"
1631
- id="-help-button"
1632
- aria-expanded="false"
1633
- type="button"
1634
- aria-label="Help"
1635
- >
1636
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1637
- </button>
1638
- <ul
1639
- class="pf-c-dropdown__menu pf-m-align-right"
1640
- aria-labelledby="-help-button"
1641
- hidden
1642
- >
1643
- <li>
1644
- <button
1645
- class="pf-c-dropdown__menu-item"
1646
- type="button"
1647
- >Support options</button>
1648
- </li>
1649
- <li>
1650
- <button
1651
- class="pf-c-dropdown__menu-item"
1652
- type="button"
1653
- >Open support case</button>
1654
- </li>
1655
- <li>
1656
- <button
1657
- class="pf-c-dropdown__menu-item"
1658
- type="button"
1659
- >API documentation</button>
1660
- </li>
1661
- </ul>
1553
+ <i class="fas fa-star" aria-hidden="true"></i>
1554
+ </button>
1555
+ </li>
1556
+ </ul>
1557
+ </section>
1662
1558
  </div>
1663
- </div>
1559
+ </nav>
1664
1560
  </div>
1665
- <div class="pf-c-toolbar__item pf-m-hidden-on-lg">
1561
+ <div class="pf-c-toolbar__item">
1666
1562
  <div class="pf-c-dropdown">
1667
1563
  <button
1668
- class="pf-c-menu-toggle pf-m-plain"
1564
+ class="pf-c-dropdown__toggle pf-m-plain"
1565
+ id="context-selector-in-sidebar-expanded-example-masthead-settings-button"
1566
+ aria-expanded="false"
1669
1567
  type="button"
1568
+ aria-label="Settings"
1569
+ >
1570
+ <i class="fas fa-cog" aria-hidden="true"></i>
1571
+ </button>
1572
+ <ul
1573
+ class="pf-c-dropdown__menu pf-m-align-right"
1574
+ aria-labelledby="context-selector-in-sidebar-expanded-example-masthead-settings-button"
1575
+ hidden
1576
+ >
1577
+ <li>
1578
+ <button
1579
+ class="pf-c-dropdown__menu-item"
1580
+ type="button"
1581
+ >Settings</button>
1582
+ </li>
1583
+ <li>
1584
+ <button
1585
+ class="pf-c-dropdown__menu-item"
1586
+ type="button"
1587
+ >Use the beta release</button>
1588
+ </li>
1589
+ </ul>
1590
+ </div>
1591
+ </div>
1592
+ <div class="pf-c-toolbar__item">
1593
+ <div class="pf-c-dropdown">
1594
+ <button
1595
+ class="pf-c-dropdown__toggle pf-m-plain"
1596
+ id="context-selector-in-sidebar-expanded-example-masthead-help-button"
1670
1597
  aria-expanded="false"
1671
- aria-label="Actions"
1598
+ type="button"
1599
+ aria-label="Help"
1672
1600
  >
1673
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1601
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1674
1602
  </button>
1675
- <div
1676
- class="pf-c-menu pf-m-drilldown pf-m-align-right"
1603
+ <ul
1604
+ class="pf-c-dropdown__menu pf-m-align-right"
1605
+ aria-labelledby="context-selector-in-sidebar-expanded-example-masthead-help-button"
1677
1606
  hidden
1678
1607
  >
1679
- <div class="pf-c-menu__content">
1680
- <section class="pf-c-menu__group pf-m-hidden-on-sm">
1681
- <ul class="pf-c-menu__list" role="menu">
1682
- <li
1683
- class="pf-c-menu__list-item pf-m-disabled"
1684
- role="none"
1608
+ <li>
1609
+ <button
1610
+ class="pf-c-dropdown__menu-item"
1611
+ type="button"
1612
+ >Support options</button>
1613
+ </li>
1614
+ <li>
1615
+ <button
1616
+ class="pf-c-dropdown__menu-item"
1617
+ type="button"
1618
+ >Open support case</button>
1619
+ </li>
1620
+ <li>
1621
+ <button
1622
+ class="pf-c-dropdown__menu-item"
1623
+ type="button"
1624
+ >API documentation</button>
1625
+ </li>
1626
+ </ul>
1627
+ </div>
1628
+ </div>
1629
+ </div>
1630
+ <div class="pf-c-toolbar__item pf-m-hidden-on-lg">
1631
+ <div class="pf-c-dropdown">
1632
+ <button
1633
+ class="pf-c-menu-toggle pf-m-plain"
1634
+ type="button"
1635
+ aria-expanded="false"
1636
+ aria-label="Actions"
1637
+ >
1638
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1639
+ </button>
1640
+ <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
1641
+ <div class="pf-c-menu__content">
1642
+ <section class="pf-c-menu__group pf-m-hidden-on-sm">
1643
+ <ul class="pf-c-menu__list" role="menu">
1644
+ <li
1645
+ class="pf-c-menu__list-item pf-m-disabled"
1646
+ role="none"
1647
+ >
1648
+ <button
1649
+ class="pf-c-menu__item"
1650
+ type="button"
1651
+ disabled
1652
+ role="menuitem"
1685
1653
  >
1686
- <button
1687
- class="pf-c-menu__item"
1688
- type="button"
1689
- disabled
1690
- role="menuitem"
1691
- >
1692
- <span class="pf-c-menu__item-description">
1693
- <div class="pf-u-font-size-sm">Username:</div>
1694
- <div
1695
- class="pf-u-font-size-md"
1696
- >mshaksho@redhat.com</div>
1697
- </span>
1698
- </button>
1699
- </li>
1700
- <li
1701
- class="pf-c-menu__list-item pf-m-disabled"
1702
- role="none"
1654
+ <span class="pf-c-menu__item-description">
1655
+ <div class="pf-u-font-size-sm">Username:</div>
1656
+ <div class="pf-u-font-size-md">ned_username</div>
1657
+ </span>
1658
+ </button>
1659
+ </li>
1660
+ <li
1661
+ class="pf-c-menu__list-item pf-m-disabled"
1662
+ role="none"
1663
+ >
1664
+ <button
1665
+ class="pf-c-menu__item"
1666
+ type="button"
1667
+ disabled
1668
+ role="menuitem"
1669
+ >
1670
+ <span class="pf-c-menu__item-description">
1671
+ <div class="pf-u-font-size-sm">Account number:</div>
1672
+ <div class="pf-u-font-size-md">123456789</div>
1673
+ </span>
1674
+ </button>
1675
+ </li>
1676
+ <li class="pf-c-divider" role="separator"></li>
1677
+ <li class="pf-c-menu__list-item" role="none">
1678
+ <button
1679
+ class="pf-c-menu__item"
1680
+ type="button"
1681
+ role="menuitem"
1682
+ >
1683
+ <span class="pf-c-menu__item-main">
1684
+ <span class="pf-c-menu__item-text">My profile</span>
1685
+ </span>
1686
+ </button>
1687
+ </li>
1688
+ <li class="pf-c-menu__list-item" role="none">
1689
+ <button
1690
+ class="pf-c-menu__item"
1691
+ type="button"
1692
+ role="menuitem"
1693
+ >
1694
+ <span class="pf-c-menu__item-main">
1695
+ <span
1696
+ class="pf-c-menu__item-text"
1697
+ >User management</span>
1698
+ </span>
1699
+ </button>
1700
+ </li>
1701
+ <li class="pf-c-menu__list-item" role="none">
1702
+ <button
1703
+ class="pf-c-menu__item"
1704
+ type="button"
1705
+ role="menuitem"
1706
+ >
1707
+ <span class="pf-c-menu__item-main">
1708
+ <span class="pf-c-menu__item-text">Logout</span>
1709
+ </span>
1710
+ </button>
1711
+ </li>
1712
+ </ul>
1713
+ </section>
1714
+ <hr class="pf-c-divider pf-m-hidden-on-sm" />
1715
+ <section class="pf-c-menu__group">
1716
+ <ul class="pf-c-menu__list" role="menu">
1717
+ <li class="pf-c-menu__list-item" role="none">
1718
+ <button
1719
+ class="pf-c-menu__item"
1720
+ type="button"
1721
+ role="menuitem"
1722
+ aria-expanded="false"
1703
1723
  >
1704
- <button
1705
- class="pf-c-menu__item"
1706
- type="button"
1707
- disabled
1708
- role="menuitem"
1709
- >
1710
- <span class="pf-c-menu__item-description">
1711
- <div class="pf-u-font-size-sm">Account number:</div>
1712
- <div class="pf-u-font-size-md">123456789</div>
1713
- </span>
1714
- </button>
1715
- </li>
1716
- <li class="pf-c-divider" role="separator"></li>
1717
- <li class="pf-c-menu__list-item" role="none">
1718
- <button
1719
- class="pf-c-menu__item"
1720
- type="button"
1721
- role="menuitem"
1722
- >
1723
- <span class="pf-c-menu__item-main">
1724
- <span class="pf-c-menu__item-text">My profile</span>
1725
- </span>
1726
- </button>
1727
- </li>
1728
- <li class="pf-c-menu__list-item" role="none">
1729
- <button
1730
- class="pf-c-menu__item"
1731
- type="button"
1732
- role="menuitem"
1733
- >
1734
- <span class="pf-c-menu__item-main">
1735
- <span
1736
- class="pf-c-menu__item-text"
1737
- >User management</span>
1738
- </span>
1739
- </button>
1740
- </li>
1741
- <li class="pf-c-menu__list-item" role="none">
1742
- <button
1743
- class="pf-c-menu__item"
1744
- type="button"
1745
- role="menuitem"
1746
- >
1747
- <span class="pf-c-menu__item-main">
1748
- <span class="pf-c-menu__item-text">Logout</span>
1724
+ <span class="pf-c-menu__item-main">
1725
+ <span class="pf-c-menu__item-icon">
1726
+ <i
1727
+ class="fas fa-fw fa-cog"
1728
+ aria-hidden="true"
1729
+ ></i>
1749
1730
  </span>
1750
- </button>
1751
- </li>
1752
- </ul>
1753
- </section>
1754
- <hr class="pf-c-divider pf-m-hidden-on-sm" />
1755
- <section class="pf-c-menu__group">
1756
- <ul class="pf-c-menu__list" role="menu">
1757
- <li class="pf-c-menu__list-item" role="none">
1758
- <button
1759
- class="pf-c-menu__item"
1760
- type="button"
1761
- role="menuitem"
1762
- aria-expanded="false"
1763
- >
1764
- <span class="pf-c-menu__item-main">
1765
- <span class="pf-c-menu__item-icon">
1766
- <i
1767
- class="fas fa-fw fa-cog"
1768
- aria-hidden="true"
1769
- ></i>
1770
- </span>
1771
- <span class="pf-c-menu__item-text">Settings</span>
1772
- <span class="pf-c-menu__item-toggle-icon">
1773
- <i class="fas fa-angle-right"></i>
1774
- </span>
1731
+ <span class="pf-c-menu__item-text">Settings</span>
1732
+ <span class="pf-c-menu__item-toggle-icon">
1733
+ <i class="fas fa-angle-right"></i>
1775
1734
  </span>
1776
- </button>
1777
- <div class="pf-c-menu" hidden>
1778
- <div class="pf-c-menu__content">
1779
- <ul class="pf-c-menu__list" role="menu">
1780
- <li
1781
- class="pf-c-menu__list-item pf-m-drill-up"
1782
- role="none"
1735
+ </span>
1736
+ </button>
1737
+ <div class="pf-c-menu" hidden>
1738
+ <div class="pf-c-menu__content">
1739
+ <ul class="pf-c-menu__list" role="menu">
1740
+ <li
1741
+ class="pf-c-menu__list-item pf-m-drill-up"
1742
+ role="none"
1743
+ >
1744
+ <button
1745
+ class="pf-c-menu__item"
1746
+ type="button"
1747
+ role="menuitem"
1783
1748
  >
1784
- <button
1785
- class="pf-c-menu__item"
1786
- type="button"
1787
- role="menuitem"
1788
- >
1789
- <span class="pf-c-menu__item-main">
1790
- <span
1791
- class="pf-c-menu__item-toggle-icon"
1792
- >
1793
- <i class="fas fa-angle-left"></i>
1794
- </span>
1795
- <span class="pf-c-menu__item-icon">
1796
- <i
1797
- class="fas fa-fw fa-cog"
1798
- aria-hidden="true"
1799
- ></i>
1800
- </span>
1801
- <span
1802
- class="pf-c-menu__item-text"
1803
- >Settings</span>
1749
+ <span class="pf-c-menu__item-main">
1750
+ <span
1751
+ class="pf-c-menu__item-toggle-icon"
1752
+ >
1753
+ <i class="fas fa-angle-left"></i>
1804
1754
  </span>
1805
- </button>
1806
- </li>
1807
- <li class="pf-c-divider" role="separator"></li>
1808
- <li
1809
- class="pf-c-menu__list-item"
1810
- role="none"
1811
- >
1812
- <a
1813
- class="pf-c-menu__item"
1814
- href="#"
1815
- role="menuitem"
1816
- >
1817
- <span class="pf-c-menu__item-main">
1818
- <span
1819
- class="pf-c-menu__item-text"
1820
- >Customer support</span>
1755
+ <span class="pf-c-menu__item-icon">
1756
+ <i
1757
+ class="fas fa-fw fa-cog"
1758
+ aria-hidden="true"
1759
+ ></i>
1821
1760
  </span>
1822
- </a>
1823
- </li>
1824
- <li
1825
- class="pf-c-menu__list-item"
1826
- role="none"
1761
+ <span
1762
+ class="pf-c-menu__item-text"
1763
+ >Settings</span>
1764
+ </span>
1765
+ </button>
1766
+ </li>
1767
+ <li class="pf-c-divider" role="separator"></li>
1768
+ <li class="pf-c-menu__list-item" role="none">
1769
+ <a
1770
+ class="pf-c-menu__item"
1771
+ href="#"
1772
+ role="menuitem"
1827
1773
  >
1828
- <a
1829
- class="pf-c-menu__item"
1830
- href="#"
1831
- role="menuitem"
1832
- >
1833
- <span class="pf-c-menu__item-main">
1834
- <span
1835
- class="pf-c-menu__item-text"
1836
- >About</span>
1837
- </span>
1838
- </a>
1839
- </li>
1840
- </ul>
1841
- </div>
1774
+ <span class="pf-c-menu__item-main">
1775
+ <span
1776
+ class="pf-c-menu__item-text"
1777
+ >Customer support</span>
1778
+ </span>
1779
+ </a>
1780
+ </li>
1781
+ <li class="pf-c-menu__list-item" role="none">
1782
+ <a
1783
+ class="pf-c-menu__item"
1784
+ href="#"
1785
+ role="menuitem"
1786
+ >
1787
+ <span class="pf-c-menu__item-main">
1788
+ <span class="pf-c-menu__item-text">About</span>
1789
+ </span>
1790
+ </a>
1791
+ </li>
1792
+ </ul>
1842
1793
  </div>
1843
- </li>
1794
+ </div>
1795
+ </li>
1844
1796
 
1845
- <li class="pf-c-menu__list-item" role="none">
1846
- <button
1847
- class="pf-c-menu__item"
1848
- type="button"
1849
- role="menuitem"
1850
- aria-expanded="false"
1851
- >
1852
- <span class="pf-c-menu__item-main">
1853
- <span class="pf-c-menu__item-icon">
1854
- <i
1855
- class="fas fa-fw fa-pf-icon pf-icon-help"
1856
- aria-hidden="true"
1857
- ></i>
1858
- </span>
1859
- <span class="pf-c-menu__item-text">Help</span>
1860
- <span class="pf-c-menu__item-toggle-icon">
1861
- <i class="fas fa-angle-right"></i>
1862
- </span>
1797
+ <li class="pf-c-menu__list-item" role="none">
1798
+ <button
1799
+ class="pf-c-menu__item"
1800
+ type="button"
1801
+ role="menuitem"
1802
+ aria-expanded="false"
1803
+ >
1804
+ <span class="pf-c-menu__item-main">
1805
+ <span class="pf-c-menu__item-icon">
1806
+ <i
1807
+ class="fas fa-fw fa-pf-icon pf-icon-help"
1808
+ aria-hidden="true"
1809
+ ></i>
1810
+ </span>
1811
+ <span class="pf-c-menu__item-text">Help</span>
1812
+ <span class="pf-c-menu__item-toggle-icon">
1813
+ <i class="fas fa-angle-right"></i>
1863
1814
  </span>
1864
- </button>
1865
- <div class="pf-c-menu" hidden>
1866
- <div class="pf-c-menu__content">
1867
- <ul class="pf-c-menu__list" role="menu">
1868
- <li
1869
- class="pf-c-menu__list-item pf-m-drill-up"
1870
- role="none"
1815
+ </span>
1816
+ </button>
1817
+ <div class="pf-c-menu" hidden>
1818
+ <div class="pf-c-menu__content">
1819
+ <ul class="pf-c-menu__list" role="menu">
1820
+ <li
1821
+ class="pf-c-menu__list-item pf-m-drill-up"
1822
+ role="none"
1823
+ >
1824
+ <button
1825
+ class="pf-c-menu__item"
1826
+ type="button"
1827
+ role="menuitem"
1871
1828
  >
1872
- <button
1873
- class="pf-c-menu__item"
1874
- type="button"
1875
- role="menuitem"
1876
- >
1877
- <span class="pf-c-menu__item-main">
1878
- <span
1879
- class="pf-c-menu__item-toggle-icon"
1880
- >
1881
- <i class="fas fa-angle-left"></i>
1882
- </span>
1883
- <span class="pf-c-menu__item-icon">
1884
- <i
1885
- class="fas fa-fw fa-pf-icon pf-icon-help"
1886
- aria-hidden="true"
1887
- ></i>
1888
- </span>
1889
- <span
1890
- class="pf-c-menu__item-text"
1891
- >Help</span>
1829
+ <span class="pf-c-menu__item-main">
1830
+ <span
1831
+ class="pf-c-menu__item-toggle-icon"
1832
+ >
1833
+ <i class="fas fa-angle-left"></i>
1892
1834
  </span>
1893
- </button>
1894
- </li>
1895
- <li class="pf-c-divider" role="separator"></li>
1896
- <li
1897
- class="pf-c-menu__list-item"
1898
- role="none"
1899
- >
1900
- <a
1901
- class="pf-c-menu__item"
1902
- href="#"
1903
- role="menuitem"
1904
- >
1905
- <span class="pf-c-menu__item-main">
1906
- <span
1907
- class="pf-c-menu__item-text"
1908
- >Support options</span>
1835
+ <span class="pf-c-menu__item-icon">
1836
+ <i
1837
+ class="fas fa-fw fa-pf-icon pf-icon-help"
1838
+ aria-hidden="true"
1839
+ ></i>
1909
1840
  </span>
1910
- </a>
1911
- </li>
1912
- <li
1913
- class="pf-c-menu__list-item"
1914
- role="none"
1841
+ <span class="pf-c-menu__item-text">Help</span>
1842
+ </span>
1843
+ </button>
1844
+ </li>
1845
+ <li class="pf-c-divider" role="separator"></li>
1846
+ <li class="pf-c-menu__list-item" role="none">
1847
+ <a
1848
+ class="pf-c-menu__item"
1849
+ href="#"
1850
+ role="menuitem"
1851
+ >
1852
+ <span class="pf-c-menu__item-main">
1853
+ <span
1854
+ class="pf-c-menu__item-text"
1855
+ >Support options</span>
1856
+ </span>
1857
+ </a>
1858
+ </li>
1859
+ <li class="pf-c-menu__list-item" role="none">
1860
+ <a
1861
+ class="pf-c-menu__item"
1862
+ href="#"
1863
+ role="menuitem"
1864
+ >
1865
+ <span class="pf-c-menu__item-main">
1866
+ <span
1867
+ class="pf-c-menu__item-text"
1868
+ >Open support case</span>
1869
+ </span>
1870
+ </a>
1871
+ </li>
1872
+ <li class="pf-c-menu__list-item" role="none">
1873
+ <a
1874
+ class="pf-c-menu__item"
1875
+ href="#"
1876
+ role="menuitem"
1915
1877
  >
1916
- <a
1917
- class="pf-c-menu__item"
1918
- href="#"
1919
- role="menuitem"
1920
- >
1921
- <span class="pf-c-menu__item-main">
1922
- <span
1923
- class="pf-c-menu__item-text"
1924
- >Open support case</span>
1878
+ <span class="pf-c-menu__item-main">
1879
+ <span
1880
+ class="pf-c-menu__item-text"
1881
+ >API documentation</span>
1882
+ </span>
1883
+ </a>
1884
+ </li>
1885
+ </ul>
1886
+ </div>
1887
+ </div>
1888
+ </li>
1889
+
1890
+ <li class="pf-c-menu__list-item" role="none">
1891
+ <button
1892
+ class="pf-c-menu__item"
1893
+ type="button"
1894
+ role="menuitem"
1895
+ >
1896
+ <span class="pf-c-menu__item-main">
1897
+ <span class="pf-c-menu__item-icon">
1898
+ <i class="fas fa-fw fa-th" aria-hidden="true"></i>
1899
+ </span>
1900
+ <span
1901
+ class="pf-c-menu__item-text"
1902
+ >Application launcher</span>
1903
+ <span class="pf-c-menu__item-toggle-icon">
1904
+ <i class="fas fa-angle-right"></i>
1905
+ </span>
1906
+ </span>
1907
+ </button>
1908
+ <div class="pf-c-menu" hidden>
1909
+ <div class="pf-c-menu__header">
1910
+ <button
1911
+ class="pf-c-menu__item"
1912
+ type="button"
1913
+ role="menuitem"
1914
+ >
1915
+ <span class="pf-c-menu__item-main">
1916
+ <span class="pf-c-menu__item-toggle-icon">
1917
+ <i class="fas fa-angle-left"></i>
1918
+ </span>
1919
+ <span class="pf-c-menu__item-icon">
1920
+ <i
1921
+ class="fas fa-fw fa-th"
1922
+ aria-hidden="true"
1923
+ ></i>
1924
+ </span>
1925
+ <span
1926
+ class="pf-c-menu__item-text"
1927
+ >Application launcher</span>
1928
+ </span>
1929
+ </button>
1930
+ </div>
1931
+ <div class="pf-c-menu__search">
1932
+ <div class="pf-c-menu__search-input">
1933
+ <div class="pf-c-search-input">
1934
+ <div class="pf-c-search-input__bar">
1935
+ <span class="pf-c-search-input__text">
1936
+ <span class="pf-c-search-input__icon">
1937
+ <i
1938
+ class="fas fa-search fa-fw"
1939
+ aria-hidden="true"
1940
+ ></i>
1925
1941
  </span>
1926
- </a>
1927
- </li>
1928
- <li
1929
- class="pf-c-menu__list-item"
1930
- role="none"
1942
+ <input
1943
+ class="pf-c-search-input__text-input"
1944
+ type="text"
1945
+ placeholder="Search"
1946
+ aria-label="Search"
1947
+ />
1948
+ </span>
1949
+ </div>
1950
+ </div>
1951
+ </div>
1952
+ </div>
1953
+ <hr class="pf-c-divider" />
1954
+ <section class="pf-c-menu__group">
1955
+ <h1 class="pf-c-menu__group-title">Favorites</h1>
1956
+ <ul class="pf-c-menu__list" role="menu">
1957
+ <li class="pf-c-menu__list-item" role="none">
1958
+ <a
1959
+ class="pf-c-menu__item"
1960
+ href="#"
1961
+ role="menuitem"
1931
1962
  >
1932
- <a
1933
- class="pf-c-menu__item"
1934
- href="#"
1935
- role="menuitem"
1936
- >
1937
- <span class="pf-c-menu__item-main">
1938
- <span
1939
- class="pf-c-menu__item-text"
1940
- >API documentation</span>
1941
- </span>
1942
- </a>
1943
- </li>
1944
- </ul>
1945
- </div>
1946
- </div>
1947
- </li>
1948
-
1949
- <li class="pf-c-menu__list-item" role="none">
1950
- <button
1951
- class="pf-c-menu__item"
1952
- type="button"
1953
- role="menuitem"
1954
- >
1955
- <span class="pf-c-menu__item-main">
1956
- <span class="pf-c-menu__item-icon">
1957
- <i
1958
- class="fas fa-fw fa-th"
1959
- aria-hidden="true"
1960
- ></i>
1961
- </span>
1962
- <span
1963
- class="pf-c-menu__item-text"
1964
- >Application launcher</span>
1965
- <span class="pf-c-menu__item-toggle-icon">
1966
- <i class="fas fa-angle-right"></i>
1967
- </span>
1968
- </span>
1969
- </button>
1970
- <div class="pf-c-menu" hidden>
1971
- <div class="pf-c-menu__header">
1972
- <button
1973
- class="pf-c-menu__item"
1974
- type="button"
1975
- role="menuitem"
1976
- >
1977
- <span class="pf-c-menu__item-main">
1978
- <span class="pf-c-menu__item-toggle-icon">
1979
- <i class="fas fa-angle-left"></i>
1963
+ <span class="pf-c-menu__item-main">
1964
+ <span
1965
+ class="pf-c-menu__item-text"
1966
+ >Link 1</span>
1980
1967
  </span>
1981
- <span class="pf-c-menu__item-icon">
1968
+ </a>
1969
+ <button
1970
+ class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
1971
+ type="button"
1972
+ aria-label="Starred"
1973
+ >
1974
+ <span class="pf-c-menu__item-action-icon">
1982
1975
  <i
1983
- class="fas fa-fw fa-th"
1976
+ class="fas fa-star"
1984
1977
  aria-hidden="true"
1985
1978
  ></i>
1986
1979
  </span>
1987
- <span
1988
- class="pf-c-menu__item-text"
1989
- >Application launcher</span>
1990
- </span>
1991
- </button>
1992
- </div>
1993
- <div class="pf-c-menu__search">
1994
- <div class="pf-c-menu__search-input">
1995
- <div class="pf-c-search-input">
1996
- <div class="pf-c-search-input__bar">
1997
- <span class="pf-c-search-input__text">
1998
- <span class="pf-c-search-input__icon">
1999
- <i
2000
- class="fas fa-search fa-fw"
2001
- aria-hidden="true"
2002
- ></i>
2003
- </span>
2004
- <input
2005
- class="pf-c-search-input__text-input"
2006
- type="text"
2007
- placeholder="Search"
2008
- aria-label="Search"
2009
- />
2010
- </span>
2011
- </div>
2012
- </div>
2013
- </div>
2014
- </div>
2015
- <hr class="pf-c-divider" />
2016
- <section class="pf-c-menu__group">
2017
- <h1 class="pf-c-menu__group-title">Favorites</h1>
2018
- <ul class="pf-c-menu__list" role="menu">
2019
- <li
2020
- class="pf-c-menu__list-item"
2021
- role="none"
1980
+ </button>
1981
+ </li>
1982
+ <li class="pf-c-menu__list-item" role="none">
1983
+ <a
1984
+ class="pf-c-menu__item"
1985
+ href="#"
1986
+ role="menuitem"
1987
+ target="_blank"
2022
1988
  >
2023
- <a
2024
- class="pf-c-menu__item"
2025
- href="#"
2026
- role="menuitem"
2027
- >
2028
- <span class="pf-c-menu__item-main">
2029
- <span
2030
- class="pf-c-menu__item-text"
2031
- >Link 1</span>
2032
- </span>
2033
- </a>
2034
- <button
2035
- class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
2036
- type="button"
2037
- aria-label="Starred"
2038
- >
1989
+ <span class="pf-c-menu__item-main">
2039
1990
  <span
2040
- class="pf-c-menu__item-action-icon"
2041
- >
2042
- <i
2043
- class="fas fa-star"
2044
- aria-hidden="true"
2045
- ></i>
2046
- </span>
2047
- </button>
2048
- </li>
2049
- <li
2050
- class="pf-c-menu__list-item"
2051
- role="none"
2052
- >
2053
- <a
2054
- class="pf-c-menu__item"
2055
- href="#"
2056
- role="menuitem"
2057
- target="_blank"
2058
- >
2059
- <span class="pf-c-menu__item-main">
2060
- <span
2061
- class="pf-c-menu__item-text"
2062
- >Link 2</span>
2063
- <span
2064
- class="pf-c-menu__item-external-icon"
2065
- >
2066
- <i
2067
- class="fas fa-external-link-alt"
2068
- aria-hidden="true"
2069
- ></i>
2070
- </span>
2071
- <span
2072
- class="pf-screen-reader"
2073
- >(opens new window)</span>
2074
- </span>
2075
- </a>
2076
- <button
2077
- class="pf-c-menu__item-action pf-m-favorite"
2078
- type="button"
2079
- aria-label="Not starred"
2080
- >
1991
+ class="pf-c-menu__item-text"
1992
+ >Link 2</span>
2081
1993
  <span
2082
- class="pf-c-menu__item-action-icon"
1994
+ class="pf-c-menu__item-external-icon"
2083
1995
  >
2084
1996
  <i
2085
- class="fas fa-star"
1997
+ class="fas fa-external-link-alt"
2086
1998
  aria-hidden="true"
2087
1999
  ></i>
2088
2000
  </span>
2089
- </button>
2090
- </li>
2091
- </ul>
2092
- </section>
2093
- <hr class="pf-c-divider" />
2094
- <section class="pf-c-menu__group">
2095
- <h1 class="pf-c-menu__group-title">Group 1</h1>
2096
- <ul class="pf-c-menu__list" role="menu">
2097
- <li
2098
- class="pf-c-menu__list-item"
2099
- role="none"
2001
+ <span
2002
+ class="pf-screen-reader"
2003
+ >(opens new window)</span>
2004
+ </span>
2005
+ </a>
2006
+ <button
2007
+ class="pf-c-menu__item-action pf-m-favorite"
2008
+ type="button"
2009
+ aria-label="Not starred"
2100
2010
  >
2101
- <a
2102
- class="pf-c-menu__item"
2103
- href="#"
2104
- role="menuitem"
2105
- >
2106
- <span class="pf-c-menu__item-main">
2107
- <span
2108
- class="pf-c-menu__item-text"
2109
- >Link 1</span>
2110
- </span>
2111
- </a>
2112
- <button
2113
- class="pf-c-menu__item-action pf-m-favorite"
2114
- type="button"
2115
- aria-label="Not starred"
2116
- >
2011
+ <span class="pf-c-menu__item-action-icon">
2012
+ <i
2013
+ class="fas fa-star"
2014
+ aria-hidden="true"
2015
+ ></i>
2016
+ </span>
2017
+ </button>
2018
+ </li>
2019
+ </ul>
2020
+ </section>
2021
+ <hr class="pf-c-divider" />
2022
+ <section class="pf-c-menu__group">
2023
+ <h1 class="pf-c-menu__group-title">Group 1</h1>
2024
+ <ul class="pf-c-menu__list" role="menu">
2025
+ <li class="pf-c-menu__list-item" role="none">
2026
+ <a
2027
+ class="pf-c-menu__item"
2028
+ href="#"
2029
+ role="menuitem"
2030
+ >
2031
+ <span class="pf-c-menu__item-main">
2117
2032
  <span
2118
- class="pf-c-menu__item-action-icon"
2119
- >
2120
- <i
2121
- class="fas fa-star"
2122
- aria-hidden="true"
2123
- ></i>
2124
- </span>
2125
- </button>
2126
- </li>
2127
- <li
2128
- class="pf-c-menu__list-item"
2129
- role="none"
2033
+ class="pf-c-menu__item-text"
2034
+ >Link 1</span>
2035
+ </span>
2036
+ </a>
2037
+ <button
2038
+ class="pf-c-menu__item-action pf-m-favorite"
2039
+ type="button"
2040
+ aria-label="Not starred"
2130
2041
  >
2131
- <a
2132
- class="pf-c-menu__item"
2133
- href="#"
2134
- role="menuitem"
2135
- target="_blank"
2136
- >
2137
- <span class="pf-c-menu__item-main">
2138
- <span
2139
- class="pf-c-menu__item-text"
2140
- >Link 2</span>
2141
- <span
2142
- class="pf-c-menu__item-external-icon"
2143
- >
2144
- <i
2145
- class="fas fa-external-link-alt"
2146
- aria-hidden="true"
2147
- ></i>
2148
- </span>
2149
- <span
2150
- class="pf-screen-reader"
2151
- >(opens new window)</span>
2152
- </span>
2153
- </a>
2154
- <button
2155
- class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
2156
- type="button"
2157
- aria-label="Starred"
2158
- >
2042
+ <span class="pf-c-menu__item-action-icon">
2043
+ <i
2044
+ class="fas fa-star"
2045
+ aria-hidden="true"
2046
+ ></i>
2047
+ </span>
2048
+ </button>
2049
+ </li>
2050
+ <li class="pf-c-menu__list-item" role="none">
2051
+ <a
2052
+ class="pf-c-menu__item"
2053
+ href="#"
2054
+ role="menuitem"
2055
+ target="_blank"
2056
+ >
2057
+ <span class="pf-c-menu__item-main">
2058
+ <span
2059
+ class="pf-c-menu__item-text"
2060
+ >Link 2</span>
2159
2061
  <span
2160
- class="pf-c-menu__item-action-icon"
2062
+ class="pf-c-menu__item-external-icon"
2161
2063
  >
2162
2064
  <i
2163
- class="fas fa-star"
2065
+ class="fas fa-external-link-alt"
2164
2066
  aria-hidden="true"
2165
2067
  ></i>
2166
2068
  </span>
2167
- </button>
2168
- </li>
2169
- </ul>
2170
- </section>
2171
- </div>
2172
- </li>
2173
- </ul>
2174
- </section>
2175
- </div>
2069
+ <span
2070
+ class="pf-screen-reader"
2071
+ >(opens new window)</span>
2072
+ </span>
2073
+ </a>
2074
+ <button
2075
+ class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
2076
+ type="button"
2077
+ aria-label="Starred"
2078
+ >
2079
+ <span class="pf-c-menu__item-action-icon">
2080
+ <i
2081
+ class="fas fa-star"
2082
+ aria-hidden="true"
2083
+ ></i>
2084
+ </span>
2085
+ </button>
2086
+ </li>
2087
+ </ul>
2088
+ </section>
2089
+ </div>
2090
+ </li>
2091
+ </ul>
2092
+ </section>
2176
2093
  </div>
2177
2094
  </div>
2178
2095
  </div>
2179
2096
  </div>
2180
- <div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2181
- <div
2182
- class="pf-c-dropdown pf-m-full-height"
2183
- style="--pf-c-dropdown--MaxWidth: 20ch;"
2097
+ </div>
2098
+ <div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2099
+ <div
2100
+ class="pf-c-dropdown pf-m-full-height"
2101
+ style="--pf-c-dropdown--MaxWidth: 20ch;"
2102
+ >
2103
+ <button
2104
+ class="pf-c-dropdown__toggle"
2105
+ id="context-selector-in-sidebar-expanded-example-masthead-profile-button"
2106
+ aria-expanded="false"
2107
+ type="button"
2184
2108
  >
2185
- <button
2186
- class="pf-c-dropdown__toggle"
2187
- id="-profile-button"
2188
- aria-expanded="false"
2189
- type="button"
2190
- >
2191
- <span class="pf-c-dropdown__toggle-image">
2192
- <img
2193
- class="pf-c-avatar"
2194
- src="/assets/images/img_avatar.svg"
2195
- alt="Avatar image"
2196
- />
2197
- </span>
2198
- <span class="pf-c-dropdown__toggle-text">Ned Username</span>
2199
- <span class="pf-c-dropdown__toggle-icon">
2200
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2201
- </span>
2202
- </button>
2203
- <div class="pf-c-dropdown__menu" hidden>
2204
- <section class="pf-c-dropdown__group">
2205
- <div class="pf-c-dropdown__menu-item pf-m-text">
2206
- <div class="pf-u-font-size-sm">Account number:</div>
2207
- <div>123456789</div>
2208
- </div>
2209
- <div class="pf-c-dropdown__menu-item pf-m-text">
2210
- <div class="pf-u-font-size-sm">Username:</div>
2211
- <div>mshaksho@redhat.com</div>
2212
- </div>
2213
- </section>
2214
- <hr class="pf-c-divider" />
2215
- <section class="pf-c-dropdown__group">
2216
- <ul>
2217
- <li>
2218
- <a
2219
- class="pf-c-dropdown__menu-item"
2220
- href="#"
2221
- >My profile</a>
2222
- </li>
2223
- <li>
2224
- <a
2225
- class="pf-c-dropdown__menu-item"
2226
- href="#"
2227
- >User management</a>
2228
- </li>
2229
- <li>
2230
- <a class="pf-c-dropdown__menu-item" href="#">Logout</a>
2231
- </li>
2232
- </ul>
2233
- </section>
2234
- </div>
2109
+ <span class="pf-c-dropdown__toggle-image">
2110
+ <img
2111
+ class="pf-c-avatar"
2112
+ src="/assets/images/img_avatar.svg"
2113
+ alt="Avatar image"
2114
+ />
2115
+ </span>
2116
+ <span class="pf-c-dropdown__toggle-text">Ned Username</span>
2117
+ <span class="pf-c-dropdown__toggle-icon">
2118
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2119
+ </span>
2120
+ </button>
2121
+ <div class="pf-c-dropdown__menu" hidden>
2122
+ <section class="pf-c-dropdown__group">
2123
+ <div class="pf-c-dropdown__menu-item pf-m-text">
2124
+ <div class="pf-u-font-size-sm">Account number:</div>
2125
+ <div>123456789</div>
2126
+ </div>
2127
+ <div class="pf-c-dropdown__menu-item pf-m-text">
2128
+ <div class="pf-u-font-size-sm">Username:</div>
2129
+ <div>mshaksho@redhat.com</div>
2130
+ </div>
2131
+ </section>
2132
+ <hr class="pf-c-divider" />
2133
+ <section class="pf-c-dropdown__group">
2134
+ <ul>
2135
+ <li>
2136
+ <a class="pf-c-dropdown__menu-item" href="#">My profile</a>
2137
+ </li>
2138
+ <li>
2139
+ <a
2140
+ class="pf-c-dropdown__menu-item"
2141
+ href="#"
2142
+ >User management</a>
2143
+ </li>
2144
+ <li>
2145
+ <a class="pf-c-dropdown__menu-item" href="#">Logout</a>
2146
+ </li>
2147
+ </ul>
2148
+ </section>
2235
2149
  </div>
2236
2150
  </div>
2237
2151
  </div>
2238
2152
  </div>
2239
2153
  </div>
2240
2154
  </div>
2241
- </header>
2155
+ </div>
2242
2156
  </header>
2243
2157
  <div class="pf-c-page__sidebar">
2244
2158
  <div class="pf-c-page__sidebar-body pf-m-menu">
@@ -2370,7 +2284,7 @@ section: components
2370
2284
  <div class="pf-c-page__sidebar-body">
2371
2285
  <nav
2372
2286
  class="pf-c-nav"
2373
- id="context-selector-in-sidebar-expanded-primary-nav"
2287
+ id="context-selector-in-sidebar-expanded-example-primary-nav"
2374
2288
  aria-label="Global"
2375
2289
  >
2376
2290
  <ul class="pf-c-nav__list">
@@ -2400,11 +2314,45 @@ section: components
2400
2314
  <main
2401
2315
  class="pf-c-page__main"
2402
2316
  tabindex="-1"
2403
- id="main-content-context-selector-in-sidebar-expanded"
2317
+ id="main-content-context-selector-in-sidebar-expanded-example"
2404
2318
  >
2405
- <section
2406
- class="pf-c-page__main-section pf-m-limit-width pf-m-light pf-m-shadow-bottom"
2407
- >
2319
+ <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
2320
+ <div class="pf-c-page__main-body">
2321
+ <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
2322
+ <ol class="pf-c-breadcrumb__list">
2323
+ <li class="pf-c-breadcrumb__item">
2324
+ <a href="#" class="pf-c-breadcrumb__link">Section home</a>
2325
+ </li>
2326
+ <li class="pf-c-breadcrumb__item">
2327
+ <span class="pf-c-breadcrumb__item-divider">
2328
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2329
+ </span>
2330
+
2331
+ <a href="#" class="pf-c-breadcrumb__link">Section title</a>
2332
+ </li>
2333
+ <li class="pf-c-breadcrumb__item">
2334
+ <span class="pf-c-breadcrumb__item-divider">
2335
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2336
+ </span>
2337
+
2338
+ <a href="#" class="pf-c-breadcrumb__link">Section title</a>
2339
+ </li>
2340
+ <li class="pf-c-breadcrumb__item">
2341
+ <span class="pf-c-breadcrumb__item-divider">
2342
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2343
+ </span>
2344
+
2345
+ <a
2346
+ href="#"
2347
+ class="pf-c-breadcrumb__link pf-m-current"
2348
+ aria-current="page"
2349
+ >Section landing</a>
2350
+ </li>
2351
+ </ol>
2352
+ </nav>
2353
+ </div>
2354
+ </section>
2355
+ <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
2408
2356
  <div class="pf-c-page__main-body">
2409
2357
  <div class="pf-c-content">
2410
2358
  <h1>Main title</h1>
@@ -2412,9 +2360,7 @@ section: components
2412
2360
  </div>
2413
2361
  </div>
2414
2362
  </section>
2415
- <section
2416
- class="pf-c-page__main-section pf-m-limit-width pf-m-overflow-scroll"
2417
- >
2363
+ <section class="pf-c-page__main-section pf-m-limit-width">
2418
2364
  <div class="pf-c-page__main-body">
2419
2365
  <div class="pf-l-gallery pf-m-gutter">
2420
2366
  <div class="pf-c-card">
@@ -2450,13 +2396,6 @@ section: components
2450
2396
  </div>
2451
2397
  </div>
2452
2398
  </section>
2453
- <section
2454
- class="pf-c-page__main-section pf-m-limit-width pf-m-no-fill pf-m-light pf-m-shadow-top"
2455
- >
2456
- <div class="pf-c-page__main-body">
2457
- <p>PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.</p>
2458
- </div>
2459
- </section>
2460
2399
  </main>
2461
2400
  </div>
2462
2401
 
@@ -2465,15 +2404,14 @@ section: components
2465
2404
  ### Context selector in page content
2466
2405
 
2467
2406
  ```html isFullscreen
2468
- <div class="pf-c-page" id="context-selector-in-page-content-demo">
2407
+ <div class="pf-c-page" id="context-selector-in-page-content-example">
2469
2408
  <a
2470
2409
  class="pf-c-skip-to-content pf-c-button pf-m-primary"
2471
- href="#main-content-context-selector-in-page-content-demo"
2410
+ href="#main-content-context-selector-in-page-content-example"
2472
2411
  >Skip to content</a>
2473
-
2474
2412
  <header
2475
2413
  class="pf-c-masthead"
2476
- id="context-selector-in-page-content-demo-masthead"
2414
+ id="context-selector-in-page-content-example-masthead"
2477
2415
  >
2478
2416
  <span class="pf-c-masthead__toggle">
2479
2417
  <button
@@ -2505,7 +2443,7 @@ section: components
2505
2443
  <div class="pf-c-masthead__content">
2506
2444
  <div
2507
2445
  class="pf-c-toolbar pf-m-full-height pf-m-static"
2508
- id="context-selector-in-page-content-demo-masthead-toolbar"
2446
+ id="context-selector-in-page-content-example-masthead-toolbar"
2509
2447
  >
2510
2448
  <div class="pf-c-toolbar__content">
2511
2449
  <div class="pf-c-toolbar__content-section">
@@ -2519,7 +2457,7 @@ section: components
2519
2457
  aria-label="Notifications"
2520
2458
  >
2521
2459
  <span class="pf-c-notification-badge">
2522
- <i class="pf-icon-attention-bell" aria-hidden="true"></i>
2460
+ <i class="pf-icon-bell" aria-hidden="true"></i>
2523
2461
  </span>
2524
2462
  </button>
2525
2463
  </div>
@@ -2530,12 +2468,12 @@ section: components
2530
2468
  <nav
2531
2469
  class="pf-c-app-launcher"
2532
2470
  aria-label="Application launcher"
2533
- id="context-selector-in-page-content-demo-masthead-icon-group--app-launcher"
2471
+ id="context-selector-in-page-content-example-masthead-icon-group--app-launcher"
2534
2472
  >
2535
2473
  <button
2536
2474
  class="pf-c-app-launcher__toggle"
2537
2475
  type="button"
2538
- id="context-selector-in-page-content-demo-masthead-icon-group--app-launcher-button"
2476
+ id="context-selector-in-page-content-example-masthead-icon-group--app-launcher-button"
2539
2477
  aria-expanded="false"
2540
2478
  aria-label="Application launcher"
2541
2479
  >
@@ -2675,7 +2613,7 @@ section: components
2675
2613
  <div class="pf-c-dropdown">
2676
2614
  <button
2677
2615
  class="pf-c-dropdown__toggle pf-m-plain"
2678
- id="context-selector-in-page-content-demo-masthead-settings-button"
2616
+ id="context-selector-in-page-content-example-masthead-settings-button"
2679
2617
  aria-expanded="false"
2680
2618
  type="button"
2681
2619
  aria-label="Settings"
@@ -2684,7 +2622,7 @@ section: components
2684
2622
  </button>
2685
2623
  <ul
2686
2624
  class="pf-c-dropdown__menu pf-m-align-right"
2687
- aria-labelledby="context-selector-in-page-content-demo-masthead-settings-button"
2625
+ aria-labelledby="context-selector-in-page-content-example-masthead-settings-button"
2688
2626
  hidden
2689
2627
  >
2690
2628
  <li>
@@ -2706,7 +2644,7 @@ section: components
2706
2644
  <div class="pf-c-dropdown">
2707
2645
  <button
2708
2646
  class="pf-c-dropdown__toggle pf-m-plain"
2709
- id="context-selector-in-page-content-demo-masthead-help-button"
2647
+ id="context-selector-in-page-content-example-masthead-help-button"
2710
2648
  aria-expanded="false"
2711
2649
  type="button"
2712
2650
  aria-label="Help"
@@ -2715,7 +2653,7 @@ section: components
2715
2653
  </button>
2716
2654
  <ul
2717
2655
  class="pf-c-dropdown__menu pf-m-align-right"
2718
- aria-labelledby="context-selector-in-page-content-demo-masthead-help-button"
2656
+ aria-labelledby="context-selector-in-page-content-example-masthead-help-button"
2719
2657
  hidden
2720
2658
  >
2721
2659
  <li>
@@ -2766,9 +2704,7 @@ section: components
2766
2704
  >
2767
2705
  <span class="pf-c-menu__item-description">
2768
2706
  <div class="pf-u-font-size-sm">Username:</div>
2769
- <div
2770
- class="pf-u-font-size-md"
2771
- >mshaksho@redhat.com</div>
2707
+ <div class="pf-u-font-size-md">ned_username</div>
2772
2708
  </span>
2773
2709
  </button>
2774
2710
  </li>
@@ -3217,7 +3153,7 @@ section: components
3217
3153
  >
3218
3154
  <button
3219
3155
  class="pf-c-dropdown__toggle"
3220
- id="context-selector-in-page-content-demo-masthead-profile-button"
3156
+ id="context-selector-in-page-content-example-masthead-profile-button"
3221
3157
  aria-expanded="false"
3222
3158
  type="button"
3223
3159
  >
@@ -3273,7 +3209,7 @@ section: components
3273
3209
  <div class="pf-c-page__sidebar-body">
3274
3210
  <nav
3275
3211
  class="pf-c-nav"
3276
- id="context-selector-in-page-content-demo-primary-nav"
3212
+ id="context-selector-in-page-content-example-primary-nav"
3277
3213
  aria-label="Global"
3278
3214
  >
3279
3215
  <ul class="pf-c-nav__list">
@@ -3303,7 +3239,7 @@ section: components
3303
3239
  <main
3304
3240
  class="pf-c-page__main"
3305
3241
  tabindex="-1"
3306
- id="main-content-context-selector-in-page-content-demo"
3242
+ id="main-content-context-selector-in-page-content-example"
3307
3243
  >
3308
3244
  <section
3309
3245
  class="pf-c-page__main-section pf-m-limit-width pf-m-light pf-m-no-padding"
@@ -3317,12 +3253,15 @@ section: components
3317
3253
  class="pf-c-context-selector pf-m-page-insets pf-m-width-auto"
3318
3254
  style="--pf-c-context-selector--Width: 270px;"
3319
3255
  >
3320
- <span id="-context-selector-label" hidden>Selected project:</span>
3256
+ <span
3257
+ id="context-selector-in-page-content-example-context-selector-label"
3258
+ hidden
3259
+ >Selected project:</span>
3321
3260
  <button
3322
3261
  class="pf-c-context-selector__toggle pf-m-text pf-m-plain"
3323
3262
  aria-expanded="false"
3324
- id="-context-selector-toggle"
3325
- aria-labelledby="-context-selector-label -context-selector-toggle"
3263
+ id="context-selector-in-page-content-example-context-selector-toggle"
3264
+ aria-labelledby="context-selector-in-page-content-example-context-selector-label context-selector-in-page-content-example-context-selector-toggle"
3326
3265
  >
3327
3266
  <span
3328
3267
  class="pf-c-context-selector__toggle-text"
@@ -3443,15 +3382,18 @@ section: components
3443
3382
  </div>
3444
3383
  <div class="pf-c-toolbar__item">
3445
3384
  <div class="pf-c-select">
3446
- <span id="-select-label" hidden>Choose one</span>
3385
+ <span
3386
+ id="context-selector-in-page-content-example-select-label"
3387
+ hidden
3388
+ >Choose one</span>
3447
3389
 
3448
3390
  <button
3449
3391
  class="pf-c-select__toggle pf-m-plain"
3450
3392
  type="button"
3451
- id="-select-toggle"
3393
+ id="context-selector-in-page-content-example-select-toggle"
3452
3394
  aria-haspopup="true"
3453
3395
  aria-expanded="false"
3454
- aria-labelledby="-select-label -select-toggle"
3396
+ aria-labelledby="context-selector-in-page-content-example-select-label context-selector-in-page-content-example-select-toggle"
3455
3397
  >
3456
3398
  <div class="pf-c-select__toggle-wrapper">
3457
3399
  <span class="pf-c-select__toggle-text">All applications</span>
@@ -3464,7 +3406,7 @@ section: components
3464
3406
  <ul
3465
3407
  class="pf-c-select__menu"
3466
3408
  role="listbox"
3467
- aria-labelledby="-select-label"
3409
+ aria-labelledby="context-selector-in-page-content-example-select-label"
3468
3410
  hidden
3469
3411
  >
3470
3412
  <li role="presentation">