@patternfly/react-styles 4.53.0 → 4.54.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 4.54.0 (2022-04-18)
+
+
+### Features
+
+* **Progress stepper:** Updated to use render prop for popover ([#7190](https://github.com/patternfly/patternfly-react/issues/7190)) ([5eb8243](https://github.com/patternfly/patternfly-react/commit/5eb8243d63d1168d9b425a5322c08e04659ed843))
+
+
+
+
+
+## 4.53.2 (2022-04-18)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
+## 4.53.1 (2022-04-18)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
 # 4.53.0 (2022-04-14)
 
 

package/css/components/Login/login.css

@@ -207,17 +207,25 @@
     grid-template-columns: 1fr auto;
   }
 }
+
+.pf-c-login__main-header-utilities,
 .pf-c-login__main-header .pf-c-dropdown {
   grid-column: auto;
   grid-row: auto;
 }
 @media (min-width: 768px) {
-  .pf-c-login__main-header .pf-c-dropdown {
+  .pf-c-login__main-header-utilities,
+.pf-c-login__main-header .pf-c-dropdown {
     grid-column: 2/3;
     grid-row: 1;
   }
 }
 
+.pf-c-login__main-header-utilities .pf-c-dropdown {
+  grid-column: auto;
+  grid-row: auto;
+}
+
 .pf-c-login__main-header-desc {
   margin-bottom: var(--pf-c-login__main-header-desc--MarginBottom);
   font-size: var(--pf-c-login__main-header-desc--FontSize);

package/css/components/Login/login.d.ts

@@ -18,6 +18,7 @@ declare const _default: {
   "loginMainFooterLinksItemLink": "pf-c-login__main-footer-links-item-link",
   "loginMainHeader": "pf-c-login__main-header",
   "loginMainHeaderDesc": "pf-c-login__main-header-desc",
+  "loginMainHeaderUtilities": "pf-c-login__main-header-utilities",
   "title": "pf-c-title"
 };
 export default _default;

package/css/components/Login/login.js

@@ -20,5 +20,6 @@ exports.default = {
   "loginMainFooterLinksItemLink": "pf-c-login__main-footer-links-item-link",
   "loginMainHeader": "pf-c-login__main-header",
   "loginMainHeaderDesc": "pf-c-login__main-header-desc",
+  "loginMainHeaderUtilities": "pf-c-login__main-header-utilities",
   "title": "pf-c-title"
 };

package/css/components/Login/login.mjs

@@ -18,5 +18,6 @@ export default {
   "loginMainFooterLinksItemLink": "pf-c-login__main-footer-links-item-link",
   "loginMainHeader": "pf-c-login__main-header",
   "loginMainHeaderDesc": "pf-c-login__main-header-desc",
+  "loginMainHeaderUtilities": "pf-c-login__main-header-utilities",
   "title": "pf-c-title"
 };

package/css/components/Tabs/tabs.css

@@ -25,6 +25,8 @@
   --pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-global--palette--black-150);
   --pf-c-tabs__list--Display: flex;
   --pf-c-tabs__list--Visibility: visible;
+  --pf-c-tabs__item--m-action--before--ZIndex: var(--pf-global--ZIndex--xs);
+  --pf-c-tabs__item--m-action__link--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-tabs__link--Color: var(--pf-global--Color--200);
   --pf-c-tabs__link--FontSize: var(--pf-global--FontSize--md);
   --pf-c-tabs__link--BackgroundColor: transparent;
@@ -40,11 +42,14 @@
   --pf-c-tabs--m-vertical__link--PaddingBottom: var(--pf-global--spacer--md);
   --pf-c-tabs--m-box__link--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor: var(--pf-global--palette--black-400);
   --pf-c-tabs--m-secondary__link--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-tabs__link--before--border-color--base: var(--pf-global--BorderColor--100);
+  --pf-c-tabs__link--before--border-width--base: var(--pf-global--BorderWidth--sm);
+  --pf-c-tabs__link--before--BorderTopColor: var(--pf-c-tabs__link--before--border-color--base);
   --pf-c-tabs__link--before--BorderRightColor: var(--pf-c-tabs__link--before--border-color--base);
   --pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--before--border-color--base);
-  --pf-c-tabs__link--before--border-width--base: var(--pf-global--BorderWidth--sm);
+  --pf-c-tabs__link--before--BorderLeftColor: var(--pf-c-tabs__link--before--border-color--base);
   --pf-c-tabs__link--before--BorderTopWidth: 0;
   --pf-c-tabs__link--before--BorderRightWidth: 0;
   --pf-c-tabs__link--before--BorderBottomWidth: 0;
