@patternfly/patternfly 6.0.0-alpha.34 → 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 (76) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  3. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  4. package/assets/images/PF-IconLogo-color.svg +17 -0
  5. package/components/Backdrop/backdrop.css +6 -2
  6. package/components/Backdrop/backdrop.scss +5 -2
  7. package/components/Banner/banner.css +4 -0
  8. package/components/Banner/banner.scss +5 -0
  9. package/components/Card/card.css +3 -0
  10. package/components/Card/card.scss +8 -0
  11. package/components/Divider/divider.css +97 -177
  12. package/components/Divider/divider.scss +60 -79
  13. package/components/Form/form.css +6 -0
  14. package/components/Form/form.scss +4 -1
  15. package/components/Masthead/masthead.css +267 -435
  16. package/components/Masthead/masthead.scss +118 -233
  17. package/components/MenuToggle/menu-toggle.css +1 -0
  18. package/components/MenuToggle/menu-toggle.scss +2 -0
  19. package/components/Popover/popover.css +0 -2
  20. package/components/Popover/popover.scss +2 -2
  21. package/components/SimpleList/simple-list.css +35 -52
  22. package/components/SimpleList/simple-list.scss +41 -51
  23. package/components/Table/table.scss +1 -0
  24. package/components/Tooltip/tooltip.css +0 -2
  25. package/components/Tooltip/tooltip.scss +3 -3
  26. package/components/Truncate/truncate.css +4 -0
  27. package/components/Truncate/truncate.scss +3 -0
  28. package/docs/components/Accordion/examples/Accordion.md +6 -6
  29. package/docs/components/Alert/examples/Alert.md +2 -2
  30. package/docs/components/Brand/examples/Brand.md +9 -33
  31. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  32. package/docs/components/Card/examples/Card.md +18 -20
  33. package/docs/components/Check/examples/Check.md +1 -0
  34. package/docs/components/Content/examples/Content.md +5 -5
  35. package/docs/components/Divider/examples/Divider.css +3 -1
  36. package/docs/components/Divider/examples/Divider.md +4 -5
  37. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  38. package/docs/components/Label/examples/Label.md +11 -11
  39. package/docs/components/Masthead/examples/masthead.md +441 -16
  40. package/docs/components/Nav/examples/Navigation.css +18 -2
  41. package/docs/components/Nav/examples/Navigation.md +1 -1
  42. package/docs/components/Radio/examples/Radio.md +1 -1
  43. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  44. package/docs/components/Table/examples/Table.md +8 -8
  45. package/docs/components/Truncate/examples/Truncate.css +2 -2
  46. package/docs/demos/AboutModal/examples/AboutModal.md +40 -42
  47. package/docs/demos/Alert/examples/Alert.md +120 -126
  48. package/docs/demos/BackToTop/examples/BackToTop.md +40 -42
  49. package/docs/demos/Banner/examples/Banner.md +79 -80
  50. package/docs/demos/CardView/examples/CardView.md +40 -42
  51. package/docs/demos/ContextSelector/examples/ContextSelector.md +129 -146
  52. package/docs/demos/Dashboard/examples/Dashboard.md +40 -42
  53. package/docs/demos/DataList/examples/DataList.md +160 -279
  54. package/docs/demos/DescriptionList/examples/DescriptionList.md +120 -126
  55. package/docs/demos/Drawer/examples/Drawer.md +200 -210
  56. package/docs/demos/JumpLinks/examples/JumpLinks.md +240 -252
  57. package/docs/demos/Masthead/examples/Masthead.md +143 -224
  58. package/docs/demos/Modal/examples/Modal.md +240 -252
  59. package/docs/demos/Nav/examples/Nav.md +320 -336
  60. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +200 -210
  61. package/docs/demos/Page/examples/Page.md +360 -378
  62. package/docs/demos/Page/examples/Penta.md +8 -15
  63. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +280 -294
  64. package/docs/demos/Skeleton/examples/Skeleton.md +40 -42
  65. package/docs/demos/Table/examples/Table.md +617 -647
  66. package/docs/demos/Tabs/examples/Tabs.md +240 -252
  67. package/docs/demos/Toolbar/examples/Toolbar.md +80 -84
  68. package/docs/demos/Wizard/examples/Wizard.md +360 -378
  69. package/docs/layouts/Flex/examples/Flex.md +11 -11
  70. package/package.json +32 -32
  71. package/patternfly-no-globals.css +422 -673
  72. package/patternfly-theme-dark-unversioned.css +422 -673
  73. package/patternfly.css +422 -673
  74. package/patternfly.min.css +1 -1
  75. package/patternfly.min.css.map +1 -1
  76. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
