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

package/docs/components/DatePicker/examples/DatePicker.md

@@ -1,6 +1,5 @@
 ---
 id: 'Date picker'
-beta: true
 section: components
 subsection: date-and-time
 cssPrefix: pf-c-date-picker

package/docs/components/Dropdown/examples/Dropdown.md

@@ -997,7 +997,7 @@ cssPrefix: pf-c-dropdown
 
 ### Split button (progress checkbox)
 
-```html isBeta
+```html
 <div class="pf-c-dropdown">
   <div class="pf-c-dropdown__toggle pf-m-split-button">
     <label

package/docs/components/Icon/examples/Icon.md

@@ -1,6 +1,5 @@
 ---
 id: 'Icon'
-beta: true
 section: components
 cssPrefix: pf-c-icon
 ---## Examples

package/docs/components/LogViewer/examples/LogViewer.md

@@ -1,6 +1,5 @@
 ---
 id: 'Log viewer'
-beta: true
 section: extensions
 cssPrefix: pf-c-log-viewer
 ---import './LogViewer.css';

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/components/ProgressStepper/examples/ProgressStepper.md

@@ -1,6 +1,5 @@
 ---
 id: 'Progress stepper'
-beta: true
 section: components
 cssPrefix: pf-c-progress-stepper
 ---## Examples

package/docs/components/SearchInput/examples/SearchInput.md

@@ -1,6 +1,5 @@
 ---
 id: 'Search input'
-beta: true
 section: components
 cssPrefix: pf-c-search-input
 ---import './SearchInput.css'

package/docs/components/Tabs/examples/Tabs.md

@@ -220,7 +220,7 @@ cssPrefix: pf-c-tabs
 
 ### Horizontal overflow example
 
-```html isBeta
+```html
 <div class="pf-c-tabs pf-m-overflow" id="horizontal-overflow">
   <ul class="pf-c-tabs__list">
     <li class="pf-c-tabs__item">
@@ -297,7 +297,7 @@ cssPrefix: pf-c-tabs
 
 ### Horizontal overflow expanded example
 
-```html isBeta
+```html
 <div class="pf-c-tabs pf-m-overflow" id="horizontal-overflow-expanded">
   <ul class="pf-c-tabs__list">
     <li class="pf-c-tabs__item">
@@ -375,7 +375,7 @@ cssPrefix: pf-c-tabs
 
 ### Horizontal overflow selected example
 
-```html isBeta
+```html
 <div class="pf-c-tabs pf-m-overflow" id="horizontal-overflow-selected">
   <ul class="pf-c-tabs__list">
     <li class="pf-c-tabs__item">
@@ -2585,7 +2585,7 @@ cssPrefix: pf-c-tabs
 
 ### Help button example
 
-```html isBeta
+```html
 <div class="pf-c-tabs pf-m-scrollable" id="help-button-default-example">
   <button
     class="pf-c-tabs__scroll-button"
@@ -3713,7 +3713,7 @@ cssPrefix: pf-c-tabs
 
 ### Close button example
 
-```html isBeta
+```html
 <div class="pf-c-tabs pf-m-scrollable" id="close-button-default-example">
   <button
     class="pf-c-tabs__scroll-button"
@@ -4841,7 +4841,7 @@ cssPrefix: pf-c-tabs
 
 ### Help and close button example
 
-```html isBeta
+```html
 <div class="pf-c-tabs pf-m-scrollable" id="help-close-button-default-example">
   <button
     class="pf-c-tabs__scroll-button"

package/docs/components/TextInputGroup/examples/TextInputGroup.md

@@ -1,6 +1,5 @@
 ---
 id: 'Text input group'
-beta: true
 section: components
 cssPrefix: pf-c-text-input-group
 ---import './TextInputGroup.css'

package/docs/components/Tile/examples/Tile.md

@@ -1,7 +1,6 @@
 ---
 id: Tile
 section: components
-beta: true
 cssPrefix: pf-c-tile
 ---import './Tile.css'
 
@@ -9,7 +8,7 @@ cssPrefix: pf-c-tile
 
 ### Basic tiles
 
-```html isBeta
+```html
 <div class="pf-c-tile" tabindex="0">
   <div class="pf-c-tile__header">
     <div class="pf-c-tile__title">Default</div>

package/docs/components/Truncate/examples/Truncate.md

@@ -1,6 +1,5 @@
 ---
 id: 'Truncate'
-beta: true
 section: components
 cssPrefix: pf-c-truncate
 ---import './Truncate.css'

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>