@patternfly/patternfly 4.224.2 → 5.0.0-alpha.10

package/docs/components/Toolbar/examples/Toolbar.md

@@ -26,12 +26,16 @@ Toolbar relies on groups (`.pf-c-toolbar__group`) and items (`.pf-c-toolbar__ite
 
 ### Modifiers
 
-| Class                                 | Applied to          | Outcome                                                                                                                                               |
-| ------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-m-hidden{-on-[breakpoint]}`      | `.pf-c-toolbar > *` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).   |
-| `.pf-m-visible{-on-[breakpoint]}`     | `.pf-c-toolbar > *` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).    |
-| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-align-left{-on-[breakpoint]}`  | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).  |
+| Class                                 | Applied to                                               | Outcome                                                                                                                                               |
+| ------------------------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.pf-m-hidden{-on-[breakpoint]}`      | `.pf-c-toolbar > *`                                      | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).   |
+| `.pf-m-visible{-on-[breakpoint]}`     | `.pf-c-toolbar > *`                                      | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).    |
+| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *`                                      | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-align-left{-on-[breakpoint]}`  | `.pf-c-toolbar > *`                                      | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).  |
+| `.pf-m-align-items-center`            | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies toolbar element to vertically align children to center.                                                                                      |
+| `.pf-m-align-items-baseline`          | `.pf-c-toolbar__group`                                   | Modifies toolbar group to vertically align children to baseline.                                                                                      |
+| `.pf-m-align-self-center`             | `.pf-c-toolbar__group`, `.pf-c-toolbar__item`            | Modifies toolbar element to vertically align self to center.                                                                                          |
+| `.pf-m-align-self-baseline`           | `.pf-c-toolbar__group`, `.pf-c-toolbar__item`            | Modifies toolbar element to vertically align self to baseline.                                                                                        |
 
 ### Special notes
 
@@ -489,7 +493,6 @@ In some instances, it may be necessary to adjust spacing explicitly where items
                 role="listbox"
                 aria-labelledby="toolbar-toggle-group-example-select-name-label"
                 hidden
-                style="width: 175px"
               >
                 <li role="presentation">
                   <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -520,7 +523,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
                 </li>
               </ul>
             </div>
-            <div class="pf-c-text-input-group">
+            <div class="pf-c-text-input-group" style="width: auto">
               <div class="pf-c-text-input-group__main pf-m-icon">
                 <span class="pf-c-text-input-group__text">
                   <span class="pf-c-text-input-group__icon">
@@ -810,7 +813,6 @@ In some instances, it may be necessary to adjust spacing explicitly where items
               role="listbox"
               aria-labelledby="toolbar-toggle-group-collapsed-example-select-name-label"
               hidden
-              style="width: 175px"
             >
               <li role="presentation">
                 <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -841,7 +843,7 @@ In some instances, it may be necessary to adjust spacing explicitly where items
               </li>
             </ul>
           </div>
-          <div class="pf-c-text-input-group">
+          <div class="pf-c-text-input-group" style="width: auto">
             <div class="pf-c-text-input-group__main pf-m-icon">
               <span class="pf-c-text-input-group__text">
                 <span class="pf-c-text-input-group__icon">
@@ -1192,7 +1194,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
                 role="listbox"
                 aria-labelledby="toolbar-selected-filters-toggle-group-collapsed-example-select-name-label"
                 hidden
-                style="width: 175px"
               >
                 <li role="presentation">
                   <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -1223,7 +1224,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
                 </li>
               </ul>
             </div>
-            <div class="pf-c-text-input-group">
+            <div class="pf-c-text-input-group" style="width: auto">
               <div class="pf-c-text-input-group__main pf-m-icon">
                 <span class="pf-c-text-input-group__text">
                   <span class="pf-c-text-input-group__icon">
@@ -1774,7 +1775,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
               role="listbox"
               aria-labelledby="toolbar-selected-filters-toggle-group-expanded-example-select-name-label"
               hidden
