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

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

@@ -7,30 +7,7 @@ cssPrefix: pf-c-background-image
 ### 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>
 
 ```
 
@@ -38,11 +15,18 @@ cssPrefix: pf-c-background-image
 
 ### Overview
 
-This component puts an image on the background with an svg filter applied to it. The svg must be inline on the page for the filter to work in all browsers.
+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-c-background-image--BackgroundImage` CSS variable. For example:
+
+```css
+--pf-c-background-image--BackgroundImage: url("custom/image/path");
+```
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-c-background-image` | `*` |  A fixed background image is applied to the background of the page. |
-| `.pf-c-background-image__filter` | `*` |  The inline svg that provides the filter for the background image. |

package/docs/components/DataList/examples/DataList.md

@@ -1949,54 +1949,52 @@ When a list item includes more than one block of content, it can be difficult fo
 | -- | -- | -- |
 | `.pf-m-flex-{1, 2, 3, 4, 5}` | `.pf-c-data-list__cell` | Percentage based modifier for `.pf-c-data-list__cell` widths. |
 
-### Selectable rows
+### Clickable rows
 
 ```html
 <ul
   class="pf-c-data-list"
   role="list"
-  aria-label="Selectable rows data list example"
-  id="data-list-selectable-rows"
+  aria-label="Clickable rows data list example"
+  id="data-list-clickable-rows"
 >
   <li
-    class="pf-c-data-list__item pf-m-expanded pf-m-selectable pf-m-selected"
-    aria-labelledby="data-list-selectable-rows-item-1"
+    class="pf-c-data-list__item pf-m-clickable pf-m-selected"
+    aria-labelledby="data-list-clickable-rows-item-1"
     tabindex="0"
   >
     <div class="pf-c-data-list__item-row">
       <div class="pf-c-data-list__item-content">
         <div class="pf-c-data-list__cell">
-          <span id="data-list-selectable-rows-item-1">Primary content</span>
+          <span id="data-list-clickable-rows-item-1">Primary content (clicked)</span>
         </div>
       </div>
     </div>
   </li>
 
   <li
-    class="pf-c-data-list__item pf-m-expanded pf-m-selectable pf-m-selected"
-    aria-labelledby="data-list-selectable-rows-item-2"
+    class="pf-c-data-list__item pf-m-clickable"
+    aria-labelledby="data-list-clickable-rows-item-2"
     tabindex="0"
   >
     <div class="pf-c-data-list__item-row">
       <div class="pf-c-data-list__item-content">
         <div class="pf-c-data-list__cell">
-          <span
-            id="data-list-selectable-rows-item-2"
-          >Secondary content (selected)</span>
+          <span id="data-list-clickable-rows-item-2">Secondary content</span>
         </div>
       </div>
     </div>
   </li>
 
   <li
-    class="pf-c-data-list__item pf-m-selectable"
-    aria-labelledby="data-list-selectable-rows-item-3"
+    class="pf-c-data-list__item pf-m-clickable"
+    aria-labelledby="data-list-clickable-rows-item-3"
     tabindex="0"
   >
     <div class="pf-c-data-list__item-row">
       <div class="pf-c-data-list__item-content">
         <div class="pf-c-data-list__cell">
-          <span id="data-list-selectable-rows-item-3">Tertiary content</span>
+          <span id="data-list-clickable-rows-item-3">Tertiary content</span>
         </div>
       </div>
     </div>
@@ -2009,27 +2007,27 @@ When a list item includes more than one block of content, it can be difficult fo
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `tabindex="0"` | `.pf-c-data-list__item.pf-m-selectable` | Inserts the selectable row into the tab order of the page so that it is focusable. **Required** |
+| `tabindex="0"` | `.pf-c-data-list__item.pf-m-clickable` | Inserts the clickable row into the tab order of the page so that it is focusable. **Required** |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-selectable` | `.pf-c-data-list__item` | Modifies a data list item so that it is selectable. |
+| `.pf-m-clickable` | `.pf-c-data-list__item` | Modifies a data list item so that it is clickable. |
 | `.pf-m-selected` | `.pf-c-data-list__item` | Modifies a data list item for the selected state. |
 
-### Selectable expandable rows
+### Clickable expandable rows
 
 ```html
 <ul
   class="pf-c-data-list"
   role="list"
