@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.40

package/components/Tooltip/tooltip.scss

@@ -13,8 +13,10 @@
   --pf-c-tooltip__content--FontSize: var(--pf-global--FontSize--sm);
 
   // Arrow variables
-  --pf-c-tooltip__arrow--Width: #{pf-size-prem(8px)};
-  --pf-c-tooltip__arrow--Height: #{pf-size-prem(8px)};
+  --pf-c-tooltip__arrow--Width: #{pf-size-prem(15px)};
+  --pf-c-tooltip__arrow--Height: #{pf-size-prem(15px)};
+  --pf-c-tooltip__arrow--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
+  --pf-c-tooltip__arrow--BoxShadow: var(--pf-global--BoxShadow--md);
   --pf-c-tooltip__arrow--m-top--TranslateX: -50%;
   --pf-c-tooltip__arrow--m-top--TranslateY: 50%;
   --pf-c-tooltip__arrow--m-top--Rotate: 45deg;
@@ -122,7 +124,8 @@
   width: var(--pf-c-tooltip__arrow--Width);
   height: var(--pf-c-tooltip__arrow--Height);
   pointer-events: none;
-  background-color: var(--pf-c-tooltip__content--BackgroundColor);
+  background-color: var(--pf-c-tooltip__arrow--BackgroundColor);
+  box-shadow: var(--pf-c-tooltip__arrow--BoxShadow);
 }
 
 // stylelint-disable no-invalid-position-at-import-rule

package/components/TreeView/tree-view.css

@@ -11,11 +11,12 @@
   --pf-c-tree-view__node--Color: var(--pf-global--Color--100);
   --pf-c-tree-view__node--m-current--Color: var(--pf-global--link--Color);
   --pf-c-tree-view__node--m-current--FontWeight: var(--pf-global--FontWeight--bold);
+  --pf-c-tree-view__node--BackgroundColor: transparent;
   --pf-c-tree-view__node-container--Display: contents;
   --pf-c-tree-view__node-content--RowGap: var(--pf-global--spacer--sm);
   --pf-c-tree-view__node-content--Overflow: visible;
   --pf-c-tree-view__node--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--palette--black-200);
+  --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-tree-view__list-item__list-item__node-toggle--Top: var(--pf-c-tree-view__node--PaddingTop--base);
   --pf-c-tree-view__list-item__list-item__node-toggle--Left: var(--pf-c-tree-view__node--PaddingLeft);
   --pf-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
@@ -25,6 +26,7 @@
   --pf-c-tree-view__node-toggle--hover--Color: var(--pf-global--Color--100);
   --pf-c-tree-view__node-toggle--focus--Color: var(--pf-global--Color--100);
   --pf-c-tree-view__node-toggle--active--Color: var(--pf-global--Color--100);
+  --pf-c-tree-view__node-toggle--BackgroundColor: transparent;
   --pf-c-tree-view__list-item--m-expanded__node-toggle--Color: var(--pf-global--Color--100);
   --pf-c-tree-view__node-toggle-icon--MinWidth: var(--pf-global--FontSize--md);
   --pf-c-tree-view__node-toggle-icon--Transition: transform var(--pf-global--TransitionDuration) var(--pf-global--TimingFunction);
@@ -49,10 +51,6 @@
   --pf-c-tree-view__node-text--max-lines: 1;
   --pf-c-tree-view__node-title--FontWeight: var(--pf-global--FontWeight--bold);
   --pf-c-tree-view__action--MarginLeft: var(--pf-global--spacer--md);
-  --pf-c-tree-view__action--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-tree-view__action--Color: var(--pf-global--icon--Color--light);
-  --pf-c-tree-view__action--hover--Color: var(--pf-global--icon--Color--dark);
-  --pf-c-tree-view__action--focus--Color: var(--pf-global--icon--Color--dark);
   --pf-c-tree-view--m-guides--guide--Left: var(--pf-c-tree-view--m-guides--guide-left--base);
   --pf-c-tree-view--m-guides--guide-color--base: var(--pf-global--BorderColor--100);
   --pf-c-tree-view--m-guides--guide-width--base: var(--pf-global--BorderWidth--sm);
