@patternfly/patternfly 6.0.0-alpha.8 → 6.0.0-alpha.81

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

@@ -8,25 +8,33 @@ cssPrefix: pf-v5-c-action-list
 
 ```html
 <div class="pf-v5-c-action-list">
-  <div class="pf-v5-c-action-list__item">
-    <button class="pf-v5-c-button pf-m-primary" type="button">Next</button>
-  </div>
-  <div class="pf-v5-c-action-list__item">
-    <button class="pf-v5-c-button pf-m-secondary" type="button">Back</button>
+  <div class="pf-v5-c-action-list__group">
+    <div class="pf-v5-c-action-list__item">
+      <button class="pf-v5-c-button pf-m-primary" type="button">Next</button>
+    </div>
+    <div class="pf-v5-c-action-list__item">
+      <button class="pf-v5-c-button pf-m-secondary" type="button">Back</button>
+    </div>
   </div>
 </div>
 <br />With kebab
 <div class="pf-v5-c-action-list">
-  <div class="pf-v5-c-action-list__item">
-    <button class="pf-v5-c-button pf-m-primary" type="button">Next</button>
-  </div>
-  <div class="pf-v5-c-action-list__item">
-    <button class="pf-v5-c-button pf-m-secondary" type="button">Back</button>
-  </div>
-  <div class="pf-v5-c-action-list__item">
-    <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Kebab">
-      <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
-    </button>
+  <div class="pf-v5-c-action-list__group">
+    <div class="pf-v5-c-action-list__item">
+      <button class="pf-v5-c-button pf-m-primary" type="button">Next</button>
+    </div>
+    <div class="pf-v5-c-action-list__item">
+      <button class="pf-v5-c-button pf-m-secondary" type="button">Back</button>
+    </div>
+    <div class="pf-v5-c-action-list__item">
+      <button
+        class="pf-v5-c-button pf-m-plain"
+        type="button"
+        aria-label="Kebab"
+      >
+        <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+      </button>
+    </div>
   </div>
 </div>
 
@@ -47,6 +55,49 @@ cssPrefix: pf-v5-c-action-list
     </button>
   </div>
 </div>
+<br />With group icons wrapper
+<div class="pf-v5-c-action-list">
+  <div class="pf-v5-c-action-list__group pf-m-icons">
+    <div class="pf-v5-c-action-list__item">
+      <button
+        class="pf-v5-c-button pf-m-plain"
+        type="button"
+        aria-label="Close"
+      >
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div class="pf-v5-c-action-list__item">
+      <button
+        class="pf-v5-c-button pf-m-plain"
+        type="button"
+        aria-label="Kebab"
+      >
+        <i class="fas fa-check" aria-hidden="true"></i>
+      </button>
+    </div>
+  </div>
+  <div class="pf-v5-c-action-list__group pf-m-icons">
+    <div class="pf-v5-c-action-list__item">
+      <button
+        class="pf-v5-c-button pf-m-plain"
+        type="button"
+        aria-label="Close"
+      >
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </button>
+    </div>
+    <div class="pf-v5-c-action-list__item">
+      <button
+        class="pf-v5-c-button pf-m-plain"
+        type="button"
+        aria-label="Kebab"
+      >
+        <i class="fas fa-check" aria-hidden="true"></i>
+      </button>
+    </div>
+  </div>
+</div>
 
 ```
 