package/docs/components/SimpleList/examples/SimpleList.md CHANGED
@@ -33,21 +33,21 @@ cssPrefix: pf-v5-c-simple-list
33
33
  <ul class="pf-v5-c-simple-list__list" role="list">
34
34
  <li class="pf-v5-c-simple-list__item">
35
35
  <a
36
- class="pf-v5-c-simple-list__item-link pf-m-current"
36
+ class="pf-v5-c-simple-list__item-link pf-m-link pf-m-current"
37
37
  href="#"
38
38
  tabindex="0"
39
39
  >List item 1</a>
40
40
  </li>
41
41
  <li class="pf-v5-c-simple-list__item">
42
42
  <a
43
- class="pf-v5-c-simple-list__item-link"
43
+ class="pf-v5-c-simple-list__item-link pf-m-link"
44
44
  href="#"
45
45
  tabindex="0"
46
46
  >List item 2</a>
47
47
  </li>
48
48
  <li class="pf-v5-c-simple-list__item">
49
49
  <a
50
- class="pf-v5-c-simple-list__item-link"
50
+ class="pf-v5-c-simple-list__item-link pf-m-link"
51
51
  href="#"
52
52
  tabindex="0"
53
53
  >List item 3</a>
package/docs/components/Table/examples/Table.md CHANGED
@@ -24703,9 +24703,9 @@ Add a [width modifier](#width-modifiers) to `thead th` to limit string length or
24703
24703
 
24704
24704
  There are a few ways this can be handled:
24705
24705
 
24706
- * Manipulate the `z-index` of the menu and/or table headers/columns manually.
24707
- * Use the `menuAppendTo` prop in non-composable react components with menus to append the menu to an element outside of the table (e.g., the `<body>` element) so that the menu has a higher stacking context than - and can appear on top of - sticky headers/columns as well as appear outside of any scrollable content in the table.
24708
- * In the case where the menu is outside of the table (e.g., above the table in a toolbar, or below the table and the menu expands up), assign the entire table a lower `z-index` than the `z-index` of the menu. This creates a lower stacking context for the entire table compared to the menu, while preserving the stacking context of the elements inside of the table.
24706
+ * Manipulate the `z-index` of the menu and/or table headers/columns manually.
24707
+ * Use the `menuAppendTo` prop in non-composable react components with menus to append the menu to an element outside of the table (e.g., the `<body>` element) so that the menu has a higher stacking context than - and can appear on top of - sticky headers/columns as well as appear outside of any scrollable content in the table.
24708
+ * In the case where the menu is outside of the table (e.g., above the table in a toolbar, or below the table and the menu expands up), assign the entire table a lower `z-index` than the `z-index` of the menu. This creates a lower stacking context for the entire table compared to the menu, while preserving the stacking context of the elements inside of the table.
24709
24709
 
24710
24710
  ### Sticky header
24711
24711
 
@@ -30824,8 +30824,8 @@ By default, all table header cells are set to `white-space: nowrap`. If a `<th>`
30824
30824
 
30825
30825
  ### Implementation support
30826
30826
 
30827
- * One expandable toggle button, positioned in the first cell of a non-expandable row, preceding an expandable row.
30828
- * One checkbox or radio input, positioned in the first or second cell of a non-expandable row.
30829
- * One action button, positioned in the last cell of a non-expandable row.
30830
- * Tabular data.
30831
- * Compact presentation modifier (not compatible with expandable table).
30827
+ * One expandable toggle button, positioned in the first cell of a non-expandable row, preceding an expandable row.
30828
+ * One checkbox or radio input, positioned in the first or second cell of a non-expandable row.
30829
+ * One action button, positioned in the last cell of a non-expandable row.
30830
+ * Tabular data.
30831
+ * Compact presentation modifier (not compatible with expandable table).
package/docs/components/Truncate/examples/Truncate.css CHANGED
@@ -4,6 +4,6 @@
4
4
  overflow: auto;
5
5
  min-width: 161px;
6
6
  max-width: 100%;
7
- padding: var(--pf-v5-global--spacer--md);
8
- border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
7
+ padding: var(--pf-t--global--spacer--sm);
8
+ border: var(--pf-t--global--border--width--box--default) solid var(--pf-t--global--border--color--default);
9
9
  }
