@patternfly/react-styles 5.0.0-alpha.10 → 5.0.0-alpha.12

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 5.0.0-alpha.12 (2023-05-18)
+
+### Features
+
+- **FormControls:** updated logic for rendering icons ([#9132](https://github.com/patternfly/patternfly-react/issues/9132)) ([9f4863f](https://github.com/patternfly/patternfly-react/commit/9f4863f3251e365142c44aace2c1aeba57ba6b3a))
+
+# 5.0.0-alpha.11 (2023-05-16)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
 # [5.0.0-alpha.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@5.0.0-alpha.9...@patternfly/react-styles@5.0.0-alpha.10) (2023-05-05)
 
 ### Bug Fixes

package/css/components/AboutModalBox/about-modal-box.css

@@ -10,7 +10,6 @@
 
 .pf-v5-c-about-modal-box {
   --pf-v5-c-about-modal-box--BackgroundColor: var(--pf-v5-global--palette--black-1000);
-  --pf-v5-c-about-modal-box--BackgroundImage: url("../../assets/images/pfbg-icon.svg");
   --pf-v5-c-about-modal-box--BackgroundPosition: bottom right;
   --pf-v5-c-about-modal-box--BackgroundSize--min-width: 200px;
   --pf-v5-c-about-modal-box--BackgroundSize--width: 60%;
@@ -41,9 +40,6 @@
   --pf-v5-c-about-modal-box__close--c-button--Height: calc(var(--pf-v5-c-about-modal-box__close--c-button--FontSize) * 2);
   --pf-v5-c-about-modal-box__close--c-button--BackgroundColor: var(--pf-v5-global--palette--black-1000);
   --pf-v5-c-about-modal-box__close--c-button--hover--BackgroundColor: rgba(3, 3, 3, 0.4);
-  --pf-v5-c-about-modal-box__hero--sm--BackgroundImage: url("../../assets/images/pfbg_992@2x.jpg");
-  --pf-v5-c-about-modal-box__hero--sm--BackgroundPosition: top left;
-  --pf-v5-c-about-modal-box__hero--sm--BackgroundSize: cover;
   --pf-v5-c-about-modal-box__brand-image--Height: 2.5rem;
   --pf-v5-c-about-modal-box__header--PaddingRight: var(--pf-v5-global--spacer--xl);
   --pf-v5-c-about-modal-box__header--PaddingBottom: var(--pf-v5-global--spacer--sm);
@@ -71,7 +67,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   background-color: var(--pf-v5-c-about-modal-box--BackgroundColor);
-  background-image: var(--pf-v5-c-about-modal-box--BackgroundImage);
+  background-image: var(--pf-v5-c-about-modal-box--BackgroundImage, none);
   background-repeat: no-repeat;
   background-position: var(--pf-v5-c-about-modal-box--BackgroundPosition);
   background-size: var(--pf-v5-c-about-modal-box--BackgroundSize);
@@ -198,6 +194,7 @@
   justify-content: center;
   width: var(--pf-v5-c-about-modal-box__close--c-button--Width);
   height: var(--pf-v5-c-about-modal-box__close--c-button--Height);
+  padding: 0;
   font-size: var(--pf-v5-c-about-modal-box__close--c-button--FontSize);
   color: var(--pf-v5-c-about-modal-box__close--c-button--Color);
   background-color: var(--pf-v5-c-about-modal-box__close--c-button--BackgroundColor);
@@ -207,21 +204,6 @@
   --pf-v5-c-about-modal-box__close--c-button--BackgroundColor: var(--pf-v5-c-about-modal-box__close--c-button--hover--BackgroundColor);
 }
 
-.pf-v5-c-about-modal-box__hero {
-  display: none;
-}
-@media only screen and (min-width: 576px) {
-  .pf-v5-c-about-modal-box__hero {
-    display: block;
-    grid-area: hero;
-    background-image: var(--pf-v5-c-about-modal-box__hero--sm--BackgroundImage);
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-position: var(--pf-v5-c-about-modal-box__hero--sm--BackgroundPosition);
-    background-size: var(--pf-v5-c-about-modal-box__hero--sm--BackgroundSize);
-  }
-}
-
 :where(.pf-v5-theme-dark) .pf-v5-c-about-modal-box {
   --pf-v5-global--Color--100: #e0e0e0;
   --pf-v5-global--Color--200: #aaabac;

package/css/components/AboutModalBox/about-modal-box.d.ts

@@ -6,7 +6,6 @@ declare const _default: {
   "aboutModalBoxClose": "pf-v5-c-about-modal-box__close",
   "aboutModalBoxContent": "pf-v5-c-about-modal-box__content",
   "aboutModalBoxHeader": "pf-v5-c-about-modal-box__header",
-  "aboutModalBoxHero": "pf-v5-c-about-modal-box__hero",
   "aboutModalBoxStrapline": "pf-v5-c-about-modal-box__strapline",
   "button": "pf-v5-c-button",
   "modifiers": {

package/css/components/AboutModalBox/about-modal-box.js

@@ -8,7 +8,6 @@ exports.default = {
   "aboutModalBoxClose": "pf-v5-c-about-modal-box__close",
   "aboutModalBoxContent": "pf-v5-c-about-modal-box__content",
   "aboutModalBoxHeader": "pf-v5-c-about-modal-box__header",
-  "aboutModalBoxHero": "pf-v5-c-about-modal-box__hero",
   "aboutModalBoxStrapline": "pf-v5-c-about-modal-box__strapline",
   "button": "pf-v5-c-button",
   "modifiers": {

package/css/components/AboutModalBox/about-modal-box.mjs

@@ -6,7 +6,6 @@ export default {
   "aboutModalBoxClose": "pf-v5-c-about-modal-box__close",
   "aboutModalBoxContent": "pf-v5-c-about-modal-box__content",
   "aboutModalBoxHeader": "pf-v5-c-about-modal-box__header",
-  "aboutModalBoxHero": "pf-v5-c-about-modal-box__hero",
   "aboutModalBoxStrapline": "pf-v5-c-about-modal-box__strapline",
   "button": "pf-v5-c-button",
   "modifiers": {

package/css/components/BackgroundImage/background-image.css

@@ -1,6 +1,5 @@
 .pf-v5-c-background-image {
   --pf-v5-c-background-image--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
-  --pf-v5-c-background-image--BackgroundImage: url("../../assets/images/pfbg-icon.svg");
   --pf-v5-c-background-image--BackgroundPosition: bottom right;
   --pf-v5-c-background-image--BackgroundSize--min-width: 200px;
   --pf-v5-c-background-image--BackgroundSize--width: 60%;
@@ -13,7 +12,7 @@
   width: 100%;
   height: 100%;
   background-color: var(--pf-v5-c-background-image--BackgroundColor);
-  background-image: var(--pf-v5-c-background-image--BackgroundImage);
+  background-image: var(--pf-v5-c-background-image--BackgroundImage, none);
   background-repeat: no-repeat;
   background-position: var(--pf-v5-c-background-image--BackgroundPosition);
   background-size: var(--pf-v5-c-background-image--BackgroundSize);

package/css/components/Breadcrumb/breadcrumb.css

@@ -2,7 +2,7 @@
   --pf-v5-c-breadcrumb__item--FontSize: var(--pf-v5-global--FontSize--sm);
   --pf-v5-c-breadcrumb__item--LineHeight: var(--pf-v5-global--LineHeight--sm);
   --pf-v5-c-breadcrumb__item--MarginRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-breadcrumb__item-divider--Color: var(--pf-v5-global--BorderColor--200);
+  --pf-v5-c-breadcrumb__item-divider--Color: var(--pf-v5-global--icon--Color--dark);
   --pf-v5-c-breadcrumb__item-divider--MarginRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-breadcrumb__item-divider--FontSize: var(--pf-v5-global--FontSize--sm);
   --pf-v5-c-breadcrumb__link--Color: var(--pf-v5-global--link--Color);
@@ -89,8 +89,4 @@ button.pf-v5-c-breadcrumb__link {
 
 .pf-v5-c-breadcrumb__list > :first-child .pf-v5-c-breadcrumb__item-divider {
   display: none;
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-breadcrumb {
-  --pf-v5-c-breadcrumb__item-divider--Color: var(--pf-v5-global--BorderColor--100);
 }

package/css/components/Breadcrumb/breadcrumb.d.ts

@@ -10,7 +10,6 @@ declare const _default: {
   "dropdownToggle": "pf-v5-c-dropdown__toggle",
   "modifiers": {
     "current": "pf-m-current"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };
 export default _default;

package/css/components/Breadcrumb/breadcrumb.js

@@ -12,6 +12,5 @@ exports.default = {
   "dropdownToggle": "pf-v5-c-dropdown__toggle",
   "modifiers": {
     "current": "pf-m-current"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };

package/css/components/Breadcrumb/breadcrumb.mjs

@@ -10,6 +10,5 @@ export default {
   "dropdownToggle": "pf-v5-c-dropdown__toggle",
   "modifiers": {
     "current": "pf-m-current"
-  },
-  "themeDark": "pf-v5-theme-dark"
+  }
 };