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

package/components/Popover/popover.scss

@@ -10,14 +10,14 @@
   --pf-c-popover--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
   --pf-c-popover--m-success__title-icon--Color: var(--pf-global--success-color--100);
   --pf-c-popover--m-info__title-icon--Color: var(--pf-global--info-color--100);
-  --pf-c-popover--m-default__title-icon--Color: var(--pf-global--default-color--200);
+  --pf-c-popover--m-custom__title-icon--Color: var(--pf-global--custom-color--200);
 
   // Title text colors for states
   --pf-c-popover--m-danger__title-text--Color: var(--pf-global--danger-color--200);
   --pf-c-popover--m-warning__title-text--Color: var(--pf-global--warning-color--200);
   --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--200);
   --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--200);
-  --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--300);
+  --pf-c-popover--m-custom__title-text--Color: var(--pf-global--custom-color--300);
 
   // Content
   --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
@@ -171,9 +171,9 @@
     --pf-c-popover__title-text--Color: var(--pf-c-popover--m-success__title-text--Color);
   }
 
-  &.pf-m-default {
-    --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-default__title-icon--Color);
-    --pf-c-popover__title-text--Color: var(--pf-c-popover--m-default__title-text--Color);
+  &.pf-m-custom {
+    --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-custom__title-icon--Color);
+    --pf-c-popover__title-text--Color: var(--pf-c-popover--m-custom__title-text--Color);
   }
 
   &.pf-m-info {

package/components/Popover/themes/dark/popover.scss

@@ -4,7 +4,7 @@
   .pf-c-popover {
     --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
     --pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--300);
-    --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--200);
+    --pf-c-popover--m-default__title-text--Color: var(--pf-global--custom-color--200);
     --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--100);
     --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--100);
   }

package/components/Wizard/wizard.css

@@ -7,27 +7,6 @@
   --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
   --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
 }
-.pf-c-wizard__header .pf-c-card {
-  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
-}
-.pf-c-wizard__header .pf-c-button {
-  --pf-c-button--m-primary--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--hover--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--focus--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--active--Color: var(--pf-global--primary-color--dark-100);
-  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
-  --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
-  --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
-  --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
-  --pf-c-button--m-secondary--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--hover--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--focus--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--active--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--BorderColor: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--hover--BorderColor: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--focus--BorderColor: var(--pf-global--Color--light-100);
-  --pf-c-button--m-secondary--active--BorderColor: var(--pf-global--Color--light-100);
-}
 
 .pf-c-wizard {
   --pf-c-wizard--Height: 100%;
@@ -527,23 +506,6 @@
   --pf-global--link--Color--hover: #73bcf7;
   --pf-global--BackgroundColor--100: #1b1d21;
 }
