@patternfly/patternfly 4.210.0 → 4.211.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 (41) hide show
  1. package/RELEASE-NOTES.md +27 -0
  2. package/components/ExpandableSection/expandable-section.css +3 -0
  3. package/components/ExpandableSection/expandable-section.scss +4 -0
  4. package/components/Masthead/masthead.css +1 -1
  5. package/components/Masthead/masthead.scss +1 -1
  6. package/components/NotificationBadge/notification-badge.css +13 -1
  7. package/components/NotificationBadge/notification-badge.scss +13 -1
  8. package/components/NotificationBadge/themes/dark/notification-badge.scss +2 -0
  9. package/components/Page/page.css +1 -0
  10. package/components/Page/page.scss +1 -0
  11. package/docs/components/Dropdown/examples/Dropdown.md +2 -2
  12. package/docs/components/NotificationBadge/examples/NotificationBadge.md +81 -24
  13. package/docs/components/Tabs/examples/Tabs.md +866 -139
  14. package/docs/demos/AboutModal/examples/AboutModal.md +1 -12
  15. package/docs/demos/Alert/examples/Alert.md +3 -36
  16. package/docs/demos/BackToTop/examples/BackToTop.md +1 -12
  17. package/docs/demos/Banner/examples/Banner.md +2 -24
  18. package/docs/demos/Card/examples/Card.md +15 -3
  19. package/docs/demos/CardView/examples/CardView.md +1 -12
  20. package/docs/demos/ContextSelector/examples/ContextSelector.md +3 -36
  21. package/docs/demos/Dashboard/examples/Dashboard.md +1 -12
  22. package/docs/demos/DataList/examples/DataList.md +4 -48
  23. package/docs/demos/DescriptionList/examples/DescriptionList.md +5 -36
  24. package/docs/demos/Drawer/examples/Drawer.md +7 -60
  25. package/docs/demos/JumpLinks/examples/JumpLinks.md +6 -72
  26. package/docs/demos/Masthead/examples/Masthead.md +2 -24
  27. package/docs/demos/Modal/examples/Modal.md +6 -72
  28. package/docs/demos/Nav/examples/Nav.md +8 -96
  29. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +30 -23
  30. package/docs/demos/Page/examples/Page.md +9 -108
  31. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +19 -85
  32. package/docs/demos/Skeleton/examples/Skeleton.md +1 -12
  33. package/docs/demos/Table/examples/Table.md +14 -168
  34. package/docs/demos/Tabs/examples/Tabs.md +56 -96
  35. package/docs/demos/Toolbar/examples/Toolbar.md +1 -12
  36. package/docs/demos/Wizard/examples/Wizard.md +8 -96
  37. package/package.json +2 -2
  38. package/patternfly-no-reset.css +18 -2
  39. package/patternfly.css +18 -2
  40. package/patternfly.min.css +1 -1
  41. package/patternfly.min.css.map +1 -1
package/docs/demos/Nav/examples/Nav.md CHANGED
@@ -49,17 +49,6 @@ section: components
49
49
  <div
50
50
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
51
51
  >
52
- <div class="pf-c-toolbar__item">
53
- <button
54
- class="pf-c-button pf-m-plain"
55
- type="button"
56
- aria-label="Notifications"
57
- >
58
- <span class="pf-c-notification-badge">
59
- <i class="pf-icon-bell" aria-hidden="true"></i>
60
- </span>
61
- </button>
62
- </div>
63
52
  <div
64
53
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
65
54
  >
@@ -67,7 +56,7 @@ section: components
67
56
  <nav
68
57
  class="pf-c-app-launcher"
69
58
  aria-label="Application launcher"
70
- id="nav-basic-example-masthead-icon-group--app-launcher"
59
+ id="nav-basic-example-masthead-application-launcher"
71
60
  >
72
61
  <button
73
62
  class="pf-c-app-launcher__toggle"
@@ -971,17 +960,6 @@ section: components
971
960
  <div
972
961
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
973
962
  >