@@ -102,6 +107,19 @@
   --pf-c-tabs__toggle-button--MarginLeft: calc(-1 * var(--pf-global--spacer--md));
   --pf-c-tabs--m-expanded__toggle-icon--Color: var(--pf-global--Color--100);
   --pf-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
+  --pf-c-tabs__item-close--c-button--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-tabs--m-secondary__item-close--c-button--FontSize: var(--pf-global--icon--FontSize--sm);
+  --pf-c-tabs__item-close--c-button--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-tabs__item-close--c-button--PaddingBottom: var(--pf-global--spacer--sm);
+  --pf-c-tabs__item-close--c-button--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-tabs__item-close--c-button--OutlineOffset: -0.1875rem;
+  --pf-c-tabs__item-close-icon--MarginTop: 0.125rem;
+  --pf-c-tabs__add--before--BorderColor: var(--pf-c-tabs__link--before--border-color--base);
+  --pf-c-tabs__add--before--BorderLeftWidth: var(--pf-c-tabs__link--before--border-width--base);
+  --pf-c-tabs__add--c-button--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-tabs--m-secondary__add--c-button--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-tabs__add--c-button--PaddingTop: var(--pf-c-tabs__link--PaddingTop);
+  --pf-c-tabs__add--c-button--PaddingBottom: var(--pf-c-tabs__link--PaddingBottom);
   position: relative;
   display: flex;
   width: var(--pf-c-tabs--Width);
@@ -200,6 +218,9 @@
   --pf-c-tabs__item--m-current__link--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__item--m-current__link--BackgroundColor);
   --pf-c-tabs__link--disabled--BackgroundColor: var(--pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor);
 }
+.pf-c-tabs.pf-m-box .pf-c-tabs__item-close .pf-c-button {
+  --pf-c-button--m-plain--disabled--Color: var(--pf-c-tabs--m-box__item-close--c-button--disabled--BackgroundColor);
+}
 .pf-c-tabs.pf-m-vertical {
   --pf-c-tabs--Width: var(--pf-c-tabs--m-vertical--Width);
   --pf-c-tabs--inset: var(--pf-c-tabs--m-vertical--inset);
@@ -372,6 +393,8 @@
 }
 .pf-c-tabs.pf-m-secondary {
   --pf-c-tabs__link--FontSize: var(--pf-c-tabs--m-secondary__link--FontSize);
+  --pf-c-tabs__item-close--c-button--FontSize: var(--pf-c-tabs--m-secondary__item-close--c-button--FontSize);
+  --pf-c-tabs__add--c-button--FontSize: var(--pf-c-tabs--m-secondary__add--c-button--FontSize);
 }
 .pf-c-tabs.pf-m-page-insets {
   --pf-c-tabs--inset: var(--pf-c-tabs--m-page-insets--inset);
@@ -435,12 +458,26 @@
   --pf-c-tabs__link--after--BorderColor: var(--pf-c-tabs__item--m-current__link--after--BorderColor);
   --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__item--m-current__link--after--BorderWidth);
 }
+.pf-c-tabs__item.pf-m-action {
+  --pf-c-tabs__link--PaddingRight: var(--pf-c-tabs__item--m-action__link--PaddingRight);
+  position: relative;
+}
+.pf-c-tabs__item.pf-m-action::before {
+  z-index: var(--pf-c-tabs__item--m-action--before--ZIndex);
+}
+.pf-c-tabs__item.pf-m-action .pf-c-tabs__link::before,
+.pf-c-tabs__item.pf-m-action .pf-c-tabs__link::after {
+  content: revert;
+}
 
 .pf-c-tabs::before,
 .pf-c-tabs__list::before,
 .pf-c-tabs__link::before,
 .pf-c-tabs__link::after,