-              style="width: 175px"
             >
               <li role="presentation">
                 <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -1805,7 +1805,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
               </li>
             </ul>
           </div>
-          <div class="pf-c-text-input-group">
+          <div class="pf-c-text-input-group" style="width: auto">
             <div class="pf-c-text-input-group__main pf-m-icon">
               <span class="pf-c-text-input-group__text">
                 <span class="pf-c-text-input-group__icon">
@@ -3842,7 +3842,6 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
                 role="listbox"
                 aria-labelledby="toolbar-expanded-elements-example-select-name-label"
                 hidden
-                style="width: 175px"
               >
                 <li role="presentation">
                   <button class="pf-c-select__menu-item" role="option">Running</button>
@@ -3873,7 +3872,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
                 </li>
               </ul>
             </div>
-            <div class="pf-c-text-input-group">
+            <div class="pf-c-text-input-group" style="width: auto">
               <div class="pf-c-text-input-group__main pf-m-icon">
                 <span class="pf-c-text-input-group__text">
                   <span class="pf-c-text-input-group__icon">
@@ -4219,6 +4218,10 @@ As the toolbar component is a hybrid layout and component, some of its elements
 | `.pf-m-visible{-on-[breakpoint]}`     | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                                          |
 | `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *`                                                                                       | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                                       |
 | `.pf-m-align-left{-on-[breakpoint]}`  | `.pf-c-toolbar > *`                                                                                       | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).                                                                                        |