974
- <div class="pf-c-toolbar__item">
975
- <button
976
- class="pf-c-button pf-m-plain"
977
- type="button"
978
- aria-label="Notifications"
979
- >
980
- <span class="pf-c-notification-badge">
981
- <i class="pf-icon-bell" aria-hidden="true"></i>
982
- </span>
983
- </button>
984
- </div>
985
963
  <div
986
964
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
987
965
  >
@@ -989,7 +967,7 @@ section: components
989
967
  <nav
990
968
  class="pf-c-app-launcher"
991
969
  aria-label="Application launcher"
992
- id="nav-expandable-example-masthead-icon-group--app-launcher"
970
+ id="nav-expandable-example-masthead-application-launcher"
993
971
  >
994
972
  <button
995
973
  class="pf-c-app-launcher__toggle"
@@ -2011,17 +1989,6 @@ section: components
2011
1989
  <div
2012
1990
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
2013
1991
  >
2014
- <div class="pf-c-toolbar__item">
2015
- <button
2016
- class="pf-c-button pf-m-plain"
2017
- type="button"
2018
- aria-label="Notifications"
2019
- >
2020
- <span class="pf-c-notification-badge">
2021
- <i class="pf-icon-bell" aria-hidden="true"></i>
2022
- </span>
2023
- </button>
2024
- </div>
2025
1992
  <div
2026
1993
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
2027
1994
  >
@@ -2029,7 +1996,7 @@ section: components
2029
1996
  <nav
2030
1997
  class="pf-c-app-launcher"
2031
1998
  aria-label="Application launcher"
2032
- id="nav-horizontal-example-masthead-icon-group--app-launcher"
1999
+ id="nav-horizontal-example-masthead-application-launcher"
2033
2000
  >
2034
2001
  <button
2035
2002
  class="pf-c-app-launcher__toggle"
@@ -2902,17 +2869,6 @@ section: components
2902
2869
  <div
2903
2870
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
2904
2871
  >
2905
- <div class="pf-c-toolbar__item">
2906
- <button
2907
- class="pf-c-button pf-m-plain"
2908
- type="button"
2909
- aria-label="Notifications"
2910
- >
2911
- <span class="pf-c-notification-badge">
2912
- <i class="pf-icon-bell" aria-hidden="true"></i>
2913
- </span>
2914
- </button>
2915
- </div>
2916
2872
  <div
2917
2873
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
2918
2874
  >
@@ -2920,7 +2876,7 @@ section: components
2920
2876
  <nav
2921
2877
  class="pf-c-app-launcher"
2922
2878
  aria-label="Application launcher"
2923
- id="nav-horizontal-subnav-example-masthead-icon-group--app-launcher"
2879
+ id="nav-horizontal-subnav-example-masthead-application-launcher"
2924
2880
  >
2925
2881
  <button
2926
2882
  class="pf-c-app-launcher__toggle"
@@ -4001,17 +3957,6 @@ section: components
4001
3957
  <div
4002
3958
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
4003
3959
  >
4004
- <div class="pf-c-toolbar__item">
4005
- <button
4006
- class="pf-c-button pf-m-plain"
4007
- type="button"
4008
- aria-label="Notifications"
4009
- >
4010
- <span class="pf-c-notification-badge">
4011
- <i class="pf-icon-bell" aria-hidden="true"></i>
4012
- </span>
4013
- </button>
4014
- </div>
4015
3960
  <div
4016
3961
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
4017
3962
  >
@@ -4019,7 +3964,7 @@ section: components
4019
3964
  <nav
4020
3965
  class="pf-c-app-launcher"
4021
3966
  aria-label="Application launcher"
4022
- id="nav-horizontal-example-masthead-icon-group--app-launcher"
3967
+ id="nav-horizontal-example-masthead-application-launcher"
4023
3968
  >
4024
3969
  <button
4025
3970
  class="pf-c-app-launcher__toggle"
@@ -4932,17 +4877,6 @@ section: components
4932
4877
  <div
4933
4878
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
4934
4879
  >
