@patternfly/patternfly 5.0.0-alpha.36 → 5.0.0-alpha.37

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

@@ -8,30 +8,7 @@ wrapperTag: div
 ### Basic
 
 ```html isFullscreen
-<div class="pf-c-background-image">
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    class="pf-c-background-image__filter"
-    width="0"
-    height="0"
-  >
-    <filter id="image_overlay">
-      <feColorMatrix
-        type="matrix"
-        values="1 0 0 0 0
-              1 0 0 0 0
-              1 0 0 0 0
-              0 0 0 1 0"
-      />
-      <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
-        <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451" />
-        <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451" />
-        <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451" />
-        <feFuncA type="table" tableValues="0 1" />
-      </feComponentTransfer>
-    </filter>
-  </svg>
-</div>
+<div class="pf-c-background-image"></div>
 <div class="pf-c-login">
   <div class="pf-c-login__container">
     <header class="pf-c-login__header">
@@ -230,30 +207,7 @@ wrapperTag: div
 ### Invalid
 
 ```html isFullscreen
-<div class="pf-c-background-image">
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    class="pf-c-background-image__filter"
-    width="0"
-    height="0"
-  >
-    <filter id="image_overlay">
-      <feColorMatrix
-        type="matrix"
-        values="1 0 0 0 0
-              1 0 0 0 0
-              1 0 0 0 0
-              0 0 0 1 0"
-      />
-      <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
-        <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451" />
-        <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451" />
-        <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451" />
-        <feFuncA type="table" tableValues="0 1" />
-      </feComponentTransfer>
-    </filter>
-  </svg>
-</div>
+<div class="pf-c-background-image"></div>
 <div class="pf-c-login">
   <div class="pf-c-login__container">
     <header class="pf-c-login__header">
@@ -458,30 +412,7 @@ wrapperTag: div
 ### Show password
 
 ```html isFullscreen
-<div class="pf-c-background-image">
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    class="pf-c-background-image__filter"
-    width="0"
-    height="0"
-  >
-    <filter id="image_overlay">
-      <feColorMatrix
-        type="matrix"
-        values="1 0 0 0 0
-              1 0 0 0 0
-              1 0 0 0 0
-              0 0 0 1 0"
-      />
-      <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
-        <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451" />
-        <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451" />
-        <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451" />
-        <feFuncA type="table" tableValues="0 1" />
-      </feComponentTransfer>
-    </filter>
-  </svg>
-</div>
+<div class="pf-c-background-image"></div>
 <div class="pf-c-login">
   <div class="pf-c-login__container">
     <header class="pf-c-login__header">
@@ -691,30 +622,7 @@ wrapperTag: div
 ### Hide password
 
 ```html isFullscreen
-<div class="pf-c-background-image">
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    class="pf-c-background-image__filter"
-    width="0"
-    height="0"
-  >
-    <filter id="image_overlay">
-      <feColorMatrix
-        type="matrix"
-        values="1 0 0 0 0
-              1 0 0 0 0
-              1 0 0 0 0
-              0 0 0 1 0"
-      />
-      <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
-        <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451" />
-        <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451" />
-        <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451" />
-        <feFuncA type="table" tableValues="0 1" />
-      </feComponentTransfer>
-    </filter>
-  </svg>
-</div>
+<div class="pf-c-background-image"></div>
 <div class="pf-c-login">
   <div class="pf-c-login__container">
     <header class="pf-c-login__header">
@@ -931,30 +839,7 @@ wrapperTag: div
 ### With language selector
 
 ```html isFullscreen
-<div class="pf-c-background-image">
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    class="pf-c-background-image__filter"
-    width="0"
-    height="0"
-  >
-    <filter id="image_overlay">
-      <feColorMatrix
-        type="matrix"
-        values="1 0 0 0 0
-              1 0 0 0 0
-              1 0 0 0 0
-              0 0 0 1 0"
-      />
-      <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
-        <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451" />
-        <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451" />
-        <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451" />
-        <feFuncA type="table" tableValues="0 1" />
-      </feComponentTransfer>
-    </filter>
-  </svg>
-</div>
+<div class="pf-c-background-image"></div>
 <div class="pf-c-login">
   <div class="pf-c-login__container">
     <header class="pf-c-login__header">

package/docs/components/Page/examples/Page.css

@@ -6,6 +6,12 @@
   color: var(--pf-global--Color--dark-100);
 }
 
-#ws-core-c-page-with-or-without-fill .ws-preview-html {
+#ws-core-c-page-with-or-without-fill .ws-preview-html,
+#ws-core-c-page-multiple-sidebar-body-elements-padding-and-fill .ws-preview-html {
   height: 500px;
 }
+
+#ws-core-c-page-multiple-sidebar-body-elements .ws-preview-html,
+#ws-core-c-page-using-flex-layout .ws-preview-html {
+  height: 100%;
+}

package/docs/components/Page/examples/Page.md

@@ -67,6 +67,31 @@ wrapperTag: div
 
 ```
 
