@patternfly/patternfly 4.177.1 → 4.178.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.
@@ -12,6 +12,7 @@ wrapperTag: div
12
12
  class="pf-c-skip-to-content pf-c-button pf-m-primary"
13
13
  href="#main-content-page-demo-basic"
14
14
  >Skip to content</a>
15
+
15
16
  <header class="pf-c-masthead" id="page-demo-basic-masthead">
16
17
  <span class="pf-c-masthead__toggle">
17
18
  <button
@@ -64,6 +65,141 @@ wrapperTag: div
64
65
  <div
65
66
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
66
67
  >
68
+ <div class="pf-c-toolbar__item">
69
+ <nav
70
+ class="pf-c-app-launcher"
71
+ aria-label="Application launcher"
72
+ id="page-demo-basic-masthead-icon-group--app-launcher"
73
+ >
74
+ <button
75
+ class="pf-c-app-launcher__toggle"
76
+ type="button"
77
+ id="-button"
78
+ aria-expanded="false"
79
+ aria-label="Application launcher"
80
+ >
81
+ <i class="fas fa-th" aria-hidden="true"></i>
82
+ </button>
83
+ <div
84
+ class="pf-c-app-launcher__menu pf-m-align-right"
85
+ hidden
86
+ >
87
+ <div class="pf-c-app-launcher__menu-search">
88
+ <input
89
+ class="pf-c-form-control"
90
+ type="search"
91
+ aria-label="Type to filter"
92
+ placeholder="Filter by name..."
93
+ id="page-demo-basic-masthead-application-launcher-text-input"
94
+ name="textInput1"
95
+ />
96
+ </div>
97
+ <section class="pf-c-app-launcher__group">
98
+ <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
99
+ <ul>
100
+ <li
101
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
102
+ >
103
+ <a class="pf-c-app-launcher__menu-item">
104
+ Link 1
105
+ <span
106
+ class="pf-c-app-launcher__menu-item-external-icon"
107
+ >
108
+ <i
109
+ class="fas fa-external-link-alt"
110
+ aria-hidden="true"
111
+ ></i>
112
+ </span>
113
+ <span class="pf-screen-reader">(opens new window)</span>
114
+ </a>
115
+ <button
116
+ class="pf-c-app-launcher__menu-item pf-m-action"
117
+ type="button"
118
+ aria-label="Favorite"
119
+ >
120
+ <i class="fas fa-star" aria-hidden="true"></i>
121
+ </button>
122
+ </li>
123
+ <li
124
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
125
+ >
126
+ <a class="pf-c-app-launcher__menu-item">
127
+ Link 2
128
+ <span
129
+ class="pf-c-app-launcher__menu-item-external-icon"
130
+ >
131
+ <i
132
+ class="fas fa-external-link-alt"
133
+ aria-hidden="true"
134
+ ></i>
135
+ </span>
136
+ <span class="pf-screen-reader">(opens new window)</span>
137
+ </a>
138
+ <button
139
+ class="pf-c-app-launcher__menu-item pf-m-action"
140
+ type="button"
141
+ aria-label="Favorite"
142
+ >
143
+ <i class="fas fa-star" aria-hidden="true"></i>
144
+ </button>
145
+ </li>
146
+ </ul>
147
+ </section>
148
+ <hr class="pf-c-divider" />
149
+ <section class="pf-c-app-launcher__group">
150
+ <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
151
+ <ul>
152
+ <li
153
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
154
+ >
155
+ <a class="pf-c-app-launcher__menu-item">
156
+ Link 1
157
+ <span
158
+ class="pf-c-app-launcher__menu-item-external-icon"
159
+ >
160
+ <i
161
+ class="fas fa-external-link-alt"
162
+ aria-hidden="true"
163
+ ></i>
164
+ </span>
165
+ <span class="pf-screen-reader">(opens new window)</span>
166
+ </a>
167
+ <button
168
+ class="pf-c-app-launcher__menu-item pf-m-action"
169
+ type="button"
170
+ aria-label="Favorite"
171
+ >
172
+ <i class="fas fa-star" aria-hidden="true"></i>
173
+ </button>
174
+ </li>
175
+ <li
176
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
177
+ >
178
+ <a class="pf-c-app-launcher__menu-item">
179
+ Link 2
180
+ <span
181
+ class="pf-c-app-launcher__menu-item-external-icon"
182
+ >
183
+ <i
184
+ class="fas fa-external-link-alt"
185
+ aria-hidden="true"
186
+ ></i>
187
+ </span>
188
+ <span class="pf-screen-reader">(opens new window)</span>
189
+ </a>
190
+ <button
191
+ class="pf-c-app-launcher__menu-item pf-m-action"
192
+ type="button"
193
+ aria-label="Favorite"
194
+ >
195
+ <i class="fas fa-star" aria-hidden="true"></i>
196
+ </button>
197
+ </li>
198
+ </ul>
199
+ </section>
200
+ </div>
201
+ </nav>
202
+ </div>
67
203
  <div class="pf-c-toolbar__item">
