@patternfly/patternfly 5.0.0-alpha.32 → 5.0.0-alpha.34

package/docs/components/Login/examples/Login.md

@@ -50,12 +50,18 @@ wrapperTag: div
       </header>
       <div class="pf-c-login__main-body">
         <form class="pf-c-form" novalidate>
-          <p class="pf-c-form__helper-text pf-m-error pf-m-hidden">
-            <span class="pf-c-form__helper-text-icon">
-              <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
-            </span>
-            Invalid login credentials.
-          </p>
+          <div class="pf-c-form__helper-text" aria-live="polite">
+            <div class="pf-c-helper-text pf-m-hidden">
+              <div class="pf-c-helper-text__item pf-m-error" id="-helper">
+                <span class="pf-c-helper-text__item-icon">
+                  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
+                </span>
+                <span
+                  class="pf-c-helper-text__item-text"
+                >Invalid login credentials.</span>
+              </div>
+            </div>
+          </div>
           <div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-username">
               <span class="pf-c-form__label-text">Username</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
 
@@ -266,12 +272,18 @@ wrapperTag: div
       </header>
       <div class="pf-c-login__main-body">
         <form class="pf-c-form" novalidate>
-          <p class="pf-c-form__helper-text pf-m-error" aria-live="polite">
-            <span class="pf-c-form__helper-text-icon">
-              <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
-            </span>
-            Invalid login credentials.
-          </p>
+          <div class="pf-c-form__helper-text" aria-live="polite">
+            <div class="pf-c-helper-text">
+              <div class="pf-c-helper-text__item pf-m-error" id="-helper">
+                <span class="pf-c-helper-text__item-icon">
+                  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
+                </span>
+                <span
+                  class="pf-c-helper-text__item-text"
+                >Invalid login credentials.</span>
+              </div>
+            </div>
+          </div>
           <div class="pf-c-form__group"><label
               class="pf-c-form__label"
               for="invalid-login-demo-form-username"
@@ -488,12 +500,18 @@ wrapperTag: div
       </header>
       <div class="pf-c-login__main-body">
         <form class="pf-c-form" novalidate>
-          <p class="pf-c-form__helper-text pf-m-error pf-m-hidden">
-            <span class="pf-c-form__helper-text-icon">
-              <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
-            </span>
-            Invalid login credentials.
-          </p>
+          <div class="pf-c-form__helper-text" aria-live="polite">
+            <div class="pf-c-helper-text pf-m-hidden">
+              <div class="pf-c-helper-text__item pf-m-error" id="-helper">
+                <span class="pf-c-helper-text__item-icon">
+                  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
+                </span>
+                <span
+                  class="pf-c-helper-text__item-text"
+                >Invalid login credentials.</span>
+              </div>
+            </div>
+          </div>
           <div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-username">
               <span class="pf-c-form__label-text">Username</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
 
@@ -715,12 +733,25 @@ wrapperTag: div
       </header>
       <div class="pf-c-login__main-body">
         <form class="pf-c-form" novalidate>
-          <p class="pf-c-form__helper-text pf-m-error pf-m-hidden">
-            <span class="pf-c-form__helper-text-icon">
-              <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
-            </span>
+          <div class="pf-c-form__helper-text" aria-live="polite">
+            <div class="pf-c-helper-text pf-m-hidden">
+              <div class="pf-c-helper-text__item pf-m-error" id="-helper">
+                <span class="pf-c-helper-text__item-icon">
+                  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
+                </span>
+                <span
+                  class="pf-c-helper-text__item-text"
+                >Invalid login credentials.</span>
+              </div>
+            </div>
+          </div>
+          <div
+            class="pf-c-form__helper-text pf-m-error pf-m-hidden"
+            aria-live="polite"
+          >
+            <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
             Invalid login credentials.
-          </p>
+          </div>
           <div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-username">
               <span class="pf-c-form__label-text">Username</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
 
@@ -988,12 +1019,18 @@ wrapperTag: div
       </header>
       <div class="pf-c-login__main-body">
         <form class="pf-c-form" novalidate>
