@patternfly/patternfly 6.0.0-alpha.38 → 6.0.0-alpha.39

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 (36) hide show
  1. package/components/Divider/divider.css +97 -177
  2. package/components/Divider/divider.scss +60 -79
  3. package/components/Masthead/masthead.css +267 -435
  4. package/components/Masthead/masthead.scss +118 -233
  5. package/docs/components/Divider/examples/Divider.css +3 -1
  6. package/docs/components/Divider/examples/Divider.md +4 -5
  7. package/docs/components/Masthead/examples/masthead.md +441 -16
  8. package/docs/demos/AboutModal/examples/AboutModal.md +40 -42
  9. package/docs/demos/Alert/examples/Alert.md +120 -126
  10. package/docs/demos/BackToTop/examples/BackToTop.md +40 -42
  11. package/docs/demos/Banner/examples/Banner.md +79 -80
  12. package/docs/demos/CardView/examples/CardView.md +40 -42
  13. package/docs/demos/ContextSelector/examples/ContextSelector.md +129 -146
  14. package/docs/demos/Dashboard/examples/Dashboard.md +40 -42
  15. package/docs/demos/DataList/examples/DataList.md +160 -279
  16. package/docs/demos/DescriptionList/examples/DescriptionList.md +120 -126
  17. package/docs/demos/Drawer/examples/Drawer.md +200 -210
  18. package/docs/demos/JumpLinks/examples/JumpLinks.md +240 -252
  19. package/docs/demos/Masthead/examples/Masthead.md +143 -224
  20. package/docs/demos/Modal/examples/Modal.md +240 -252
  21. package/docs/demos/Nav/examples/Nav.md +320 -336
  22. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +200 -210
  23. package/docs/demos/Page/examples/Page.md +360 -378
  24. package/docs/demos/Page/examples/Penta.md +8 -15
  25. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +280 -294
  26. package/docs/demos/Skeleton/examples/Skeleton.md +40 -42
  27. package/docs/demos/Table/examples/Table.md +617 -647
  28. package/docs/demos/Tabs/examples/Tabs.md +240 -252
  29. package/docs/demos/Toolbar/examples/Toolbar.md +80 -84
  30. package/docs/demos/Wizard/examples/Wizard.md +360 -378
  31. package/package.json +1 -1
  32. package/patternfly-no-globals.css +363 -611
  33. package/patternfly-theme-dark-unversioned.css +363 -611
  34. package/patternfly.css +363 -611
  35. package/patternfly.min.css +1 -1
  36. package/patternfly.min.css.map +1 -1
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -25,20 +25,16 @@ wrapperTag: div
25
25
  </button>
26
26
  </span>
27
27
  <div class="pf-v5-c-masthead__main">
28
- <a
29
- class="pf-v5-c-masthead__brand"
30
- href="#"
31
- style="--pf-v5-c-brand--Height: 36px;"
32
- >
33
- <svg height="36px" viewBox="0 0 679 158" role="img">
34
- <title>Patternfly logo</title>
28
+ <a class="pf-v5-c-masthead__brand" href="#">
29
+ <svg height="40px" viewBox="0 0 679 158">
30
+ <title>PF-HorizontalLogo-Color</title>
35
31
  <defs>
36
32
  <linearGradient
37
33
  x1="68%"
38
34
  y1="2.25860997e-13%"
39
35
  x2="32%"
40
36
  y2="100%"
41
- id="linearGradient-1"
37
+ id="linearGradient-data-list-basic-example-masthead"
42
38
  >
43
39
  <stop stop-color="#2B9AF3" offset="0%" />
44
40
  <stop
@@ -48,13 +44,7 @@ wrapperTag: div
48
44
  />
49
45
  </linearGradient>
50
46
  </defs>
51
- <g
52
- id="PF-HorizontalLogo-Color"
53
- stroke="none"
54
- stroke-width="1"
55
- fill="none"
56
- fill-rule="evenodd"
57
- >
47
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
58
48
  <g
59
49
  transform="translate(206.000000, 45.750000)"
60
50
  fill="var(--pf-t--global--text--color--regular)"
@@ -89,19 +79,18 @@ wrapperTag: div
89
79
  d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
90
80
  />
91
81
  </g>