4935
- <div class="pf-c-toolbar__item">
4936
- <button
4937
- class="pf-c-button pf-m-plain"
4938
- type="button"
4939
- aria-label="Notifications"
4940
- >
4941
- <span class="pf-c-notification-badge">
4942
- <i class="pf-icon-bell" aria-hidden="true"></i>
4943
- </span>
4944
- </button>
4945
- </div>
4946
4880
  <div
4947
4881
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
4948
4882
  >
@@ -4950,7 +4884,7 @@ section: components
4950
4884
  <nav
4951
4885
  class="pf-c-app-launcher"
4952
4886
  aria-label="Application launcher"
4953
- id="nav-legacy-teriary-example-masthead-icon-group--app-launcher"
4887
+ id="nav-legacy-teriary-example-masthead-application-launcher"
4954
4888
  >
4955
4889
  <button
4956
4890
  class="pf-c-app-launcher__toggle"
@@ -5976,17 +5910,6 @@ section: components
5976
5910
  <div
5977
5911
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
5978
5912
  >
5979
- <div class="pf-c-toolbar__item">
5980
- <button
5981
- class="pf-c-button pf-m-plain"
5982
- type="button"
5983
- aria-label="Notifications"
5984
- >
5985
- <span class="pf-c-notification-badge">
5986
- <i class="pf-icon-bell" aria-hidden="true"></i>
5987
- </span>
5988
- </button>
5989
- </div>
5990
5913
  <div
5991
5914
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
5992
5915
  >
@@ -5994,7 +5917,7 @@ section: components
5994
5917
  <nav
5995
5918
  class="pf-c-app-launcher"
5996
5919
  aria-label="Application launcher"
5997
- id="nav-grouped-nav-example-masthead-icon-group--app-launcher"
5920
+ id="nav-grouped-nav-example-masthead-application-launcher"
5998
5921
  >
5999
5922
  <button
6000
5923
  class="pf-c-app-launcher__toggle"
@@ -6918,17 +6841,6 @@ section: components
6918
6841
  <div
6919
6842
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
6920
6843
  >
6921
- <div class="pf-c-toolbar__item">
6922
- <button
6923
- class="pf-c-button pf-m-plain"
6924
- type="button"
6925
- aria-label="Notifications"
6926
- >
6927
- <span class="pf-c-notification-badge">
6928
- <i class="pf-icon-bell" aria-hidden="true"></i>
6929
- </span>
6930
- </button>
6931
- </div>
6932
6844
  <div
6933
6845
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
6934
6846
  >
@@ -6936,7 +6848,7 @@ section: components
6936
6848
  <nav
6937
6849
  class="pf-c-app-launcher"
6938
6850
  aria-label="Application launcher"
6939
- id="nav-light-theme-example-masthead-icon-group--app-launcher"
6851
+ id="nav-light-theme-example-masthead-application-launcher"
6940
6852
  >
6941
6853
  <button
6942
6854
  class="pf-c-app-launcher__toggle"
package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md CHANGED
@@ -55,7 +55,7 @@ section: components
55
55
  type="button"
56
56
  aria-label="Notifications"
57
57
  >
58
- <span class="pf-c-notification-badge">
58
+ <span class="pf-c-notification-badge pf-m-read">
59
59
  <i class="pf-icon-bell" aria-hidden="true"></i>
60
60
  </span>
61
61
  </button>
@@ -67,7 +67,7 @@ section: components
67
67
  <nav
68
68
  class="pf-c-app-launcher"
69
69
  aria-label="Application launcher"
70
- id="drawer-collapsed-example-page-masthead-icon-group--app-launcher"
70
+ id="drawer-collapsed-example-page-masthead-application-launcher"
71
71
  >
72
72
  <button
73
73
  class="pf-c-app-launcher__toggle"
@@ -931,7 +931,7 @@ section: components
931
931
  <div class="pf-c-notification-drawer">
932
932
  <div class="pf-c-notification-drawer__header">
933
933
  <h1 class="pf-c-notification-drawer__header-title">Notifications</h1>
