@patternfly/patternfly 4.158.0 → 4.159.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 (12) hide show
  1. package/components/Menu/menu.css +84 -0
  2. package/components/Menu/menu.scss +109 -0
  3. package/components/Nav/nav.css +3 -3
  4. package/components/Nav/nav.scss +2 -1
  5. package/docs/components/Menu/examples/Menu.md +1 -0
  6. package/docs/components/Nav/examples/Navigation.css +12 -4
  7. package/docs/components/Nav/examples/Navigation.md +51 -232
  8. package/package.json +1 -1
  9. package/patternfly-no-reset.css +87 -3
  10. package/patternfly.css +87 -3
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
package/components/Menu/menu.css CHANGED
@@ -79,6 +79,7 @@
79
79
  --pf-c-menu--MinWidth: auto;
80
80
  --pf-c-menu--Width: auto;
81
81
  --pf-c-menu--ZIndex: var(--pf-global--ZIndex--sm);
82
+ --pf-c-menu--Top: auto;
82
83
  --pf-c-menu--m-flyout__menu--Top: calc(var(--pf-c-menu__list--PaddingTop) * -1 + var(--pf-c-menu--m-flyout__menu--top-offset));
83
84
  --pf-c-menu--m-flyout__menu--Right: auto;
84
85
  --pf-c-menu--m-flyout__menu--Bottom: auto;
@@ -195,11 +196,38 @@
195
196
  --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
196
197
  --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
197
198
  --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
199
+ top: var(--pf-c-menu--Top);
198
200
  z-index: var(--pf-c-menu--ZIndex);
199
201
  width: var(--pf-c-menu--Width);
200
202
  min-width: var(--pf-c-menu--MinWidth);
201
203
  background-color: var(--pf-c-menu--BackgroundColor);
202
204
  box-shadow: var(--pf-c-menu--BoxShadow);
205
+ --pf-c-menu--m-nav--BoxShadow: var(--pf-global--BoxShadow--lg);
206
+ --pf-c-menu--m-nav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
207
+ --pf-c-menu--m-nav__list--PaddingTop: 0;
208
+ --pf-c-menu--m-nav__list--PaddingBottom: 0;
209
+ --pf-c-menu--m-nav__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
210
+ --pf-c-menu--m-nav__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
211
+ --pf-c-menu--m-nav__list-item--active--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
212
+ --pf-c-menu--m-nav__item--PaddingRight: var(--pf-global--spacer--lg);
213
+ --pf-c-menu--m-nav__item--PaddingLeft: var(--pf-global--spacer--lg);
214
+ --pf-c-menu--m-nav__item--Color: var(--pf-global--Color--light-100);
215
+ --pf-c-menu--m-nav__item--FontSize: var(--pf-global--FontSize--sm);
216
+ --pf-c-menu--m-nav__item--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
217
+ --pf-c-menu--m-nav__item--before--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
218
+ --pf-c-menu--m-nav__item--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
219
+ --pf-c-menu--m-nav__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
220
+ --pf-c-menu--m-nav__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
221
+ --pf-c-menu--m-nav__item--hover--after--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
222
+ --pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top: 0;
223
+ --pf-c-menu--m-nav__item-description--Color: var(--pf-global--Color--light-200);
224
+ --pf-c-menu--m-nav--c-menu--left-offset: 0.25rem;
225
+ --pf-c-menu--m-nav--c-menu--m-left--right-offset: 0.25rem;
226
+ --pf-c-menu--m-nav--c-menu--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
227
+ --pf-c-menu--m-nav--c-menu--Left: calc(100% - var(--pf-c-menu--m-nav--c-menu--left-offset));
228
+ --pf-c-menu--m-nav--c-menu--m-left--Right: calc(100% - var(--pf-c-menu--m-nav--c-menu--m-left--right-offset));
229
+ --pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
230
+ --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
203
231
  }
204
232
  .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
205
233
  overflow: visible;