package/docs/demos/AboutModal/examples/AboutModal.md CHANGED
@@ -26,20 +26,16 @@ This demo implements the about modal, including the backdrop.
26
26
  </button>
27
27
  </span>
28
28
  <div class="pf-v5-c-masthead__main">
29
- <a
30
- class="pf-v5-c-masthead__brand"
31
- href="#"
32
- style="--pf-v5-c-brand--Height: 36px;"
33
- >
34
- <svg height="36px" viewBox="0 0 679 158" role="img">
35
- <title>Patternfly logo</title>
29
+ <a class="pf-v5-c-masthead__brand" href="#">
30
+ <svg height="40px" viewBox="0 0 679 158">
31
+ <title>PF-HorizontalLogo-Color</title>
36
32
  <defs>
37
33
  <linearGradient
38
34
  x1="68%"
39
35
  y1="2.25860997e-13%"
40
36
  x2="32%"
41
37
  y2="100%"
42
- id="linearGradient-1"
38
+ id="linearGradient-modal-basic-example-masthead"
43
39
  >
44
40
  <stop stop-color="#2B9AF3" offset="0%" />
45
41
  <stop
@@ -49,13 +45,7 @@ This demo implements the about modal, including the backdrop.
49
45
  />
50
46
  </linearGradient>
51
47
  </defs>
52
- <g
53
- id="PF-HorizontalLogo-Color"
54
- stroke="none"
55
- stroke-width="1"
56
- fill="none"
57
- fill-rule="evenodd"
58
- >
48
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
59
49
  <g
60
50
  transform="translate(206.000000, 45.750000)"
61
51
  fill="var(--pf-t--global--text--color--regular)"
@@ -90,19 +80,18 @@ This demo implements the about modal, including the backdrop.
90
80
  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"
91
81
  />
92
82
  </g>
93
- <g id="Logo" transform="translate(0.000000, 0.000000)">
83
+ <g transform="translate(0.000000, 0.000000)">
94
84
  <path
95
85
  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"
96
- id="Rectangle-Copy-17"
97
- fill="var(--pf-t--global--color--brand--200)"
86
+ fill="#0066CC"
98
87
  />
99
88
  <path
100
89
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
101
- fill="url(#linearGradient-1)"
90
+ fill="url(#linearGradient-modal-basic-example-masthead)"
102
91
  />
103
92
  <path
104
93
  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"
105
- fill="url(#linearGradient-1)"
94
+ fill="url(#linearGradient-modal-basic-example-masthead)"
106
95
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
107
96
  />
108
97
  </g>
@@ -117,8 +106,38 @@ This demo implements the about modal, including the backdrop.
117
106
  >
118
107
  <div class="pf-v5-c-toolbar__content">
119
108
  <div class="pf-v5-c-toolbar__content-section">
109
+ <div class="pf-v5-c-toolbar__item">
110
+ <button
111
+ class="pf-v5-c-menu-toggle"
112
+ type="button"
113
+ aria-expanded="false"
114
+ >
115
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
116
+ <span class="pf-v5-c-menu-toggle__controls">
117
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
118
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
119
+ </span>
120
+ </span>
121
+ </button>
122
+ </div>
123
+
124
+ <div class="pf-v5-c-toolbar__item">
125
+ <button
126
+ class="pf-v5-c-menu-toggle"
127
+ type="button"
128
+ aria-expanded="false"
129
+ >
130
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
131
+ <span class="pf-v5-c-menu-toggle__controls">
132
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
133
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
134
+ </span>
135
+ </span>
136
+ </button>
137
+ </div>
138
+
120
139
  <div
121
- 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"
140
+ 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"
122
141
  >
123
142
  <div
124
143
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -165,27 +184,6 @@ This demo implements the about modal, including the backdrop.
165
184
  </button>
166
185
  </div>
167
186
  </div>
168
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
169
- <button
170
- class="pf-v5-c-menu-toggle pf-m-full-height"
171
- type="button"
172
- aria-expanded="false"
173
- >
174
- <span class="pf-v5-c-menu-toggle__icon">
175
- <img
176
- class="pf-v5-c-avatar"
177
- alt="Avatar image"
178
- src="/assets/images/img_avatar-light.svg"
179
- />
180
- </span>
181
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
182
- <span class="pf-v5-c-menu-toggle__controls">
183
- <span class="pf-v5-c-menu-toggle__toggle-icon">
184
- <i class="fas fa-angle-down" aria-hidden="true"></i>
185
- </span>
186
- </span>
187
- </button>
188
- </div>
189
187
  </div>