-.pf-c-tabs__scroll-button::before {
+.pf-c-tabs__item.pf-m-action::before,
+.pf-c-tabs__item.pf-m-action::after,
+.pf-c-tabs__scroll-button::before,
+.pf-c-tabs__add::before {
   position: absolute;
   right: 0;
   bottom: 0;
@@ -452,18 +489,21 @@
 .pf-c-tabs__list::before,
 .pf-c-tabs__link::before,
 .pf-c-tabs__link::after,
-.pf-c-tabs__scroll-button::before {
+.pf-c-tabs__item.pf-m-action::before,
+.pf-c-tabs__item.pf-m-action::after,
+.pf-c-tabs__scroll-button::before,
+.pf-c-tabs__add::before {
   top: 0;
 }
 
 .pf-c-tabs__link,
 .pf-c-tabs__scroll-button,
-.pf-c-tabs__list::before {
+.pf-c-tabs__list::before,
+.pf-c-tabs__add::before {
   border: 0;
 }
 
 .pf-c-tabs__link {
-  --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth);
   position: relative;
   display: flex;
   flex: 1;
@@ -471,17 +511,23 @@
   font-size: var(--pf-c-tabs__link--FontSize);
   color: var(--pf-c-tabs__link--Color);
   text-decoration: none;
-  background-color: var(--pf-c-tabs__link--BackgroundColor);
   outline-offset: var(--pf-c-tabs__link--OutlineOffset);
 }
-.pf-c-tabs__link::before {
+.pf-c-tabs__item.pf-m-action, .pf-c-tabs__link {
+  --pf-c-tabs__link--after--BorderBottomWidth: var(--pf-c-tabs__link--after--BorderWidth);
+  background-color: var(--pf-c-tabs__link--BackgroundColor);
+}
+
+.pf-c-tabs__item.pf-m-action::before, .pf-c-tabs__link::before {
   pointer-events: none;
-  border-color: var(--pf-c-tabs__link--before--border-color--base);
   border-width: var(--pf-c-tabs__link--before--BorderTopWidth) var(--pf-c-tabs__link--before--BorderRightWidth) var(--pf-c-tabs__link--before--BorderBottomWidth) var(--pf-c-tabs__link--before--BorderLeftWidth);
+  border-top-color: var(--pf-c-tabs__link--before--BorderTopColor);
   border-right-color: var(--pf-c-tabs__link--before--BorderRightColor);
   border-bottom-color: var(--pf-c-tabs__link--before--BorderBottomColor);
+  border-left-color: var(--pf-c-tabs__link--before--BorderLeftColor);
 }
-.pf-c-tabs__link::after {
+
+.pf-c-tabs__item.pf-m-action::after, .pf-c-tabs__link::after {
   top: var(--pf-c-tabs__link--after--Top);
   right: var(--pf-c-tabs__link--after--Right);
   bottom: var(--pf-c-tabs__link--after--Bottom);
@@ -489,25 +535,30 @@
   border-color: var(--pf-c-tabs__link--after--BorderColor);
   border-width: var(--pf-c-tabs__link--after--BorderTopWidth) var(--pf-c-tabs__link--after--BorderRightWidth) var(--pf-c-tabs__link--after--BorderBottomWidth) var(--pf-c-tabs__link--after--BorderLeftWidth);
 }
-.pf-c-tabs__link:hover {
+
+.pf-c-tabs__item.pf-m-action:hover, .pf-c-tabs__link:hover {
   --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--hover--after--BorderWidth);
 }
-.pf-c-tabs__link:focus {
+
+.pf-c-tabs__item.pf-m-action:focus-within, .pf-c-tabs__link:focus {
   --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--focus--after--BorderWidth);
 }
-.pf-c-tabs__link:active {
+
+.pf-c-tabs__item.pf-m-action:active, .pf-c-tabs__link:active {
   --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth);
 }
+
 .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled {
   pointer-events: none;
 }
-.pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled {
+.pf-c-tabs__item.pf-m-action.pf-m-disabled, .pf-c-tabs__link:disabled, .pf-c-tabs__link.pf-m-disabled, .pf-c-tabs__link.pf-m-aria-disabled {
   --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor);
   --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth);
   --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--disabled--before--BorderBottomWidth);
   --pf-c-tabs__link--before--BorderLeftWidth: var(--pf-c-tabs__link--disabled--before--BorderLeftWidth);
   --pf-c-tabs__link--after--BorderWidth: 0;
 }
+
 .pf-c-tabs__link.pf-m-aria-disabled {
   cursor: default;
 }
@@ -520,6 +571,22 @@
   --pf-c-tabs__link--child--MarginRight: 0;
 }
 
+.pf-c-tabs__item-close {
+  display: flex;
+}
+.pf-c-tabs__item-close .pf-c-button {
+  --pf-c-button--FontSize: var(--pf-c-tabs__item-close--c-button--FontSize);
+  --pf-c-button--PaddingTop: var(--pf-c-tabs__item-close--c-button--PaddingTop);
+  --pf-c-button--PaddingBottom: var(--pf-c-tabs__item-close--c-button--PaddingBottom);
+  --pf-c-button--PaddingLeft: var(--pf-c-tabs__item-close--c-button--PaddingLeft);
+  outline-offset: var(--pf-c-tabs__item-close--c-button--OutlineOffset);
+}
+
+.pf-c-tabs__item-close-icon {
+  display: inline-block;
+  margin-top: var(--pf-c-tabs__item-close-icon--MarginTop);
+}
+
 .pf-c-tabs__scroll-button {
   flex: none;
   width: var(--pf-c-tabs__scroll-button--Width);
@@ -552,6 +619,19 @@
   pointer-events: none;
 }
 
+.pf-c-tabs__add {
+  position: relative;
+  display: flex;
+}
+.pf-c-tabs__add::before {
+  border-left: var(--pf-c-tabs__add--before--BorderLeftWidth) solid var(--pf-c-tabs__add--before--BorderColor);
+}
+.pf-c-tabs__add .pf-c-button {
+  --pf-c-button--FontSize: var(--pf-c-tabs__add--c-button--FontSize);
+  --pf-c-button--PaddingTop: var(--pf-c-tabs__add--c-button--PaddingTop);
+  --pf-c-button--PaddingBottom: var(--pf-c-tabs__add--c-button--PaddingBottom);
+}
+
 .pf-c-tabs.pf-m-inset-none {
   --pf-c-tabs--inset: 0;
   --pf-c-tabs--m-vertical--inset: 0;

package/css/components/Tabs/tabs.d.ts

@@ -25,6 +25,7 @@ declare const _default: {
     "nonExpandableOn_2xl": "pf-m-non-expandable-on-2xl",
     "expanded": "pf-m-expanded",
     "pageInsets": "pf-m-page-insets",
+    "action": "pf-m-action",
     "disabled": "pf-m-disabled",
     "ariaDisabled": "pf-m-aria-disabled",
     "insetNone": "pf-m-inset-none",
@@ -65,7 +66,10 @@ declare const _default: {
     "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
   },
   "tabs": "pf-c-tabs",
+  "tabsAdd": "pf-c-tabs__add",
   "tabsItem": "pf-c-tabs__item",
+  "tabsItemClose": "pf-c-tabs__item-close",
+  "tabsItemCloseIcon": "pf-c-tabs__item-close-icon",
   "tabsItemIcon": "pf-c-tabs__item-icon",
   "tabsItemText": "pf-c-tabs__item-text",
   "tabsLink": "pf-c-tabs__link",

package/css/components/Tabs/tabs.js

@@ -27,6 +27,7 @@ exports.default = {
     "nonExpandableOn_2xl": "pf-m-non-expandable-on-2xl",
     "expanded": "pf-m-expanded",
     "pageInsets": "pf-m-page-insets",
+    "action": "pf-m-action",
     "disabled": "pf-m-disabled",
     "ariaDisabled": "pf-m-aria-disabled",
     "insetNone": "pf-m-inset-none",
@@ -67,7 +68,10 @@ exports.default = {
     "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
   },
   "tabs": "pf-c-tabs",
+  "tabsAdd": "pf-c-tabs__add",
   "tabsItem": "pf-c-tabs__item",
+  "tabsItemClose": "pf-c-tabs__item-close",
+  "tabsItemCloseIcon": "pf-c-tabs__item-close-icon",
   "tabsItemIcon": "pf-c-tabs__item-icon",
   "tabsItemText": "pf-c-tabs__item-text",
   "tabsLink": "pf-c-tabs__link",

package/css/components/Tabs/tabs.mjs

@@ -25,6 +25,7 @@ export default {
     "nonExpandableOn_2xl": "pf-m-non-expandable-on-2xl",
     "expanded": "pf-m-expanded",
     "pageInsets": "pf-m-page-insets",
+    "action": "pf-m-action",
     "disabled": "pf-m-disabled",
     "ariaDisabled": "pf-m-aria-disabled",
     "insetNone": "pf-m-inset-none",
@@ -65,7 +66,10 @@ export default {
     "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
   },
   "tabs": "pf-c-tabs",
+  "tabsAdd": "pf-c-tabs__add",
   "tabsItem": "pf-c-tabs__item",
+  "tabsItemClose": "pf-c-tabs__item-close",
+  "tabsItemCloseIcon": "pf-c-tabs__item-close-icon",
   "tabsItemIcon": "pf-c-tabs__item-icon",
   "tabsItemText": "pf-c-tabs__item-text",
   "tabsLink": "pf-c-tabs__link",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "4.53.0",
+  "version": "4.54.0",
   "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.187.0",
+    "@patternfly/patternfly": "4.190.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": "3a30fbb3c5935b2e9a0fbb6336b1b45cfca46a7a"
+  "gitHead": "9116e7cc699cff22722794c15cda402c1cabf67b"
 }