-          <p class="pf-c-form__helper-text pf-m-error pf-m-hidden">
-            <span class="pf-c-form__helper-text-icon">
-              <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
-            </span>
-            Invalid login credentials.
-          </p>
+          <div class="pf-c-form__helper-text" aria-live="polite">
+            <div class="pf-c-helper-text pf-m-hidden">
+              <div class="pf-c-helper-text__item pf-m-error" id="-helper">
+                <span class="pf-c-helper-text__item-icon">
+                  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
+                </span>
+                <span
+                  class="pf-c-helper-text__item-text"
+                >Invalid login credentials.</span>
+              </div>
+            </div>
+          </div>
           <div class="pf-c-form__group"><label class="pf-c-form__label" for="login-demo-form-username">
               <span class="pf-c-form__label-text">Username</span>&nbsp;<span class="pf-c-form__label-required" aria-hidden="true">&#42;</span></label>
 
@@ -1176,7 +1213,7 @@ wrapperTag: div
 | `.pf-c-login__main-header-utilities` | `<div>` | Creates a utilities section in the main header area. **Note:** For use with a language selector menu. |
 | `.pf-c-login__main-body` | `<div>` | Creates the body of the main area. **Required** |
 | `.pf-c-login__main-body .pf-c-form` | `<form>` | Creates the login form in the main body area. **Required**|
-| `.pf-c-login__main-body .pf-c-form .pf-c-form-helper-text.pf-m-error` | `<form>` | Creates the error messages shown when the form has errors. When not active, apply `.pf-m-hidden.` **Required** |
+| `.pf-c-login__main-body .pf-c-form .pf-c-form-helper-text` | `<form>` | Creates the error messages shown when the form has errors. When not active, apply `.pf-m-hidden`. **Required** |
 | `.pf-c-login__main-footer` | `<footer>` | Creates the footer of the main area. **Required** |
 | `.pf-c-login__main-footer-links` | `<ul>` | Creates a list of links in the main footer. **Required** |
 | `.pf-c-login__main-footer-links-item` | `<li>` | Creates proper spacing for links in the main footer. **Required** |

package/docs/components/Menu/examples/Menu.md

@@ -1,6 +1,7 @@
 ---
 id: Menu
 section: components
+subsection: menus
 cssPrefix: pf-c-menu
 ---import './Menu.css'
 

package/docs/components/MenuToggle/examples/MenuToggle.md

@@ -1,6 +1,7 @@
 ---
 id: 'Menu toggle'
 section: components
+subsection: menus
 cssPrefix: pf-c-menu-toggle
 ---import './MenuToggle.css'
 

package/docs/components/ModalBox/examples/ModalBox.md

@@ -290,15 +290,15 @@ cssPrefix: pf-c-modal-box
 
 ```
 
-### Default alert
+### Custom alert
 
 ```html isFullscreen
 <div
-  class="pf-c-modal-box pf-m-default"
+  class="pf-c-modal-box pf-m-custom"
   role="dialog"
   aria-modal="true"
-  aria-labelledby="default-alert-title"
-  aria-describedby="default-alert-description"
+  aria-labelledby="custom-alert-title"
+  aria-describedby="custom-alert-description"
 >
   <div class="pf-c-modal-box__close">
     <button class="pf-c-button pf-m-plain" type="button" aria-label="Close">
@@ -306,7 +306,7 @@ cssPrefix: pf-c-modal-box
     </button>
   </div>
   <header class="pf-c-modal-box__header">
-    <h1 class="pf-c-modal-box__title pf-m-icon" id="default-alert-title">
+    <h1 class="pf-c-modal-box__title pf-m-icon" id="custom-alert-title">
       <span class="pf-c-modal-box__title-icon">
         <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
       </span>
@@ -314,12 +314,12 @@ cssPrefix: pf-c-modal-box
         Default
         alert:
       </span>
-      <span class="pf-c-modal-box__title-text">Default alert modal title</span>
+      <span class="pf-c-modal-box__title-text">Custom alert modal title</span>
     </h1>
   </header>
   <div
     class="pf-c-modal-box__body"
-    id="default-alert-description"
+    id="custom-alert-description"
   >Modal description</div>
   <footer class="pf-c-modal-box__footer">Modal footer</footer>
 </div>