-  aria-label="Selectable, expandable data list example"
-  id="data-list-selectable-expandable-rows"
+  aria-label="Clickable, expandable data list example"
+  id="data-list-clickable-expandable-rows"
 >
   <li
-    class="pf-c-data-list__item pf-m-expanded pf-m-selectable"
-    aria-labelledby="data-list-selectable-expandable-rows-item-1"
+    class="pf-c-data-list__item pf-m-expanded pf-m-clickable pf-m-selected"
+    aria-labelledby="data-list-clickable-expandable-rows-item-1"
     tabindex="0"
   >
     <div class="pf-c-data-list__item-row">
@@ -2038,11 +2036,11 @@ When a list item includes more than one block of content, it can be difficult fo
           <button
             class="pf-c-button pf-m-plain"
             type="button"
-            aria-labelledby="data-list-selectable-expandable-rows-toggle1 data-list-selectable-expandable-rows-item1"
-            id="data-list-selectable-expandable-rows-toggle1"
+            aria-labelledby="data-list-clickable-expandable-rows-toggle1 data-list-clickable-expandable-rows-item1"
+            id="data-list-clickable-expandable-rows-toggle1"
             aria-label="Toggle details for"
             aria-expanded="true"
-            aria-controls="data-list-selectable-expandable-rows-content1"
+            aria-controls="data-list-clickable-expandable-rows-content1"
           >
             <div class="pf-c-data-list__toggle-icon">
               <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -2053,15 +2051,15 @@ When a list item includes more than one block of content, it can be difficult fo
       <div class="pf-c-data-list__item-content">
         <div class="pf-c-data-list__cell">
           <span
-            id="data-list-selectable-expandable-rows-item-1"
-          >Primary content (selected, expanded)</span>
+            id="data-list-clickable-expandable-rows-item-1"
+          >Primary content (clicked and expanded)</span>
         </div>
       </div>
     </div>
     <section
       class="pf-c-data-list__expandable-content"
-      id="data-list-selectable-expandable-rows-content1"
-      aria-label="Selectable expandable row primary content details"
+      id="data-list-clickable-expandable-rows-content1"
+      aria-label="Clickable expandable row primary content details"
     >
       <div
         class="pf-c-data-list__expandable-content-body"
@@ -2070,8 +2068,8 @@ When a list item includes more than one block of content, it can be difficult fo
   </li>
 
   <li
-    class="pf-c-data-list__item pf-m-selectable"
-    aria-labelledby="data-list-selectable-expandable-rows-item-2"
+    class="pf-c-data-list__item pf-m-clickable"
+    aria-labelledby="data-list-clickable-expandable-rows-item-2"
     tabindex="0"
   >
     <div class="pf-c-data-list__item-row">
@@ -2080,11 +2078,11 @@ When a list item includes more than one block of content, it can be difficult fo
           <button
             class="pf-c-button pf-m-plain"
             type="button"
-            aria-labelledby="data-list-selectable-expandable-rows-toggle2 data-list-selectable-expandable-rows-item2"
-            id="data-list-selectable-expandable-rows-toggle2"
+            aria-labelledby="data-list-clickable-expandable-rows-toggle2 data-list-clickable-expandable-rows-item2"
+            id="data-list-clickable-expandable-rows-toggle2"
             aria-label="Toggle details for"
             aria-expanded="false"
-            aria-controls="data-list-selectable-expandable-rows-content2"
+            aria-controls="data-list-clickable-expandable-rows-content2"
           >
             <div class="pf-c-data-list__toggle-icon">
               <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -2095,15 +2093,15 @@ When a list item includes more than one block of content, it can be difficult fo
       <div class="pf-c-data-list__item-content">
         <div class="pf-c-data-list__cell">
           <span
-            id="data-list-selectable-expandable-rows-item-2"
+            id="data-list-clickable-expandable-rows-item-2"
           >Secondary content</span>
         </div>
       </div>
     </div>
     <section
       class="pf-c-data-list__expandable-content"
-      id="data-list-selectable-expandable-rows-content2"
-      aria-label="Selectable expandable row secondary content details"
+      id="data-list-clickable-expandable-rows-content2"
+      aria-label="Clickable expandable row secondary content details"
       hidden
     >
       <div