92
- <g id="Logo" transform="translate(0.000000, 0.000000)">
82
+ <g transform="translate(0.000000, 0.000000)">
93
83
  <path
94
84
  d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
95
- id="Rectangle-Copy-17"
96
- fill="var(--pf-t--global--color--brand--200)"
85
+ fill="#0066CC"
97
86
  />
98
87
  <path
99
88
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
100
- fill="url(#linearGradient-1)"
89
+ fill="url(#linearGradient-data-list-basic-example-masthead)"
101
90
  />
102
91
  <path
103
92
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
104
- fill="url(#linearGradient-1)"
93
+ fill="url(#linearGradient-data-list-basic-example-masthead)"
105
94
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
106
95
  />
107
96
  </g>
@@ -116,8 +105,38 @@ wrapperTag: div
116
105
  >
117
106
  <div class="pf-v5-c-toolbar__content">
118
107
  <div class="pf-v5-c-toolbar__content-section">
108
+ <div class="pf-v5-c-toolbar__item">
109
+ <button
110
+ class="pf-v5-c-menu-toggle"
111
+ type="button"
112
+ aria-expanded="false"
113
+ >
114
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
115
+ <span class="pf-v5-c-menu-toggle__controls">
116
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
117
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
118
+ </span>
119
+ </span>
120
+ </button>
121
+ </div>
122
+
123
+ <div class="pf-v5-c-toolbar__item">
124
+ <button
125
+ class="pf-v5-c-menu-toggle"
126
+ type="button"
127
+ aria-expanded="false"
128
+ >
129
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
130
+ <span class="pf-v5-c-menu-toggle__controls">
131
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
132
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
133
+ </span>
134
+ </span>
135
+ </button>
136
+ </div>
137
+
119
138
  <div
120
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
139
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
121
140
  >
122
141
  <div
123
142
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -164,27 +183,6 @@ wrapperTag: div
164
183
  </button>
165
184
  </div>
166
185
  </div>
167
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
168
- <button
169
- class="pf-v5-c-menu-toggle pf-m-full-height"
170
- type="button"
171
- aria-expanded="false"
172
- >
173
- <span class="pf-v5-c-menu-toggle__icon">
174
- <img
175
- class="pf-v5-c-avatar"
176
- alt="Avatar image"
177
- src="/assets/images/img_avatar-light.svg"
178
- />
179
- </span>
180
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
181
- <span class="pf-v5-c-menu-toggle__controls">
182
- <span class="pf-v5-c-menu-toggle__toggle-icon">
183
- <i class="fas fa-angle-down" aria-hidden="true"></i>
184
- </span>
185
- </span>
186
- </button>
187
- </div>
188
186
  </div>
189
187
  </div>
190
188
  </div>
@@ -311,60 +309,6 @@ wrapperTag: div
311
309
  </div>
312
310
  </div>
313
311
 
314
- <div class="pf-v5-c-toolbar__item">
315
- <div class="pf-v5-c-context-selector">
316
- <span
317
- id="data-list-basic-example-toolbar-context-selector-label"
318
- hidden
319
- >Selected project:</span>
320
- <button
321
- class="pf-v5-c-context-selector__toggle"
322
- aria-expanded="false"
323
- id="data-list-basic-example-toolbar-context-selector-toggle"
324
- aria-labelledby="data-list-basic-example-toolbar-context-selector-label data-list-basic-example-toolbar-context-selector-toggle"
325
- >
326
- <span
327
- class="pf-v5-c-context-selector__toggle-text"
328
- >My project</span>
329
- <span class="pf-v5-c-context-selector__toggle-icon">
330
- <i class="fas fa-caret-down" aria-hidden="true"></i>
331
- </span>
332
- </button>
333
- <div class="pf-v5-c-context-selector__menu" hidden>
334
- <div class="pf-v5-c-context-selector__menu-search">
335
- <div class="pf-v5-c-text-input-group">
336
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
337
- <span class="pf-v5-c-text-input-group__text">
338
- <span class="pf-v5-c-text-input-group__icon">
339
- <i class="fas fa-fw fa-search"></i>
340
- </span>
341
- <input
342
- class="pf-v5-c-text-input-group__text-input"
343
- type="text"
344
- placeholder="Search"
345
- value
346
- aria-label="Search input"
347
- />
348
- </span>
349
- </div>
350
- </div>
351
- </div>
352
- <ul class="pf-v5-c-context-selector__menu-list" role="menu">
353
- <li>My project</li>
354
- <li>OpenShift cluster</li>
355
- <li>Production Ansible</li>
356
- <li>AWS</li>
357
- <li>Azure</li>
358
- <li>My project</li>
359
- <li>OpenShift cluster</li>
360
- <li>Production Ansible</li>
361
- <li>AWS</li>
362
- <li>Azure</li>
363
- </ul>
364
- </div>
365
- </div>
366
- </div>
367
-
368
312
  <div