@@ -79,11 +130,13 @@ cssPrefix: pf-v5-c-action-list
 ```html
 In modals, forms, data lists
 <div class="pf-v5-c-action-list">
-  <div class="pf-v5-c-action-list__item">
-    <button class="pf-v5-c-button pf-m-primary" type="button">Save</button>
-  </div>
-  <div class="pf-v5-c-action-list__item">
-    <button class="pf-v5-c-button pf-m-link" type="button">Cancel</button>
+  <div class="pf-v5-c-action-list__group">
+    <div class="pf-v5-c-action-list__item">
+      <button class="pf-v5-c-button pf-m-primary" type="button">Save</button>
+    </div>
+    <div class="pf-v5-c-action-list__item">
+      <button class="pf-v5-c-button pf-m-link" type="button">Cancel</button>
+    </div>
   </div>
 </div>
 <br />In wizards
@@ -95,8 +148,6 @@ In modals, forms, data lists
     <div class="pf-v5-c-action-list__item">
       <button class="pf-v5-c-button pf-m-secondary" type="button">Back</button>
     </div>
-  </div>
-  <div class="pf-v5-c-action-list__group">
     <div class="pf-v5-c-action-list__item">
       <button class="pf-v5-c-button pf-m-link" type="button">Cancel</button>
     </div>

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

@@ -392,7 +392,7 @@ cssPrefix: ['pf-v5-c-alert','pf-v5-c-alert-group']
   </div>
   <p class="pf-v5-c-alert__title">
     <span class="pf-v5-screen-reader">Success alert:</span>
-    Success alert title
+    Success alert title (inline)
   </p>
 </div>
 
@@ -677,8 +677,8 @@ 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="#">Builds</a>`
-*   Using a button to download: "The build is complete. Go to the Builds page to <button class="pf-v5-c-button pf-m-link pf-m-inline" type="button">download</button>" using `<button class="pf-v5-c-button pf-m-link pf-m-inline type="button">download</button>`
+* Using a link to the Builds page: "The build is complete. Go to the [Builds](#) page to download" using `<a href="#">Builds</a>`
+* Using a button to download: "The build is complete. Go to the Builds page to <button class="pf-v5-c-button pf-m-link pf-m-inline" type="button">download</button>" using `<button class="pf-v5-c-button pf-m-link pf-m-inline type="button">download</button>`
 
 ```html isFullscreen
 <ul class="pf-v5-c-alert-group pf-m-toast" role="list">

package/docs/components/Avatar/examples/Avatar.md

@@ -2,9 +2,7 @@
 id: Avatar
 section: components
 cssPrefix: pf-v5-c-avatar
----import './Avatar.css'
-
-## Examples
+---## Examples
 
 ### Basic
 
@@ -17,28 +15,17 @@ cssPrefix: pf-v5-c-avatar
 
 ```
 
-### Bordered - light
+### Bordered
 
 ```html
 <img
-  class="pf-v5-c-avatar pf-m-light"
-  alt="Avatar image light"
+  class="pf-v5-c-avatar pf-m-bordered"
+  alt="Avatar image bordered"
   src="/assets/images/img_avatar-light.svg"
 />
 
 ```
 
-### Bordered - dark
-
-```html
-<img
-  class="pf-v5-c-avatar pf-m-dark"
-  alt="Avatar image dark"
-  src="/assets/images/img_avatar-dark.svg"
-/>
-
-```
-
 ### Small
 
 ```html
@@ -100,8 +87,7 @@ The avatar component provides a default SVG icon. If an image is used it should
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-v5-c-avatar` | `<img>` |  Initiates an avatar image. **Required** |
-| `.pf-m-light` | `.pf-v5-c-avatar` | Modifies an avatar for use against a light background. |
-| `.pf-m-dark` | `.pf-v5-c-avatar` | Modifies an avatar for use against a dark background. |
+| `.pf-m-bordered` | `.pf-v5-c-avatar` | Modifies an avatar to have a border. |
 | `.pf-m-sm{-on-[breakpoint]}` | `.pf-v5-c-avatar` | Modifies an avatar to be small on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
 | `.pf-m-md{-on-[breakpoint]}` | `.pf-v5-c-avatar` | Modifies an avatar to be medium on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** This is the default size. |
 | `.pf-m-lg{-on-[breakpoint]}` | `.pf-v5-c-avatar` | Modifies an avatar to be large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |

package/docs/components/BackgroundImage/examples/BackgroundImage.md

@@ -9,7 +9,7 @@ cssPrefix: pf-v5-c-background-image
 ```html isFullscreen
 <div
   class="pf-v5-c-background-image"
-  style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pfbg-icon.svg)"
+  style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pf-background.svg)"
 ></div>
 
 ```

package/docs/components/Badge/examples/Badge.md

@@ -36,6 +36,26 @@ cssPrefix: pf-v5-c-badge
 
 ```
 
+### Badge as toggle
+
+```html
+<span class="pf-v5-c-badge pf-m-read">
+  7
+  <span class="pf-v5-c-badge__toggle-icon">
+    <i class="fas fa-caret-down"></i>
+  </span>
+</span>
+<span class="pf-v5-c-badge pf-m-unread">
+  7
+  <span class="pf-v5-screen-reader">unread messages</span>
+
+  <span class="pf-v5-c-badge__toggle-icon">
+    <i class="fas fa-caret-down"></i>
+  </span>
+</span>
+
+```
+
 ## Documentation
 
 ### Overview
@@ -47,5 +67,6 @@ Always add a modifier class. Never use the class `.pf-v5-c-badge` on its own.
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-v5-c-badge` | `<span>` | Initiates a badge. **Always use with a modifier class.** |
+| `.pf-v5-c-badge__toggle-icon` | `<span>` | Initiates a badge toggle icon. |
 | `.pf-m-read` | `.pf-v5-c-badge` | Applies read badge styling. |
 | `.pf-m-unread` | `.pf-v5-c-badge` | Applies unread badge styling. |

package/docs/components/Banner/examples/Banner.md

@@ -6,27 +6,43 @@ cssPrefix: pf-v5-c-banner
 
 ### Basic
 
-Banners can be styled with one of 5 different colors. A basic banner should only be used when the banner color does not represent status or severity.
+Banners can be styled with one of 9 different nonstatus colors. A nonstatus banner should only be used when the banner color does not represent status or severity.
 
 ```html
 <div class="pf-v5-c-banner">Default banner</div>
 
 <br />
 
-<div class="pf-v5-c-banner pf-m-blue">Blue banner</div>
+<div class="pf-v5-c-banner pf-m-red">Red banner</div>
 
 <br />
 
-<div class="pf-v5-c-banner pf-m-red">Red banner</div>
+<div class="pf-v5-c-banner pf-m-orangered">Orangered banner</div>
 
 <br />
 
-<div class="pf-v5-c-banner pf-m-green">Green banner</div>
+<div class="pf-v5-c-banner pf-m-orange">Orange banner</div>
 
 <br />
 
 <div class="pf-v5-c-banner pf-m-gold">Gold banner</div>
 
+<br />
+
+<div class="pf-v5-c-banner pf-m-green">Green banner</div>
+
+<br />
+
+<div class="pf-v5-c-banner pf-m-cyan">Cyan banner</div>
+
+<br />
+
+<div class="pf-v5-c-banner pf-m-blue">Blue banner</div>
+
+<br />
+
+<div class="pf-v5-c-banner pf-m-purple">Purple banner</div>
+
 ```
 
 ### Banner with links