+| `.pf-m-align-items-center`            | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group`                                                  | Modifies toolbar element to vertically align children to center.                                                                                                                                                                            |
+| `.pf-m-align-items-baseline`          | `.pf-c-toolbar__group`                                                                                    | Modifies toolbar group to vertically align children to baseline.                                                                                                                                                                            |
+| `.pf-m-align-self-center`             | `.pf-c-toolbar__group`, `.pf-c-toolbar__item`                                                             | Modifies toolbar element to vertically align self to center.                                                                                                                                                                                |
+| `.pf-m-align-self-baseline`           | `.pf-c-toolbar__group`, `.pf-c-toolbar__item`                                                             | Modifies toolbar element to vertically align self to baseline.                                                                                                                                                                              |
 | `.pf-m-label`                         | `.pf-c-toolbar__item`                                                                                     | Modifies toolbar item to label.                                                                                                                                                                                                             |
 | `.pf-m-chip-container`                | `.pf-c-toolbar__content`, `.pf-c-toolbar__group`                                                          | Modifies the toolbar element for applied filters layout.                                                                                                                                                                                    |
 | `.pf-m-overflow-container`            | `.pf-c-toolbar__item`, `.pf-c-toolbar__group`                                                             | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation.                                                                                                                               |

package/docs/components/Wizard/examples/Wizard.md

@@ -202,8 +202,8 @@ wrapperTag: div
       </main>
     </div>
     <footer class="pf-c-wizard__footer">
-      <button class="pf-c-button pf-m-primary" type="submit">Next</button>
       <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+      <button class="pf-c-button pf-m-primary" type="submit">Next</button>
       <div class="pf-c-wizard__footer-cancel">
         <button class="pf-c-button pf-m-link" type="button">Cancel</button>
       </div>
@@ -408,8 +408,8 @@ wrapperTag: div
       </main>
     </div>
     <footer class="pf-c-wizard__footer">
-      <button class="pf-c-button pf-m-primary" type="submit">Next</button>
       <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+      <button class="pf-c-button pf-m-primary" type="submit">Next</button>
       <div class="pf-c-wizard__footer-cancel">
         <button class="pf-c-button pf-m-link" type="button">Cancel</button>
       </div>
@@ -659,8 +659,8 @@ wrapperTag: div
             </div>
           </div>
           <footer class="pf-c-wizard__footer">
-            <button class="pf-c-button pf-m-primary" type="submit">Next</button>
             <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+            <button class="pf-c-button pf-m-primary" type="submit">Next</button>
             <div class="pf-c-wizard__footer-cancel">
               <button class="pf-c-button pf-m-link" type="button">Cancel</button>
             </div>
@@ -896,8 +896,8 @@ wrapperTag: div
       </main>
     </div>
     <footer class="pf-c-wizard__footer">
-      <button class="pf-c-button pf-m-primary" type="submit">Next</button>
       <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+      <button class="pf-c-button pf-m-primary" type="submit">Next</button>
       <div class="pf-c-wizard__footer-cancel">
         <button class="pf-c-button pf-m-link" type="button">Cancel</button>
       </div>
@@ -1133,8 +1133,8 @@ wrapperTag: div
       </main>
     </div>
     <footer class="pf-c-wizard__footer">
-      <button class="pf-c-button pf-m-primary" type="submit">Next</button>
       <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+      <button class="pf-c-button pf-m-primary" type="submit">Next</button>
       <div class="pf-c-wizard__footer-cancel">
         <button class="pf-c-button pf-m-link" type="button">Cancel</button>
       </div>
@@ -1214,10 +1214,9 @@ wrapperTag: div
           <div class="pf-l-bullseye">
             <div class="pf-c-empty-state pf-m-lg">
               <div class="pf-c-empty-state__content">
-                <i
-                  class="fas fa- fa-cogs pf-c-empty-state__icon"
-                  aria-hidden="true"
-                ></i>
+                <div class="pf-c-empty-state__icon">
+                  <i class="fas fa- fa-cogs" aria-hidden="true"></i>
+                </div>
 
                 <h1
                   class="pf-c-title pf-m-lg"
@@ -1251,9 +1250,7 @@ wrapperTag: div
                 <div
                   class="pf-c-empty-state__body"
                 >Description can be used to further elaborate on the validation step, or give the user a better idea of how long the process will take.</div>
-                <div class="pf-c-empty-state__secondary">
-                  <button class="pf-c-button pf-m-link" type="button">Cancel</button>
-                </div>
+                <button class="pf-c-button pf-m-link" type="button">Cancel</button>
               </div>
             </div>
           </div>
@@ -1261,8 +1258,8 @@ wrapperTag: div
       </main>
     </div>
     <footer class="pf-c-wizard__footer">
-      <button class="pf-c-button pf-m-primary" type="submit">Next</button>
       <button class="pf-c-button pf-m-secondary" type="button">Back</button>
+      <button class="pf-c-button pf-m-primary" type="submit">Next</button>
       <div class="pf-c-wizard__footer-cancel">
         <button class="pf-c-button pf-m-link" type="button">Cancel</button>
       </div>

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

@@ -9,10 +9,12 @@ This demo implements the about modal, including the backdrop.
 
 ```html isFullscreen
 <div class="pf-c-page" id="modal-basic-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-modal-basic-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-modal-basic-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="modal-basic-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -916,56 +918,58 @@ This demo implements the about modal, including the backdrop.
 <div class="pf-c-backdrop">
   <div class="pf-l-bullseye">
     <div
-      class="pf-c-about-modal-box"
+      class="pf-c-modal-box pf-m-lg"
       role="dialog"
       aria-modal="true"
       aria-labelledby="about-modal-title"
     >
