@patternfly/react-styles 4.24.1 → 4.24.2

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.24.2 (2021-11-12)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
 ## 4.24.1 (2021-11-12)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/css/components/Menu/menu.css

@@ -79,6 +79,7 @@
   --pf-c-menu--MinWidth: auto;
   --pf-c-menu--Width: auto;
   --pf-c-menu--ZIndex: var(--pf-global--ZIndex--sm);
+  --pf-c-menu--Top: auto;
   --pf-c-menu--m-flyout__menu--Top: calc(var(--pf-c-menu__list--PaddingTop) * -1 + var(--pf-c-menu--m-flyout__menu--top-offset));
   --pf-c-menu--m-flyout__menu--Right: auto;
   --pf-c-menu--m-flyout__menu--Bottom: auto;
@@ -195,11 +196,38 @@
   --pf-c-menu--m-scrollable__footer--BoxShadow: var(--pf-global--BoxShadow--sm-top);
   --pf-c-menu--m-scrollable__footer--after--BorderTopWidth: 0;
   --pf-c-menu--m-scrollable__footer--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
+  top: var(--pf-c-menu--Top);
   z-index: var(--pf-c-menu--ZIndex);
   width: var(--pf-c-menu--Width);
   min-width: var(--pf-c-menu--MinWidth);
   background-color: var(--pf-c-menu--BackgroundColor);
   box-shadow: var(--pf-c-menu--BoxShadow);