190
188
  </div>
191
189
  </div>
package/docs/demos/Alert/examples/Alert.md CHANGED
@@ -24,20 +24,16 @@ section: components
24
24
  </button>
25
25
  </span>
26
26
  <div class="pf-v5-c-masthead__main">
27
- <a
28
- class="pf-v5-c-masthead__brand"
29
- href="#"
30
- style="--pf-v5-c-brand--Height: 36px;"
31
- >
32
- <svg height="36px" viewBox="0 0 679 158" role="img">
33
- <title>Patternfly logo</title>
27
+ <a class="pf-v5-c-masthead__brand" href="#">
28
+ <svg height="40px" viewBox="0 0 679 158">
29
+ <title>PF-HorizontalLogo-Color</title>
34
30
  <defs>
35
31
  <linearGradient
36
32
  x1="68%"
37
33
  y1="2.25860997e-13%"
38
34
  x2="32%"
39
35
  y2="100%"
40
- id="linearGradient-1"
36
+ id="linearGradient-alert-basic-example-masthead"
41
37
  >
42
38
  <stop stop-color="#2B9AF3" offset="0%" />
43
39
  <stop
@@ -47,13 +43,7 @@ section: components
47
43
  />
48
44
  </linearGradient>
49
45
  </defs>
50
- <g
51
- id="PF-HorizontalLogo-Color"
52
- stroke="none"
53
- stroke-width="1"
54
- fill="none"
55
- fill-rule="evenodd"
56
- >
46
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
57
47
  <g
58
48
  transform="translate(206.000000, 45.750000)"
59
49
  fill="var(--pf-t--global--text--color--regular)"
@@ -88,19 +78,18 @@ section: components
88
78
  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"
89
79
  />
90
80
  </g>
91
- <g id="Logo" transform="translate(0.000000, 0.000000)">
81
+ <g transform="translate(0.000000, 0.000000)">
92
82
  <path
93
83
  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"
94
- id="Rectangle-Copy-17"
95
- fill="var(--pf-t--global--color--brand--200)"
84
+ fill="#0066CC"
96
85
  />
97
86
  <path
98
87
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
99
- fill="url(#linearGradient-1)"
88
+ fill="url(#linearGradient-alert-basic-example-masthead)"
100
89
  />
101
90
  <path
102
91
  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"
103
- fill="url(#linearGradient-1)"
92
+ fill="url(#linearGradient-alert-basic-example-masthead)"
104
93
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
105
94
  />
106
95
  </g>
@@ -115,8 +104,38 @@ section: components
115
104
  >
116
105
  <div class="pf-v5-c-toolbar__content">
117
106
  <div class="pf-v5-c-toolbar__content-section">
107
+ <div class="pf-v5-c-toolbar__item">
108
+ <button
109
+ class="pf-v5-c-menu-toggle"
110
+ type="button"
111
+ aria-expanded="false"
112
+ >
113
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
114
+ <span class="pf-v5-c-menu-toggle__controls">
115
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
116
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
117
+ </span>
118
+ </span>
119
+ </button>
120
+ </div>
121
+
122
+ <div class="pf-v5-c-toolbar__item">
123
+ <button
124
+ class="pf-v5-c-menu-toggle"
125
+ type="button"
126
+ aria-expanded="false"
127
+ >
128
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
129
+ <span class="pf-v5-c-menu-toggle__controls">
130
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
131
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
132
+ </span>
133
+ </span>
134
+ </button>
135
+ </div>
136
+
118
137
  <div
119
- 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"
138
+ 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"
120
139
  >
121
140
  <div
122
141
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -163,27 +182,6 @@ section: components
163
182
  </button>
164
183
  </div>
165
184
  </div>
166
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
167
- <button
168
- class="pf-v5-c-menu-toggle pf-m-full-height"
169
- type="button"
170
- aria-expanded="false"
171
- >
172
- <span class="pf-v5-c-menu-toggle__icon">
173
- <img
174
- class="pf-v5-c-avatar"
175
- alt="Avatar image"
176
- src="/assets/images/img_avatar-light.svg"
177
- />
178
- </span>
179
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
180
- <span class="pf-v5-c-menu-toggle__controls">
181
- <span class="pf-v5-c-menu-toggle__toggle-icon">
182
- <i class="fas fa-angle-down" aria-hidden="true"></i>
183
- </span>
184
- </span>
185
- </button>
186
- </div>
187
185
  </div>