68
204
  <div class="pf-c-dropdown">
69
205
  <button
@@ -104,7 +240,7 @@ wrapperTag: div
104
240
  type="button"
105
241
  aria-label="Help"
106
242
  >
107
- <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
243
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
108
244
  </button>
109
245
  <ul
110
246
  class="pf-c-dropdown__menu pf-m-align-right"
@@ -732,6 +868,7 @@ wrapperTag: div
732
868
  class="pf-c-skip-to-content pf-c-button pf-m-primary"
733
869
  href="#main-content-page-demo-sticky-top-horizontal-subnav"
734
870
  >Skip to content</a>
871
+
735
872
  <header
736
873
  class="pf-c-masthead"
737
874
  id="page-demo-sticky-top-horizontal-subnav-masthead"
@@ -787,6 +924,141 @@ wrapperTag: div
787
924
  <div
788
925
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
789
926
  >
927
+ <div class="pf-c-toolbar__item">
928
+ <nav
929
+ class="pf-c-app-launcher"
930
+ aria-label="Application launcher"
931
+ id="page-demo-sticky-top-horizontal-subnav-masthead-icon-group--app-launcher"
932
+ >
933
+ <button
934
+ class="pf-c-app-launcher__toggle"
935
+ type="button"
936
+ id="-button"
937
+ aria-expanded="false"
938
+ aria-label="Application launcher"
939
+ >
940
+ <i class="fas fa-th" aria-hidden="true"></i>
941
+ </button>
942
+ <div
943
+ class="pf-c-app-launcher__menu pf-m-align-right"
944
+ hidden
945
+ >
946
+ <div class="pf-c-app-launcher__menu-search">
947
+ <input
948
+ class="pf-c-form-control"
949
+ type="search"
950
+ aria-label="Type to filter"
951
+ placeholder="Filter by name..."
952
+ id="page-demo-sticky-top-horizontal-subnav-masthead-application-launcher-text-input"
953
+ name="textInput1"
954
+ />
955
+ </div>
956
+ <section class="pf-c-app-launcher__group">
957
+ <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
958
+ <ul>
959
+ <li
960
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
961
+ >
962
+ <a class="pf-c-app-launcher__menu-item">
963
+ Link 1
964
+ <span
965
+ class="pf-c-app-launcher__menu-item-external-icon"
966
+ >
967
+ <i
968
+ class="fas fa-external-link-alt"
969
+ aria-hidden="true"
970
+ ></i>
971
+ </span>
972
+ <span class="pf-screen-reader">(opens new window)</span>
973
+ </a>
974
+ <button
975
+ class="pf-c-app-launcher__menu-item pf-m-action"
976
+ type="button"
977
+ aria-label="Favorite"
978
+ >
979
+ <i class="fas fa-star" aria-hidden="true"></i>
980
+ </button>
981
+ </li>
982
+ <li
983
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
984
+ >
985
+ <a class="pf-c-app-launcher__menu-item">
986
+ Link 2
987
+ <span
988
+ class="pf-c-app-launcher__menu-item-external-icon"
989
+ >
990
+ <i
991
+ class="fas fa-external-link-alt"
992
+ aria-hidden="true"
993
+ ></i>
994
+ </span>
995
+ <span class="pf-screen-reader">(opens new window)</span>
996
+ </a>
997
+ <button
998
+ class="pf-c-app-launcher__menu-item pf-m-action"
999
+ type="button"
1000
+ aria-label="Favorite"
1001
+ >
1002
+ <i class="fas fa-star" aria-hidden="true"></i>
1003
+ </button>
1004
+ </li>
1005
+ </ul>
1006
+ </section>
1007
+ <hr class="pf-c-divider" />
1008
+ <section class="pf-c-app-launcher__group">
1009
+ <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
1010
+ <ul>
1011
+ <li
1012
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
1013
+ >
1014
+ <a class="pf-c-app-launcher__menu-item">
1015
+ Link 1
1016
+ <span
1017
+ class="pf-c-app-launcher__menu-item-external-icon"
1018
+ >
1019
+ <i
1020
+ class="fas fa-external-link-alt"
1021
+ aria-hidden="true"
1022
+ ></i>
1023
+ </span>
1024
+ <span class="pf-screen-reader">(opens new window)</span>
1025
+ </a>
1026
+ <button
1027
+ class="pf-c-app-launcher__menu-item pf-m-action"
1028
+ type="button"
1029
+ aria-label="Favorite"
1030
+ >
1031
+ <i class="fas fa-star" aria-hidden="true"></i>
1032
+ </button>
1033
+ </li>
1034
+ <li
1035
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1036
+ >
1037
+ <a class="pf-c-app-launcher__menu-item">
1038
+ Link 2
1039
+ <span
1040
+ class="pf-c-app-launcher__menu-item-external-icon"
1041
+ >
1042
+ <i
1043
+ class="fas fa-external-link-alt"
1044
+ aria-hidden="true"
1045
+ ></i>
1046
+ </span>
1047
+ <span class="pf-screen-reader">(opens new window)</span>
1048
+ </a>
1049
+ <button
1050
+ class="pf-c-app-launcher__menu-item pf-m-action"
1051
+ type="button"
1052
+ aria-label="Favorite"
1053
+ >
1054
+ <i class="fas fa-star" aria-hidden="true"></i>
1055
+ </button>
1056
+ </li>
1057
+ </ul>
1058
+ </section>
1059
+ </div>
1060
+ </nav>
1061
+ </div>
790
1062
  <div class="pf-c-toolbar__item">