934
- <span class="pf-c-notification-drawer__header-status">3 unread</span>
934
+ <span class="pf-c-notification-drawer__header-status">0 unread</span>
935
935
  <div class="pf-c-notification-drawer__header-action">
936
936
  <div class="pf-c-dropdown">
937
937
  <button
@@ -986,8 +986,7 @@ section: components
986
986
  <div class="pf-c-notification-drawer__body">
987
987
  <ul class="pf-c-notification-drawer__list">
988
988
  <li
989
- class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-info"
990
- tabindex="0"
989
+ class="pf-c-notification-drawer__list-item pf-m-read pf-m-info"
991
990
  >
992
991
  <div class="pf-c-notification-drawer__list-item-header">
993
992
  <span
@@ -999,7 +998,7 @@ section: components
999
998
  class="pf-c-notification-drawer__list-item-header-title"
1000
999
  >
1001
1000
  <span class="pf-screen-reader">Info notification:</span>
1002
- Unread
1001
+ Read
1003
1002
  info notification title
1004
1003
  </h2>
1005
1004
  </div>
@@ -1062,8 +1061,7 @@ section: components
1062
1061
  </li>
1063
1062
 
1064
1063
  <li
1065
- class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
1066
- tabindex="0"
1064
+ class="pf-c-notification-drawer__list-item pf-m-read pf-m-default"
1067
1065
  >
1068
1066
  <div class="pf-c-notification-drawer__list-item-header">
1069
1067
  <span
@@ -1075,7 +1073,7 @@ section: components
1075
1073
  class="pf-c-notification-drawer__list-item-header-title"
1076
1074
  >
1077
1075
  <span class="pf-screen-reader">Default notification:</span>
1078
- Unread
1076
+ Read
1079
1077
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
1080
1078
  </h2>
1081
1079
  </div>
@@ -1138,8 +1136,7 @@ section: components
1138
1136
  </li>
1139
1137
 
1140
1138
  <li
1141
- class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
1142
- tabindex="0"
1139
+ class="pf-c-notification-drawer__list-item pf-m-read pf-m-default"
1143
1140
  >
1144
1141
  <div class="pf-c-notification-drawer__list-item-header">
1145
1142
  <span
@@ -1151,7 +1148,7 @@ section: components
1151
1148
  class="pf-c-notification-drawer__list-item-header-title"
1152
1149
  >
1153
1150
  <span class="pf-screen-reader">Default notification:</span>
1154
- Unread
1151
+ Read
1155
1152
  recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
1156
1153
  </h2>
1157
1154
  </div>
@@ -1570,9 +1567,10 @@ section: components
1570
1567
  <button
1571
1568
  class="pf-c-button pf-m-plain"
1572
1569
  type="button"
1570
+ aria-expanded="true"
1573
1571
  aria-label="Notifications"
1574
1572
  >
1575
- <span class="pf-c-notification-badge pf-m-read">
1573
+ <span class="pf-c-notification-badge pf-m-read pf-m-expanded">
1576
1574
  <i class="pf-icon-bell" aria-hidden="true"></i>
1577
1575
  </span>
1578
1576
  </button>
@@ -1584,7 +1582,7 @@ section: components
1584
1582
  <nav
1585
1583
  class="pf-c-app-launcher"
1586
1584
  aria-label="Application launcher"
1587
- id="drawer-expanded-read-example-page-masthead-icon-group--app-launcher"
1585
+ id="drawer-expanded-read-example-page-masthead-application-launcher"
1588
1586
  >
1589
1587
  <button
1590
1588
  class="pf-c-app-launcher__toggle"
@@ -3087,9 +3085,12 @@ section: components
3087
3085
  <button
3088
3086
  class="pf-c-button pf-m-plain"
3089
3087
  type="button"
3090
- aria-label="Notifications"
3088
+ aria-expanded="true"
3089
+ aria-label="Unread notifications"
3091
3090
  >