@@ -2113,8 +2111,8 @@ When a list item includes more than one block of content, it can be difficult fo
   </li>
 
   <li
-    class="pf-c-data-list__item pf-m-expanded pf-m-selectable"
-    aria-labelledby="data-list-selectable-expandable-rows-item-3"
+    class="pf-c-data-list__item pf-m-expanded pf-m-clickable"
+    aria-labelledby="data-list-clickable-expandable-rows-item-3"
     tabindex="0"
   >
     <div class="pf-c-data-list__item-row">
@@ -2123,11 +2121,11 @@ When a list item includes more than one block of content, it can be difficult fo
           <button
             class="pf-c-button pf-m-plain"
             type="button"
-            aria-labelledby="data-list-selectable-expandable-rows-toggle3 data-list-selectable-expandable-rows-item3"
-            id="data-list-selectable-expandable-rows-toggle3"
+            aria-labelledby="data-list-clickable-expandable-rows-toggle3 data-list-clickable-expandable-rows-item3"
+            id="data-list-clickable-expandable-rows-toggle3"
             aria-label="Toggle details for"
             aria-expanded="true"
-            aria-controls="data-list-selectable-expandable-rows-content3"
+            aria-controls="data-list-clickable-expandable-rows-content3"
           >
             <div class="pf-c-data-list__toggle-icon">
               <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -2138,15 +2136,15 @@ When a list item includes more than one block of content, it can be difficult fo
       <div class="pf-c-data-list__item-content">
         <div class="pf-c-data-list__cell">
           <span
-            id="data-list-selectable-expandable-rows-item-3"
-          >Tertiary content (not selected, expanded)</span>
+            id="data-list-clickable-expandable-rows-item-3"
+          >Tertiary content (expanded)</span>
         </div>
       </div>
     </div>
     <section
       class="pf-c-data-list__expandable-content"
-      id="data-list-selectable-expandable-rows-content3"
-      aria-label="Selectable expandable row tertiary content details"
+      id="data-list-clickable-expandable-rows-content3"
+      aria-label="Clickable expandable row tertiary content details"
     >
       <div
         class="pf-c-data-list__expandable-content-body pf-m-no-padding"
@@ -2155,8 +2153,8 @@ When a list item includes more than one block of content, it can be difficult fo
   </li>
 
   <li
-    class="pf-c-data-list__item pf-m-selectable"
-    aria-labelledby="data-list-selectable-expandable-rows-item-4"
+    class="pf-c-data-list__item pf-m-clickable"
+    aria-labelledby="data-list-clickable-expandable-rows-item-4"
     tabindex="0"
   >
     <div class="pf-c-data-list__item-row">
@@ -2165,11 +2163,11 @@ When a list item includes more than one block of content, it can be difficult fo
           <button
             class="pf-c-button pf-m-plain"
             type="button"
-            aria-labelledby="data-list-selectable-expandable-rows-toggle4 data-list-selectable-expandable-rows-item4"
-            id="data-list-selectable-expandable-rows-toggle4"
+            aria-labelledby="data-list-clickable-expandable-rows-toggle4 data-list-clickable-expandable-rows-item4"
+            id="data-list-clickable-expandable-rows-toggle4"
             aria-label="Toggle details for"
             aria-expanded="false"
-            aria-controls="data-list-selectable-expandable-rows-content4"
+            aria-controls="data-list-clickable-expandable-rows-content4"
           >
             <div class="pf-c-data-list__toggle-icon">
               <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -2180,15 +2178,15 @@ When a list item includes more than one block of content, it can be difficult fo
       <div class="pf-c-data-list__item-content">
         <div class="pf-c-data-list__cell">
           <span
-            id="data-list-selectable-expandable-rows-item-4"
-          >Quaternary content (selected)</span>
+            id="data-list-clickable-expandable-rows-item-4"
+          >Quaternary content</span>
         </div>
       </div>
     </div>
     <section
       class="pf-c-data-list__expandable-content"
-      id="data-list-selectable-expandable-rows-content4"
-      aria-label="Selectable expandable row quaternary content details"
+      id="data-list-clickable-expandable-rows-content4"
+      aria-label="Clickable expandable row quaternary content details"
       hidden
     >
       <div

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. |