@patternfly/react-styles 4.19.2 → 4.19.3

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.19.3 (2021-11-08)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
 ## 4.19.2 (2021-11-08)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/css/components/MenuToggle/menu-toggle.css

@@ -96,7 +96,7 @@
   --pf-c-menu-toggle--m-expanded--Color: var(--pf-c-menu-toggle--m-primary--m-expanded--Color);
   --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
 }
-.pf-c-menu-toggle.pf-m-plain {
+.pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
   --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
   --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
   --pf-c-menu-toggle--focus--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);

package/css/components/MenuToggle/menu-toggle.d.ts

@@ -9,6 +9,7 @@ declare const _default: {
   "modifiers": {
     "primary": "pf-m-primary",
     "plain": "pf-m-plain",
+    "text": "pf-m-text",
     "expanded": "pf-m-expanded",
     "fullHeight": "pf-m-full-height"
   }

package/css/components/MenuToggle/menu-toggle.js

@@ -11,6 +11,7 @@ exports.default = {
   "modifiers": {
     "primary": "pf-m-primary",
     "plain": "pf-m-plain",
+    "text": "pf-m-text",
     "expanded": "pf-m-expanded",
     "fullHeight": "pf-m-full-height"
   }

package/css/components/Nav/nav.css

@@ -477,13 +477,11 @@
 }
 
 .pf-c-nav__item {
-  --pf-c-nav__item__toggle-icon--Rotate: 0;
   position: relative;
   margin-top: var(--pf-c-nav__item--MarginTop);
 }
 .pf-c-nav__item.pf-m-expandable {
   --pf-c-nav__link--before--BorderBottomWidth: 0;
-  --pf-c-nav__item__toggle-icon--Rotate: var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate);
 }
 .pf-c-nav__item.pf-m-expandable::before {
   position: absolute;
@@ -493,6 +491,9 @@
   content: "";
   border-bottom: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
 }
+.pf-c-nav__item .pf-c-nav__item:not(.pf-m-expanded) .pf-c-nav__toggle-icon {
+  transform: rotate(0);
+}
 .pf-c-nav__item .pf-c-nav__item.pf-m-expandable {
   --pf-c-nav__toggle--FontSize: var(--pf-c-nav__item__item__toggle--FontSize);
   --pf-c-nav__link--PaddingRight: var(--pf-c-nav__item__item__link--PaddingRight);
@@ -742,10 +743,7 @@
   display: inline-block;
   transition: var(--pf-c-nav__toggle-icon--Transition);
 }
-.pf-c-nav__item.pf-m-expanded .pf-c-nav__item .pf-c-nav__toggle-icon {
-  transform: rotate(0deg);
-}
-.pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon, .pf-c-nav__item .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
+.pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
   transform: rotate(var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate));
 }
 

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

@@ -12,11 +12,11 @@ declare const _default: {
     "scrollable": "pf-m-scrollable",
     "overflowHidden": "pf-m-overflow-hidden",
     "expandable": "pf-m-expandable",
+    "expanded": "pf-m-expanded",
     "flyout": "pf-m-flyout",
     "top": "pf-m-top",
     "left": "pf-m-left",
     "drilldown": "pf-m-drilldown",
-    "expanded": "pf-m-expanded",
     "current": "pf-m-current",
     "start": "pf-m-start"
   },

package/css/components/Nav/nav.js

@@ -14,11 +14,11 @@ exports.default = {
     "scrollable": "pf-m-scrollable",
     "overflowHidden": "pf-m-overflow-hidden",
     "expandable": "pf-m-expandable",
+    "expanded": "pf-m-expanded",
     "flyout": "pf-m-flyout",
     "top": "pf-m-top",
     "left": "pf-m-left",
     "drilldown": "pf-m-drilldown",
-    "expanded": "pf-m-expanded",
     "current": "pf-m-current",
     "start": "pf-m-start"
   },

package/css/components/OptionsMenu/options-menu.css

@@ -110,37 +110,29 @@
   justify-content: space-between;
   min-width: var(--pf-c-options-menu__toggle--MinWidth);
   max-width: 100%;
-  padding-left: var(--pf-c-options-menu__toggle--PaddingLeft);
+  padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
   line-height: var(--pf-c-options-menu__toggle--LineHeight);
   color: var(--pf-c-options-menu__toggle--Color);
   background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
   border: none;
 }
-.pf-c-options-menu__toggle:not(.pf-m-text) {
-  padding-top: var(--pf-c-options-menu__toggle--PaddingTop);
-  padding-right: var(--pf-c-options-menu__toggle--PaddingRight);
-  padding-bottom: var(--pf-c-options-menu__toggle--PaddingBottom);
-}
 .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle::before {
   --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--expanded--BorderBottomColor);
   border-bottom-width: var(--pf-c-options-menu__toggle--expanded--BorderBottomWidth);
 }
-.pf-c-options-menu__toggle.pf-m-plain {
+.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
   --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
   --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
   display: inline-block;
-}
-.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
-  justify-content: center;
   color: var(--pf-c-options-menu__toggle--m-plain--Color);
 }
-.pf-c-options-menu__toggle.pf-m-plain .pf-c-options-menu__toggle-button-icon {
+.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) .pf-c-options-menu__toggle-button-icon {
   line-height: var(--pf-c-options-menu__toggle--LineHeight);
 }
-.pf-c-options-menu__toggle.pf-m-plain:hover, .pf-c-options-menu__toggle.pf-m-plain:active, .pf-c-options-menu__toggle.pf-m-plain.pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain {
+.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):hover, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):active, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text).pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
   --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
 }