+  --pf-c-menu--m-nav--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-menu--m-nav--BackgroundColor: var(--pf-global--BackgroundColor--dark-300);
+  --pf-c-menu--m-nav__list--PaddingTop: 0;
+  --pf-c-menu--m-nav__list--PaddingBottom: 0;
+  --pf-c-menu--m-nav__list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-menu--m-nav__list-item--focus-within--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-menu--m-nav__list-item--active--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-menu--m-nav__item--PaddingRight: var(--pf-global--spacer--lg);
+  --pf-c-menu--m-nav__item--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-menu--m-nav__item--Color: var(--pf-global--Color--light-100);
+  --pf-c-menu--m-nav__item--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-menu--m-nav__item--OutlineOffset: calc(var(--pf-global--spacer--xs) * -1);
+  --pf-c-menu--m-nav__item--before--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
+  --pf-c-menu--m-nav__item--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-menu--m-nav__item--hover--after--BorderLeftColor: var(--pf-global--BorderColor--200);
+  --pf-c-menu--m-nav__item--hover--after--BorderLeftWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-menu--m-nav__item--hover--after--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
+  --pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top: 0;
+  --pf-c-menu--m-nav__item-description--Color: var(--pf-global--Color--light-200);
+  --pf-c-menu--m-nav--c-menu--left-offset: 0.25rem;
+  --pf-c-menu--m-nav--c-menu--m-left--right-offset: 0.25rem;
+  --pf-c-menu--m-nav--c-menu--Top: calc(var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) * -1);
+  --pf-c-menu--m-nav--c-menu--Left: calc(100% - var(--pf-c-menu--m-nav--c-menu--left-offset));
+  --pf-c-menu--m-nav--c-menu--m-left--Right: calc(100% - var(--pf-c-menu--m-nav--c-menu--m-left--right-offset));
+  --pf-c-menu--m-nav--c-menu--m-top--Bottom: calc(0 + var(--pf-c-menu--m-nav--c-menu--m-top--bottom-offset));
+  --pf-c-menu--m-nav__list-item--first-child--c-menu--Top: 0;
 }
 .pf-c-menu .pf-c-menu__content .pf-c-menu .pf-c-menu__content {
   overflow: visible;
@@ -299,6 +327,62 @@
 .pf-c-menu.pf-m-scrollable .pf-c-menu__content {
   overflow-y: auto;
 }
+.pf-c-menu.pf-m-nav, .pf-c-menu.pf-m-nav .pf-c-menu {
+  --pf-c-menu--BackgroundColor: var(--pf-c-menu--m-nav--BackgroundColor);
+  --pf-c-menu__list--PaddingTop: var(--pf-c-menu--m-nav__list--PaddingTop);
+  --pf-c-menu__list--PaddingBottom: var(--pf-c-menu--m-nav__list--PaddingBottom);
+  --pf-c-menu__list-item--hover--BackgroundColor: var(--pf-c-menu--m-nav__list-item--hover--BackgroundColor);
+  --pf-c-menu__list-item--focus-within--BackgroundColor: var(--pf-c-menu--m-nav__list-item--focus-within--BackgroundColor);
+  --pf-c-menu__list-item--active--BackgroundColor: var(--pf-c-menu--m-nav__list-item--active--BackgroundColor);
+  --pf-c-menu__item--Color: var(--pf-c-menu--m-nav__item--Color);
+  --pf-c-menu__item--FontSize: var(--pf-c-menu--m-nav__item--FontSize);
+  --pf-c-menu__item--OutlineOffset: var(--pf-c-menu--m-nav__item--OutlineOffset);
+  --pf-c-menu__item--PaddingRight: var(--pf-c-menu--m-nav__item--PaddingRight);
+  --pf-c-menu__item--PaddingLeft: var(--pf-c-menu--m-nav__item--PaddingLeft);
+  --pf-c-menu__item-description--Color: var(--pf-c-menu--m-nav__item-description--Color);
+  box-shadow: var(--pf-c-menu--m-nav--BoxShadow);
+}
+.pf-c-menu.pf-m-nav .pf-c-menu__item, .pf-c-menu.pf-m-nav .pf-c-menu .pf-c-menu__item {
+  position: relative;
+  outline-offset: var(--pf-c-nav__item--m-flyout--c-menu__item--OutlineOffset);
+}
+.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 {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: "";
+  border-bottom: var(--pf-c-menu--m-nav__item--before--BorderBottomWidth) solid var(--pf-c-menu--m-nav__item--before--BorderBottomColor);
+}
+.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 {
+  position: absolute;
+  top: var(--pf-c-menu--m-nav__item--hover--after--Top);
+  bottom: 0;
+  left: 0;
+  content: "";
+  border-left: var(--pf-c-menu--m-nav__item--hover--after--BorderLeftWidth) solid var(--pf-c-menu--m-nav__item--hover--after--BorderLeftColor);
+}
+.pf-c-menu.pf-m-nav .pf-c-menu {
+  width: 100%;
+}
+.pf-c-menu.pf-m-flyout.pf-m-nav, .pf-c-menu.pf-m-flyout.pf-m-nav .pf-c-menu {
+  top: var(--pf-c-menu--m-nav--c-menu--Top);
+  left: var(--pf-c-menu--m-nav--c-menu--Left);
+}
+.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 {
+  --pf-c-menu--m-nav--c-menu--Top: auto;
+  bottom: var(--pf-c-menu--m-nav--c-menu--m-top--Bottom);
+}
+.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 {
+  --pf-c-menu--m-nav--c-menu--Left: auto;
+  right: var(--pf-c-menu--m-nav--c-menu--m-left--Right);
+}
+.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 {
+  --pf-c-menu--m-nav__item--hover--after--Top: var(--pf-c-menu--m-nav__item__list-item--first-child__item--hover--after--Top);
+}
+.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 {
+  --pf-c-menu--m-nav--c-menu--Top: var(--pf-c-menu--m-nav__list-item--first-child--c-menu--Top);
+}
 
 .pf-c-menu__breadcrumb {
   display: flex;

package/css/components/Menu/menu.d.ts

@@ -43,6 +43,7 @@ declare const _default: {
     "static": "pf-m-static",
     "plain": "pf-m-plain",
     "scrollable": "pf-m-scrollable",
+    "nav": "pf-m-nav",
     "disabled": "pf-m-disabled",
     "load": "pf-m-load",
     "loading": "pf-m-loading",

package/css/components/Menu/menu.js

@@ -45,6 +45,7 @@ exports.default = {
     "static": "pf-m-static",
     "plain": "pf-m-plain",
     "scrollable": "pf-m-scrollable",
+    "nav": "pf-m-nav",
     "disabled": "pf-m-disabled",
     "load": "pf-m-load",
     "loading": "pf-m-loading",

package/css/components/Nav/nav.css

@@ -724,14 +724,14 @@
   border-color: var(--pf-c-nav__link--after--BorderColor);
   border-left-width: var(--pf-c-nav__link--after--BorderLeftWidth);
 }
-.pf-c-nav__link:hover {
+.pf-c-nav__link:hover, .pf-c-nav__link.pf-m-hover {
   color: var(--pf-c-nav__link--hover--Color);
   background-color: var(--pf-c-nav__link--hover--BackgroundColor);
 }
-.pf-c-nav__link:hover::before {
+.pf-c-nav__link:hover::before, .pf-c-nav__link.pf-m-hover::before {
   border-bottom-width: var(--pf-c-nav__link--hover--before--BorderBottomWidth);
 }
-.pf-c-nav__link:hover::after {
+.pf-c-nav__link:hover::after, .pf-c-nav__link.pf-m-hover::after {
   border-color: var(--pf-c-nav__link--hover--after--BorderColor);
   border-left-width: var(--pf-c-nav__link--hover--after--BorderLeftWidth);
 }

package/css/components/Nav/nav.d.ts

@@ -19,6 +19,7 @@ declare const _default: {
     "expandable": "pf-m-expandable",
     "expanded": "pf-m-expanded",
     "drilldown": "pf-m-drilldown",
+    "hover": "pf-m-hover",
     "start": "pf-m-start"
   },
   "nav": "pf-c-nav",

package/css/components/Nav/nav.js

@@ -21,6 +21,7 @@ exports.default = {
     "expandable": "pf-m-expandable",
     "expanded": "pf-m-expanded",
     "drilldown": "pf-m-drilldown",
+    "hover": "pf-m-hover",
     "start": "pf-m-start"
   },
   "nav": "pf-c-nav",

package/css/docs/components/Nav/examples/Navigation.css

@@ -13,8 +13,7 @@
 #ws-core-c-navigation-nav-with-drilldown-menu .pf-c-nav,
 #ws-core-c-navigation-level-2-drilldown,
 #ws-core-c-navigation-level-3-drilldown,
-#ws-core-c-navigation-nav-with-flyout .pf-c-nav,
-#ws-core-c-navigation-nav-with-menu-and-flyout .pf-c-nav {
+#ws-core-c-navigation-nav-with-flyout .pf-c-nav {
   padding: 0;
   background-color: var(--pf-global--BackgroundColor--dark-300);
 }
@@ -47,7 +46,16 @@
 }
 
 #ws-core-c-navigation-nav-with-flyout .ws-preview-html,
-[id^="ws-core-c-navigation-nav-with-drilldown-menu"] .ws-preview-html,
-#ws-core-c-navigation-nav-with-menu-and-flyout .ws-preview-html {
+[id^="ws-core-c-navigation-nav-with-drilldown-menu"] .ws-preview-html {
   width: 260px;
 }
+
+#ws-core-c-navigation-nav-with-flyout .ws-preview-html {
+  position: relative;
+}
+
+#ws-core-c-navigation-nav-with-flyout .pf-c-menu.pf-m-flyout.pf-m-nav {
+  position: absolute;
+  top: 168px;
+  left: 256px;
+}

package/css/docs/components/Nav/examples/Navigation.d.ts

@@ -1,5 +1,10 @@
 import './Navigation.css';
 declare const _default: {
+  "menu": "pf-c-menu",
+  "modifiers": {
+    "flyout": "pf-m-flyout",
+    "nav": "pf-m-nav"
+  },
   "nav": "pf-c-nav",
   "pageHeader": "pf-c-page__header",
   "pageHeaderNav": "pf-c-page__header-nav",

package/css/docs/components/Nav/examples/Navigation.js

@@ -2,6 +2,11 @@
 exports.__esModule = true;
 require('./Navigation.css');
 exports.default = {
+  "menu": "pf-c-menu",
+  "modifiers": {
+    "flyout": "pf-m-flyout",
+    "nav": "pf-m-nav"
+  },
   "nav": "pf-c-nav",
   "pageHeader": "pf-c-page__header",
   "pageHeaderNav": "pf-c-page__header-nav",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "4.24.1",
+  "version": "4.24.2",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.158.0",
+    "@patternfly/patternfly": "4.159.0",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
@@ -29,5 +29,5 @@
     "typescript": "^4.0.0"
   },
   "license": "MIT",
-  "gitHead": "8c1eb5d895aa2512f7b4197654e414394ff25b30"
+  "gitHead": "e3eb3038c1f23818774f99280f2a4485ee4a2be2"
 }