@@ -250,13 +248,14 @@
   display: flex;
   padding: var(--pf-c-tree-view__node--PaddingTop) var(--pf-c-tree-view__node--PaddingRight) var(--pf-c-tree-view__node--PaddingBottom) var(--pf-c-tree-view__node--PaddingLeft);
   color: var(--pf-c-tree-view__node--Color);
+  background-color: var(--pf-c-tree-view__node--BackgroundColor);
 }
 .pf-c-tree-view__node.pf-m-current {
   --pf-c-tree-view__node--Color: var(--pf-c-tree-view__node--m-current--Color);
   font-weight: var(--pf-c-tree-view__node--m-current--FontWeight);
 }
 .pf-c-tree-view__node:focus {
-  background-color: var(--pf-c-tree-view__node--focus--BackgroundColor);
+  --pf-c-tree-view__node--BackgroundColor: var(--pf-c-tree-view__node--focus--BackgroundColor);
 }
 .pf-c-tree-view__node .pf-c-tree-view__node-count {
   margin-left: var(--pf-c-tree-view__node-count--MarginLeft);
@@ -303,6 +302,7 @@
   margin-top: var(--pf-c-tree-view__node-toggle-button--MarginTop);
   margin-bottom: var(--pf-c-tree-view__node-toggle-button--MarginBottom);
   color: var(--pf-c-tree-view__node-toggle--Color);
+  background-color: var(--pf-c-tree-view__node-toggle--BackgroundColor);
   border: 0;
   transform: translateX(var(--pf-c-tree-view__list-item__list-item__node-toggle--TranslateX));
 }
@@ -326,6 +326,7 @@
   font-weight: inherit;
   color: inherit;
   text-align: left;