369
313
  class="pf-v5-c-overflow-menu"
370
314
  id="data-list-basic-example-toolbar-overflow-menu"
@@ -962,20 +906,16 @@ wrapperTag: div
962
906
  </button>
963
907
  </span>
964
908
  <div class="pf-v5-c-masthead__main">
965
- <a
966
- class="pf-v5-c-masthead__brand"
967
- href="#"
968
- style="--pf-v5-c-brand--Height: 36px;"
969
- >
970
- <svg height="36px" viewBox="0 0 679 158" role="img">
971
- <title>Patternfly logo</title>
909
+ <a class="pf-v5-c-masthead__brand" href="#">
910
+ <svg height="40px" viewBox="0 0 679 158">
911
+ <title>PF-HorizontalLogo-Color</title>
972
912
  <defs>
973
913
  <linearGradient
974
914
  x1="68%"
975
915
  y1="2.25860997e-13%"
976
916
  x2="32%"
977
917
  y2="100%"
978
- id="linearGradient-1"
918
+ id="linearGradient-data-list-actionable-example-masthead"
979
919
  >
980
920
  <stop stop-color="#2B9AF3" offset="0%" />
981
921
  <stop
@@ -985,13 +925,7 @@ wrapperTag: div
985
925
  />
986
926
  </linearGradient>
987
927
  </defs>
988
- <g
989
- id="PF-HorizontalLogo-Color"
990
- stroke="none"
991
- stroke-width="1"
992
- fill="none"
993
- fill-rule="evenodd"
994
- >
928
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
995
929
  <g
996
930
  transform="translate(206.000000, 45.750000)"
997
931
  fill="var(--pf-t--global--text--color--regular)"
@@ -1026,19 +960,18 @@ wrapperTag: div
1026
960
  d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
1027
961
  />
1028
962
  </g>
1029
- <g id="Logo" transform="translate(0.000000, 0.000000)">
963
+ <g transform="translate(0.000000, 0.000000)">
1030
964
  <path
1031
965
  d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
1032
- id="Rectangle-Copy-17"
1033
- fill="var(--pf-t--global--color--brand--200)"
966
+ fill="#0066CC"
1034
967
  />
1035
968
  <path
1036
969
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1037
- fill="url(#linearGradient-1)"
970
+ fill="url(#linearGradient-data-list-actionable-example-masthead)"
1038
971
  />
1039
972
  <path
1040
973
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1041
- fill="url(#linearGradient-1)"
974
+ fill="url(#linearGradient-data-list-actionable-example-masthead)"
1042
975
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1043
976
  />
1044
977
  </g>
@@ -1053,8 +986,38 @@ wrapperTag: div
1053
986
  >
1054
987
  <div class="pf-v5-c-toolbar__content">
1055
988
  <div class="pf-v5-c-toolbar__content-section">
989
+ <div class="pf-v5-c-toolbar__item">
990
+ <button
991
+ class="pf-v5-c-menu-toggle"
992
+ type="button"
993
+ aria-expanded="false"
994
+ >
995
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
996
+ <span class="pf-v5-c-menu-toggle__controls">
997
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
998
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
999
+ </span>
1000
+ </span>
1001
+ </button>
1002
+ </div>
1003
+
1004
+ <div class="pf-v5-c-toolbar__item">
1005
+ <button
1006
+ class="pf-v5-c-menu-toggle"
1007
+ type="button"
1008
+ aria-expanded="false"
1009
+ >
1010
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1011
+ <span class="pf-v5-c-menu-toggle__controls">
1012
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1013
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1014
+ </span>
1015
+ </span>
1016
+ </button>
1017
+ </div>
1018
+
1056
1019
  <div
1057
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1020
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1058
1021
  >
1059
1022
  <div