188
186
  </div>
189
187
  </div>
@@ -402,20 +400,16 @@ section: components
402
400
  </button>
403
401
  </span>
404
402
  <div class="pf-v5-c-masthead__main">
405
- <a
406
- class="pf-v5-c-masthead__brand"
407
- href="#"
408
- style="--pf-v5-c-brand--Height: 36px;"
409
- >
410
- <svg height="36px" viewBox="0 0 679 158" role="img">
411
- <title>Patternfly logo</title>
403
+ <a class="pf-v5-c-masthead__brand" href="#">
404
+ <svg height="40px" viewBox="0 0 679 158">
405
+ <title>PF-HorizontalLogo-Color</title>
412
406
  <defs>
413
407
  <linearGradient
414
408
  x1="68%"
415
409
  y1="2.25860997e-13%"
416
410
  x2="32%"
417
411
  y2="100%"
418
- id="linearGradient-1"
412
+ id="linearGradient-alert-horizontal-example-masthead"
419
413
  >
420
414
  <stop stop-color="#2B9AF3" offset="0%" />
421
415
  <stop
@@ -425,13 +419,7 @@ section: components
425
419
  />
426
420
  </linearGradient>
427
421
  </defs>
428
- <g
429
- id="PF-HorizontalLogo-Color"
430
- stroke="none"
431
- stroke-width="1"
432
- fill="none"
433
- fill-rule="evenodd"
434
- >
422
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
435
423
  <g
436
424
  transform="translate(206.000000, 45.750000)"
437
425
  fill="var(--pf-t--global--text--color--regular)"
@@ -466,19 +454,18 @@ section: components
466
454
  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"
467
455
  />
468
456
  </g>
469
- <g id="Logo" transform="translate(0.000000, 0.000000)">
457
+ <g transform="translate(0.000000, 0.000000)">
470
458
  <path
471
459
  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"
472
- id="Rectangle-Copy-17"
473
- fill="var(--pf-t--global--color--brand--200)"
460
+ fill="#0066CC"
474
461
  />
475
462
  <path
476
463
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
477
- fill="url(#linearGradient-1)"
464
+ fill="url(#linearGradient-alert-horizontal-example-masthead)"
478
465
  />
479
466
  <path
480
467
  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"
481
- fill="url(#linearGradient-1)"
468
+ fill="url(#linearGradient-alert-horizontal-example-masthead)"
482
469
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
483
470
  />
484
471
  </g>
@@ -493,8 +480,38 @@ section: components
493
480
  >
494
481
  <div class="pf-v5-c-toolbar__content">
495
482
  <div class="pf-v5-c-toolbar__content-section">
483
+ <div class="pf-v5-c-toolbar__item">
484
+ <button
485
+ class="pf-v5-c-menu-toggle"
486
+ type="button"
487
+ aria-expanded="false"
488
+ >
489
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
490
+ <span class="pf-v5-c-menu-toggle__controls">
491
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
492
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
493
+ </span>
494
+ </span>
495
+ </button>
496
+ </div>
497
+
498
+ <div class="pf-v5-c-toolbar__item">
499
+ <button
500
+ class="pf-v5-c-menu-toggle"
501
+ type="button"
502
+ aria-expanded="false"
503
+ >
504
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
505
+ <span class="pf-v5-c-menu-toggle__controls">
506
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
507
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
508
+ </span>
509
+ </span>
510
+ </button>
511
+ </div>
512
+
496
513
  <div
497
- 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"
514
+ 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"
498
515
  >
499
516
  <div
500
517
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -541,27 +558,6 @@ section: components
541
558
  </button>
542
559
  </div>
543
560
  </div>
544
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
545
- <button
546
- class="pf-v5-c-menu-toggle pf-m-full-height"
547
- type="button"
548
- aria-expanded="false"
549
- >
550
- <span class="pf-v5-c-menu-toggle__icon">
551
- <img
552
- class="pf-v5-c-avatar"
553
- alt="Avatar image"
554
- src="/assets/images/img_avatar-light.svg"
555
- />
556
- </span>
557
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
558
- <span class="pf-v5-c-menu-toggle__controls">
559
- <span class="pf-v5-c-menu-toggle__toggle-icon">
560
- <i class="fas fa-angle-down" aria-hidden="true"></i>
561
- </span>
562
- </span>
563
- </button>
564
- </div>
565
561
  </div>