+  background-color: transparent;
   border: 0;
 }
 label.pf-c-tree-view__node-text {
@@ -357,15 +358,6 @@ label.pf-c-tree-view__node-text {
 
 .pf-c-tree-view__action {
   margin-left: var(--pf-c-tree-view__action--MarginLeft);
-  color: var(--pf-c-tree-view__action--Color);
-  border: 0;
-}
-.pf-c-tree-view__action:hover {
-  --pf-c-tree-view__action--Color: var(--pf-c-tree-view__action--hover--Color);
-}
-.pf-c-tree-view__action:focus {
-  --pf-c-tree-view__action--Color: var(--pf-c-tree-view__action--focus--Color);
-  background-color: var(--pf-c-tree-view__action--focus--BackgroundColor);
 }
 
 .pf-c-tree-view__list-item .pf-c-tree-view__list-item {

package/components/TreeView/tree-view.scss

@@ -17,6 +17,7 @@ $pf-c-tree-view--MaxNesting: 10;
   --pf-c-tree-view__node--Color: var(--pf-global--Color--100);
   --pf-c-tree-view__node--m-current--Color: var(--pf-global--link--Color);
   --pf-c-tree-view__node--m-current--FontWeight: var(--pf-global--FontWeight--bold);
+  --pf-c-tree-view__node--BackgroundColor: transparent;
 
   // Container
   --pf-c-tree-view__node-container--Display: contents;
@@ -27,7 +28,7 @@ $pf-c-tree-view--MaxNesting: 10;
 
   // Link hover/focus
   --pf-c-tree-view__node--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--palette--black-200);
+  --pf-c-tree-view__node--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
 
   // Nested toggle
   --pf-c-tree-view__list-item__list-item__node-toggle--Top: var(--pf-c-tree-view__node--PaddingTop--base);
@@ -41,6 +42,7 @@ $pf-c-tree-view--MaxNesting: 10;
   --pf-c-tree-view__node-toggle--hover--Color: var(--pf-global--Color--100);
   --pf-c-tree-view__node-toggle--focus--Color: var(--pf-global--Color--100);
   --pf-c-tree-view__node-toggle--active--Color: var(--pf-global--Color--100);
+  --pf-c-tree-view__node-toggle--BackgroundColor: transparent;
   --pf-c-tree-view__list-item--m-expanded__node-toggle--Color: var(--pf-global--Color--100);
 
   // Toggle icon
@@ -81,10 +83,6 @@ $pf-c-tree-view--MaxNesting: 10;
 
   // Action
   --pf-c-tree-view__action--MarginLeft: var(--pf-global--spacer--md);
-  --pf-c-tree-view__action--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-tree-view__action--Color: var(--pf-global--icon--Color--light);
-  --pf-c-tree-view__action--hover--Color: var(--pf-global--icon--Color--dark);
-  --pf-c-tree-view__action--focus--Color: var(--pf-global--icon--Color--dark);
 
   // Guides
   // ================================================================== //
@@ -363,6 +361,7 @@ $pf-c-tree-view--MaxNesting: 10;
   display: flex;
   padding: var(--pf-c-tree-view__node--PaddingTop) var(--pf-c-tree-view__node--PaddingRight) var(--pf-c-tree-view__node--PaddingBottom) var(--pf-c-tree-view__node--PaddingLeft);
   color: var(--pf-c-tree-view__node--Color);
+  background-color: var(--pf-c-tree-view__node--BackgroundColor);
 
   &.pf-m-current {
     --pf-c-tree-view__node--Color: var(--pf-c-tree-view__node--m-current--Color);
@@ -371,7 +370,7 @@ $pf-c-tree-view--MaxNesting: 10;
   }
 
   &:focus {
-    background-color: var(--pf-c-tree-view__node--focus--BackgroundColor);
+    --pf-c-tree-view__node--BackgroundColor: var(--pf-c-tree-view__node--focus--BackgroundColor);
   }
 
   .pf-c-tree-view__node-count {
@@ -429,6 +428,7 @@ $pf-c-tree-view--MaxNesting: 10;
   margin-top: var(--pf-c-tree-view__node-toggle-button--MarginTop);
   margin-bottom: var(--pf-c-tree-view__node-toggle-button--MarginBottom);
   color: var(--pf-c-tree-view__node-toggle--Color);
+  background-color: var(--pf-c-tree-view__node-toggle--BackgroundColor);
   border: 0;
   transform: translateX(var(--pf-c-tree-view__list-item__list-item__node-toggle--TranslateX));
 }
@@ -456,6 +456,7 @@ $pf-c-tree-view--MaxNesting: 10;
   font-weight: inherit;
   color: inherit;
   text-align: left;
+  background-color: transparent;
   border: 0;
 }
 
@@ -484,18 +485,6 @@ $pf-c-tree-view--MaxNesting: 10;
 
 .pf-c-tree-view__action {
   margin-left: var(--pf-c-tree-view__action--MarginLeft);
-  color: var(--pf-c-tree-view__action--Color);
-  border: 0;
-
-  &:hover {
-    --pf-c-tree-view__action--Color: var(--pf-c-tree-view__action--hover--Color);
-  }
-
-  &:focus {
-    --pf-c-tree-view__action--Color: var(--pf-c-tree-view__action--focus--Color);
-
-    background-color: var(--pf-c-tree-view__action--focus--BackgroundColor);
-  }
 }
 
 // stylelint-disable no-duplicate-selectors

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%;
@@ -47,9 +26,14 @@
   --pf-c-wizard__close--xl--Right: var(--pf-global--spacer--lg);
   --pf-c-wizard__close--FontSize: var(--pf-global--FontSize--xl);
   --pf-c-wizard__title--PaddingRight: var(--pf-global--spacer--2xl);
+  --pf-c-wizard__title-text--FontSize: var(--pf-global--FontSize--3xl);
+  --pf-c-wizard__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+  --pf-c-wizard__title-text--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-wizard__title-text--LineHeight: var(--pf-global--LineHeight--sm);
   --pf-c-wizard__description--PaddingTop: var(--pf-global--spacer--sm);
   --pf-c-wizard__description--Color: var(--pf-global--Color--light-200);
   --pf-c-wizard__nav-link--Color: var(--pf-global--Color--100);
+  --pf-c-wizard__nav-link--BackgroundColor: transparent;
   --pf-c-wizard__nav-link--TextDecoration: var(--pf-global--link--TextDecoration);
   --pf-c-wizard__nav-link--hover--Color: var(--pf-global--link--Color);
   --pf-c-wizard__nav-link--focus--Color: var(--pf-global--link--Color);
@@ -229,6 +213,8 @@
   position: absolute;
   top: var(--pf-c-wizard__close--Top);
   right: var(--pf-c-wizard__close--Right);
+}
+.pf-c-wizard__header .pf-c-wizard__close button {
   font-size: var(--pf-c-wizard__close--FontSize);
 }
 