3092
- <span class="pf-c-notification-badge pf-m-unread">
3091
+ <span
3092
+ class="pf-c-notification-badge pf-m-unread pf-m-expanded"
3093
+ >
3093
3094
  <i class="pf-icon-bell" aria-hidden="true"></i>
3094
3095
  </span>
3095
3096
  </button>
@@ -3101,7 +3102,7 @@ section: components
3101
3102
  <nav
3102
3103
  class="pf-c-app-launcher"
3103
3104
  aria-label="Application launcher"
3104
- id="drawer-expanded-unread-example-page-masthead-icon-group--app-launcher"
3105
+ id="drawer-expanded-unread-example-page-masthead-application-launcher"
3105
3106
  >
3106
3107
  <button
3107
3108
  class="pf-c-app-launcher__toggle"
@@ -4607,9 +4608,12 @@ section: components
4607
4608
  <button
4608
4609
  class="pf-c-button pf-m-plain"
4609
4610
  type="button"
4610
- aria-label="Notifications"
4611
+ aria-expanded="true"
4612
+ aria-label="Attention notifications"
4611
4613
  >
4612
- <span class="pf-c-notification-badge pf-m-attention">
4614
+ <span
4615
+ class="pf-c-notification-badge pf-m-attention pf-m-expanded"
4616
+ >
4613
4617
  <i class="pf-icon-attention-bell" aria-hidden="true"></i>
4614
4618
  </span>
4615
4619
  </button>
@@ -4621,7 +4625,7 @@ section: components
4621
4625
  <nav
4622
4626
  class="pf-c-app-launcher"
4623
4627
  aria-label="Application launcher"
4624
- id="drawer-expanded-attention-example-page-masthead-icon-group--app-launcher"
4628
+ id="drawer-expanded-attention-example-page-masthead-application-launcher"
4625
4629
  >
4626
4630
  <button
4627
4631
  class="pf-c-app-launcher__toggle"
@@ -6126,9 +6130,12 @@ section: components
6126
6130
  <button
6127
6131
  class="pf-c-button pf-m-plain"
6128
6132
  type="button"
6129
- aria-label="Notifications"
6133
+ aria-expanded="true"
6134
+ aria-label="Unread notifications"
6130
6135
  >
6131
- <span class="pf-c-notification-badge pf-m-unread">
6136
+ <span
6137
+ class="pf-c-notification-badge pf-m-unread pf-m-expanded"
6138
+ >
6132
6139
  <i class="pf-icon-bell" aria-hidden="true"></i>
6133
6140
  </span>
6134
6141
  </button>
@@ -6140,7 +6147,7 @@ section: components
6140
6147
  <nav
6141
6148
  class="pf-c-app-launcher"
6142
6149
  aria-label="Application launcher"
6143
- id="drawer-expanded-with-groups-example-page-masthead-icon-group--app-launcher"
6150
+ id="drawer-expanded-with-groups-example-page-masthead-application-launcher"
6144
6151
  >
6145
6152
  <button
6146
6153
  class="pf-c-app-launcher__toggle"
package/docs/demos/Page/examples/Page.md CHANGED
@@ -50,17 +50,6 @@ wrapperTag: div
50
50
  <div
51
51
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
52
52
  >
53
- <div class="pf-c-toolbar__item">
54
- <button
55
- class="pf-c-button pf-m-plain"
56
- type="button"
57
- aria-label="Notifications"
58
- >
59
- <span class="pf-c-notification-badge">
60
- <i class="pf-icon-bell" aria-hidden="true"></i>
61
- </span>
62
- </button>
63
- </div>
64
53
  <div
65
54
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
66
55
  >
@@ -68,7 +57,7 @@ wrapperTag: div
68
57
  <nav
69
58
  class="pf-c-app-launcher"
70
59
  aria-label="Application launcher"
71
- id="page-demo-basic-masthead-icon-group--app-launcher"
60
+ id="page-demo-basic-masthead-application-launcher"
72
61
  >
73
62
  <button
74
63
  class="pf-c-app-launcher__toggle"
