@patternfly/patternfly 4.224.2 → 5.0.0-alpha.10

package/docs/demos/DescriptionList/examples/DescriptionList.md

@@ -1,5 +1,6 @@
 ---
 id: 'Description list'
+beta: true
 section: components
 cssPrefix: pf-d-description-list
 ---## Examples
@@ -8,10 +9,12 @@ cssPrefix: pf-d-description-list
 
 ```html isFullscreen
 <div class="pf-c-page" id="description-list-basic-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-description-list-basic-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-description-list-basic-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="description-list-basic-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -977,10 +980,12 @@ cssPrefix: pf-d-description-list
 
 ```html isFullscreen
 <div class="pf-c-page" id="description-list-in-drawer-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-description-list-in-drawer-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-description-list-in-drawer-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="description-list-in-drawer-example-masthead"
@@ -2234,10 +2239,12 @@ cssPrefix: pf-d-description-list
 
 ```html isFullscreen
 <div class="pf-c-page" id="description-list-complex-content-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-description-list-complex-content-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-description-list-complex-content-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="description-list-complex-content-example-masthead"

package/docs/demos/Drawer/examples/Drawer.md

@@ -8,10 +8,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="drawer-collapsed-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-drawer-collapsed-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-drawer-collapsed-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="drawer-collapsed-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -1110,10 +1112,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="drawer-expanded-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-drawer-expanded-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-drawer-expanded-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="drawer-expanded-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -2036,10 +2040,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="drawer-expanded-bottom-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-drawer-expanded-bottom-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-drawer-expanded-bottom-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="drawer-expanded-bottom-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -2962,10 +2968,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="drawer-jump-links">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-drawer-jump-links"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-drawer-jump-links"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="drawer-jump-links-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -3915,10 +3923,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="drawer-expanded-jump-links">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-drawer-expanded-jump-links"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-drawer-expanded-jump-links"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="drawer-expanded-jump-links-masthead">
     <span class="pf-c-masthead__toggle">
       <button

package/docs/demos/HelperText/examples/HelperText.md

@@ -1,5 +1,6 @@
 ---
 id: 'Helper text'
+beta: true
 section: components
 ---## Examples
 

package/docs/demos/JumpLinks/examples/JumpLinks.md

@@ -7,10 +7,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="jump-links-collapsed-mobile-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-jump-links-collapsed-mobile-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-jump-links-collapsed-mobile-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="jump-links-collapsed-mobile-example-masthead"
@@ -991,10 +993,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="jump-links-vertical-expanded-mobile-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-jump-links-vertical-expanded-mobile-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-jump-links-vertical-expanded-mobile-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="jump-links-vertical-expanded-mobile-example-masthead"
@@ -1975,10 +1979,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="jump-links-vertical-toggle-text-mobile-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-jump-links-vertical-toggle-text-mobile-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-jump-links-vertical-toggle-text-mobile-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="jump-links-vertical-toggle-text-mobile-example-masthead"
@@ -2959,10 +2965,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="jump-links-horizontal-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-jump-links-horizontal-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-jump-links-horizontal-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="jump-links-horizontal-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -3892,10 +3900,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="jump-links-drawer">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-jump-links-drawer"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-jump-links-drawer"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="jump-links-drawer-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -4845,10 +4855,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="jump-links-drawer-expanded">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-jump-links-drawer-expanded"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-jump-links-drawer-expanded"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="jump-links-drawer-expanded-masthead">
     <span class="pf-c-masthead__toggle">
       <button

package/docs/demos/Masthead/examples/Masthead.md

@@ -8,10 +8,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="masthead-basic-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-masthead-basic-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-masthead-basic-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="masthead-basic-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -229,10 +231,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="masthead-context-selecton-drilldown-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-masthead-context-selecton-drilldown-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-masthead-context-selecton-drilldown-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="masthead-context-selecton-drilldown-example-masthead"
@@ -631,10 +635,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="masthead-toolbar-filters-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-masthead-toolbar-filters-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-masthead-toolbar-filters-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="masthead-toolbar-filters-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -720,7 +726,6 @@ wrapperTag: div
                       role="listbox"
                       aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-select-name-label"
                       hidden
-                      style="width: 175px"
                     >
                       <li role="presentation">
                         <button
@@ -760,7 +765,7 @@ wrapperTag: div
                       </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">
@@ -961,10 +966,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="masthead-toggle-group-filters-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-masthead-toggle-group-filters-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-masthead-toggle-group-filters-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="masthead-toggle-group-filters-example-masthead"
@@ -1053,7 +1060,6 @@ wrapperTag: div
                       role="listbox"
                       aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-select-name-label"
                       hidden
-                      style="width: 175px"
                     >
                       <li role="presentation">
                         <button
@@ -1093,7 +1099,7 @@ wrapperTag: div
                       </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">
@@ -1294,10 +1300,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="masthead-expandable-search-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-masthead-expandable-search-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-masthead-expandable-search-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="masthead-expandable-search-example-masthead"
@@ -1479,10 +1487,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="masthead-expandable-search-expanded-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-masthead-expandable-search-expanded-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-masthead-expandable-search-expanded-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="masthead-expandable-search-expanded-example-masthead"
@@ -1680,10 +1690,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="masthead-advanced-with-menu-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-masthead-advanced-with-menu-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-masthead-advanced-with-menu-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="masthead-advanced-with-menu-example-masthead"
@@ -2594,10 +2606,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="masthead-horizontal-nav">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-masthead-horizontal-nav"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-masthead-horizontal-nav"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="masthead-horizontal-nav-masthead">
     <div class="pf-c-masthead__main">
       <a class="pf-c-masthead__brand" href="#">
@@ -3515,10 +3529,12 @@ wrapperTag: div
   class="pf-c-page"
   id="masthead-toggle-group-filters-expanded-mobile-example"
 >
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-masthead-toggle-group-filters-expanded-mobile-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-masthead-toggle-group-filters-expanded-mobile-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="masthead-toggle-group-filters-expanded-mobile-example-masthead"
@@ -3660,7 +3676,6 @@ wrapperTag: div
                     role="listbox"
                     aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-select-name-label"
                     hidden
-                    style="width: 175px"
                   >
                     <li role="presentation">
                       <button
@@ -3697,7 +3712,7 @@ wrapperTag: div
                     </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">

package/docs/demos/Modal/examples/Modal.md

@@ -7,10 +7,12 @@ section: components
 
 ```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
@@ -954,10 +956,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="modal-scrollable-content-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-modal-scrollable-content-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-modal-scrollable-content-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="modal-scrollable-content-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -1910,10 +1914,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="modal-medium-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-modal-medium-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-modal-medium-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="modal-medium-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -2856,10 +2862,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="modal-large-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-modal-large-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-modal-large-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="modal-large-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -3802,10 +3810,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="modal-large-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-modal-large-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-modal-large-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="modal-large-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -4748,10 +4758,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="modal-with-form-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-modal-with-form-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-modal-with-form-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="modal-with-form-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button