@@ -511,7 +511,7 @@ A modal box is a generic rectangular container that can be used to build modals.
 | `.pf-m-lg` | `.pf-c-modal-box` | Modifies for a large modal box width. |
 | `.pf-m-align-top` | `.pf-c-modal-box` | Modifies for top alignment.  |
 | `.pf-m-icon` | `.pf-c-modal-box__title` | Modifies the title layout to accommodate an icon. |
-| `.pf-m-default` | `.pf-c-modal-box` | Modifies for the default alert state. |
+| `.pf-m-custom` | `.pf-c-modal-box` | Modifies for the custom alert state. |
 | `.pf-m-info` | `.pf-c-modal-box` | Modifies for the info alert state. |
 | `.pf-m-success` | `.pf-c-modal-box` | Modifies for the success alert state. |
 | `.pf-m-warning` | `.pf-c-modal-box` | Modifies for the warning alert state. |

package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md

@@ -1,6 +1,7 @@
 ---
-id: 'File upload - multiple'
+id: 'Multiple file upload'
 section: components
+subsection: file-upload
 cssPrefix: pf-c-multiple-file-upload
 ---## Examples
 

package/docs/components/NotificationDrawer/examples/NotificationDrawer.md

@@ -128,7 +128,7 @@ cssPrefix: pf-c-notification-drawer
       </li>
 
       <li
-        class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
+        class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
         tabindex="0"
       >
         <div class="pf-c-notification-drawer__list-item-header">
@@ -136,7 +136,7 @@ cssPrefix: pf-c-notification-drawer
             <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
           </span>
           <h2 class="pf-c-notification-drawer__list-item-header-title">
-            <span class="pf-screen-reader">Default notification:</span>
+            <span class="pf-screen-reader">Custom notification:</span>
             Unread
             recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
           </h2>
@@ -194,7 +194,7 @@ cssPrefix: pf-c-notification-drawer
       </li>
 
       <li
-        class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
+        class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
         tabindex="0"
       >
         <div class="pf-c-notification-drawer__list-item-header">
@@ -202,7 +202,7 @@ cssPrefix: pf-c-notification-drawer
             <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
           </span>
           <h2 class="pf-c-notification-drawer__list-item-header-title">
-            <span class="pf-screen-reader">Default notification:</span>
+            <span class="pf-screen-reader">Custom notification:</span>
             Unread
             recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
           </h2>
@@ -668,7 +668,7 @@ cssPrefix: pf-c-notification-drawer
           </li>
 
           <li
-            class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
+            class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
             tabindex="0"
           >
             <div class="pf-c-notification-drawer__list-item-header">
@@ -676,7 +676,7 @@ cssPrefix: pf-c-notification-drawer
                 <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
               </span>
               <h2 class="pf-c-notification-drawer__list-item-header-title">
-                <span class="pf-screen-reader">Default notification:</span>
+                <span class="pf-screen-reader">Custom notification:</span>
                 Unread
                 recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
               </h2>
@@ -737,7 +737,7 @@ cssPrefix: pf-c-notification-drawer
           </li>
 
           <li
-            class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
+            class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
             tabindex="0"
           >
             <div class="pf-c-notification-drawer__list-item-header">
@@ -745,7 +745,7 @@ cssPrefix: pf-c-notification-drawer
                 <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
               </span>
               <h2 class="pf-c-notification-drawer__list-item-header-title">
-                <span class="pf-screen-reader">Default notification:</span>
+                <span class="pf-screen-reader">Custom notification:</span>
                 Unread
                 recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
               </h2>
@@ -1163,7 +1163,7 @@ cssPrefix: pf-c-notification-drawer
           </li>
 
           <li
-            class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
+            class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
             tabindex="0"
           >
             <div class="pf-c-notification-drawer__list-item-header">
@@ -1171,7 +1171,7 @@ cssPrefix: pf-c-notification-drawer
                 <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
               </span>
               <h2 class="pf-c-notification-drawer__list-item-header-title">
-                <span class="pf-screen-reader">Default notification:</span>
+                <span class="pf-screen-reader">Custom notification:</span>
                 Unread
                 recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
               </h2>
@@ -1232,7 +1232,7 @@ cssPrefix: pf-c-notification-drawer
           </li>
 
           <li
-            class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
+            class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
             tabindex="0"
           >
             <div class="pf-c-notification-drawer__list-item-header">