791
1063
  <div class="pf-c-dropdown">
792
1064
  <button
@@ -827,7 +1099,7 @@ wrapperTag: div
827
1099
  type="button"
828
1100
  aria-label="Help"
829
1101
  >
830
- <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
1102
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
831
1103
  </button>
832
1104
  <ul
833
1105
  class="pf-c-dropdown__menu pf-m-align-right"
@@ -1699,6 +1971,7 @@ wrapperTag: div
1699
1971
  class="pf-c-skip-to-content pf-c-button pf-m-primary"
1700
1972
  href="#main-content-page-demo-sticky-top-breadcrumb"
1701
1973
  >Skip to content</a>
1974
+
1702
1975
  <header class="pf-c-masthead" id="page-demo-sticky-top-breadcrumb-masthead">
1703
1976
  <span class="pf-c-masthead__toggle">
1704
1977
  <button
@@ -1751,6 +2024,141 @@ wrapperTag: div
1751
2024
  <div
1752
2025
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1753
2026
  >
2027
+ <div class="pf-c-toolbar__item">
2028
+ <nav
2029
+ class="pf-c-app-launcher"
2030
+ aria-label="Application launcher"
2031
+ id="page-demo-sticky-top-breadcrumb-masthead-icon-group--app-launcher"
2032
+ >
2033
+ <button
2034
+ class="pf-c-app-launcher__toggle"
2035
+ type="button"
2036
+ id="-button"
2037
+ aria-expanded="false"
2038
+ aria-label="Application launcher"
2039
+ >
2040
+ <i class="fas fa-th" aria-hidden="true"></i>
2041
+ </button>
2042
+ <div
2043
+ class="pf-c-app-launcher__menu pf-m-align-right"
2044
+ hidden
2045
+ >
2046
+ <div class="pf-c-app-launcher__menu-search">
2047
+ <input
2048
+ class="pf-c-form-control"
2049
+ type="search"
2050
+ aria-label="Type to filter"
2051
+ placeholder="Filter by name..."
2052
+ id="page-demo-sticky-top-breadcrumb-masthead-application-launcher-text-input"
2053
+ name="textInput1"
2054
+ />
2055
+ </div>
2056
+ <section class="pf-c-app-launcher__group">
2057
+ <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
2058
+ <ul>
2059
+ <li
2060
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
2061
+ >
2062
+ <a class="pf-c-app-launcher__menu-item">
2063
+ Link 1
2064
+ <span
2065
+ class="pf-c-app-launcher__menu-item-external-icon"
2066
+ >
2067
+ <i
2068
+ class="fas fa-external-link-alt"
2069
+ aria-hidden="true"
2070
+ ></i>
2071
+ </span>
2072
+ <span class="pf-screen-reader">(opens new window)</span>
2073
+ </a>
2074
+ <button
2075
+ class="pf-c-app-launcher__menu-item pf-m-action"
2076
+ type="button"
2077
+ aria-label="Favorite"
2078
+ >
2079
+ <i class="fas fa-star" aria-hidden="true"></i>
2080
+ </button>
2081
+ </li>
2082
+ <li
2083
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
2084
+ >
2085
+ <a class="pf-c-app-launcher__menu-item">
2086
+ Link 2
2087
+ <span
2088
+ class="pf-c-app-launcher__menu-item-external-icon"
2089
+ >
2090
+ <i
2091
+ class="fas fa-external-link-alt"
2092
+ aria-hidden="true"
2093
+ ></i>
2094
+ </span>
2095
+ <span class="pf-screen-reader">(opens new window)</span>
2096
+ </a>
2097
+ <button
2098
+ class="pf-c-app-launcher__menu-item pf-m-action"
2099
+ type="button"
2100
+ aria-label="Favorite"
2101
+ >
2102
+ <i class="fas fa-star" aria-hidden="true"></i>
2103
+ </button>
2104
+ </li>
2105
+ </ul>
2106
+ </section>
2107
+ <hr class="pf-c-divider" />
2108
+ <section class="pf-c-app-launcher__group">
2109
+ <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
2110
+ <ul>
2111
+ <li
2112
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
2113
+ >
2114
+ <a class="pf-c-app-launcher__menu-item">
2115
+ Link 1
2116
+ <span
2117
+ class="pf-c-app-launcher__menu-item-external-icon"
2118
+ >
2119
+ <i
2120
+ class="fas fa-external-link-alt"
2121
+ aria-hidden="true"
2122
+ ></i>
2123
+ </span>
2124
+ <span class="pf-screen-reader">(opens new window)</span>
2125
+ </a>
2126
+ <button
2127
+ class="pf-c-app-launcher__menu-item pf-m-action"
2128
+ type="button"
2129
+ aria-label="Favorite"
2130
+ >
2131
+ <i class="fas fa-star" aria-hidden="true"></i>
2132
+ </button>
2133
+ </li>
2134
+ <li
2135
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
2136
+ >
2137
+ <a class="pf-c-app-launcher__menu-item">
2138
+ Link 2
2139
+ <span
2140
+ class="pf-c-app-launcher__menu-item-external-icon"
2141
+ >
2142
+ <i
2143
+ class="fas fa-external-link-alt"
2144
+ aria-hidden="true"
2145
+ ></i>
2146
+ </span>
2147
+ <span class="pf-screen-reader">(opens new window)</span>
2148
+ </a>
2149
+ <button
2150
+ class="pf-c-app-launcher__menu-item pf-m-action"
2151
+ type="button"
2152
+ aria-label="Favorite"
2153
+ >
2154
+ <i class="fas fa-star" aria-hidden="true"></i>
2155
+ </button>
2156
+ </li>
2157
+ </ul>
2158
+ </section>
2159
+ </div>
2160
+ </nav>
2161
+ </div>
1754
2162
  <div class="pf-c-toolbar__item">