@@ -299,6 +327,62 @@
299
327
  .pf-c-menu.pf-m-scrollable .pf-c-menu__content {
300
328
  overflow-y: auto;
301
329
  }
330
+ .pf-c-menu.pf-m-nav, .pf-c-menu.pf-m-nav .pf-c-menu {
331
+ --pf-c-menu--BackgroundColor: var(--pf-c-menu--m-nav--BackgroundColor);
332
+ --pf-c-menu__list--PaddingTop: var(--pf-c-menu--m-nav__list--PaddingTop);
333
+ --pf-c-menu__list--PaddingBottom: var(--pf-c-menu--m-nav__list--PaddingBottom);
334
+ --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-menu--m-nav__list-item--hover--BackgroundColor);
335
+ --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-menu--m-nav__list-item--focus-within--BackgroundColor);
336
+ --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-menu--m-nav__list-item--active--BackgroundColor);
337
+ --pf-c-menu__item--Color: var(--pf-c-menu--m-nav__item--Color);
338
+ --pf-c-menu__item--FontSize: var(--pf-c-menu--m-nav__item--FontSize);
339
+ --pf-c-menu__item--OutlineOffset: var(--pf-c-menu--m-nav__item--OutlineOffset);
340
+ --pf-c-menu__item--PaddingRight: var(--pf-c-menu--m-nav__item--PaddingRight);
341
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-menu--m-nav__item--PaddingLeft);
342
+ --pf-c-menu__item-description--Color: var(--pf-c-menu--m-nav__item-description--Color);
343
+ box-shadow: var(--pf-c-menu--m-nav--BoxShadow);
344
+ }
345
+ .pf-c-menu.pf-m-nav .pf-c-menu__item, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item {
346
+ position: relative;
347
+ outline-offset: var(--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
348
+ }
349
+ .pf-c-menu.pf-m-nav .pf-c-menu__item::before, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item::before {
350
+ position: absolute;
351
+ right: 0;
352
+ bottom: 0;
353
+ left: 0;
354
+ content: "";
355
+ border-bottom: var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) solid var(--pf-c-menu--m-nav__item--before--BorderBottomColor);
356
+ }
357
+ .pf-c-menu.pf-m-nav .pf-c-menu__item:hover::after, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item:hover::after {
358
+ position: absolute;
359
+ top: var(--pf-c-menu--m-nav__item--hover--after--Top);
360
+ bottom: 0;
361
+ left: 0;
362
+ content: "";
363
+ border-left: var(--pf-c-menu--m-nav__item--hover--after--BorderLeftWidth) solid var(--pf-c-menu--m-nav__item--hover--after--BorderLeftColor);
364
+ }
365
+ .pf-c-menu.pf-m-nav .pf-c-menu {
366
+ width: 100%;
367
+ }
368
+ .pf-c-menu.pf-m-flyout.pf-m-nav, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu {
369
+ top: var(--pf-c-menu--m-nav--c-menu--Top);
370
+ left: var(--pf-c-menu--m-nav--c-menu--Left);
371
+ }
372
+ .pf-c-menu.pf-m-flyout.pf-m-nav.pf-m-top, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu.pf-m-top {
373
+ --pf-c-menu--m-nav--c-menu--Top: auto;
374
+ bottom: var(--pf-c-menu--m-nav--c-menu--m-top--Bottom);
375
+ }
376
+ .pf-c-menu.pf-m-flyout.pf-m-nav.pf-m-left, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu.pf-m-left {
377
+ --pf-c-menu--m-nav--c-menu--Left: auto;
378
+ right: var(--pf-c-menu--m-nav--c-menu--m-left--Right);
379
+ }
380
+ .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu__list-item:first-child, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu .pf-c-menu__list-item:first-child {
381
+ --pf-c-menu--m-nav__item--hover--after--Top: var(--pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top);
382
+ }
383
+ .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu__list-item:first-child .pf-c-menu, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu .pf-c-menu__list-item:first-child .pf-c-menu {
384
+ --pf-c-menu--m-nav--c-menu--Top: var(--pf-c-menu--m-nav__list-item--first-child--c-menu--Top);
385
+ }
302
386
 