@@ -1240,7 +1240,7 @@ cssPrefix: pf-c-notification-drawer
                 <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
               </span>
               <h2 class="pf-c-notification-drawer__list-item-header-title">
-                <span class="pf-screen-reader">Default notification:</span>
+                <span class="pf-screen-reader">Custom notification:</span>
                 Unread
                 recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
               </h2>
@@ -1658,7 +1658,7 @@ cssPrefix: pf-c-notification-drawer
           </li>
 
           <li
-            class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
+            class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
             tabindex="0"
           >
             <div class="pf-c-notification-drawer__list-item-header">
@@ -1666,7 +1666,7 @@ cssPrefix: pf-c-notification-drawer
                 <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
               </span>
               <h2 class="pf-c-notification-drawer__list-item-header-title">
-                <span class="pf-screen-reader">Default notification:</span>
+                <span class="pf-screen-reader">Custom notification:</span>
                 Unread
                 recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
               </h2>
@@ -1727,7 +1727,7 @@ cssPrefix: pf-c-notification-drawer
           </li>
 
           <li
-            class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
+            class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
             tabindex="0"
           >
             <div class="pf-c-notification-drawer__list-item-header">
@@ -1735,7 +1735,7 @@ cssPrefix: pf-c-notification-drawer
                 <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
               </span>
               <h2 class="pf-c-notification-drawer__list-item-header-title">
-                <span class="pf-screen-reader">Default notification:</span>
+                <span class="pf-screen-reader">Custom notification:</span>
                 Unread
                 recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
               </h2>
@@ -2153,7 +2153,7 @@ cssPrefix: pf-c-notification-drawer
           </li>
 
           <li
-            class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
+            class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
             tabindex="0"
           >
             <div class="pf-c-notification-drawer__list-item-header">
@@ -2161,7 +2161,7 @@ cssPrefix: pf-c-notification-drawer
                 <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
               </span>
               <h2 class="pf-c-notification-drawer__list-item-header-title">
-                <span class="pf-screen-reader">Default notification:</span>
+                <span class="pf-screen-reader">Custom notification:</span>
                 Unread
                 recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
               </h2>
@@ -2222,7 +2222,7 @@ cssPrefix: pf-c-notification-drawer
           </li>
 
           <li
-            class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-default"
+            class="pf-c-notification-drawer__list-item pf-m-hoverable pf-m-custom"
             tabindex="0"
           >
             <div class="pf-c-notification-drawer__list-item-header">
@@ -2230,7 +2230,7 @@ cssPrefix: pf-c-notification-drawer
                 <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
               </span>
               <h2 class="pf-c-notification-drawer__list-item-header-title">
-                <span class="pf-screen-reader">Default notification:</span>
+                <span class="pf-screen-reader">Custom notification:</span>
                 Unread
                 recommendation notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.
               </h2>
@@ -2588,7 +2588,7 @@ cssPrefix: pf-c-notification-drawer
 | `.pf-c-notification-drawer__header-action-close` | `<div>` | Initiates the notification drawer header action button. |
 | `.pf-c-notification-drawer__body` | `<div>` | Initiates the notification drawer body. **Required** |
 | `.pf-c-notification-drawer__list` | `<ul>` | Initiates a notification list. **Required** |
-| `.pf-c-notification-drawer__list-item` | `<li>` | Initiates a notification list item. **Always use with a state modifier - one of `.pf-m-info`, `.pf-m-warning`, `.pf-m-danger`, `.pf-m-success`.** **Required** |
+| `.pf-c-notification-drawer__list-item` | `<li>` | Initiates a notification list item. Always use with a state modifier class. **Required** |
 | `.pf-c-notification-drawer__list-item-header` | `<div>` | Initiates a notification list item header. **Required** |
 | `.pf-c-notification-drawer__list-item-header-icon` | `<span>` | Initiates a notification list item header icon. **Required** |
 | `.pf-c-notification-drawer__list-item-header-title` | `<h2>` | Initiates a notification list item header title. **Required** |