1755
2163
  <div class="pf-c-dropdown">
1756
2164
  <button
@@ -1791,7 +2199,7 @@ wrapperTag: div
1791
2199
  type="button"
1792
2200
  aria-label="Help"
1793
2201
  >
1794
- <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
2202
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1795
2203
  </button>
1796
2204
  <ul
1797
2205
  class="pf-c-dropdown__menu pf-m-align-right"
@@ -2625,6 +3033,7 @@ wrapperTag: div
2625
3033
  class="pf-c-skip-to-content pf-c-button pf-m-primary"
2626
3034
  href="#main-content-page-demo-sticky-top-section-group"
2627
3035
  >Skip to content</a>
3036
+
2628
3037
  <header
2629
3038
  class="pf-c-masthead"
2630
3039
  id="page-demo-sticky-top-section-group-masthead"
@@ -2680,6 +3089,141 @@ wrapperTag: div
2680
3089
  <div
2681
3090
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
2682
3091
  >
3092
+ <div class="pf-c-toolbar__item">
3093
+ <nav
3094
+ class="pf-c-app-launcher"
3095
+ aria-label="Application launcher"
3096
+ id="page-demo-sticky-top-section-group-masthead-icon-group--app-launcher"
3097
+ >
3098
+ <button
3099
+ class="pf-c-app-launcher__toggle"
3100
+ type="button"
3101
+ id="-button"
3102
+ aria-expanded="false"
3103
+ aria-label="Application launcher"
3104
+ >
3105
+ <i class="fas fa-th" aria-hidden="true"></i>
3106
+ </button>
3107
+ <div
3108
+ class="pf-c-app-launcher__menu pf-m-align-right"
3109
+ hidden
3110
+ >
3111
+ <div class="pf-c-app-launcher__menu-search">
3112
+ <input
3113
+ class="pf-c-form-control"
3114
+ type="search"
3115
+ aria-label="Type to filter"
3116
+ placeholder="Filter by name..."
3117
+ id="page-demo-sticky-top-section-group-masthead-application-launcher-text-input"
3118
+ name="textInput1"
3119
+ />
3120
+ </div>
3121
+ <section class="pf-c-app-launcher__group">
3122
+ <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
3123
+ <ul>
3124
+ <li
3125
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
3126
+ >
3127
+ <a class="pf-c-app-launcher__menu-item">
3128
+ Link 1
3129
+ <span
3130
+ class="pf-c-app-launcher__menu-item-external-icon"
3131
+ >
3132
+ <i
3133
+ class="fas fa-external-link-alt"
3134
+ aria-hidden="true"
3135
+ ></i>
3136
+ </span>
3137
+ <span class="pf-screen-reader">(opens new window)</span>
3138
+ </a>
3139
+ <button
3140
+ class="pf-c-app-launcher__menu-item pf-m-action"
3141
+ type="button"
3142
+ aria-label="Favorite"
3143
+ >
3144
+ <i class="fas fa-star" aria-hidden="true"></i>
3145
+ </button>
3146
+ </li>
3147
+ <li
3148
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
3149
+ >
3150
+ <a class="pf-c-app-launcher__menu-item">
3151
+ Link 2
3152
+ <span
3153
+ class="pf-c-app-launcher__menu-item-external-icon"
3154
+ >
3155
+ <i
3156
+ class="fas fa-external-link-alt"
3157
+ aria-hidden="true"
3158
+ ></i>
3159
+ </span>
3160
+ <span class="pf-screen-reader">(opens new window)</span>
3161
+ </a>
3162
+ <button
3163
+ class="pf-c-app-launcher__menu-item pf-m-action"
3164
+ type="button"
3165
+ aria-label="Favorite"
3166
+ >
3167
+ <i class="fas fa-star" aria-hidden="true"></i>
3168
+ </button>
3169
+ </li>
3170
+ </ul>
3171
+ </section>
3172
+ <hr class="pf-c-divider" />
3173
+ <section class="pf-c-app-launcher__group">
3174
+ <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
3175
+ <ul>
3176
+ <li
3177
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
3178
+ >
3179
+ <a class="pf-c-app-launcher__menu-item">
3180
+ Link 1
3181
+ <span
3182
+ class="pf-c-app-launcher__menu-item-external-icon"
3183
+ >
3184
+ <i
3185
+ class="fas fa-external-link-alt"
3186
+ aria-hidden="true"
3187
+ ></i>
3188
+ </span>
3189
+ <span class="pf-screen-reader">(opens new window)</span>
3190
+ </a>
3191
+ <button
3192
+ class="pf-c-app-launcher__menu-item pf-m-action"
3193
+ type="button"
3194
+ aria-label="Favorite"
3195
+ >
3196
+ <i class="fas fa-star" aria-hidden="true"></i>
3197
+ </button>
3198
+ </li>
3199
+ <li
3200
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
3201
+ >
3202
+ <a class="pf-c-app-launcher__menu-item">
3203
+ Link 2
3204
+ <span
3205
+ class="pf-c-app-launcher__menu-item-external-icon"
3206
+ >
3207
+ <i
3208
+ class="fas fa-external-link-alt"
3209
+ aria-hidden="true"
3210
+ ></i>
3211
+ </span>
3212
+ <span class="pf-screen-reader">(opens new window)</span>
3213
+ </a>
3214
+ <button
3215
+ class="pf-c-app-launcher__menu-item pf-m-action"
3216
+ type="button"
3217
+ aria-label="Favorite"
3218
+ >
3219
+ <i class="fas fa-star" aria-hidden="true"></i>
3220
+ </button>
3221
+ </li>
3222
+ </ul>
3223
+ </section>
3224
+ </div>
3225
+ </nav>
3226
+ </div>
2683
3227
  <div class="pf-c-toolbar__item">