@@ -970,17 +959,6 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
970
959
  <div
971
960
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
972
961
  >
973
- <div class="pf-c-toolbar__item">
974
- <button
975
- class="pf-c-button pf-m-plain"
976
- type="button"
977
- aria-label="Notifications"
978
- >
979
- <span class="pf-c-notification-badge">
980
- <i class="pf-icon-bell" aria-hidden="true"></i>
981
- </span>
982
- </button>
983
- </div>
984
962
  <div
985
963
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
986
964
  >
@@ -988,7 +966,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
988
966
  <nav
989
967
  class="pf-c-app-launcher"
990
968
  aria-label="Application launcher"
991
- id="page-demo-full-height-masthead-icon-group--app-launcher"
969
+ id="page-demo-full-height-masthead-application-launcher"
992
970
  >
993
971
  <button
994
972
  class="pf-c-app-launcher__toggle"
@@ -1895,17 +1873,6 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
1895
1873
  <div
1896
1874
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1897
1875
  >
1898
- <div class="pf-c-toolbar__item">
1899
- <button
1900
- class="pf-c-button pf-m-plain"
1901
- type="button"
1902
- aria-label="Notifications"
1903
- >
1904
- <span class="pf-c-notification-badge">
1905
- <i class="pf-icon-bell" aria-hidden="true"></i>
1906
- </span>
1907
- </button>
1908
- </div>
1909
1876
  <div
1910
1877
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1911
1878
  >
@@ -1913,7 +1880,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
1913
1880
  <nav
1914
1881
  class="pf-c-app-launcher"
1915
1882
  aria-label="Application launcher"
1916
- id="page-demo-sticky-top-horizontal-subnav-masthead-icon-group--app-launcher"
1883
+ id="page-demo-sticky-top-horizontal-subnav-masthead-application-launcher"
1917
1884
  >
1918
1885
  <button
1919
1886
  class="pf-c-app-launcher__toggle"
@@ -2977,17 +2944,6 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
2977
2944
  <div
2978
2945
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
2979
2946
  >
2980
- <div class="pf-c-toolbar__item">
2981
- <button
2982
- class="pf-c-button pf-m-plain"
2983
- type="button"
2984
- aria-label="Notifications"
2985
- >
2986
- <span class="pf-c-notification-badge">
2987
- <i class="pf-icon-bell" aria-hidden="true"></i>
2988
- </span>
2989
- </button>
2990
- </div>
2991
2947
  <div
2992
2948
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
2993
2949
  >
@@ -2995,7 +2951,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
2995
2951
  <nav
2996
2952
  class="pf-c-app-launcher"
2997
2953
  aria-label="Application launcher"
2998
- id="page-demo-sticky-top-breadcrumb-masthead-icon-group--app-launcher"
2954
+ id="page-demo-sticky-top-breadcrumb-masthead-application-launcher"
2999
2955
  >
3000
2956
  <button
3001
2957
  class="pf-c-app-launcher__toggle"
@@ -4021,17 +3977,6 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
4021
3977
  <div
4022
3978
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
4023
3979
  >
4024
- <div class="pf-c-toolbar__item">
4025
- <button
4026
- class="pf-c-button pf-m-plain"
4027
- type="button"
4028
- aria-label="Notifications"
4029
- >
4030
- <span class="pf-c-notification-badge">
4031
- <i class="pf-icon-bell" aria-hidden="true"></i>
4032
- </span>
4033
- </button>
4034
- </div>
4035
3980
  <div
4036
3981
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
4037
3982
  >
@@ -4039,7 +3984,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
4039
3984
  <nav
4040
3985
  class="pf-c-app-launcher"
4041
3986
  aria-label="Application launcher"
4042
- id="page-demo-sticky-top-breadcrumb-masthead-icon-group--app-launcher"
3987
+ id="page-demo-sticky-top-breadcrumb-masthead-application-launcher"
4043
3988
  >
4044
3989
  <button
4045
3990
  class="pf-c-app-launcher__toggle"
@@ -5068,17 +5013,6 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
5068
5013
  <div