1060
1023
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1101,27 +1064,6 @@ wrapperTag: div
1101
1064
  </button>
1102
1065
  </div>
1103
1066
  </div>
1104
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1105
- <button
1106
- class="pf-v5-c-menu-toggle pf-m-full-height"
1107
- type="button"
1108
- aria-expanded="false"
1109
- >
1110
- <span class="pf-v5-c-menu-toggle__icon">
1111
- <img
1112
- class="pf-v5-c-avatar"
1113
- alt="Avatar image"
1114
- src="/assets/images/img_avatar-light.svg"
1115
- />
1116
- </span>
1117
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1118
- <span class="pf-v5-c-menu-toggle__controls">
1119
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1120
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1121
- </span>
1122
- </span>
1123
- </button>
1124
- </div>
1125
1067
  </div>
1126
1068
  </div>
1127
1069
  </div>
@@ -1261,63 +1203,6 @@ wrapperTag: div
1261
1203
  </button>
1262
1204
  </div>
1263
1205
  </div>
1264
-
1265
- <div class="pf-v5-c-toolbar__item">
1266
- <div class="pf-v5-c-context-selector">
1267
- <span
1268
- id="data-list-actionable-example-toolbar-context-selector-label"
1269
- hidden
1270
- >Selected project:</span>
1271
- <button
1272
- class="pf-v5-c-context-selector__toggle"
1273
- aria-expanded="false"
1274
- id="data-list-actionable-example-toolbar-context-selector-toggle"
1275
- aria-labelledby="data-list-actionable-example-toolbar-context-selector-label data-list-actionable-example-toolbar-context-selector-toggle"
1276
- >
1277
- <span
1278
- class="pf-v5-c-context-selector__toggle-text"
1279
- >My project</span>
1280
- <span class="pf-v5-c-context-selector__toggle-icon">
1281
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1282
- </span>
1283
- </button>
1284
- <div class="pf-v5-c-context-selector__menu" hidden>
1285
- <div class="pf-v5-c-context-selector__menu-search">
1286
- <div class="pf-v5-c-text-input-group">
1287
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
1288
- <span class="pf-v5-c-text-input-group__text">
1289
- <span class="pf-v5-c-text-input-group__icon">
1290
- <i class="fas fa-fw fa-search"></i>
1291
- </span>
1292
- <input
1293
- class="pf-v5-c-text-input-group__text-input"
1294
- type="text"
1295
- placeholder="Search"
1296
- value
1297
- aria-label="Search input"
1298
- />
1299
- </span>
1300
- </div>
1301
- </div>
1302
- </div>
1303
- <ul
1304
- class="pf-v5-c-context-selector__menu-list"
1305
- role="menu"
1306
- >
1307
- <li>My project</li>
1308
- <li>OpenShift cluster</li>
1309
- <li>Production Ansible</li>
1310
- <li>AWS</li>
1311
- <li>Azure</li>
1312
- <li>My project</li>
1313
- <li>OpenShift cluster</li>
1314
- <li>Production Ansible</li>
1315
- <li>AWS</li>
1316
- <li>Azure</li>
1317
- </ul>
1318
- </div>
1319
- </div>
1320
- </div>
1321
1206
  </div>
1322
1207
 
1323
1208
  <div
@@ -1889,20 +1774,16 @@ wrapperTag: div
1889
1774
  </button>
1890
1775
  </span>
1891
1776
  <div class="pf-v5-c-masthead__main">
1892
- <a
1893
- class="pf-v5-c-masthead__brand"
1894
- href="#"
1895
- style="--pf-v5-c-brand--Height: 36px;"
1896
- >
1897
- <svg height="36px" viewBox="0 0 679 158" role="img">
1898
- <title>Patternfly logo</title>
1777
+ <a class="pf-v5-c-masthead__brand" href="#">
1778
+ <svg height="40px" viewBox="0 0 679 158">
1779
+ <title>PF-HorizontalLogo-Color</title>
1899
1780
  <defs>
1900
1781
  <linearGradient
1901
1782
  x1="68%"
1902
1783
  y1="2.25860997e-13%"
1903
1784
  x2="32%"
1904
1785
  y2="100%"
1905
- id="linearGradient-1"
1786
+ id="linearGradient-data-list-expandable-example-masthead"
1906
1787
  >