-.pf-c-options-menu__toggle.pf-m-plain.pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:disabled {
+.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text).pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):disabled {
   --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--disabled--Color);
 }
 .pf-c-options-menu__toggle.pf-m-disabled, .pf-c-options-menu__toggle:disabled {

package/css/components/TextInputGroup/text-input-group.css

@@ -1,4 +1,5 @@
 .pf-c-text-input-group {
+  --pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-text-input-group__text--before--BorderColor: var(--pf-global--BorderColor--300);
   --pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
@@ -23,12 +24,24 @@
   --pf-c-text-input-group__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
   --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
   --pf-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
+  --pf-c-text-input-group--m-disabled--Color: var(--pf-global--disabled-color--100);
+  --pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
   position: relative;
   display: flex;
+  color: var(--pf-c-text-input-group--Color, inherit);
+  background-color: var(--pf-c-text-input-group--BackgroundColor);
 }
 .pf-c-text-input-group:hover {
   --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
 }
+.pf-c-text-input-group.pf-m-disabled {
+  --pf-c-text-input-group__text--before--BorderWidth: 0;
+  --pf-c-text-input-group__text--after--BorderBottomWidth: 0;
+  --pf-c-text-input-group--Color: var(--pf-c-text-input-group--m-disabled--Color);
+  --pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group--m-disabled--Color);
+  --pf-c-text-input-group--BackgroundColor: var(--pf-c-text-input-group--m-disabled--BackgroundColor);
+  pointer-events: none;
+}
 
 .pf-c-text-input-group__main {
   display: flex;

package/css/components/TextInputGroup/text-input-group.d.ts

@@ -4,6 +4,7 @@ declare const _default: {
   "chipGroup": "pf-c-chip-group",
   "chipGroupList": "pf-c-chip-group__list",
   "modifiers": {
+    "disabled": "pf-m-disabled",
     "icon": "pf-m-icon",
     "hint": "pf-m-hint"
   },

package/css/components/TextInputGroup/text-input-group.js

@@ -6,6 +6,7 @@ exports.default = {
   "chipGroup": "pf-c-chip-group",
   "chipGroupList": "pf-c-chip-group__list",
   "modifiers": {
+    "disabled": "pf-m-disabled",
     "icon": "pf-m-icon",
     "hint": "pf-m-hint"
   },

package/css/components/Tooltip/tooltip.css

@@ -26,26 +26,40 @@
   max-width: var(--pf-c-tooltip--MaxWidth);
   box-shadow: var(--pf-c-tooltip--BoxShadow);
 }
-.pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow {
+.pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow {
   bottom: 0;
   left: 50%;
   transform: translateX(var(--pf-c-tooltip__arrow--m-top--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-top--Rotate));
 }
-.pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow {
+.pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
   top: 0;
   left: 50%;
   transform: translateX(var(--pf-c-tooltip__arrow--m-bottom--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-bottom--Rotate));
 }
-.pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow {
+.pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow {
   top: 50%;
   right: 0;
   transform: translateX(var(--pf-c-tooltip__arrow--m-left--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-left--Rotate));
 }
-.pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow {
+.pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
   top: 50%;
   left: 0;
   transform: translateX(var(--pf-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-right--Rotate));
 }
+.pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow {
+  top: var(--pf-c-tooltip__arrow--Height);
+}
+.pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
+  top: auto;
+  bottom: 0;
+}
+.pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow {
+  left: var(--pf-c-tooltip__arrow--Width);
+}
+.pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
+  right: 0;
+  left: auto;
+}
 
 .pf-c-tooltip__content {
   position: relative;

package/css/components/Tooltip/tooltip.d.ts

@@ -2,9 +2,17 @@ import './tooltip.css';
 declare const _default: {
   "modifiers": {
     "top": "pf-m-top",
+    "topLeft": "pf-m-top-left",
+    "topRight": "pf-m-top-right",
     "bottom": "pf-m-bottom",
+    "bottomLeft": "pf-m-bottom-left",
+    "bottomRight": "pf-m-bottom-right",
     "left": "pf-m-left",
+    "leftTop": "pf-m-left-top",
+    "leftBottom": "pf-m-left-bottom",
     "right": "pf-m-right",
+    "rightTop": "pf-m-right-top",
+    "rightBottom": "pf-m-right-bottom",
     "textAlignLeft": "pf-m-text-align-left"
   },
   "tooltip": "pf-c-tooltip",

package/css/components/Tooltip/tooltip.js

@@ -4,9 +4,17 @@ require('./tooltip.css');
 exports.default = {
   "modifiers": {
     "top": "pf-m-top",
+    "topLeft": "pf-m-top-left",
+    "topRight": "pf-m-top-right",
     "bottom": "pf-m-bottom",
+    "bottomLeft": "pf-m-bottom-left",
+    "bottomRight": "pf-m-bottom-right",
     "left": "pf-m-left",
+    "leftTop": "pf-m-left-top",
+    "leftBottom": "pf-m-left-bottom",
     "right": "pf-m-right",
+    "rightTop": "pf-m-right-top",
+    "rightBottom": "pf-m-right-bottom",
     "textAlignLeft": "pf-m-text-align-left"
   },
   "tooltip": "pf-c-tooltip",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "4.19.2",
+  "version": "4.19.3",
   "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.151.4",
+    "@patternfly/patternfly": "4.154.1",
     "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": "fef8a9f3a2a4a522fba27c683d298fd817b95f57"
+  "gitHead": "b186647128d5712d685ba0de0eaff42b4b75cfd2"
 }