+### Multiple sidebar body elements, padding, and fill
+
+```html
+<div class="pf-c-page">
+  <header class="pf-c-page__header">
+    <div class="pf-c-page__header-brand">
+      <div class="pf-c-page__header-brand-toggle">toggle</div>
+      <a href="#" class="pf-c-page__header-brand-link">Logo</a>
+    </div>
+    <div class="pf-c-page__header-tools">header-tools</div>
+  </header>
+  <div class="pf-c-page__sidebar">
+    <div class="pf-c-page__sidebar-body">Navigation</div>
+    <div
+      class="pf-c-page__sidebar-body pf-m-fill pf-m-page-insets"
+    >inset content</div>
+    <div class="pf-c-page__sidebar-body pf-m-page-insets">footer content</div>
+  </div>
+  <main class="pf-c-page__main" tabindex="-1">
+    <section class="pf-c-page__main-section pf-m-light"></section>
+  </main>
+</div>
+
+```
+
 ### With or without fill
 
 ```html
@@ -232,7 +257,7 @@ This component provides the basic chrome for a page, including sidebar, header,
 | `.pf-c-page__header-tools-group` | `<div>` |  Creates a container for grouping sets of icons and menus in header. |
 | `.pf-c-page__header-tools-item` | `<div>` |  Creates a container for an item in a header tools group. |
 | `.pf-c-page__sidebar` | `<aside>` |   Declares the page sidebar. |
-| `.pf-c-page__sidebar-body` | `<div>` | Creates a wrapper within the sidebar to hold content. |
+| `.pf-c-page__sidebar-body` | `<div>` | Creates a wrapper within the sidebar to hold content. **Note: The last/only `.pf-c-page__sidebar-body` element will grow to fill the availble vertical space. You can change this behavior using `.pf-m-fill` and `.pf-m-no-fill`, which are documented below.** |
 | `.pf-c-page__main` | `<main>` |   Declares the main page area. |
 | `.pf-c-page__main-nav` | `<section>` |   Creates a container to nest the navigation component in the main page area. |
 | `.pf-c-page__main-breadcrumb` | `<section>` |   Creates a container to nest the breadcrumb component in the main page area. |
@@ -245,15 +270,17 @@ This component provides the basic chrome for a page, including sidebar, header,
 | `.pf-m-selected` | `.pf-c-page__header-tools-item` | Modifies a header tools item to indicate that the button inside is in the selected state. |
 | `.pf-m-expanded` | `.pf-c-page__sidebar` |  Modifies the sidebar for the expanded state. |
 | `.pf-m-collapsed` | `.pf-c-page__sidebar` |  Modifies the sidebar for the collapsed state. |
+| `.pf-m-page-insets` | `.pf-c-page__sidebar-body` |  Modifies a sidebar body padding/inset to visually match padding of page elements. |
+| `.pf-m-inset-none` | `.pf-c-page__sidebar-body` | Removes a sidebar body left/right inset. |
 | `.pf-m-light` | `.pf-c-page__sidebar` |  Modifies the sidebar the light variation. **Note: for use with a light themed nav component** |
 | `.pf-m-light` | `.pf-c-page__main-section` | Modifies a main page section to have a light theme. |
 | `.pf-m-dark-200` | `.pf-c-page__main-section` |  Modifies a main page section to have a dark theme and a dark transparent background. |
 | `.pf-m-dark-100` | `.pf-c-page__main-section` |  Modifies a main page section to have a dark theme and a darker transparent background. |
 | `.pf-m-light-200` | `.pf-c-page__main-wizard` | Modifies a wizard page section to have a light 200 theme. |
-| `.pf-m-no-padding`, `.pf-m-no-padding{-on-[breakpoint]}` | `.pf-c-page__main-section` | Removes padding from the main page section at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 | `.pf-m-padding{-on-[breakpoint]}` | `.pf-c-page__main-section` | Modifies the main page section to add padding back in at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). Should be used with pf-m-no-padding. |
-| `.pf-m-fill` | `.pf-c-page__main-section` | Modifies a main page section to grow to fill the available vertical space. |
-| `.pf-m-no-fill` | `.pf-c-page__main-section` | Modifies a main page section to not grow to fill the available vertical space. |
+| `.pf-m-no-padding{-on-[breakpoint]}` | `.pf-c-page__main-section` | Removes padding from the main page section at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-fill` | `.pf-c-page__main-section`, `.pf-c-page__sidebar-body` | Modifies the element to grow to fill the available space. |
+| `.pf-m-no-fill` | `.pf-c-page__main-section`, `.pf-c-page__sidebar-body` | Modifies the element to not grow to fill the available vertical space. |
 | `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-page__header-tools-group`, `.pf-c-page__header-tools-item` | Hides a header tools group or item at an optional breakpoint, or hides it at all [breakpoints](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) with `.pf-m-hidden`. |
 | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-page__header-tools-group`, `.pf-c-page__header-tools-item` | Shows a header tools group or item at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 | `.pf-m-limit-width` | `.pf-c-page__main-section` | Modifies a page section to limit the `max-width` of the content inside. |

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

@@ -946,7 +946,6 @@ This demo implements the about modal, including the backdrop.
             id="about-modal-title"
           >Red Hat OpenShift Container Platform</h1>
         </div>
-        <div class="pf-c-about-modal-box__hero"></div>
         <div class="pf-c-about-modal-box__content">
           <div class="pf-c-content">
             <dl>