566
562
  </div>
567
563
  </div>
@@ -861,20 +857,16 @@ section: components
861
857
  </button>
862
858
  </span>
863
859
  <div class="pf-v5-c-masthead__main">
864
- <a
865
- class="pf-v5-c-masthead__brand"
866
- href="#"
867
- style="--pf-v5-c-brand--Height: 36px;"
868
- >
869
- <svg height="36px" viewBox="0 0 679 158" role="img">
870
- <title>Patternfly logo</title>
860
+ <a class="pf-v5-c-masthead__brand" href="#">
861
+ <svg height="40px" viewBox="0 0 679 158">
862
+ <title>PF-HorizontalLogo-Color</title>
871
863
  <defs>
872
864
  <linearGradient
873
865
  x1="68%"
874
866
  y1="2.25860997e-13%"
875
867
  x2="32%"
876
868
  y2="100%"
877
- id="linearGradient-1"
869
+ id="linearGradient-alert-stacked-example-masthead"
878
870
  >
879
871
  <stop stop-color="#2B9AF3" offset="0%" />
880
872
  <stop
@@ -884,13 +876,7 @@ section: components
884
876
  />
885
877
  </linearGradient>
886
878
  </defs>
887
- <g
888
- id="PF-HorizontalLogo-Color"
889
- stroke="none"
890
- stroke-width="1"
891
- fill="none"
892
- fill-rule="evenodd"
893
- >
879
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
894
880
  <g
895
881
  transform="translate(206.000000, 45.750000)"
896
882
  fill="var(--pf-t--global--text--color--regular)"
@@ -925,19 +911,18 @@ section: components
925
911
  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"
926
912
  />
927
913
  </g>
928
- <g id="Logo" transform="translate(0.000000, 0.000000)">
914
+ <g transform="translate(0.000000, 0.000000)">
929
915
  <path
930
916
  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"
931
- id="Rectangle-Copy-17"
932
- fill="var(--pf-t--global--color--brand--200)"
917
+ fill="#0066CC"
933
918
  />
934
919
  <path
935
920
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
936
- fill="url(#linearGradient-1)"
921
+ fill="url(#linearGradient-alert-stacked-example-masthead)"
937
922
  />
938
923
  <path
939
924
  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"
940
- fill="url(#linearGradient-1)"
925
+ fill="url(#linearGradient-alert-stacked-example-masthead)"
941
926
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
942
927
  />
943
928
  </g>
@@ -952,8 +937,38 @@ section: components
952
937
  >
953
938
  <div class="pf-v5-c-toolbar__content">
954
939
  <div class="pf-v5-c-toolbar__content-section">
940
+ <div class="pf-v5-c-toolbar__item">
941
+ <button
942
+ class="pf-v5-c-menu-toggle"
943
+ type="button"
944
+ aria-expanded="false"
945
+ >
946
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
947
+ <span class="pf-v5-c-menu-toggle__controls">
948
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
949
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
950
+ </span>
951
+ </span>
952
+ </button>
953
+ </div>
954
+
955
+ <div class="pf-v5-c-toolbar__item">
956
+ <button
957
+ class="pf-v5-c-menu-toggle"
958
+ type="button"
959
+ aria-expanded="false"
960
+ >
961
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
962
+ <span class="pf-v5-c-menu-toggle__controls">
963
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
964
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
965
+ </span>
966
+ </span>
967
+ </button>
968
+ </div>
969
+
955
970
  <div
956
- 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"
971
+ 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"
957
972
  >
958
973
  <div
959
974
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1000,27 +1015,6 @@ section: components
1000
1015
  </button>
1001
1016
  </div>
1002
1017
  </div>
1003
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1004
- <button
1005
- class="pf-v5-c-menu-toggle pf-m-full-height"
1006
- type="button"
1007
- aria-expanded="false"
1008
- >
1009
- <span class="pf-v5-c-menu-toggle__icon">
1010
- <img
1011
- class="pf-v5-c-avatar"
1012
- alt="Avatar image"
1013
- src="/assets/images/img_avatar-light.svg"
1014
- />
1015
- </span>
1016
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1017
- <span class="pf-v5-c-menu-toggle__controls">
1018
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1019
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1020
- </span>
1021
- </span>
1022
- </button>
1023
- </div>
1024
1018
  </div>
1025
1019
  </div>
1026
1020
  </div>