303
387
  .pf-c-menu__breadcrumb {
304
388
  display: flex;
package/components/Menu/menu.scss CHANGED
@@ -7,6 +7,7 @@
7
7
  --pf-c-menu--MinWidth: auto;
8
8
  --pf-c-menu--Width: auto;
9
9
  --pf-c-menu--ZIndex: var(--pf-global--ZIndex--sm);
10
+ --pf-c-menu--Top: auto;
10
11
 
11
12
  // Flyout
12
13
  --pf-c-menu--m-flyout__menu--Top: calc(var(--pf-c-menu__list--PaddingTop) * -1 + var(--pf-c-menu--m-flyout__menu--top-offset));
@@ -184,6 +185,7 @@
184
185
  --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
185
186
  --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
186
187
 
188
+ top: var(--pf-c-menu--Top);
187
189
  z-index: var(--pf-c-menu--ZIndex);
188
190
  width: var(--pf-c-menu--Width);
189
191
  min-width: var(--pf-c-menu--MinWidth);
@@ -334,6 +336,113 @@
334
336
  overflow-y: auto;
335
337
  }
336
338
  }
339
+
340
+ // Nav variant
341
+ --pf-c-menu--m-nav--BoxShadow: var(--pf-global--BoxShadow--lg);
342
+ --pf-c-menu--m-nav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
343
+ --pf-c-menu--m-nav__list--PaddingTop: 0;
344
+ --pf-c-menu--m-nav__list--PaddingBottom: 0;
345
+ --pf-c-menu--m-nav__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
346
+ --pf-c-menu--m-nav__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
347
+ --pf-c-menu--m-nav__list-item--active--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
348
+ --pf-c-menu--m-nav__item--PaddingRight: var(--pf-global--spacer--lg);
349
+ --pf-c-menu--m-nav__item--PaddingLeft: var(--pf-global--spacer--lg);
350
+ --pf-c-menu--m-nav__item--Color: var(--pf-global--Color--light-100);
351
+ --pf-c-menu--m-nav__item--FontSize: var(--pf-global--FontSize--sm);
352
+ --pf-c-menu--m-nav__item--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
353
+ --pf-c-menu--m-nav__item--before--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
354
+ --pf-c-menu--m-nav__item--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
355
+ --pf-c-menu--m-nav__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
356
+ --pf-c-menu--m-nav__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
357
+ --pf-c-menu--m-nav__item--hover--after--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
358
+ --pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top: 0;
359
+ --pf-c-menu--m-nav__item-description--Color: var(--pf-global--Color--light-200);
360
+
361
+ // Nested menus
362
+ --pf-c-menu--m-nav--c-menu--left-offset: #{pf-size-prem(4px)};
363
+ --pf-c-menu--m-nav--c-menu--m-left--right-offset: #{pf-size-prem(4px)};
364
+ --pf-c-menu--m-nav--c-menu--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
365
+ --pf-c-menu--m-nav--c-menu--Left: calc(100% - var(--pf-c-menu--m-nav--c-menu--left-offset));
366
+ --pf-c-menu--m-nav--c-menu--m-left--Right: calc(100% - var(--pf-c-menu--m-nav--c-menu--m-left--right-offset));
367
+ --pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
368
+ --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
369
+
370
+ &.pf-m-nav,
371
+ &.pf-m-nav & {
372
+ --pf-c-menu--BackgroundColor: var(--pf-c-menu--m-nav--BackgroundColor);
373
+ --pf-c-menu__list--PaddingTop: var(--pf-c-menu--m-nav__list--PaddingTop);
374
+ --pf-c-menu__list--PaddingBottom: var(--pf-c-menu--m-nav__list--PaddingBottom);
375
+ --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-menu--m-nav__list-item--hover--BackgroundColor);
376
+ --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-menu--m-nav__list-item--focus-within--BackgroundColor);
377
+ --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-menu--m-nav__list-item--active--BackgroundColor);
378
+ --pf-c-menu__item--Color: var(--pf-c-menu--m-nav__item--Color);
379
+ --pf-c-menu__item--FontSize: var(--pf-c-menu--m-nav__item--FontSize);
380
+ --pf-c-menu__item--OutlineOffset: var(--pf-c-menu--m-nav__item--OutlineOffset);
381
+ --pf-c-menu__item--PaddingRight: var(--pf-c-menu--m-nav__item--PaddingRight);
382
+ --pf-c-menu__item--PaddingLeft: var(--pf-c-menu--m-nav__item--PaddingLeft);
383
+ --pf-c-menu__item-description--Color: var(--pf-c-menu--m-nav__item-description--Color);
384
+
385
+ box-shadow: var(--pf-c-menu--m-nav--BoxShadow);
386
+
387
+ // stylelint-disable max-nesting-depth, selector-max-class
388
+ .pf-c-menu__item {
389
+ position: relative;
390
+ outline-offset: var(--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
391
+
392
+ &::before {
393
+ position: absolute;
394
+ right: 0;
395
+ bottom: 0;
396
+ left: 0;
397
+ content: "";
398
+ border-bottom: var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) solid var(--pf-c-menu--m-nav__item--before--BorderBottomColor);
399
+ }
400
+
401
+ &:hover {
402
+ &::after {
403
+ position: absolute;
404
+ top: var(--pf-c-menu--m-nav__item--hover--after--Top);
405
+ bottom: 0;
406
+ left: 0;
407
+ content: "";
408
+ border-left: var(--pf-c-menu--m-nav__item--hover--after--BorderLeftWidth) solid var(--pf-c-menu--m-nav__item--hover--after--BorderLeftColor);
409
+ }
410
+ }
411
+ }
412
+ // stylelint-enable
413
+ }
414
+
415
+ &.pf-m-nav & {
416
+ width: 100%;
417
+ }
418
+
419
+ &.pf-m-flyout.pf-m-nav,
420
+ &.pf-m-flyout.pf-m-nav & {
421
+ top: var(--pf-c-menu--m-nav--c-menu--Top);
422
+ left: var(--pf-c-menu--m-nav--c-menu--Left);
423
+
424
+ // stylelint-disable selector-max-class
425
+ &.pf-m-top {
426
+ --pf-c-menu--m-nav--c-menu--Top: auto;
427
+
428
+ bottom: var(--pf-c-menu--m-nav--c-menu--m-top--Bottom);
429
+ }
430
+
431
+ &.pf-m-left {
432
+ --pf-c-menu--m-nav--c-menu--Left: auto;
433
+
434
+ right: var(--pf-c-menu--m-nav--c-menu--m-left--Right);
435
+ }
436
+
437
+ .pf-c-menu__list-item:first-child {
438
+ --pf-c-menu--m-nav__item--hover--after--Top: var(--pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top);
439
+ }
440
+
441
+ .pf-c-menu__list-item:first-child .pf-c-menu {
442
+ --pf-c-menu--m-nav--c-menu--Top: var(--pf-c-menu--m-nav__list-item--first-child--c-menu--Top);
443
+ }
444
+ // stylelint-enable
445
+ }
337
446
  }