@@ -80,33 +96,33 @@ Banners can be styled with one of 5 different colors. A basic banner should only
 When a banner is used to convey status, it is advised to add an icon that also conveys status visually, and to provide screen reader text using `.pf-v5-screen-reader` or an equivalent.
 
 ```html
-<div class="pf-v5-c-banner">
+<div class="pf-v5-c-banner pf-m-success">
   <div class="pf-v5-l-flex pf-m-space-items-sm">
     <div class="pf-v5-l-flex__item">
-      <span class="pf-v5-screen-reader">Default banner:</span>
+      <span class="pf-v5-screen-reader">Success banner:</span>
 
-      <i class="fas fa-bell" aria-hidden="true"></i>
+      <i class="fas fa-check-circle" aria-hidden="true"></i>
     </div>
-    <div class="pf-v5-l-flex__item">Default banner</div>
+    <div class="pf-v5-l-flex__item">Success banner</div>
   </div>
 </div>
 
 <br />
 
-<div class="pf-v5-c-banner pf-m-blue">
+<div class="pf-v5-c-banner pf-m-warning">
   <div class="pf-v5-l-flex pf-m-space-items-sm">
     <div class="pf-v5-l-flex__item">
-      <span class="pf-v5-screen-reader">Info banner:</span>
+      <span class="pf-v5-screen-reader">Warning banner:</span>
 
-      <i class="fas fa-info-circle" aria-hidden="true"></i>
+      <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
     </div>
-    <div class="pf-v5-l-flex__item">Info banner</div>
+    <div class="pf-v5-l-flex__item">Warning banner</div>
   </div>
 </div>
 
 <br />
 
-<div class="pf-v5-c-banner pf-m-red">
+<div class="pf-v5-c-banner pf-m-danger">
   <div class="pf-v5-l-flex pf-m-space-items-sm">
     <div class="pf-v5-l-flex__item">
       <span class="pf-v5-screen-reader">Danger banner:</span>
@@ -119,27 +135,27 @@ When a banner is used to convey status, it is advised to add an icon that also c
 
 <br />
 
-<div class="pf-v5-c-banner pf-m-green">
+<div class="pf-v5-c-banner pf-m-info">
   <div class="pf-v5-l-flex pf-m-space-items-sm">
     <div class="pf-v5-l-flex__item">
-      <span class="pf-v5-screen-reader">Success banner:</span>
+      <span class="pf-v5-screen-reader">Custom status banner:</span>
 
-      <i class="fas fa-check-circle" aria-hidden="true"></i>
+      <i class="fas fa-info-circle" aria-hidden="true"></i>
     </div>
-    <div class="pf-v5-l-flex__item">Success banner</div>
+    <div class="pf-v5-l-flex__item">Info banner</div>
   </div>
 </div>
 
 <br />
 
-<div class="pf-v5-c-banner pf-m-gold">
+<div class="pf-v5-c-banner pf-m-custom">
   <div class="pf-v5-l-flex pf-m-space-items-sm">
     <div class="pf-v5-l-flex__item">
-      <span class="pf-v5-screen-reader">Warning banner:</span>
+      <span class="pf-v5-screen-reader">Custom status banner:</span>
 
-      <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
+      <i class="fas fa-bell" aria-hidden="true"></i>
     </div>
-    <div class="pf-v5-l-flex__item">Warning banner</div>
+    <div class="pf-v5-l-flex__item">Custom banner</div>
   </div>
 </div>
 
@@ -147,15 +163,22 @@ When a banner is used to convey status, it is advised to add an icon that also c
 
 ## Documentation
 
-Add a modifier class to the default banner to change the presentation: `.pf-m-blue`, `.pf-m-red`, `.pf-m-green`, or `.pf-m-gold`.
-
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-v5-c-banner` | `<div>` |  Initiates a banner. **Required** |
-| `.pf-m-blue` | `.pf-v5-c-banner` |  Modifies banner for blue styling. |
 | `.pf-m-red` | `.pf-v5-c-banner` |  Modifies banner for red styling. |
-| `.pf-m-green` | `.pf-v5-c-banner` |  Modifies banner for green styling. |
+| `.pf-m-orangered` | `.pf-v5-c-banner` |  Modifies banner for orangered styling. |
+| `.pf-m-orange` | `.pf-v5-c-banner` |  Modifies banner for orange styling. |
 | `.pf-m-gold` | `.pf-v5-c-banner` |  Modifies banner for gold styling. |
+| `.pf-m-green` | `.pf-v5-c-banner` |  Modifies banner for green styling. |
+| `.pf-m-cyan` | `.pf-v5-c-banner` |  Modifies banner for cyan styling. |
+| `.pf-m-blue` | `.pf-v5-c-banner` |  Modifies banner for blue styling. |
+| `.pf-m-purple` | `.pf-v5-c-banner` |  Modifies banner for purple styling. |
+| `.pf-m-success` | `.pf-v5-c-banner` |  Modifies banner for success status styling. |
+| `.pf-m-warning` | `.pf-v5-c-banner` |  Modifies banner for warning status styling. |
+| `.pf-m-danger` | `.pf-v5-c-banner` |  Modifies banner for danger status styling. |
+| `.pf-m-info` | `.pf-v5-c-banner` |  Modifies banner for info status styling. |
+| `.pf-m-custom` | `.pf-v5-c-banner` |  Modifies banner for custom status styling. |
 | `.pf-m-sticky` | `.pf-v5-c-banner` |  Modifies banner to be sticky to the top of its container. |

package/docs/components/Brand/examples/Brand.css

@@ -0,0 +1,12 @@
+.show-dark,
+:where(.pf-v5-theme-dark) .show-light {
+  display: none;
+}
+
+:where(.pf-v5-theme-dark) .show-dark {
+  display: revert;
+}
+
+:where(.pf-v5-theme-dark) .show-dark .pf-m-picture {
+  display: inline-flex;
+}

package/docs/components/Brand/examples/Brand.md

@@ -1,48 +1,67 @@
 ---
 id: Brand
 section: components
----## Examples
+---import './Brand.css'
+
+## Examples
 
 ### Basic
 
 ```html
-<img
-  class="pf-v5-c-brand"
-  src="/assets/images/pf_logo.svg"
-  alt="PatternFly logo"
-/>
+<div class="show-light">
+  <img
+    class="pf-v5-c-brand"
+    src="/assets/images/PF-HorizontalLogo-Color.svg"
+    alt="PatternFly logo"
+  />
+</div>
+
+<div class="show-dark">
+  <img
+    class="pf-v5-c-brand"
+    src="/assets/images/PF-HorizontalLogo-Reverse.svg"
+    alt="PatternFly logo"
+  />
+</div>
 
 ```
 
 ### Responsive
 
 ```html
-<picture
-  class="pf-v5-c-brand pf-m-picture"
-  style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-sm: 60px; --pf-v5-c-brand--Width-on-md: 220px;"
->
-  <source
-    media="(min-width: 1200px)"
-    srcset="/assets/images/pf-c-brand__logo-on-xl.svg"
-  />
-  <source
-    media="(min-width: 992px)"
-    srcset="/assets/images/pf-c-brand__logo-on-lg.svg"
-  />
-  <source
-    media="(min-width: 768px)"
-    srcset="/assets/images/pf-c-brand__logo-on-md.svg"
-  />
-  <source
-    media="(min-width: 576px)"
-    srcset="/assets/images/pf-c-brand__logo-on-sm.svg"
-  />
-  <source srcset="/assets/images/pf-c-brand__logo.svg" />
-  <img
-    src="/assets/images/pf-c-brand__logo-base.jpg"
-    alt="Fallback patternFly default logo"
-  />
-</picture>
+<div class="show-light">
+  <picture
+    class="pf-v5-c-brand pf-m-picture"
+    style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-md: 220px;"
+  >
+    <source
+      media="(min-width: 768px)"
+      srcset="/assets/images/PF-HorizontalLogo-Color.svg"
+    />
+    <source srcset="/assets/images/PF-IconLogo-color.svg" />
+    <img
+      src="/assets/images/pf_logo.svg"
+      alt="Fallback patternFly default logo"
+    />
+  </picture>
+</div>
+
+<div class="show-dark">
+  <picture
+    class="pf-v5-c-brand pf-m-picture"
+    style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-md: 220px;"
+  >
+    <source
+      media="(min-width: 768px)"
+      srcset="/assets/images/PF-HorizontalLogo-Reverse.svg"
+    />
+    <source srcset="/assets/images/PF-IconLogo-Reverse.svg" />
+    <img
+      src="/assets/images/pf_logo.svg"
+      alt="Fallback patternFly default logo"
+    />
+  </picture>
+</div>
 
 ```
 

package/docs/components/Breadcrumb/examples/Breadcrumb.md

@@ -281,7 +281,7 @@ cssPrefix: pf-v5-c-breadcrumb
 
 A breadcrumb is a list of links to display a user's navigational hierarchy. The last item of the breadcrumb list indicates the current page's location.
 
-*   `.pf-v5-c-breadcrumb__list` is the default breadcrumb navigation. It provides links to previous navigation pages and also shows the current page's location.
+* `.pf-v5-c-breadcrumb__list` is the default breadcrumb navigation. It provides links to previous navigation pages and also shows the current page's location.
 
 In the event that a page does not have a traditional `<h1>` page title, a heading can be included in the breadcrumbs and an optional link within.
 

package/docs/components/Button/examples/Button.css

@@ -2,3 +2,7 @@
   margin-inline-end: 6px;
   margin-block-end: 6px;
 }
+
+#ws-core-c-button-plain-with-no-padding .pf-v5-c-button {
+  margin: 0;
+}