5069
5014
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
5070
5015
  >
5071
- <div class="pf-c-toolbar__item">
5072
- <button
5073
- class="pf-c-button pf-m-plain"
5074
- type="button"
5075
- aria-label="Notifications"
5076
- >
5077
- <span class="pf-c-notification-badge">
5078
- <i class="pf-icon-bell" aria-hidden="true"></i>
5079
- </span>
5080
- </button>
5081
- </div>
5082
5016
  <div
5083
5017
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
5084
5018
  >
@@ -5086,7 +5020,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
5086
5020
  <nav
5087
5021
  class="pf-c-app-launcher"
5088
5022
  aria-label="Application launcher"
5089
- id="page-demo-sticky-top-section-group-masthead-icon-group--app-launcher"
5023
+ id="page-demo-sticky-top-section-group-masthead-application-launcher"
5090
5024
  >
5091
5025
  <button
5092
5026
  class="pf-c-app-launcher__toggle"
@@ -6112,17 +6046,6 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
6112
6046
  <div
6113
6047
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
6114
6048
  >
6115
- <div class="pf-c-toolbar__item">
6116
- <button
6117
- class="pf-c-button pf-m-plain"
6118
- type="button"
6119
- aria-label="Notifications"
6120
- >
6121
- <span class="pf-c-notification-badge">
6122
- <i class="pf-icon-bell" aria-hidden="true"></i>
6123
- </span>
6124
- </button>
6125
- </div>
6126
6049
  <div
6127
6050
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
6128
6051
  >
@@ -6130,7 +6053,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
6130
6053
  <nav
6131
6054
  class="pf-c-app-launcher"
6132
6055
  aria-label="Application launcher"
6133
- id="page-demo-sticky-section-bottom-masthead-icon-group--app-launcher"
6056
+ id="page-demo-sticky-section-bottom-masthead-application-launcher"
6134
6057
  >
6135
6058
  <button
6136
6059
  class="pf-c-app-launcher__toggle"
@@ -7161,17 +7084,6 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
7161
7084
  <div
7162
7085
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
7163
7086
  >
7164
- <div class="pf-c-toolbar__item">
7165
- <button
7166
- class="pf-c-button pf-m-plain"
7167
- type="button"
7168
- aria-label="Notifications"
7169
- >
7170
- <span class="pf-c-notification-badge">
7171
- <i class="pf-icon-bell" aria-hidden="true"></i>
7172
- </span>
7173
- </button>
7174
- </div>
7175
7087
  <div
7176
7088
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
7177
7089
  >
@@ -7179,7 +7091,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
7179
7091
  <nav
7180
7092
  class="pf-c-app-launcher"
7181
7093
  aria-label="Application launcher"
7182
- id="page-demo-overflow-scroll-masthead-icon-group--app-launcher"
7094
+ id="page-demo-overflow-scroll-masthead-application-launcher"
7183
7095
  >
7184
7096
  <button
7185
7097
  class="pf-c-app-launcher__toggle"
@@ -8215,17 +8127,6 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
8215
8127
  <div
8216
8128
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
8217
8129
  >
8218
- <div class="pf-c-toolbar__item">
8219
- <button
8220
- class="pf-c-button pf-m-plain"
8221
- type="button"
8222
- aria-label="Notifications"
8223
- >
8224
- <span class="pf-c-notification-badge">
8225
- <i class="pf-icon-bell" aria-hidden="true"></i>
8226
- </span>
8227
- </button>
8228
- </div>
8229
8130
  <div
8230
8131
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
8231
8132
  >
@@ -8233,7 +8134,7 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
8233
8134
  <nav
8234
8135
  class="pf-c-app-launcher"
8235
8136
  aria-label="Application launcher"
8236
- id="page-demo-centered-section-masthead-icon-group--app-launcher"
8137
+ id="page-demo-centered-section-masthead-application-launcher"
8237
8138
  >
8238
8139
  <button
8239
8140
  class="pf-c-app-launcher__toggle"