-      <div class="pf-c-about-modal-box__brand">
-        <img
-          class="pf-c-about-modal-box__brand-image"
-          src="/assets/images/pf_mini_logo_white.svg"
-          alt="PatternFly brand logo"
-        />
-      </div>
-      <div class="pf-c-about-modal-box__close">
-        <button
-          class="pf-c-button pf-m-plain"
-          type="button"
-          aria-label="Close dialog"
-        >
-          <i class="fas fa-times" aria-hidden="true"></i>
-        </button>
-      </div>
-      <div class="pf-c-about-modal-box__header">
-        <h1
-          class="pf-c-title pf-m-4xl"
-          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>
-            <dt>CFME version</dt>
-            <dd>5.5.3.4.20102789036450</dd>
-            <dt>Cloudforms version</dt>
-            <dd>4.1</dd>
-            <dt>Server name</dt>
-            <dd>40DemoMaster</dd>
-            <dt>User name</dt>
-            <dd>Administrator</dd>
-            <dt>User role</dt>
-            <dd>EvmRole-super_administrator</dd>
-            <dt>Browser version</dt>
-            <dd>601.2</dd>
-            <dt>Browser OS</dt>
-            <dd>Mac</dd>
-          </dl>
+      <div class="pf-c-about-modal-box">
+        <div class="pf-c-about-modal-box__brand">
+          <img
+            class="pf-c-about-modal-box__brand-image"
+            src="/assets/images/pf_mini_logo_white.svg"
+            alt="PatternFly brand logo"
+          />
+        </div>
+        <div class="pf-c-about-modal-box__close">
+          <button
+            class="pf-c-button pf-m-plain"
+            type="button"
+            aria-label="Close dialog"
+          >
+            <i class="fas fa-times" aria-hidden="true"></i>
+          </button>
+        </div>
+        <div class="pf-c-about-modal-box__header">
+          <h1
+            class="pf-c-title pf-m-4xl"
+            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>
+              <dt>CFME version</dt>
+              <dd>5.5.3.4.20102789036450</dd>
+              <dt>Cloudforms version</dt>
+              <dd>4.1</dd>
+              <dt>Server name</dt>
+              <dd>40DemoMaster</dd>
+              <dt>User name</dt>
+              <dd>Administrator</dd>
+              <dt>User role</dt>
+              <dd>EvmRole-super_administrator</dd>
+              <dt>Browser version</dt>
+              <dd>601.2</dd>
+              <dt>Browser OS</dt>
+              <dd>Mac</dd>
+            </dl>
+          </div>
+          <p
+            class="pf-c-about-modal-box__strapline"
+          >Trademark and copyright information here</p>
         </div>
-        <p
-          class="pf-c-about-modal-box__strapline"
-        >Trademark and copyright information here</p>
       </div>
     </div>
   </div>

package/docs/demos/Alert/examples/Alert.md

@@ -7,10 +7,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="alert-basic-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-alert-basic-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-alert-basic-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="alert-basic-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -989,10 +991,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="alert-horizontal-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-alert-horizontal-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-alert-horizontal-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="alert-horizontal-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -2009,10 +2013,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="alert-stacked-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-alert-stacked-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-alert-stacked-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="alert-stacked-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button

package/docs/demos/BackToTop/examples/BackToTop.md

@@ -8,10 +8,12 @@ cssPrefix: pf-d-back-to-top
 
 ```html isFullscreen
 <div class="pf-c-page" id="back-to-top-basic-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-back-to-top-basic-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-back-to-top-basic-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="back-to-top-basic-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button

package/docs/demos/Banner/examples/Banner.md

@@ -1,6 +1,7 @@
 ---
 id: 'Banner'
 section: components
+beta: true
 cssPrefix: pf-c-banner
 wrapperTag: div
 ---## Examples
@@ -9,10 +10,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="banner-basic-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-banner-basic-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-banner-basic-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="banner-basic-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -1074,10 +1077,12 @@ wrapperTag: div
   </div>
   <div class="pf-l-flex__item pf-m-grow" style="min-height: 0;">
     <div class="pf-c-page" id="banner-top-bottom-example">
-      <a
-        class="pf-c-skip-to-content pf-c-button pf-m-primary"
-        href="#main-content-banner-top-bottom-example"
-      >Skip to content</a>
+      <div class="pf-c-skip-to-content">
+        <a
+          class="pf-c-button pf-m-primary"
+          href="#main-content-banner-top-bottom-example"
+        >Skip to content</a>
+      </div>
       <header class="pf-c-masthead" id="banner-top-bottom-example-masthead">
         <span class="pf-c-masthead__toggle">
           <button