2684
3228
  <div class="pf-c-dropdown">
2685
3229
  <button
@@ -2720,7 +3264,7 @@ wrapperTag: div
2720
3264
  type="button"
2721
3265
  aria-label="Help"
2722
3266
  >
2723
- <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
3267
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
2724
3268
  </button>
2725
3269
  <ul
2726
3270
  class="pf-c-dropdown__menu pf-m-align-right"
@@ -3554,6 +4098,7 @@ wrapperTag: div
3554
4098
  class="pf-c-skip-to-content pf-c-button pf-m-primary"
3555
4099
  href="#main-content-page-demo-sticky-section-bottom"
3556
4100
  >Skip to content</a>
4101
+
3557
4102
  <header class="pf-c-masthead" id="page-demo-sticky-section-bottom-masthead">
3558
4103
  <span class="pf-c-masthead__toggle">
3559
4104
  <button
@@ -3606,6 +4151,141 @@ wrapperTag: div
3606
4151
  <div
3607
4152
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
3608
4153
  >
4154
+ <div class="pf-c-toolbar__item">
4155
+ <nav
4156
+ class="pf-c-app-launcher"
4157
+ aria-label="Application launcher"
4158
+ id="page-demo-sticky-section-bottom-masthead-icon-group--app-launcher"
4159
+ >
4160
+ <button
4161
+ class="pf-c-app-launcher__toggle"
4162
+ type="button"
4163
+ id="-button"
4164
+ aria-expanded="false"
4165
+ aria-label="Application launcher"
4166
+ >
4167
+ <i class="fas fa-th" aria-hidden="true"></i>
4168
+ </button>
4169
+ <div
4170
+ class="pf-c-app-launcher__menu pf-m-align-right"
4171
+ hidden
4172
+ >
4173
+ <div class="pf-c-app-launcher__menu-search">
4174
+ <input
4175
+ class="pf-c-form-control"
4176
+ type="search"
4177
+ aria-label="Type to filter"
4178
+ placeholder="Filter by name..."
4179
+ id="page-demo-sticky-section-bottom-masthead-application-launcher-text-input"
4180
+ name="textInput1"
4181
+ />
4182
+ </div>
4183
+ <section class="pf-c-app-launcher__group">
4184
+ <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
4185
+ <ul>
4186
+ <li
4187
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
4188
+ >
4189
+ <a class="pf-c-app-launcher__menu-item">
4190
+ Link 1
4191
+ <span
4192
+ class="pf-c-app-launcher__menu-item-external-icon"
4193
+ >
4194
+ <i
4195
+ class="fas fa-external-link-alt"
4196
+ aria-hidden="true"
4197
+ ></i>
4198
+ </span>
4199
+ <span class="pf-screen-reader">(opens new window)</span>
4200
+ </a>
4201
+ <button
4202
+ class="pf-c-app-launcher__menu-item pf-m-action"
4203
+ type="button"
4204
+ aria-label="Favorite"
4205
+ >
4206
+ <i class="fas fa-star" aria-hidden="true"></i>
4207
+ </button>
4208
+ </li>
4209
+ <li
4210
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
4211
+ >
4212
+ <a class="pf-c-app-launcher__menu-item">
4213
+ Link 2
4214
+ <span
4215
+ class="pf-c-app-launcher__menu-item-external-icon"
4216
+ >
4217
+ <i
4218
+ class="fas fa-external-link-alt"
4219
+ aria-hidden="true"
4220
+ ></i>
4221
+ </span>
4222
+ <span class="pf-screen-reader">(opens new window)</span>
4223
+ </a>
4224
+ <button
4225
+ class="pf-c-app-launcher__menu-item pf-m-action"
4226
+ type="button"
4227
+ aria-label="Favorite"
4228
+ >
4229
+ <i class="fas fa-star" aria-hidden="true"></i>
4230
+ </button>
4231
+ </li>
4232
+ </ul>
4233
+ </section>
4234
+ <hr class="pf-c-divider" />
4235
+ <section class="pf-c-app-launcher__group">
4236
+ <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
4237
+ <ul>
4238
+ <li
4239
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
4240
+ >
4241
+ <a class="pf-c-app-launcher__menu-item">
4242
+ Link 1
4243
+ <span
4244
+ class="pf-c-app-launcher__menu-item-external-icon"
4245
+ >
4246
+ <i
4247
+ class="fas fa-external-link-alt"
4248
+ aria-hidden="true"
4249
+ ></i>
4250
+ </span>
4251
+ <span class="pf-screen-reader">(opens new window)</span>
4252
+ </a>
4253
+ <button
4254
+ class="pf-c-app-launcher__menu-item pf-m-action"
4255
+ type="button"
4256
+ aria-label="Favorite"
4257
+ >
4258
+ <i class="fas fa-star" aria-hidden="true"></i>
4259
+ </button>
4260
+ </li>
4261
+ <li
4262
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
4263
+ >
4264
+ <a class="pf-c-app-launcher__menu-item">
4265
+ Link 2
4266
+ <span
4267
+ class="pf-c-app-launcher__menu-item-external-icon"
4268
+ >
4269
+ <i
4270
+ class="fas fa-external-link-alt"
4271
+ aria-hidden="true"
4272
+ ></i>
4273
+ </span>
4274
+ <span class="pf-screen-reader">(opens new window)</span>
4275
+ </a>
4276
+ <button
4277
+ class="pf-c-app-launcher__menu-item pf-m-action"
4278
+ type="button"
4279
+ aria-label="Favorite"
4280
+ >
4281
+ <i class="fas fa-star" aria-hidden="true"></i>
4282
+ </button>
4283
+ </li>
4284
+ </ul>
4285
+ </section>
4286
+ </div>
4287
+ </nav>
4288
+ </div>
3609
4289
  <div class="pf-c-toolbar__item">
