@patternfly/patternfly 4.224.2 → 5.0.0-alpha.10

package/docs/demos/Nav/examples/Nav.md

@@ -7,10 +7,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="nav-basic-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-nav-basic-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-nav-basic-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="nav-basic-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -918,10 +920,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="nav-grouped-nav-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-nav-grouped-nav-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-nav-grouped-nav-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="nav-grouped-nav-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -1849,10 +1853,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="nav-expandable-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-nav-expandable-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-nav-expandable-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="nav-expandable-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -2842,10 +2848,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="nav-horizontal-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-nav-horizontal-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-nav-horizontal-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="nav-horizontal-example-masthead">
     <div class="pf-c-masthead__main">
       <a class="pf-c-masthead__brand" href="#">
@@ -3758,10 +3766,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="nav-horizontal-subnav-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-nav-horizontal-subnav-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-nav-horizontal-subnav-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="nav-horizontal-subnav-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -4751,10 +4761,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="nav-horizontal-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-nav-horizontal-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-nav-horizontal-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
     id="nav-horizontal-example-masthead"
@@ -5719,10 +5731,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="nav-legacy-teriary-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-nav-legacy-teriary-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-nav-legacy-teriary-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="nav-legacy-teriary-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -6752,10 +6766,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="nav-light-theme-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-nav-light-theme-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-nav-light-theme-example"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="nav-light-theme-example-masthead">
     <span class="pf-c-masthead__toggle">
       <button

package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md

@@ -7,10 +7,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="drawer-collapsed-example-page">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-drawer-collapsed-example-page"
-  >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-page"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="drawer-collapsed-example-page-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -1521,10 +1523,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="drawer-expanded-read-example-page">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-drawer-expanded-read-example-page"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-drawer-expanded-read-example-page"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="drawer-expanded-read-example-page-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -3036,10 +3040,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="drawer-expanded-unread-example-page">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-drawer-expanded-unread-example-page"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-drawer-expanded-unread-example-page"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="drawer-expanded-unread-example-page-masthead"
@@ -4559,10 +4565,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="drawer-expanded-attention-example-page">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-drawer-expanded-attention-example-page"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-drawer-expanded-attention-example-page"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="drawer-expanded-attention-example-page-masthead"
@@ -6081,10 +6089,12 @@ section: components
 
 ```html isFullscreen
 <div class="pf-c-page" id="drawer-expanded-with-groups-example-page">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-drawer-expanded-with-groups-example-page"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-drawer-expanded-with-groups-example-page"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="drawer-expanded-with-groups-example-page-masthead"

package/docs/demos/Page/examples/Page.md

@@ -8,10 +8,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="page-demo-basic">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-page-demo-basic"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-page-demo-basic"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="page-demo-basic-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -917,10 +919,12 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
 
 ```html isFullscreen isBeta
 <div class="pf-c-page pf-m-full-height" id="page-demo-full-height">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-page-demo-full-height"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-page-demo-full-height"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="page-demo-full-height-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -1828,10 +1832,12 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
 
 ```html isFullscreen
 <div class="pf-c-page" id="page-demo-sticky-top-horizontal-subnav">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-page-demo-sticky-top-horizontal-subnav"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-page-demo-sticky-top-horizontal-subnav"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="page-demo-sticky-top-horizontal-subnav-masthead"
@@ -2902,10 +2908,12 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
 
 ```html isFullscreen
 <div class="pf-c-page" id="page-demo-sticky-top-breadcrumb">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-page-demo-sticky-top-breadcrumb"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-page-demo-sticky-top-breadcrumb"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="page-demo-sticky-top-breadcrumb-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -3933,12 +3941,14 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
 
 ### Sticky breadcrumb on medium
 