1907
1788
  <stop stop-color="#2B9AF3" offset="0%" />
1908
1789
  <stop
@@ -1912,13 +1793,7 @@ wrapperTag: div
1912
1793
  />
1913
1794
  </linearGradient>
1914
1795
  </defs>
1915
- <g
1916
- id="PF-HorizontalLogo-Color"
1917
- stroke="none"
1918
- stroke-width="1"
1919
- fill="none"
1920
- fill-rule="evenodd"
1921
- >
1796
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1922
1797
  <g
1923
1798
  transform="translate(206.000000, 45.750000)"
1924
1799
  fill="var(--pf-t--global--text--color--regular)"
@@ -1953,19 +1828,18 @@ wrapperTag: div
1953
1828
  d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
1954
1829
  />
1955
1830
  </g>
1956
- <g id="Logo" transform="translate(0.000000, 0.000000)">
1831
+ <g transform="translate(0.000000, 0.000000)">
1957
1832
  <path
1958
1833
  d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
1959
- id="Rectangle-Copy-17"
1960
- fill="var(--pf-t--global--color--brand--200)"
1834
+ fill="#0066CC"
1961
1835
  />
1962
1836
  <path
1963
1837
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1964
- fill="url(#linearGradient-1)"
1838
+ fill="url(#linearGradient-data-list-expandable-example-masthead)"
1965
1839
  />
1966
1840
  <path
1967
1841
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
1968
- fill="url(#linearGradient-1)"
1842
+ fill="url(#linearGradient-data-list-expandable-example-masthead)"
1969
1843
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1970
1844
  />
1971
1845
  </g>
@@ -1980,8 +1854,38 @@ wrapperTag: div
1980
1854
  >
1981
1855
  <div class="pf-v5-c-toolbar__content">
1982
1856
  <div class="pf-v5-c-toolbar__content-section">
1857
+ <div class="pf-v5-c-toolbar__item">
1858
+ <button
1859
+ class="pf-v5-c-menu-toggle"
1860
+ type="button"
1861
+ aria-expanded="false"
1862
+ >
1863
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1864
+ <span class="pf-v5-c-menu-toggle__controls">
1865
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1866
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1867
+ </span>
1868
+ </span>
1869
+ </button>
1870
+ </div>
1871
+
1872
+ <div class="pf-v5-c-toolbar__item">
1873
+ <button
1874
+ class="pf-v5-c-menu-toggle"
1875
+ type="button"
1876
+ aria-expanded="false"
1877
+ >
1878
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1879
+ <span class="pf-v5-c-menu-toggle__controls">
1880
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1881
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1882
+ </span>
1883
+ </span>
1884
+ </button>
1885
+ </div>
1886
+
1983
1887
  <div
1984
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1888
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1985
1889
  >
1986
1890
  <div
1987
1891
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -2028,27 +1932,6 @@ wrapperTag: div
2028
1932
  </button>
2029
1933
  </div>
2030
1934
  </div>
2031
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2032
- <button
2033
- class="pf-v5-c-menu-toggle pf-m-full-height"
2034
- type="button"
2035
- aria-expanded="false"
2036
- >
2037
- <span class="pf-v5-c-menu-toggle__icon">
2038
- <img
2039
- class="pf-v5-c-avatar"
2040
- alt="Avatar image"
2041
- src="/assets/images/img_avatar-light.svg"
2042
- />
2043
- </span>
2044
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
2045
- <span class="pf-v5-c-menu-toggle__controls">
2046
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2047
- <i class="fas fa-angle-down" aria-hidden="true"></i>
2048
- </span>
2049
- </span>
2050
- </button>
2051
- </div>
2052
1935
  </div>
2053
1936
  </div>
2054
1937
  </div>
@@ -3568,20 +3451,16 @@ wrapperTag: div
3568
3451
  </button>
3569
3452
  </span>
3570
3453
  <div class="pf-v5-c-masthead__main">
3571
- <a
3572
- class="pf-v5-c-masthead__brand"
3573
- href="#"
3574
- style="--pf-v5-c-brand--Height: 36px;"
3575
- >
3576
- <svg height="36px" viewBox="0 0 679 158" role="img">
3577
- <title>Patternfly logo</title>
3454
+ <a class="pf-v5-c-masthead__brand" href="#">
3455
+ <svg height="40px" viewBox="0 0 679 158">
3456
+ <title>PF-HorizontalLogo-Color</title>
3578
3457
  <defs>