3610
4290
  <div class="pf-c-dropdown">
3611
4291
  <button
@@ -3646,7 +4326,7 @@ wrapperTag: div
3646
4326
  type="button"
3647
4327
  aria-label="Help"
3648
4328
  >
3649
- <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
4329
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
3650
4330
  </button>
3651
4331
  <ul
3652
4332
  class="pf-c-dropdown__menu pf-m-align-right"
@@ -4485,6 +5165,7 @@ wrapperTag: div
4485
5165
  class="pf-c-skip-to-content pf-c-button pf-m-primary"
4486
5166
  href="#main-content-page-demo-overflow-scroll"
4487
5167
  >Skip to content</a>
5168
+
4488
5169
  <header class="pf-c-masthead" id="page-demo-overflow-scroll-masthead">
4489
5170
  <span class="pf-c-masthead__toggle">
4490
5171
  <button
@@ -4537,6 +5218,141 @@ wrapperTag: div
4537
5218
  <div
4538
5219
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
4539
5220
  >
5221
+ <div class="pf-c-toolbar__item">
5222
+ <nav
5223
+ class="pf-c-app-launcher"
5224
+ aria-label="Application launcher"
5225
+ id="page-demo-overflow-scroll-masthead-icon-group--app-launcher"
5226
+ >
5227
+ <button
5228
+ class="pf-c-app-launcher__toggle"
5229
+ type="button"
5230
+ id="-button"
5231
+ aria-expanded="false"
5232
+ aria-label="Application launcher"
5233
+ >
5234
+ <i class="fas fa-th" aria-hidden="true"></i>
5235
+ </button>
5236
+ <div
5237
+ class="pf-c-app-launcher__menu pf-m-align-right"
5238
+ hidden
5239
+ >
5240
+ <div class="pf-c-app-launcher__menu-search">
5241
+ <input
5242
+ class="pf-c-form-control"
5243
+ type="search"
5244
+ aria-label="Type to filter"
5245
+ placeholder="Filter by name..."
5246
+ id="page-demo-overflow-scroll-masthead-application-launcher-text-input"
5247
+ name="textInput1"
5248
+ />
5249
+ </div>
5250
+ <section class="pf-c-app-launcher__group">
5251
+ <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
5252
+ <ul>
5253
+ <li
5254
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
5255
+ >
5256
+ <a class="pf-c-app-launcher__menu-item">
5257
+ Link 1
5258
+ <span
5259
+ class="pf-c-app-launcher__menu-item-external-icon"
5260
+ >
5261
+ <i
5262
+ class="fas fa-external-link-alt"
5263
+ aria-hidden="true"
5264
+ ></i>
5265
+ </span>
5266
+ <span class="pf-screen-reader">(opens new window)</span>
5267
+ </a>
5268
+ <button
5269
+ class="pf-c-app-launcher__menu-item pf-m-action"
5270
+ type="button"
5271
+ aria-label="Favorite"
5272
+ >
5273
+ <i class="fas fa-star" aria-hidden="true"></i>
5274
+ </button>
5275
+ </li>
5276
+ <li
5277
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
5278
+ >
5279
+ <a class="pf-c-app-launcher__menu-item">
5280
+ Link 2
5281
+ <span
5282
+ class="pf-c-app-launcher__menu-item-external-icon"
5283
+ >
5284
+ <i
5285
+ class="fas fa-external-link-alt"
5286
+ aria-hidden="true"
5287
+ ></i>
5288
+ </span>
5289
+ <span class="pf-screen-reader">(opens new window)</span>
5290
+ </a>
5291
+ <button
5292
+ class="pf-c-app-launcher__menu-item pf-m-action"
5293
+ type="button"
5294
+ aria-label="Favorite"
5295
+ >
5296
+ <i class="fas fa-star" aria-hidden="true"></i>
5297
+ </button>
5298
+ </li>
5299
+ </ul>
5300
+ </section>
5301
+ <hr class="pf-c-divider" />
5302
+ <section class="pf-c-app-launcher__group">
5303
+ <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
5304
+ <ul>
5305
+ <li
5306
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
5307
+ >
5308
+ <a class="pf-c-app-launcher__menu-item">
5309
+ Link 1
5310
+ <span
5311
+ class="pf-c-app-launcher__menu-item-external-icon"
5312
+ >
5313
+ <i
5314
+ class="fas fa-external-link-alt"
5315
+ aria-hidden="true"
5316
+ ></i>
5317
+ </span>
5318
+ <span class="pf-screen-reader">(opens new window)</span>
5319
+ </a>
5320
+ <button
5321
+ class="pf-c-app-launcher__menu-item pf-m-action"
5322
+ type="button"
5323
+ aria-label="Favorite"
5324
+ >
5325
+ <i class="fas fa-star" aria-hidden="true"></i>
5326
+ </button>
5327
+ </li>
5328
+ <li
5329
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
5330
+ >
5331
+ <a class="pf-c-app-launcher__menu-item">
5332
+ Link 2
5333
+ <span
5334
+ class="pf-c-app-launcher__menu-item-external-icon"
5335
+ >
5336
+ <i
5337
+ class="fas fa-external-link-alt"
5338
+ aria-hidden="true"
5339
+ ></i>
5340
+ </span>
5341
+ <span class="pf-screen-reader">(opens new window)</span>
5342
+ </a>
5343
+ <button
5344
+ class="pf-c-app-launcher__menu-item pf-m-action"
5345
+ type="button"
5346
+ aria-label="Favorite"
5347
+ >
5348
+ <i class="fas fa-star" aria-hidden="true"></i>
5349
+ </button>
5350
+ </li>
5351
+ </ul>
5352
+ </section>
5353
+ </div>
5354
+ </nav>
5355
+ </div>
4540
5356
  <div class="pf-c-toolbar__item">