-```html isFullscreen
+```html isFullscreen isBeta
 <div class="pf-c-page" id="page-demo-sticky-top-breadcrumb">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-page-demo-sticky-top-breadcrumb"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-page-demo-sticky-top-breadcrumb"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="page-demo-sticky-top-breadcrumb-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -4968,10 +4978,12 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
 
 ```html isFullscreen
 <div class="pf-c-page" id="page-demo-sticky-top-section-group">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-page-demo-sticky-top-section-group"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-page-demo-sticky-top-section-group"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="page-demo-sticky-top-section-group-masthead"
@@ -6004,10 +6016,12 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
 
 ```html isFullscreen
 <div class="pf-c-page" id="page-demo-sticky-section-bottom">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-page-demo-sticky-section-bottom"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-page-demo-sticky-section-bottom"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="page-demo-sticky-section-bottom-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -7042,10 +7056,12 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
 
 ```html isFullscreen
 <div class="pf-c-page" id="page-demo-overflow-scroll">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-page-demo-overflow-scroll"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-page-demo-overflow-scroll"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="page-demo-overflow-scroll-masthead">
     <span class="pf-c-masthead__toggle">
       <button
@@ -8085,10 +8101,12 @@ Using the `.pf-m-full-height` modifier class on the page component eliminates th
 
 ```html isFullscreen
 <div class="pf-c-page" id="page-demo-centered-section">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-page-demo-centered-section"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-page-demo-centered-section"
+    >Skip to content</a>
+  </div>
   <header class="pf-c-masthead" id="page-demo-centered-section-masthead">
     <span class="pf-c-masthead__toggle">
       <button

package/docs/demos/PasswordStrength/examples/PasswordStrength.md

@@ -1,5 +1,6 @@
 ---
 id: 'Password strength'
+beta: true
 section: demos
 ---## Examples
 

package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md

@@ -8,10 +8,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="primary-detail-expanded-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-primary-detail-expanded-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-primary-detail-expanded-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
     id="primary-detail-expanded-example-masthead"
@@ -942,7 +944,6 @@ wrapperTag: div
                               role="listbox"
                               aria-labelledby="primary-detail-expanded-example-drawer-toolbar-select-name-label"
                               hidden
-                              style="width: 175px"
                             >
                               <li role="presentation">
                                 <button
@@ -982,7 +983,10 @@ 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">
@@ -1883,10 +1887,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="primary-detail-collapsed-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-primary-detail-collapsed-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-primary-detail-collapsed-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
     id="primary-detail-collapsed-example-masthead"
@@ -2817,7 +2823,6 @@ wrapperTag: div
                               role="listbox"
                               aria-labelledby="primary-detail-collapsed-example-drawer-toolbar-select-name-label"
                               hidden
-                              style="width: 175px"
                             >
                               <li role="presentation">
                                 <button
@@ -2857,7 +2862,10 @@ 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">
@@ -3685,10 +3693,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="primary-detail-content-body-padding-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-primary-detail-content-body-padding-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-primary-detail-content-body-padding-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
     id="primary-detail-content-body-padding-example-masthead"
@@ -5392,10 +5402,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="primary-detail-card-view-expanded-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-primary-detail-card-view-expanded-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-primary-detail-card-view-expanded-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead pf-m-display-stack pf-m-display-inline-on-lg"
     id="primary-detail-card-view-expanded-example-masthead"
@@ -6368,7 +6380,6 @@ wrapperTag: div
                           role="listbox"
                           aria-labelledby="primary-detail-card-view-expanded-example-drawer-toolbar-select-name-label"
                           hidden
-                          style="width: 175px"
                         >
                           <li role="presentation">
                             <button
@@ -6408,7 +6419,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">
@@ -7516,10 +7527,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="primary-detail-card-simple-list-on-mobile-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-primary-detail-card-simple-list-on-mobile-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-primary-detail-card-simple-list-on-mobile-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="primary-detail-card-simple-list-on-mobile-example-masthead"
@@ -8575,10 +8588,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="primary-detail-card-data-list-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-primary-detail-card-data-list-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-primary-detail-card-data-list-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="primary-detail-card-data-list-example-masthead"
@@ -9878,10 +9893,12 @@ wrapperTag: div
 
 ```html isFullscreen
 <div class="pf-c-page" id="primary-detail-inline-modifier-example">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-primary-detail-inline-modifier-example"
-  >Skip to content</a>
+  <div class="pf-c-skip-to-content">
+    <a
+      class="pf-c-button pf-m-primary"
+      href="#main-content-primary-detail-inline-modifier-example"
+    >Skip to content</a>
+  </div>
   <header
     class="pf-c-masthead"
     id="primary-detail-inline-modifier-example-masthead"

package/docs/demos/Skeleton/examples/Skeleton.md

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