3579
3458
  <linearGradient
3580
3459
  x1="68%"
3581
3460
  y1="2.25860997e-13%"
3582
3461
  x2="32%"
3583
3462
  y2="100%"
3584
- id="linearGradient-1"
3463
+ id="linearGradient-data-list-static-bottom-example-masthead"
3585
3464
  >
3586
3465
  <stop stop-color="#2B9AF3" offset="0%" />
3587
3466
  <stop
@@ -3591,13 +3470,7 @@ wrapperTag: div
3591
3470
  />
3592
3471
  </linearGradient>
3593
3472
  </defs>
3594
- <g
3595
- id="PF-HorizontalLogo-Color"
3596
- stroke="none"
3597
- stroke-width="1"
3598
- fill="none"
3599
- fill-rule="evenodd"
3600
- >
3473
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3601
3474
  <g
3602
3475
  transform="translate(206.000000, 45.750000)"
3603
3476
  fill="var(--pf-t--global--text--color--regular)"
@@ -3632,19 +3505,18 @@ wrapperTag: div
3632
3505
  d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
3633
3506
  />
3634
3507
  </g>
3635
- <g id="Logo" transform="translate(0.000000, 0.000000)">
3508
+ <g transform="translate(0.000000, 0.000000)">
3636
3509
  <path
3637
3510
  d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
3638
- id="Rectangle-Copy-17"
3639
- fill="var(--pf-t--global--color--brand--200)"
3511
+ fill="#0066CC"
3640
3512
  />
3641
3513
  <path
3642
3514
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3643
- fill="url(#linearGradient-1)"
3515
+ fill="url(#linearGradient-data-list-static-bottom-example-masthead)"
3644
3516
  />
3645
3517
  <path
3646
3518
  d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
3647
- fill="url(#linearGradient-1)"
3519
+ fill="url(#linearGradient-data-list-static-bottom-example-masthead)"
3648
3520
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3649
3521
  />
3650
3522
  </g>
@@ -3659,8 +3531,38 @@ wrapperTag: div
3659
3531
  >
3660
3532
  <div class="pf-v5-c-toolbar__content">
3661
3533
  <div class="pf-v5-c-toolbar__content-section">
3534
+ <div class="pf-v5-c-toolbar__item">
3535
+ <button
3536
+ class="pf-v5-c-menu-toggle"
3537
+ type="button"
3538
+ aria-expanded="false"
3539
+ >
3540
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
3541
+ <span class="pf-v5-c-menu-toggle__controls">
3542
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3543
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3544
+ </span>
3545
+ </span>
3546
+ </button>
3547
+ </div>
3548
+
3549
+ <div class="pf-v5-c-toolbar__item">
3550
+ <button
3551
+ class="pf-v5-c-menu-toggle"
3552
+ type="button"
3553
+ aria-expanded="false"
3554
+ >
3555
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
3556
+ <span class="pf-v5-c-menu-toggle__controls">
3557
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3558
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3559
+ </span>
3560
+ </span>
3561
+ </button>
3562
+ </div>
3563
+
3662
3564
  <div
3663
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
3565
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
3664
3566
  >
3665
3567
  <div
3666
3568
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -3707,27 +3609,6 @@ wrapperTag: div
3707
3609
  </button>
3708
3610
  </div>
3709
3611
  </div>
3710
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
3711
- <button
3712
- class="pf-v5-c-menu-toggle pf-m-full-height"
3713
- type="button"
3714
- aria-expanded="false"
3715
- >
3716
- <span class="pf-v5-c-menu-toggle__icon">
3717
- <img
3718
- class="pf-v5-c-avatar"
3719
- alt="Avatar image"
3720
- src="/assets/images/img_avatar-light.svg"
3721
- />
3722
- </span>
3723
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
3724
- <span class="pf-v5-c-menu-toggle__controls">
3725
- <span class="pf-v5-c-menu-toggle__toggle-icon">
3726
- <i class="fas fa-angle-down" aria-hidden="true"></i>
3727
- </span>
3728
- </span>
3729
- </button>
3730
- </div>
3731
3612
  </div>
3732
3613
  </div>
3733
3614
  </div>