4541
5357
  <div class="pf-c-dropdown">
4542
5358
  <button
@@ -4577,7 +5393,7 @@ wrapperTag: div
4577
5393
  type="button"
4578
5394
  aria-label="Help"
4579
5395
  >
4580
- <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
5396
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
4581
5397
  </button>
4582
5398
  <ul
4583
5399
  class="pf-c-dropdown__menu pf-m-align-right"
@@ -5420,6 +6236,7 @@ wrapperTag: div
5420
6236
  class="pf-c-skip-to-content pf-c-button pf-m-primary"
5421
6237
  href="#main-content-page-demo-centered-contentt"
5422
6238
  >Skip to content</a>
6239
+
5423
6240
  <header class="pf-c-masthead" id="page-demo-centered-contentt-masthead">
5424
6241
  <span class="pf-c-masthead__toggle">
5425
6242
  <button
@@ -5472,6 +6289,141 @@ wrapperTag: div
5472
6289
  <div
5473
6290
  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
5474
6291
  >
6292
+ <div class="pf-c-toolbar__item">
6293
+ <nav
6294
+ class="pf-c-app-launcher"
6295
+ aria-label="Application launcher"
6296
+ id="page-demo-centered-contentt-masthead-icon-group--app-launcher"
6297
+ >
6298
+ <button
6299
+ class="pf-c-app-launcher__toggle"
6300
+ type="button"
6301
+ id="-button"
6302
+ aria-expanded="false"
6303
+ aria-label="Application launcher"
6304
+ >
6305
+ <i class="fas fa-th" aria-hidden="true"></i>
6306
+ </button>
6307
+ <div
6308
+ class="pf-c-app-launcher__menu pf-m-align-right"
6309
+ hidden
6310
+ >
6311
+ <div class="pf-c-app-launcher__menu-search">
6312
+ <input
6313
+ class="pf-c-form-control"
6314
+ type="search"
6315
+ aria-label="Type to filter"
6316
+ placeholder="Filter by name..."
6317
+ id="page-demo-centered-contentt-masthead-application-launcher-text-input"
6318
+ name="textInput1"
6319
+ />
6320
+ </div>
6321
+ <section class="pf-c-app-launcher__group">
6322
+ <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
6323
+ <ul>
6324
+ <li
6325
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
6326
+ >
6327
+ <a class="pf-c-app-launcher__menu-item">
6328
+ Link 1
6329
+ <span
6330
+ class="pf-c-app-launcher__menu-item-external-icon"
6331
+ >
6332
+ <i
6333
+ class="fas fa-external-link-alt"
6334
+ aria-hidden="true"
6335
+ ></i>
6336
+ </span>
6337
+ <span class="pf-screen-reader">(opens new window)</span>
6338
+ </a>
6339
+ <button
6340
+ class="pf-c-app-launcher__menu-item pf-m-action"
6341
+ type="button"
6342
+ aria-label="Favorite"
6343
+ >
6344
+ <i class="fas fa-star" aria-hidden="true"></i>
6345
+ </button>
6346
+ </li>
6347
+ <li
6348
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
6349
+ >
6350
+ <a class="pf-c-app-launcher__menu-item">
6351
+ Link 2
6352
+ <span
6353
+ class="pf-c-app-launcher__menu-item-external-icon"
6354
+ >
6355
+ <i
6356
+ class="fas fa-external-link-alt"
6357
+ aria-hidden="true"
6358
+ ></i>
6359
+ </span>
6360
+ <span class="pf-screen-reader">(opens new window)</span>
6361
+ </a>
6362
+ <button
6363
+ class="pf-c-app-launcher__menu-item pf-m-action"
6364
+ type="button"
6365
+ aria-label="Favorite"
6366
+ >
6367
+ <i class="fas fa-star" aria-hidden="true"></i>
6368
+ </button>
6369
+ </li>
6370
+ </ul>
6371
+ </section>
6372
+ <hr class="pf-c-divider" />
6373
+ <section class="pf-c-app-launcher__group">
6374
+ <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
6375
+ <ul>
6376
+ <li
6377
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
6378
+ >
6379
+ <a class="pf-c-app-launcher__menu-item">
6380
+ Link 1
6381
+ <span
6382
+ class="pf-c-app-launcher__menu-item-external-icon"
6383
+ >
6384
+ <i
6385
+ class="fas fa-external-link-alt"
6386
+ aria-hidden="true"
6387
+ ></i>
6388
+ </span>
6389
+ <span class="pf-screen-reader">(opens new window)</span>
6390
+ </a>
6391
+ <button
6392
+ class="pf-c-app-launcher__menu-item pf-m-action"
6393
+ type="button"
6394
+ aria-label="Favorite"
6395
+ >
6396
+ <i class="fas fa-star" aria-hidden="true"></i>
6397
+ </button>
6398
+ </li>
6399
+ <li
6400
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
6401
+ >
6402
+ <a class="pf-c-app-launcher__menu-item">
6403
+ Link 2
6404
+ <span
6405
+ class="pf-c-app-launcher__menu-item-external-icon"
6406
+ >
6407
+ <i
6408
+ class="fas fa-external-link-alt"
6409
+ aria-hidden="true"
6410
+ ></i>
6411
+ </span>
6412
+ <span class="pf-screen-reader">(opens new window)</span>
6413
+ </a>
6414
+ <button
6415
+ class="pf-c-app-launcher__menu-item pf-m-action"
6416
+ type="button"
6417
+ aria-label="Favorite"
6418
+ >
6419
+ <i class="fas fa-star" aria-hidden="true"></i>
6420
+ </button>
6421
+ </li>
6422
+ </ul>
6423
+ </section>
6424
+ </div>
6425
+ </nav>
6426
+ </div>
5475
6427
  <div class="pf-c-toolbar__item">
5476
6428
  <div class="pf-c-dropdown">
5477
6429
  <button
@@ -5512,7 +6464,7 @@ wrapperTag: div
5512
6464
  type="button"
5513
6465
  aria-label="Help"
5514
6466
  >
5515
- <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
6467
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
5516
6468
  </button>
5517
6469
  <ul
5518
6470
  class="pf-c-dropdown__menu pf-m-align-right"