338
447
 
339
448
  // breadcrumb
package/components/Nav/nav.css CHANGED
@@ -724,14 +724,14 @@
724
724
  border-color: var(--pf-c-nav__link--after--BorderColor);
725
725
  border-left-width: var(--pf-c-nav__link--after--BorderLeftWidth);
726
726
  }
727
- .pf-c-nav__link:hover {
727
+ .pf-c-nav__link:hover, .pf-c-nav__link.pf-m-hover {
728
728
  color: var(--pf-c-nav__link--hover--Color);
729
729
  background-color: var(--pf-c-nav__link--hover--BackgroundColor);
730
730
  }
731
- .pf-c-nav__link:hover::before {
731
+ .pf-c-nav__link:hover::before, .pf-c-nav__link.pf-m-hover::before {
732
732
  border-bottom-width: var(--pf-c-nav__link--hover--before--BorderBottomWidth);
733
733
  }
734
- .pf-c-nav__link:hover::after {
734
+ .pf-c-nav__link:hover::after, .pf-c-nav__link.pf-m-hover::after {
735
735
  border-color: var(--pf-c-nav__link--hover--after--BorderColor);
736
736
  border-left-width: var(--pf-c-nav__link--hover--after--BorderLeftWidth);
737
737
  }
package/components/Nav/nav.scss CHANGED
@@ -894,7 +894,8 @@
894
894
 
895
895
  // States
896
896
  // Set states property explicitly to override with modifiers without having to wrap updates with :state { update }
897
- &:hover {
897
+ &:hover,
898
+ &.pf-m-hover {
898
899
  color: var(--pf-c-nav__link--hover--Color);
899
900
  background-color: var(--pf-c-nav__link--hover--BackgroundColor);
900
901
 
package/docs/components/Menu/examples/Menu.md CHANGED
@@ -5080,6 +5080,7 @@ cssPrefix: pf-c-menu
5080
5080
  | `.pf-m-favorited` | `.pf-c-menu__item-action.pf-m-favorite` | Modifies the menu item action icon to be favorited. |
5081
5081
  | `.pf-m-selected` | `.pf-c-menu__item` | Modifies the menu item to be selected. |
5082
5082
  | `.pf-m-flyout` | `.pf-c-menu` | Modifies the menu so that all nested `.pf-c-menu` elements "flyout". |
5083
+ | `.pf-m-nav` | `.pf-c-menu` | Modifies the menu for nav variant. |
5083
5084
  | `.pf-m-top` | `.pf-c-menu` | Modifies a flyout menu to expand to the top. |
5084
5085
  | `.pf-m-left` | `.pf-c-menu` | Modifies a flyout menu to expand to the left. |
5085
5086
  | `.pf-m-plain` | `.pf-c-menu` | Modifies the menu component for use in the page instead of as a dropdown. |
package/docs/components/Nav/examples/Navigation.css CHANGED
@@ -13,8 +13,7 @@
13
13
  #ws-core-c-navigation-nav-with-drilldown-menu .pf-c-nav,
14
14
  #ws-core-c-navigation-level-2-drilldown,
15
15
  #ws-core-c-navigation-level-3-drilldown,
16
- #ws-core-c-navigation-nav-with-flyout .pf-c-nav,
17
- #ws-core-c-navigation-nav-with-menu-and-flyout .pf-c-nav {
16
+ #ws-core-c-navigation-nav-with-flyout .pf-c-nav {
18
17
  padding: 0;
19
18
  background-color: var(--pf-global--BackgroundColor--dark-300);
20
19
  }
@@ -47,7 +46,16 @@
47
46
  }
48
47
 
49
48
  #ws-core-c-navigation-nav-with-flyout .ws-preview-html,
50
- [id^="ws-core-c-navigation-nav-with-drilldown-menu"] .ws-preview-html,
51
- #ws-core-c-navigation-nav-with-menu-and-flyout .ws-preview-html {
49
+ [id^="ws-core-c-navigation-nav-with-drilldown-menu"] .ws-preview-html {
52
50
  width: 260px;
53
51
  }
52
+
53
+ #ws-core-c-navigation-nav-with-flyout .ws-preview-html {
54
+ position: relative;
55
+ }
56
+
57
+ #ws-core-c-navigation-nav-with-flyout .pf-c-menu.pf-m-flyout.pf-m-nav {
58
+ position: absolute;
59
+ top: 168px;
60
+ left: 256px;
61
+ }
package/docs/components/Nav/examples/Navigation.md CHANGED
@@ -726,7 +726,7 @@ cssPrefix: pf-c-nav
726
726
  <li class="pf-c-nav__item pf-m-flyout">
727
727
  <a
728
728
  href="#"
729
- class="pf-c-nav__link"
729
+ class="pf-c-nav__link pf-m-hover"
730
730
  aria-haspopup="true"
731
731
  aria-expanded="true"
732
732
  >
@@ -737,64 +737,6 @@ cssPrefix: pf-c-nav
737
737
  </span>
738
738
  </span>
739
739
  </a>
740
- <div class="pf-c-menu pf-m-flyout">
741
- <div class="pf-c-menu__content">
742
- <ul class="pf-c-menu__list">
743
- <li class="pf-c-menu__list-item">
744
- <a class="pf-c-menu__item" href="#">
745
- <span class="pf-c-menu__item-main">
746
- <span class="pf-c-menu__item-text">Container platform</span>
747
- </span>
748
- </a>
749
- </li>
750
- <li class="pf-c-menu__list-item">
751
- <button
752
- class="pf-c-menu__item"
753
- type="button"
754
- aria-expanded="true"
755
- >
756
- <span class="pf-c-menu__item-main">
757
- <span class="pf-c-menu__item-text">Dedicated</span>
758
- <span class="pf-c-menu__item-toggle-icon">
759
- <i class="fas fa-angle-right"></i>
760
- </span>
761
- </span>
762
- </button>
763
- <div class="pf-c-menu">
764
- <div class="pf-c-menu__content">
765
- <ul class="pf-c-menu__list">
766
- <li class="pf-c-menu__list-item">
767
- <a class="pf-c-menu__item" href="#">
768
- <span class="pf-c-menu__item-main">
769
- <span class="pf-c-menu__item-text">Dedicated (Annual)</span>
770
- </span>
771
- </a>
772
- </li>
773
- <li class="pf-c-menu__list-item">
774
- <a class="pf-c-menu__item" href="#">
775
- <span class="pf-c-menu__item-main">
776
- <span
777
- class="pf-c-menu__item-text"
778
- >Dedicated (On-Demand)</span>
779
- </span>
780
- </a>
781
- </li>
782
- <li class="pf-c-menu__list-item">
783
- <a class="pf-c-menu__item" href="#">
784
- <span class="pf-c-menu__item-main">
785
- <span
786
- class="pf-c-menu__item-text"
787
- >Dedicated (On-Demand limits)</span>
788
- </span>
789
- </a>
790
- </li>
791
- </ul>
792
- </div>
793
- </div>
794
- </li>
795
- </ul>
796
- </div>
797
- </div>
798
740
  </li>
799
741
  <li class="pf-c-nav__item">
800
742
  <a href="#" class="pf-c-nav__link">Support cases</a>
@@ -810,182 +752,58 @@ cssPrefix: pf-c-nav
810
752
  </li>
811
753
  </ul>
812
754
  </nav>
813
-
814
- ```
815
-
816
- ### Nav with menu and flyout
817
-
818
- ```html isBeta
819
- <nav class="pf-c-nav" aria-label="Flyout menu example">
820
- <div class="pf-c-menu">
821
- <div class="pf-c-menu__content">
822
- <ul class="pf-c-menu__list">
823
- <li class="pf-c-menu__list-item">
824
- <button class="pf-c-menu__item" type="button">
825
- <span class="pf-c-menu__item-main">
826
- <span class="pf-c-menu__item-text">Start rollout</span>
827
- </span>
828
- </button>
829
- </li>
830
- <li class="pf-c-menu__list-item">
831
- <button class="pf-c-menu__item" type="button">
832
- <span class="pf-c-menu__item-main">
833
- <span class="pf-c-menu__item-text">Pause rollouts</span>
834
- </span>
835
- </button>
836
- </li>
837
- <li class="pf-c-menu__list-item">
838
- <button class="pf-c-menu__item" type="button" aria-expanded="false">
839
- <span class="pf-c-menu__item-main">
840
- <span class="pf-c-menu__item-text">Add storage</span>
841
- <span class="pf-c-menu__item-toggle-icon">
842
- <i class="fas fa-angle-right"></i>
843
- </span>
844
- </span>
845
- </button>
846
- <div class="pf-c-menu pf-m-flyout" hidden>
847
- <div class="pf-c-menu__content">
848
- <ul class="pf-c-menu__list">
849
- <li class="pf-c-menu__list-item">
850
- <a class="pf-c-menu__item" href="#">
851
- <span class="pf-c-menu__item-main">
852
- <span class="pf-c-menu__item-text">Container platform</span>
853
- </span>
854
- </a>
855
- </li>
856
- <li class="pf-c-menu__list-item">
857
- <button
858
- class="pf-c-menu__item"
859
- type="button"
860
- aria-expanded="true"
861
- >
862
- <span class="pf-c-menu__item-main">
863
- <span class="pf-c-menu__item-text">Dedicated</span>
864
- <span class="pf-c-menu__item-toggle-icon">
865
- <i class="fas fa-angle-right"></i>
866
- </span>
867
- </span>
868
- </button>
869
- <div class="pf-c-menu">
870
- <div class="pf-c-menu__content">
871
- <ul class="pf-c-menu__list">
872
- <li class="pf-c-menu__list-item">
873
- <a class="pf-c-menu__item" href="#">
874
- <span class="pf-c-menu__item-main">
875
- <span
876
- class="pf-c-menu__item-text"
877
- >Dedicated (Annual)</span>
878
- </span>
879
- </a>
880
- </li>
881
- <li class="pf-c-menu__list-item">
882
- <a class="pf-c-menu__item" href="#">
883
- <span class="pf-c-menu__item-main">
884
- <span
885
- class="pf-c-menu__item-text"
886
- >Dedicated (On-Demand)</span>
887
- </span>
888
- </a>
889
- </li>
890
- <li class="pf-c-menu__list-item">
891
- <a class="pf-c-menu__item" href="#">
892
- <span class="pf-c-menu__item-main">
893
- <span
894
- class="pf-c-menu__item-text"
895
- >Dedicated (On-Demand limits)</span>
896
- </span>
897
- </a>
898
- </li>
899
- </ul>
900
- </div>
901
- </div>
902
- </li>
903
- </ul>
904
- </div>
905
- </div>
906
- </li>
907
- <li class="pf-c-menu__list-item">
908
- <button class="pf-c-menu__item" type="button" aria-expanded="true">
909
- <span class="pf-c-menu__item-main">
910
- <span class="pf-c-menu__item-text">Edit</span>
911
- <span class="pf-c-menu__item-toggle-icon">
912
- <i class="fas fa-angle-right"></i>
913
- </span>
755
+ <div class="pf-c-menu pf-m-flyout pf-m-nav">
756
+ <div class="pf-c-menu__content">
757
+ <ul class="pf-c-menu__list">
758
+ <li class="pf-c-menu__list-item">
759
+ <a class="pf-c-menu__item" href="#">
760
+ <span class="pf-c-menu__item-main">
761
+ <span class="pf-c-menu__item-text">Container platform</span>
762
+ </span>
763
+ </a>
764
+ </li>
765
+ <li class="pf-c-menu__list-item">
766
+ <button class="pf-c-menu__item" type="button" aria-expanded="true">
767
+ <span class="pf-c-menu__item-main">
768
+ <span class="pf-c-menu__item-text">Dedicated</span>
769
+ <span class="pf-c-menu__item-toggle-icon">
770
+ <i class="fas fa-angle-right"></i>
914
771
  </span>
915
- <span class="pf-c-menu__item-description">Description</span>
916
- </button>
917
- <div class="pf-c-menu pf-m-flyout">
918
- <div class="pf-c-menu__content">
919
- <ul class="pf-c-menu__list">
920
- <li class="pf-c-menu__list-item">
921
- <a class="pf-c-menu__item" href="#">
922
- <span class="pf-c-menu__item-main">
923
- <span class="pf-c-menu__item-text">Container platform</span>
924
- </span>
925
- </a>
926
- </li>
927
- <li class="pf-c-menu__list-item">
928
- <button
929
- class="pf-c-menu__item"
930
- type="button"
931
- aria-expanded="true"
932
- >
933
- <span class="pf-c-menu__item-main">
934
- <span class="pf-c-menu__item-text">Dedicated</span>
935
- <span class="pf-c-menu__item-toggle-icon">
936
- <i class="fas fa-angle-right"></i>
937
- </span>
938
- </span>
939
- </button>
940
- <div class="pf-c-menu">
941
- <div class="pf-c-menu__content">
942
- <ul class="pf-c-menu__list">
943
- <li class="pf-c-menu__list-item">
944
- <a class="pf-c-menu__item" href="#">
945
- <span class="pf-c-menu__item-main">
946
- <span
947
- class="pf-c-menu__item-text"
948
- >Dedicated (Annual)</span>
949
- </span>
950
- </a>
951
- </li>
952
- <li class="pf-c-menu__list-item">
953
- <a class="pf-c-menu__item" href="#">
954
- <span class="pf-c-menu__item-main">
955
- <span
956
- class="pf-c-menu__item-text"
957
- >Dedicated (On-Demand)</span>
958
- </span>
959
- </a>
960
- </li>
961
- <li class="pf-c-menu__list-item">
962
- <a class="pf-c-menu__item" href="#">
963
- <span class="pf-c-menu__item-main">
964
- <span
965
- class="pf-c-menu__item-text"
966
- >Dedicated (On-Demand limits)</span>
967
- </span>
968
- </a>
969
- </li>
970
- </ul>
971
- </div>
972
- </div>
973
- </li>
974
- </ul>
975
- </div>
772
+ </span>
773
+ </button>
774
+ <div class="pf-c-menu">
775
+ <div class="pf-c-menu__content">
776
+ <ul class="pf-c-menu__list">
777
+ <li class="pf-c-menu__list-item">
778
+ <a class="pf-c-menu__item" href="#">
779
+ <span class="pf-c-menu__item-main">
780
+ <span class="pf-c-menu__item-text">Dedicated (Annual)</span>
781
+ </span>
782
+ </a>
783
+ </li>
784
+ <li class="pf-c-menu__list-item">
785
+ <a class="pf-c-menu__item" href="#">
786
+ <span class="pf-c-menu__item-main">
787
+ <span class="pf-c-menu__item-text">Dedicated (On-Demand)</span>
788
+ </span>
789
+ </a>
790
+ </li>
791
+ <li class="pf-c-menu__list-item">
792
+ <a class="pf-c-menu__item" href="#">
793
+ <span class="pf-c-menu__item-main">
794
+ <span
795
+ class="pf-c-menu__item-text"
796
+ >Dedicated (On-Demand limits)</span>
797
+ </span>
798
+ </a>
799
+ </li>
800
+ </ul>
976
801
  </div>
977
- </li>
978
- <li class="pf-c-menu__list-item">
979
- <button class="pf-c-menu__item" type="button">
980
- <span class="pf-c-menu__item-main">
981
- <span class="pf-c-menu__item-text">Delete deployment config</span>
982
- </span>
983
- </button>
984
- </li>
985
- </ul>
986
- </div>
802
+ </div>
803
+ </li>
804
+ </ul>
987
805
  </div>
988
- </nav>
806
+ </div>
989
807
 
990
808
  ```
991
809
 
@@ -2230,4 +2048,5 @@ The navigation system relies on several different sub-components:
2230
2048
  | `.pf-m-expandable` | `.pf-c-nav__item` | Modifies for the expandable state. |
2231
2049
  | `.pf-m-expanded` | `.pf-c-nav__item` | Modifies for the expanded state. |
2232
2050
  | `.pf-m-current` | `.pf-c-nav__link` | Modifies for the current state. |
2051
+ | `.pf-m-hover` | `.pf-c-nav__link` | Modifies for the hover state. |
2233
2052
  | `.pf-m-start` | `.pf-c-nav__toggle` | Modifies nav toggle to align left. |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "4.158.0",
4
+ "version": "4.159.0",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {