@patternfly/patternfly 5.0.0-alpha.51 → 5.0.0-alpha.53

package/components/Tabs/tabs.css

@@ -643,10 +643,10 @@
   outline-offset: var(--pf-v5-c-tabs__add--c-button--OutlineOffset);
 }
 
-.pf-v5-c-tabs.pf-m-inset-base {
-  --pf-v5-c-tabs--inset: ;
-  --pf-v5-c-tabs--m-vertical--inset: ;
-  --pf-v5-c-tabs--m-vertical--m-box--inset: ;
+.pf-v5-c-tabs.pf-m-inset-none {
+  --pf-v5-c-tabs--inset: 0;
+  --pf-v5-c-tabs--m-vertical--inset: 0;
+  --pf-v5-c-tabs--m-vertical--m-box--inset: 0;
 }
 .pf-v5-c-tabs.pf-m-inset-sm {
   --pf-v5-c-tabs--inset: var(--pf-v5-global--spacer--sm);
@@ -674,10 +674,10 @@
   --pf-v5-c-tabs--m-vertical--m-box--inset: var(--pf-v5-global--spacer--2xl);
 }
 @media (min-width: 576px) {
-  .pf-v5-c-tabs.pf-m-inset-base-on-sm {
-    --pf-v5-c-tabs--inset: ;
-    --pf-v5-c-tabs--m-vertical--inset: ;
-    --pf-v5-c-tabs--m-vertical--m-box--inset: ;
+  .pf-v5-c-tabs.pf-m-inset-none-on-sm {
+    --pf-v5-c-tabs--inset: 0;
+    --pf-v5-c-tabs--m-vertical--inset: 0;
+    --pf-v5-c-tabs--m-vertical--m-box--inset: 0;
   }
   .pf-v5-c-tabs.pf-m-inset-sm-on-sm {
     --pf-v5-c-tabs--inset: var(--pf-v5-global--spacer--sm);
@@ -706,10 +706,10 @@
   }
 }
 @media (min-width: 768px) {
-  .pf-v5-c-tabs.pf-m-inset-base-on-md {
-    --pf-v5-c-tabs--inset: ;
-    --pf-v5-c-tabs--m-vertical--inset: ;
-    --pf-v5-c-tabs--m-vertical--m-box--inset: ;
+  .pf-v5-c-tabs.pf-m-inset-none-on-md {
+    --pf-v5-c-tabs--inset: 0;
+    --pf-v5-c-tabs--m-vertical--inset: 0;
+    --pf-v5-c-tabs--m-vertical--m-box--inset: 0;
   }
   .pf-v5-c-tabs.pf-m-inset-sm-on-md {
     --pf-v5-c-tabs--inset: var(--pf-v5-global--spacer--sm);
@@ -738,10 +738,10 @@
   }
 }
 @media (min-width: 992px) {
-  .pf-v5-c-tabs.pf-m-inset-base-on-lg {
-    --pf-v5-c-tabs--inset: ;
-    --pf-v5-c-tabs--m-vertical--inset: ;
-    --pf-v5-c-tabs--m-vertical--m-box--inset: ;
+  .pf-v5-c-tabs.pf-m-inset-none-on-lg {
+    --pf-v5-c-tabs--inset: 0;
+    --pf-v5-c-tabs--m-vertical--inset: 0;
+    --pf-v5-c-tabs--m-vertical--m-box--inset: 0;
   }
   .pf-v5-c-tabs.pf-m-inset-sm-on-lg {
     --pf-v5-c-tabs--inset: var(--pf-v5-global--spacer--sm);
@@ -770,10 +770,10 @@
   }
 }
 @media (min-width: 1200px) {
-  .pf-v5-c-tabs.pf-m-inset-base-on-xl {
-    --pf-v5-c-tabs--inset: ;
-    --pf-v5-c-tabs--m-vertical--inset: ;
-    --pf-v5-c-tabs--m-vertical--m-box--inset: ;
+  .pf-v5-c-tabs.pf-m-inset-none-on-xl {
+    --pf-v5-c-tabs--inset: 0;
+    --pf-v5-c-tabs--m-vertical--inset: 0;
+    --pf-v5-c-tabs--m-vertical--m-box--inset: 0;
   }
   .pf-v5-c-tabs.pf-m-inset-sm-on-xl {
     --pf-v5-c-tabs--inset: var(--pf-v5-global--spacer--sm);
@@ -802,10 +802,10 @@
   }
 }
 @media (min-width: 1450px) {
-  .pf-v5-c-tabs.pf-m-inset-base-on-2xl {
-    --pf-v5-c-tabs--inset: ;
-    --pf-v5-c-tabs--m-vertical--inset: ;
-    --pf-v5-c-tabs--m-vertical--m-box--inset: ;
+  .pf-v5-c-tabs.pf-m-inset-none-on-2xl {
+    --pf-v5-c-tabs--inset: 0;
+    --pf-v5-c-tabs--m-vertical--inset: 0;
+    --pf-v5-c-tabs--m-vertical--m-box--inset: 0;
   }
   .pf-v5-c-tabs.pf-m-inset-sm-on-2xl {
     --pf-v5-c-tabs--inset: var(--pf-v5-global--spacer--sm);

package/components/Toolbar/toolbar.css

@@ -678,10 +678,10 @@
     flex-wrap: wrap;
   }
 }
-.pf-v5-c-toolbar .pf-m-space-items-base > * {
-  --pf-v5-c-toolbar--spacer: ;
+.pf-v5-c-toolbar .pf-m-space-items-none > * {
+  --pf-v5-c-toolbar--spacer: 0;
 }
-.pf-v5-c-toolbar .pf-m-space-items-base > :last-child {
+.pf-v5-c-toolbar .pf-m-space-items-none > :last-child {
   --pf-v5-c-toolbar--spacer: 0;
 }
 .pf-v5-c-toolbar .pf-m-space-items-sm > * {
@@ -703,10 +703,10 @@
   --pf-v5-c-toolbar--spacer: 0;
 }
 @media (min-width: 576px) {
-  .pf-v5-c-toolbar .pf-m-space-items-base-on-sm > * {
-    --pf-v5-c-toolbar--spacer: ;
+  .pf-v5-c-toolbar .pf-m-space-items-none-on-sm > * {
+    --pf-v5-c-toolbar--spacer: 0;
   }
-  .pf-v5-c-toolbar .pf-m-space-items-base-on-sm > :last-child {
+  .pf-v5-c-toolbar .pf-m-space-items-none-on-sm > :last-child {
     --pf-v5-c-toolbar--spacer: 0;
   }
   .pf-v5-c-toolbar .pf-m-space-items-sm-on-sm > * {
@@ -729,10 +729,10 @@
   }
 }
 @media (min-width: 768px) {
-  .pf-v5-c-toolbar .pf-m-space-items-base-on-md > * {
-    --pf-v5-c-toolbar--spacer: ;
+  .pf-v5-c-toolbar .pf-m-space-items-none-on-md > * {
+    --pf-v5-c-toolbar--spacer: 0;
   }
-  .pf-v5-c-toolbar .pf-m-space-items-base-on-md > :last-child {
+  .pf-v5-c-toolbar .pf-m-space-items-none-on-md > :last-child {
     --pf-v5-c-toolbar--spacer: 0;
   }
   .pf-v5-c-toolbar .pf-m-space-items-sm-on-md > * {
@@ -755,10 +755,10 @@
   }
 }
 @media (min-width: 992px) {
-  .pf-v5-c-toolbar .pf-m-space-items-base-on-lg > * {
-    --pf-v5-c-toolbar--spacer: ;
+  .pf-v5-c-toolbar .pf-m-space-items-none-on-lg > * {
+    --pf-v5-c-toolbar--spacer: 0;
   }
-  .pf-v5-c-toolbar .pf-m-space-items-base-on-lg > :last-child {
+  .pf-v5-c-toolbar .pf-m-space-items-none-on-lg > :last-child {
     --pf-v5-c-toolbar--spacer: 0;
   }
   .pf-v5-c-toolbar .pf-m-space-items-sm-on-lg > * {
@@ -781,10 +781,10 @@
   }
 }
 @media (min-width: 1200px) {
-  .pf-v5-c-toolbar .pf-m-space-items-base-on-xl > * {
-    --pf-v5-c-toolbar--spacer: ;
+  .pf-v5-c-toolbar .pf-m-space-items-none-on-xl > * {
+    --pf-v5-c-toolbar--spacer: 0;
   }
-  .pf-v5-c-toolbar .pf-m-space-items-base-on-xl > :last-child {
+  .pf-v5-c-toolbar .pf-m-space-items-none-on-xl > :last-child {
     --pf-v5-c-toolbar--spacer: 0;
   }
   .pf-v5-c-toolbar .pf-m-space-items-sm-on-xl > * {
@@ -807,10 +807,10 @@
   }
 }
 @media (min-width: 1450px) {
-  .pf-v5-c-toolbar .pf-m-space-items-base-on-2xl > * {
-    --pf-v5-c-toolbar--spacer: ;
+  .pf-v5-c-toolbar .pf-m-space-items-none-on-2xl > * {
+    --pf-v5-c-toolbar--spacer: 0;
   }
-  .pf-v5-c-toolbar .pf-m-space-items-base-on-2xl > :last-child {
+  .pf-v5-c-toolbar .pf-m-space-items-none-on-2xl > :last-child {
     --pf-v5-c-toolbar--spacer: 0;
   }
   .pf-v5-c-toolbar .pf-m-space-items-sm-on-2xl > * {
@@ -832,11 +832,11 @@
     --pf-v5-c-toolbar--spacer: 0;
   }
 }
-.pf-v5-c-toolbar .pf-m-spacer-base {
-  --pf-v5-c-toolbar--spacer: ;
+.pf-v5-c-toolbar .pf-m-spacer-none {
+  --pf-v5-c-toolbar--spacer: 0;
 }
-.pf-v5-c-toolbar .pf-m-spacer-base:last-child {
-  --pf-v5-c-toolbar--spacer: ;
+.pf-v5-c-toolbar .pf-m-spacer-none:last-child {
+  --pf-v5-c-toolbar--spacer: 0;
 }
 .pf-v5-c-toolbar .pf-m-spacer-sm {
   --pf-v5-c-toolbar--spacer: var(--pf-v5-global--spacer--sm);
@@ -857,11 +857,11 @@
   --pf-v5-c-toolbar--spacer: var(--pf-v5-global--spacer--lg);
 }
 @media (min-width: 576px) {
-  .pf-v5-c-toolbar .pf-m-spacer-base-on-sm {
-    --pf-v5-c-toolbar--spacer: ;
+  .pf-v5-c-toolbar .pf-m-spacer-none-on-sm {
+    --pf-v5-c-toolbar--spacer: 0;
   }
-  .pf-v5-c-toolbar .pf-m-spacer-base-on-sm:last-child {
-    --pf-v5-c-toolbar--spacer: ;
+  .pf-v5-c-toolbar .pf-m-spacer-none-on-sm:last-child {
+    --pf-v5-c-toolbar--spacer: 0;
   }
   .pf-v5-c-toolbar .pf-m-spacer-sm-on-sm {
     --pf-v5-c-toolbar--spacer: var(--pf-v5-global--spacer--sm);
@@ -883,11 +883,11 @@
   }
 }
 @media (min-width: 768px) {
-  .pf-v5-c-toolbar .pf-m-spacer-base-on-md {
-    --pf-v5-c-toolbar--spacer: ;
+  .pf-v5-c-toolbar .pf-m-spacer-none-on-md {
+    --pf-v5-c-toolbar--spacer: 0;
   }
-  .pf-v5-c-toolbar .pf-m-spacer-base-on-md:last-child {
-    --pf-v5-c-toolbar--spacer: ;
+  .pf-v5-c-toolbar .pf-m-spacer-none-on-md:last-child {
+    --pf-v5-c-toolbar--spacer: 0;
   }
   .pf-v5-c-toolbar .pf-m-spacer-sm-on-md {
     --pf-v5-c-toolbar--spacer: var(--pf-v5-global--spacer--sm);
@@ -909,11 +909,11 @@
   }
 }
 @media (min-width: 992px) {
-  .pf-v5-c-toolbar .pf-m-spacer-base-on-lg {
-    --pf-v5-c-toolbar--spacer: ;
+  .pf-v5-c-toolbar .pf-m-spacer-none-on-lg {
+    --pf-v5-c-toolbar--spacer: 0;
   }
-  .pf-v5-c-toolbar .pf-m-spacer-base-on-lg:last-child {
-    --pf-v5-c-toolbar--spacer: ;
+  .pf-v5-c-toolbar .pf-m-spacer-none-on-lg:last-child {
+    --pf-v5-c-toolbar--spacer: 0;
   }
   .pf-v5-c-toolbar .pf-m-spacer-sm-on-lg {
     --pf-v5-c-toolbar--spacer: var(--pf-v5-global--spacer--sm);
@@ -935,11 +935,11 @@
   }
 }
 @media (min-width: 1200px) {
-  .pf-v5-c-toolbar .pf-m-spacer-base-on-xl {
-    --pf-v5-c-toolbar--spacer: ;
+  .pf-v5-c-toolbar .pf-m-spacer-none-on-xl {
+    --pf-v5-c-toolbar--spacer: 0;
   }
-  .pf-v5-c-toolbar .pf-m-spacer-base-on-xl:last-child {
-    --pf-v5-c-toolbar--spacer: ;
+  .pf-v5-c-toolbar .pf-m-spacer-none-on-xl:last-child {
+    --pf-v5-c-toolbar--spacer: 0;
   }
   .pf-v5-c-toolbar .pf-m-spacer-sm-on-xl {
     --pf-v5-c-toolbar--spacer: var(--pf-v5-global--spacer--sm);
@@ -961,11 +961,11 @@
   }
 }
 @media (min-width: 1450px) {
-  .pf-v5-c-toolbar .pf-m-spacer-base-on-2xl {
-    --pf-v5-c-toolbar--spacer: ;
+  .pf-v5-c-toolbar .pf-m-spacer-none-on-2xl {
+    --pf-v5-c-toolbar--spacer: 0;
   }
-  .pf-v5-c-toolbar .pf-m-spacer-base-on-2xl:last-child {
-    --pf-v5-c-toolbar--spacer: ;
+  .pf-v5-c-toolbar .pf-m-spacer-none-on-2xl:last-child {
+    --pf-v5-c-toolbar--spacer: 0;
   }
   .pf-v5-c-toolbar .pf-m-spacer-sm-on-2xl {
     --pf-v5-c-toolbar--spacer: var(--pf-v5-global--spacer--sm);
@@ -986,8 +986,8 @@
     --pf-v5-c-toolbar--spacer: var(--pf-v5-global--spacer--lg);
   }
 }
-.pf-v5-c-toolbar.pf-m-inset-base {
-  --pf-v5-c-toolbar--inset: ;
+.pf-v5-c-toolbar.pf-m-inset-none {
+  --pf-v5-c-toolbar--inset: 0;
   --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-toolbar--inset);
   --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-toolbar--inset);
 }
@@ -1017,8 +1017,8 @@
   --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-toolbar--inset);
 }
 @media (min-width: 576px) {
-  .pf-v5-c-toolbar.pf-m-inset-base-on-sm {
-    --pf-v5-c-toolbar--inset: ;
+  .pf-v5-c-toolbar.pf-m-inset-none-on-sm {
+    --pf-v5-c-toolbar--inset: 0;
     --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-toolbar--inset);
     --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-toolbar--inset);
   }
@@ -1049,8 +1049,8 @@
   }
 }
 @media (min-width: 768px) {
-  .pf-v5-c-toolbar.pf-m-inset-base-on-md {
-    --pf-v5-c-toolbar--inset: ;
+  .pf-v5-c-toolbar.pf-m-inset-none-on-md {
+    --pf-v5-c-toolbar--inset: 0;
     --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-toolbar--inset);
     --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-toolbar--inset);
   }
@@ -1081,8 +1081,8 @@
   }
 }
 @media (min-width: 992px) {
-  .pf-v5-c-toolbar.pf-m-inset-base-on-lg {
-    --pf-v5-c-toolbar--inset: ;
+  .pf-v5-c-toolbar.pf-m-inset-none-on-lg {
+    --pf-v5-c-toolbar--inset: 0;
     --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-toolbar--inset);
     --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-toolbar--inset);
   }
@@ -1113,8 +1113,8 @@
   }
 }
 @media (min-width: 1200px) {
-  .pf-v5-c-toolbar.pf-m-inset-base-on-xl {
-    --pf-v5-c-toolbar--inset: ;
+  .pf-v5-c-toolbar.pf-m-inset-none-on-xl {
+    --pf-v5-c-toolbar--inset: 0;
     --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-toolbar--inset);
     --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-toolbar--inset);
   }
@@ -1145,8 +1145,8 @@
   }
 }
 @media (min-width: 1450px) {
-  .pf-v5-c-toolbar.pf-m-inset-base-on-2xl {
-    --pf-v5-c-toolbar--inset: ;
+  .pf-v5-c-toolbar.pf-m-inset-none-on-2xl {
+    --pf-v5-c-toolbar--inset: 0;
     --pf-v5-c-toolbar__content--PaddingRight: var(--pf-v5-c-toolbar--inset);
     --pf-v5-c-toolbar__content--PaddingLeft: var(--pf-v5-c-toolbar--inset);
   }

package/docs/components/AboutModalBox/examples/AboutModalBox.md

@@ -7,7 +7,10 @@ cssPrefix: pf-v5-c-about-modal-box
 ### Basic
 
 ```html isFullscreen
-<div class="pf-v5-c-about-modal-box">
+<div
+  class="pf-v5-c-about-modal-box"
+  style="--pf-v5-c-about-modal-box--BackgroundImage: url(/assets/images/pfbg-icon.svg)"
+>
   <div class="pf-v5-c-about-modal-box__brand">
     <img
       class="pf-v5-c-about-modal-box__brand-image"
@@ -39,20 +42,14 @@ cssPrefix: pf-v5-c-about-modal-box
 
 ## Documentation
 
+In order to add a background image, set the `--pf-v5-c-about-modal-box--BackgroundImage` CSS variable to the path of the image. For example: `--pf-v5-c-about-modal-box--BackgroundImage: url(custom/path/image.jpg);`
+
 ### Accessibility
 
 | Attribute | Applies to | Outcome |
 | -- | -- | -- |
 | `aria-label="Close Dialog"` | `.pf-v5-c-modal-box__close .pf-v5-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required** |
 
-### Customizing the background image
-
-In order to use a custom image, pass a new value to the `--pf-v5-c-about-modal-box--BackgroundImage` CSS variable. For example:
-
-```css
---pf-v5-c-about-modal-box--BackgroundImage: url("custom/image/path");
-```
-
 ### Usage
 
 | Class | Applied to | Outcome |
@@ -65,3 +62,4 @@ In order to use a custom image, pass a new value to the `--pf-v5-c-about-modal-b
 | `.pf-v5-c-about-modal-box__content` |  `<div>` |  Initiates a modal box content cell. |
 | `.pf-v5-c-about-modal-box__body` |  `<div>` |  Initiates a modal box body cell. |
 | `.pf-v5-c-about-modal-box__strapline` |  `<p>` |  Initiates a modal box strapline cell. |
+| `--pf-v5-c-about-modal-box--BackgroundImage` |  `.pf-v5-c-about-modal-box` |  Sets the background image for the about modal. |

package/docs/components/BackgroundImage/examples/BackgroundImage.md

@@ -7,7 +7,10 @@ cssPrefix: pf-v5-c-background-image
 ### Basic
 
 ```html isFullscreen
-<div class="pf-v5-c-background-image"></div>
+<div
+  class="pf-v5-c-background-image"
+  style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pfbg-icon.svg)"
+></div>
 
 ```
 
@@ -15,18 +18,11 @@ cssPrefix: pf-v5-c-background-image
 
 ### Overview
 
-This component puts an image on the background.
-
-### Customizing the background image
-
-In order to use a custom image, pass a new value to the `--pf-v5-c-background-image--BackgroundImage` CSS variable. For example:
-
-```css
---pf-v5-c-background-image--BackgroundImage: url("custom/image/path");
-```
+In order to set the background image to be used, set the `--pf-v5-c-background-image--BackgroundImage` CSS variable to the path of the image. For example: `--pf-v5-c-background-image--BackgroundImage: url(custom/path/image.jpg);`
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-background-image` | `*` |  A fixed background image is applied to the background of the page. |
+| `.pf-v5-c-background-image` | `*` | A fixed background image is applied to the background of the page. |
+| `--pf-v5-c-background-image--BackgroundImage` | `.pf-v5-c-background-image` | Sets the background image to be used. **Required** |

package/docs/components/Login/examples/Login.md

@@ -8,7 +8,10 @@ wrapperTag: div
 ### Basic
 
 ```html isFullscreen
-<div class="pf-v5-c-background-image"></div>
+<div
+  class="pf-v5-c-background-image"
+  style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pfbg-icon.svg)"
+></div>
 <div class="pf-v5-c-login">
   <div class="pf-v5-c-login__container">
     <header class="pf-v5-c-login__header">
@@ -213,7 +216,10 @@ wrapperTag: div
 ### Invalid
 
 ```html isFullscreen
-<div class="pf-v5-c-background-image"></div>
+<div
+  class="pf-v5-c-background-image"
+  style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pfbg-icon.svg)"
+></div>
 <div class="pf-v5-c-login">
   <div class="pf-v5-c-login__container">
     <header class="pf-v5-c-login__header">
@@ -424,7 +430,10 @@ wrapperTag: div
 ### Show password
 
 ```html isFullscreen
-<div class="pf-v5-c-background-image"></div>
+<div
+  class="pf-v5-c-background-image"
+  style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pfbg-icon.svg)"
+></div>
 <div class="pf-v5-c-login">
   <div class="pf-v5-c-login__container">
     <header class="pf-v5-c-login__header">
@@ -640,7 +649,10 @@ wrapperTag: div
 ### Hide password
 
 ```html isFullscreen
-<div class="pf-v5-c-background-image"></div>
+<div
+  class="pf-v5-c-background-image"
+  style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pfbg-icon.svg)"
+></div>
 <div class="pf-v5-c-login">
   <div class="pf-v5-c-login__container">
     <header class="pf-v5-c-login__header">
@@ -863,7 +875,10 @@ wrapperTag: div
 ### With language selector
 
 ```html isFullscreen
-<div class="pf-v5-c-background-image"></div>
+<div
+  class="pf-v5-c-background-image"
+  style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pfbg-icon.svg)"
+></div>
 <div class="pf-v5-c-login">
   <div class="pf-v5-c-login__container">
     <header class="pf-v5-c-login__header">

package/docs/demos/AboutModal/examples/AboutModal.md

@@ -982,7 +982,10 @@ This demo implements the about modal, including the backdrop.
       aria-modal="true"
       aria-labelledby="about-modal-title"
     >
-      <div class="pf-v5-c-about-modal-box">
+      <div
+        class="pf-v5-c-about-modal-box"
+        style="--pf-v5-c-about-modal-box--BackgroundImage: url(/assets/images/pfbg-icon.svg)"
+      >
         <div class="pf-v5-c-about-modal-box__brand">
           <img
             class="pf-v5-c-about-modal-box__brand-image"