@@ -237,6 +223,13 @@
   word-wrap: break-word;
 }
 
+.pf-c-wizard__title-text {
+  font-family: var(--pf-c-wizard__title-text--FontFamily);
+  font-size: var(--pf-c-wizard__title-text--FontSize);
+  font-weight: var(--pf-c-wizard__title-text--FontWeight);
+  line-height: var(--pf-c-wizard__title-text--LineHeight);
+}
+
 .pf-c-wizard__description {
   display: none;
   padding-top: var(--pf-c-wizard__description--PaddingTop);
@@ -399,6 +392,7 @@
   text-align: left;
   text-decoration: var(--pf-c-wizard__nav-link--TextDecoration);
   word-break: break-word;
+  background-color: var(--pf-c-wizard__nav-link--BackgroundColor);
   border: 0;
 }
 .pf-c-wizard__toggle-num, .pf-c-wizard__nav-link::before {
@@ -484,8 +478,8 @@
   position: relative;
   z-index: var(--pf-c-wizard__footer--ZIndex);
   display: flex;
-  flex-wrap: wrap;
   flex-shrink: 0;
+  flex-wrap: wrap;
   padding: var(--pf-c-wizard__footer--PaddingTop) var(--pf-c-wizard__footer--PaddingRight) var(--pf-c-wizard__footer--PaddingBottom) var(--pf-c-wizard__footer--PaddingLeft);
   background-color: var(--pf-c-wizard__footer--BackgroundColor);
 }
@@ -512,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/components/Wizard/wizard.scss

@@ -37,12 +37,19 @@
   // Title
   --pf-c-wizard__title--PaddingRight: var(--pf-global--spacer--2xl);
 
+  // Title text
+  --pf-c-wizard__title-text--FontSize: var(--pf-global--FontSize--3xl);
+  --pf-c-wizard__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+  --pf-c-wizard__title-text--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-wizard__title-text--LineHeight: var(--pf-global--LineHeight--sm);
+
   // Description
   --pf-c-wizard__description--PaddingTop: var(--pf-global--spacer--sm);
   --pf-c-wizard__description--Color: var(--pf-global--Color--light-200);
 
   // Nav link
   --pf-c-wizard__nav-link--Color: var(--pf-global--Color--100);
+  --pf-c-wizard__nav-link--BackgroundColor: transparent;
   --pf-c-wizard__nav-link--TextDecoration: var(--pf-global--link--TextDecoration);
   --pf-c-wizard__nav-link--hover--Color: var(--pf-global--link--Color);
   --pf-c-wizard__nav-link--focus--Color: var(--pf-global--link--Color);
@@ -240,7 +247,10 @@
     position: absolute;
     top: var(--pf-c-wizard__close--Top);
     right: var(--pf-c-wizard__close--Right);