-:where(.pf-theme-dark) .pf-c-wizard__header .pf-c-card {
-  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
-}
-:where(.pf-theme-dark) .pf-c-wizard__header .pf-c-button {
-  --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
-  --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
-  --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
-  --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
-  --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
-  --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
-  --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
-  --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
-  --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
-}
 
 :where(.pf-theme-dark) .pf-c-wizard {
   --pf-c-wizard__header--BackgroundColor: var(--pf-global--palette--black-1000);

package/docs/components/Alert/examples/Alert.md

@@ -7,13 +7,13 @@ cssPrefix: pf-c-alert
 ### Types
 
 ```html
-<div class="pf-c-alert" aria-label="Default alert">
+<div class="pf-c-alert pf-m-custom" aria-label="Custom alert">
   <div class="pf-c-alert__icon">
     <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
   </div>
   <p class="pf-c-alert__title">
-    <span class="pf-screen-reader">Default alert:</span>
-    Default alert title
+    <span class="pf-screen-reader">Custom alert:</span>
+    Custom alert title
   </p>
 </div>
 <br />
@@ -205,13 +205,16 @@ cssPrefix: pf-c-alert
 ### Inline types
 
 ```html
-<div class="pf-c-alert pf-m-inline" aria-label="Inline default alert">
+<div
+  class="pf-c-alert pf-m-custom pf-m-inline"
+  aria-label="Inline custom alert"
+>
   <div class="pf-c-alert__icon">
     <i class="fas fa-fw fa-bell" aria-hidden="true"></i>
   </div>
   <p class="pf-c-alert__title">
-    <span class="pf-screen-reader">Default inline alert:</span>
-    Default inline alert title
+    <span class="pf-screen-reader">Custom inline alert:</span>
+    Custom inline alert title
   </p>
 </div>
 <br />
@@ -577,15 +580,11 @@ cssPrefix: pf-c-alert
 
 ## Documentation
 
-### Overview
-
-Add a modifier class to the default alert to change the color: `.pf-m-success`, `.pf-m-danger`, `.pf-m-warning`, or `.pf-m-info`.
-
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-c-alert` | `<div>` | Applies default alert styling. Always use with a modifier class. **Required** |
+| `.pf-c-alert` | `<div>` | Initiates the alert component. Always use with a status modifier class. **Required** |
 | `.pf-c-alert__toggle` | `<div>` | Defines the expandable alert toggle icon. **Required for expandable alerts** |
 | `.pf-c-alert__toggle-icon` | `<span>` | Defines the expandable alert toggle icon. **Required for expandable alerts** |
 | `.pf-c-alert__icon` | `<div>` | Defines the alert icon. **Required** |
@@ -593,10 +592,11 @@ Add a modifier class to the default alert to change the color: `.pf-m-success`,
 | `.pf-c-alert__description` | `<div>` | Defines the alert description area. |
 | `.pf-c-alert__action` | `<div>` | Defines the action button wrapper. Should contain `.pf-c-button.pf-m-plain` for close action or `.pf-c-button.pf-m-link` for link text. It should only include one action. |
 | `.pf-c-alert__action-group` | `<div>` | Defines the action button group. Should contain `.pf-c-button.pf-m-link.pf-m-inline` for inline link text. **Note:** only inline link buttons are supported in the alert action group. |
-| `.pf-m-success` | `.pf-c-alert` | Applies success styling. |
-| `.pf-m-danger` | `.pf-c-alert` | Applies danger styling. |
-| `.pf-m-warning` | `.pf-c-alert` | Applies warning styling. |
-| `.pf-m-info` | `.pf-c-alert` | Applies info styling. |
+| `.pf-m-custom` | `.pf-c-alert` | Applies custom status styling. |
+| `.pf-m-success` | `.pf-c-alert` | Applies success status styling. |
+| `.pf-m-danger` | `.pf-c-alert` | Applies danger status styling. |
+| `.pf-m-warning` | `.pf-c-alert` | Applies warning status styling. |
+| `.pf-m-info` | `.pf-c-alert` | Applies info status styling. |
 | `.pf-m-inline` | `.pf-c-alert` | Applies inline styling. |
 | `.pf-m-plain` | `.pf-c-alert.pf-m-inline` | Applies plain styling to an inline alert. |
 | `.pf-m-expandable` | `.pf-c-alert` | Applies expandable styles to the alert. |

package/docs/components/AlertGroup/examples/AlertGroup.md

@@ -160,15 +160,15 @@ For sighted users, interactive elements can be included in this message in one o
 *   Using a link to the Builds page: “The build is complete. Go to the [Builds]() page to download” using `<a href="url">Builds</a>`
 *   Using a button to download: “The build is complete. Go to the Builds page to [download]()" using `<button class="pf-c-button pf-m-link pf-m-inline type="button">download</button>`
 
+## Documentation
+
+### Overview
+
+Alert groups are used to contain and align consecutive alerts. Groups can either be embedded alongside a page's content or in the top-right corner as a toast group using the `.pf-m-toast` modifier.
+
 ### Modifiers
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-m-toast`| `.pf-c-alert-group` | Applies toast alert styling to an alert group. |
 | `.pf-c-alert-group__overflow-button` | `<button>` | Applies overflow button styling to an alert group overflow button. |
-
-## Documentation
-
-### Overview
-
-Alert groups are used to contain and align consecutive alerts. Groups can either be embedded alongside a page's content or in the top-right corner as a toast group using the `.pf-m-toast` modifier.

package/docs/components/AppLauncher/examples/application-launcher.md

@@ -1,6 +1,7 @@
 ---
 id: Application launcher
 section: components
+subsection: menus
 cssPrefix: pf-c-app-launcher
 ---import './application-launcher.css'
 

package/docs/components/Check/examples/Check.md

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

package/docs/components/ContextSelector/examples/context-selector.md

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

package/docs/components/DatePicker/examples/DatePicker.md

@@ -2,6 +2,7 @@
 id: 'Date picker'
 beta: true
 section: components
+subsection: date-and-time
 cssPrefix: pf-c-date-picker
 ---import './DatePicker.css'
 

package/docs/components/Dropdown/examples/Dropdown.md

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

package/docs/components/FileUpload/examples/FileUpload.md

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

package/docs/components/Form/examples/Form.md

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

package/docs/components/FormControl/examples/FormControl.md

@@ -1,6 +1,7 @@
 ---
 id: Form control
 section: components
+subsection: forms
 cssPrefix: pf-c-form-control
 ---import './FormControl.css'
 

package/docs/components/Icon/examples/Icon.md

@@ -84,7 +84,7 @@ cssPrefix: pf-c-icon
   </span>
 </span>
 <span class="pf-c-icon">
-  <span class="pf-c-icon__content pf-m-default">
+  <span class="pf-c-icon__content pf-m-custom">
     <i class="fas fa-bell" aria-hidden="true"></i>
   </span>
 </span>
@@ -252,4 +252,4 @@ Refer to the [icons](/guidelines/icons) page for information about the PatternFl
 | `.pf-m-[sm,md,lg,xl]` | `.pf-c-icon` | Modifies the icon container to be small, medium, large, or extra large. |
 | `.pf-m-[sm,md,lg,xl]` | `.pf-c-icon__content`, `pf-c-icon__progress` | Modifies the icon content or progress element to be small, medium, large, or extra large. |
 | `.pf-m-in-progress` | `.pf-c-icon` | Shows the progress element in place of the icon content.  |
-| `.pf-m-danger`, `.pf-m-warning`, `.pf-m-success`, `.pf-m-info`, `.pf-m-default`  | `.pf-c-icon__content` | Modifies the icon content to use a status color.  |
+| `.pf-m-danger`, `.pf-m-warning`, `.pf-m-success`, `.pf-m-info`, `.pf-m-custom`  | `.pf-c-icon__content` | Modifies the icon content to use a status color.  |

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/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'
 

package/docs/demos/CardView/examples/CardView.md

@@ -1,6 +1,6 @@
 ---
 id: 'Card view'
-section: demos
+section: patterns
 ---## Examples
 
 ### Card view