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

package/components/Page/page.css

@@ -17,27 +17,6 @@
   --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
   --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--dark-100);
 }
-.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-card, .pf-c-page__header .pf-c-card {
-  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--dark-transparent-200);
-}
-.pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button, .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-button, .pf-c-page__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-page__header-tools-item, .pf-c-page__header-tools-group {
   --pf-hidden-visible--hidden--Display: none;
@@ -963,27 +942,6 @@
   --pf-global--link--Color--hover: #73bcf7;
   --pf-global--BackgroundColor--100: #1b1d21;
 }
-:where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-card,
-:where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card,
-:where(.pf-theme-dark) .pf-c-page__header .pf-c-card {
-  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
-}
-:where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-button,
-:where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button,
-:where(.pf-theme-dark) .pf-c-page__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-page {
   --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--200);

package/components/Popover/popover.css

@@ -7,12 +7,12 @@
   --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);
   --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);
   --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-popover__content--PaddingTop: var(--pf-global--spacer--md);
   --pf-c-popover__content--PaddingRight: var(--pf-global--spacer--md);
@@ -107,9 +107,9 @@
   --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-success__title-icon--Color);
   --pf-c-popover__title-text--Color: var(--pf-c-popover--m-success__title-text--Color);
 }
-.pf-c-popover.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-c-popover.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-c-popover.pf-m-info {
   --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-info__title-icon--Color);
@@ -173,7 +173,7 @@
 :where(.pf-theme-dark) .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/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'
 
@@ -65,7 +66,13 @@ cssPrefix: pf-c-date-picker
       </div>
     </div>
   </div>
-  <div class="pf-c-date-picker__helper-text">Select a date.</div>
+  <div class="pf-c-date-picker__helper-text">
+    <div class="pf-c-helper-text">
+      <div class="pf-c-helper-text__item">
+        <span class="pf-c-helper-text__item-text">Select a date.</span>
+      </div>
+    </div>
+  </div>
 </div>
 
 ```
@@ -98,7 +105,13 @@ cssPrefix: pf-c-date-picker
       </div>
     </div>
   </div>
-  <div class="pf-c-date-picker__helper-text pf-m-error">Invalid date</div>
+  <div class="pf-c-date-picker__helper-text">
+    <div class="pf-c-helper-text">
+      <div class="pf-c-helper-text__item pf-m-error">
+        <span class="pf-c-helper-text__item-text">Invalid date</span>
+      </div>
+    </div>
+  </div>
 </div>
 
 ```
@@ -214,6 +227,5 @@ cssPrefix: pf-c-date-picker
 | `.pf-c-date-picker__helper-text` | `<div>` | Initiates the date picker helper text. |
 | `.pf-c-date-picker__calendar` | `<div>` | Initiates an optional date picker calendar container. **Note:** Required in the react date picker component. |
 | `.pf-m-top` | `.pf-c-date-picker` | Modifies to display the calendar above the date picker. |
-| `.pf-m-error` | `.pf-c-date-picker__helper-text` | Modifies the helper text for the invalid/error state. |
 | `.pf-m-align-right` | `.pf-c-date-picker__calendar` | Modifies the calendar to align the calendar to the right edge of the date picker. |
 | `.pf-m-static` | `.pf-c-date-picker__calendar` | Modifies the calendar to be statically positioned to support custom positioning. |

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
 
@@ -219,11 +220,15 @@ cssPrefix: pf-c-file-upload
         ></textarea>
       </div>
     </div>
-    <p
-      class="pf-c-form__helper-text pf-m-error"
-      id="textAreaHelperText1"
-      aria-live="polite"
-    >We don't support this file type. Try again with a different file type.</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="textAreaHelperText1">
+          <span
+            class="pf-c-helper-text__item-text"
+          >We don't support this file type. Try again with a different file type.</span>
+        </div>
+      </div>
+    </div>
   </div>
 </form>