-    font-size: var(--pf-c-wizard__close--FontSize);
+
+    button {
+      font-size: var(--pf-c-wizard__close--FontSize);
+    }
   }
 }
 
@@ -249,6 +259,13 @@
   word-wrap: break-word;
 }
 
+.pf-c-wizard__title-text {
+  font-family: var(--pf-c-wizard__title-text--FontFamily);
+  font-size: var(--pf-c-wizard__title-text--FontSize);
+  font-weight: var(--pf-c-wizard__title-text--FontWeight);
+  line-height: var(--pf-c-wizard__title-text--LineHeight);
+}
+
 .pf-c-wizard__description {
   display: none;
   padding-top: var(--pf-c-wizard__description--PaddingTop);
@@ -428,6 +445,7 @@
   text-align: left; // needed for when the item is a button
   text-decoration: var(--pf-c-wizard__nav-link--TextDecoration);
   word-break: break-word;
+  background-color: var(--pf-c-wizard__nav-link--BackgroundColor);
   border: 0;
 
   // Common step number styles
@@ -527,8 +545,8 @@
   position: relative;
   z-index: var(--pf-c-wizard__footer--ZIndex);
   display: flex;
-  flex-wrap: wrap;
   flex-shrink: 0;
+  flex-wrap: wrap;
   padding: var(--pf-c-wizard__footer--PaddingTop) var(--pf-c-wizard__footer--PaddingRight) var(--pf-c-wizard__footer--PaddingBottom) var(--pf-c-wizard__footer--PaddingLeft);
   background-color: var(--pf-c-wizard__footer--BackgroundColor);
 

package/docs/components/AboutModalBox/examples/AboutModalBox.md

@@ -27,7 +27,6 @@ cssPrefix: pf-c-about-modal-box
   <div class="pf-c-about-modal-box__header">
     <h1 class="pf-c-title pf-m-4xl" id="about-modal-title">Product name</h1>
   </div>
-  <div class="pf-c-about-modal-box__hero"></div>
   <div class="pf-c-about-modal-box__content">
     <div class="pf-c-about-modal-box__body">content</div>
     <p
@@ -42,20 +41,27 @@ cssPrefix: pf-c-about-modal-box
 
 ### Accessibility
 
-| Attribute                   | Applies to                            | Outcome                                                                                           |
-| --------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------- |
+| Attribute | Applies to | Outcome |
+| -- | -- | -- |
 | `aria-label="Close Dialog"` | `.pf-c-modal-box__close .pf-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required** |
 
+### Customizing the background image
+
+In order to use a custom image, pass a new value to the `--pf-c-about-modal-box--BackgroundImage` CSS variable. For example:
+
+```css
+--pf-c-about-modal-box--BackgroundImage: url("custom/image/path");
+```
+
 ### Usage
 
-| Class                                | Applied to           | Outcome                               |
-| ------------------------------------ | -------------------- | ------------------------------------- |
-| `.pf-c-about-modal-box`              | `<div>`, `<article>` | Initiates a modal box.                |
-| `.pf-c-about-modal-box__brand`       | `<div>`              | Initiates a modal box brand cell.     |
-| `.pf-c-about-modal-box__brand-image` | `<img>`              | Initiates a modal box brand image.    |
-| `.pf-c-about-modal-box__close`       | `<div>`              | Initiates a modal box close cell.     |
-| `.pf-c-about-modal-box__header`      | `<div>`, `<header>`  | Initiates a modal box header cell.    |
-| `.pf-c-about-modal-box__hero`        | `<div>`              | Initiates a modal box hero cell.      |
-| `.pf-c-about-modal-box__content`     | `<div>`              | Initiates a modal box content cell.   |
-| `.pf-c-about-modal-box__body`        | `<div>`              | Initiates a modal box body cell.      |
-| `.pf-c-about-modal-box__strapline`   | `<p>`                | Initiates a modal box strapline cell. |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-about-modal-box` |  `<div>`, `<article>`  |  Initiates a modal box. |
+| `.pf-c-about-modal-box__brand` |  `<div>` |  Initiates a modal box brand cell. |
+| `.pf-c-about-modal-box__brand-image` |  `<img>` |  Initiates a modal box brand image. |
+| `.pf-c-about-modal-box__close` |  `<div>` |  Initiates a modal box close cell. |
+| `.pf-c-about-modal-box__header` |  `<div>`, `<header>` |  Initiates a modal box header cell. |
+| `.pf-c-about-modal-box__content` |  `<div>` |  Initiates a modal box content cell. |
+| `.pf-c-about-modal-box__body` |  `<div>` |  Initiates a modal box body cell. |
+| `.pf-c-about-modal-box__strapline` |  `<p>` |  Initiates a modal box strapline cell. |

package/docs/components/Accordion/examples/Accordion.md

@@ -436,15 +436,15 @@ In these examples `.pf-c-accordion` uses `<dl>`, `.pf-c-accordion__toggle` uses
 
 ### Usage
 
-| Class                                      | Applied to                                                       | Outcome                                                                                          |
-| ------------------------------------------ | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
-| `.pf-c-accordion`                          | `<div>`, `<dl>`                                                  | Initiates an accordion component. **Required**                                                   |
-| `.pf-c-accordion__toggle`                  | `<h1-h6><button>`, `<dt><button>`                                | Initiates a toggle in the accordion. **Required**                                                |
-| `.pf-c-accordion__toggle-text`             | `<span>`                                                         | Initiates the text inside the toggle. **Required**                                               |
-| `.pf-c-accordion__toggle-icon`             | `<span>`                                                         | Initiates the toggle icon wrapper. **Required**                                                  |
-| `.pf-c-accordion__expandable-content`      | `<div>`, `<dd>`                                                  | Initiates expandable content. **Must be paired with a button**                                   |
-| `.pf-c-accordion__expandable-content-body` | `<div>`                                                          | Initiates expandable content body. **Required**                                                  |
-| `.pf-m-bordered`                           | `.pf-c-accordion`                                                | Modifies the accordion to add borders between items.                                             |
-| `.pf-m-display-lg`                         | `.pf-c-accordion`                                                | Modifies the accordion for large display styling. This variation is for marketing/web use cases. |
-| `.pf-m-expanded`                           | `.pf-c-accordion__toggle`, `.pf-c-accordion__expandable-content` | Modifies the accordion button and expandable content for the expanded state.                     |
-| `.pf-m-fixed`                              | `.pf-c-accordion__expandable-content`                            | Modifies the expandable content for the fixed state.                                             |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-accordion` | `<div>`, `<dl>` | Initiates an accordion component. **Required**|
+| `.pf-c-accordion__toggle` | `<h1-h6><button>`, `<dt><button>` | Initiates a toggle in the accordion. **Required** |
+| `.pf-c-accordion__toggle-text` | `<span>` | Initiates the text inside the toggle. **Required** |
+| `.pf-c-accordion__toggle-icon` | `<span>` | Initiates the toggle icon wrapper. **Required** |
+| `.pf-c-accordion__expandable-content` | `<div>`, `<dd>` | Initiates expandable content. **Must be paired with a button** |
+| `.pf-c-accordion__expandable-content-body` | `<div>` | Initiates expandable content body. **Required** |
+| `.pf-m-bordered` | `.pf-c-accordion` | Modifies the accordion to add borders between items. |
+| `.pf-m-display-lg` | `.pf-c-accordion` | Modifies the accordion for large display styling. This variation is for marketing/web use cases. |
+| `.pf-m-expanded` | `.pf-c-accordion__toggle`, `.pf-c-accordion__expandable-content` | Modifies the accordion button and expandable content for the expanded state. |
+| `.pf-m-fixed` | `.pf-c-accordion__expandable-content` | Modifies the expandable content for the fixed state. |

package/docs/components/ActionList/examples/ActionList.md

@@ -109,9 +109,9 @@ In modals, forms, data lists
 
 ### Usage
 
-| Attribute                  | Applied to                                      | Outcome                                           |
-| -------------------------- | ----------------------------------------------- | ------------------------------------------------- |
-| `.pf-c-action-list`        | `<div>`                                         | Initiates the action list container.              |
-| `.pf-c-action-list__item`  | `<div>`                                         | Initiates the action list item container.         |
-| `.pf-c-action-list__group` | `<div>`                                         | Initiates the action list group container.        |
-| `.pf-m-icons`              | `.pf-c-action-list`, `.pf-c-action-list__group` | Modifies the action list to support button icons. |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-action-list` | `<div>` | Initiates the action list container. |
+| `.pf-c-action-list__item` | `<div>` | Initiates the action list item container. |
+| `.pf-c-action-list__group` | `<div>` | Initiates the action list group container. |
+| `.pf-m-icons` | `.pf-c-action-list`, `.pf-c-action-list__group` | Modifies the action list to support button icons. |

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,28 +580,25 @@ 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__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**                                                                                                                                                                                            |
-| `.pf-c-alert__title`        | `<p>, <h1-h6>`                | Defines the alert title. **Required**                                                                                                                                                                                           |
-| `.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-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.                                                                                                                                                                                         |
-| `.pf-m-expanded`            | `.pf-c-alert.pf-m-expandable` | Applies expanded styles to an expandable alert.                                                                                                                                                                                 |
-| `.pf-m-truncate`            | `.pf-c-alert__title`          | Modifies the title to display a single line and truncate any overflow text with ellipses. **Note:** you can specify the max number of lines to show by setting the `--pf-c-alert__title--max-lines` (the default value is `1`). |
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.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** |
+| `.pf-c-alert__title` | `<p>, <h1-h6>` | Defines the alert title. **Required** |
+| `.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-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. |
+| `.pf-m-expanded` | `.pf-c-alert.pf-m-expandable` | Applies expanded styles to an expandable alert. |
+| `.pf-m-truncate` | `.pf-c-alert__title` | Modifies the title to display a single line and truncate any overflow text with ellipses. **Note:** you can specify the max number of lines to show by setting the `--pf-c-alert__title--max-lines` (the default value is `1`). |

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

@@ -7,7 +7,7 @@ cssPrefix: pf-c-alert-group
 ### Static alert group
 
 ```html
-<ul class="pf-c-alert-group">
+<ul class="pf-c-alert-group" role="list">
   <li class="pf-c-alert-group__item">
     <div class="pf-c-alert pf-m-inline pf-m-success" aria-label="Success alert">
       <div class="pf-c-alert__icon">
@@ -62,15 +62,15 @@ cssPrefix: pf-c-alert-group
 
 ### Usage
 
-| Attribute                 | Applied to | Outcome                                        |
-| ------------------------- | ---------- | ---------------------------------------------- |
-| `.pf-c-alert-group`       | `<ul>`     | Creates an alert group component. **Required** |
-| `.pf-c-alert-group__item` | `<li>`     | Creates an alert group item. **Required**      |
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-c-alert-group` | `<ul>` | Creates an alert group component. **Required** |
+| `.pf-c-alert-group__item` | `<li>` | Creates an alert group item. **Required** |
 
 ### Toast alert group
 
 ```html isFullscreen
-<ul class="pf-c-alert-group pf-m-toast">
+<ul class="pf-c-alert-group pf-m-toast" role="list">
   <li class="pf-c-alert-group__item">
     <div class="pf-c-alert pf-m-success" aria-label="Success toast alert">
       <div class="pf-c-alert__icon">
@@ -157,18 +157,18 @@ When toast alerts include a link or action, these elements are not announced as
 
 For sighted users, interactive elements can be included in this message in one of the following ways:
 
--   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>`
-
-### 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. |
+*   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. |