@@ -2601,7 +2601,7 @@ cssPrefix: pf-c-notification-drawer
 | `.pf-c-notification-drawer__group-title` | `<div>` | Initiates a notification group toggle title. **Required** |
 | `.pf-c-notification-drawer__group-count` | `<div>` | Initiates a notification group toggle count. |
 | `.pf-c-notification-drawer__group-icon` | `<span>` | Initiates a notification group toggle icon. **Required** |
-| `.pf-m-default` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the default state. |
+| `.pf-m-custom` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the custom state. |
 | `.pf-m-info` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the info state. |
 | `.pf-m-warning` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the warning state. |
 | `.pf-m-danger` | `.pf-c-notification-drawer__list-item` | Modifies a notification list item for the danger state. |

package/docs/components/OptionsMenu/examples/options-menu.md

@@ -1,6 +1,7 @@
 ---
 id: Options menu
 section: components
+subsection: menus
 cssPrefix: pf-c-options-menu
 ---import './options-menu.css'
 

package/docs/components/Popover/examples/Popover.md

@@ -373,15 +373,15 @@ cssPrefix: pf-c-popover
 
 ```
 
-### Default alert popover
+### Custom alert popover
 
 ```html isFullscreen
 <div
-  class="pf-c-popover pf-m-default pf-m-left"
+  class="pf-c-popover pf-m-custom pf-m-left"
   role="dialog"
   aria-modal="true"
-  aria-labelledby="popover-default-alert-header"
-  aria-describedby="popover-default-alert-body"
+  aria-labelledby="popover-custom-alert-header"
+  aria-describedby="popover-custom-alert-body"
 >
   <div class="pf-c-popover__arrow"></div>
   <div class="pf-c-popover__content">
@@ -391,22 +391,22 @@ cssPrefix: pf-c-popover
       </button>
     </div>
     <header class="pf-c-popover__header">
-      <div class="pf-c-popover__title" id="popover-default-alert-header">
+      <div class="pf-c-popover__title" id="popover-custom-alert-header">
         <span class="pf-c-popover__title-icon">
           <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
         </span>
         <h1 class="pf-c-popover__title-text">
           <span class="pf-screen-reader">
-            Default
+            Custom
             alert:
           </span>
-          Default popover title
+          Custom popover title
         </h1>
       </div>
     </header>
     <div
       class="pf-c-popover__body"
-      id="popover-default-alert-body"
+      id="popover-custom-alert-body"
     >Popovers are triggered by click rather than hover. Click again to close.</div>
     <footer class="pf-c-popover__footer">Popover footer</footer>
   </div>
@@ -612,7 +612,7 @@ A popover is used to provide contextual information for another component on cli
 | `.pf-m-bottom{-left/right}` | `.pf-c-popover` | Positions the popover to the bottom (or bottom left/bottom right) of the element. |
 | `.pf-m-no-padding` | `.pf-c-popover` | Removes the outer padding from the popover content. |
 | `.pf-m-width-auto` | `.pf-c-popover` | Allows popover width to be defined by the popover content. |
-| `.pf-m-default` | `.pf-c-popover` | Modifies for the default alert state. |
+| `.pf-m-custom` | `.pf-c-popover` | Modifies for the custom alert state. |
 | `.pf-m-info` | `.pf-c-popover` | Modifies for the info alert state. |
 | `.pf-m-success` | `.pf-c-popover` | Modifies for the success alert state. |
 | `.pf-m-warning` | `.pf-c-popover` | Modifies for the warning alert state. |

package/docs/components/Progress/examples/Progress.md

@@ -589,7 +589,7 @@ cssPrefix: pf-c-progress
 
 ```
 
-### Non-percantage progress
+### Non-percentage progress
 
 If the status that displays with the bar is not a percentage, then the ARIA tag `aria-valuetext` should be used to provide this status to screen reader users. This is the only case when setting the `aria-valuemax` to a value other than "100" is recommended, given how different screen readers handle these attributes.
 

package/docs/components/Radio/examples/Radio.md

@@ -1,6 +1,7 @@
 ---
 id: Radio
 section: components
+subsection: forms
 cssPrefix: pf-c-radio
 ---## Examples
 

package/docs/components/Select/examples/Select.md

@@ -1,6 +1,7 @@
 ---
 id: Select
 section: components
+subsection: menus
 cssPrefix: pf-c-select
 ---import './Select.css'