@patternfly/patternfly 6.2.0-prerelease.9 → 6.2.1

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

@@ -727,6 +727,12 @@ For sighted users, interactive elements can be included in this message in one o
         <span class="pf-v6-screen-reader">Success alert:</span>
         Success toast alert title
       </p>
+      <div class="pf-v6-c-alert__description">
+        <p>
+          Info toast alert description. From the settings tab, click
+          <a href="#">View logs</a>&nbsp;to review the details.
+        </p>
+      </div>
       <div class="pf-v6-c-alert__action">
         <button
           class="pf-v6-c-button pf-m-plain"

package/docs/components/Button/examples/Button.md

@@ -1999,6 +1999,32 @@ For when a plain/icon button is placed inline with text
 
 ```
 
+### Favorite
+
+A favorite button should use a plain button with the star icon. Applying `.pf-m-favorited` to the button initiates a microanimation and indicates that the item is favorited.
+
+```html
+<button
+  class="pf-v6-c-button pf-m-favorite pf-m-plain"
+  type="button"
+  aria-label="not starred"
+>
+  <span class="pf-v6-c-button__icon">
+    <i class="fas fa-star" aria-hidden="true"></i>
+  </span>
+</button>
+<button
+  class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
+  type="button"
+  aria-label="starred"
+>
+  <span class="pf-v6-c-button__icon">
+    <i class="fas fa-star" aria-hidden="true"></i>
+  </span>
+</button>
+
+```
+
 ## Documentation
 
 ### Overview
@@ -2052,3 +2078,6 @@ Semantic buttons and links are important for usability as well as accessibility.
 | `.pf-m-progress` | `.pf-v6-c-button` | Indicates that the button supports the progress state. **Note:** Not used with the plain variation. |
 | `.pf-m-in-progress` | `.pf-v6-c-button` | Indicates that the button is in the in progress state. |
 | `.pf-m-stateful` | `.pf-v6-c-button` | Indicates that the button is used for one of read, unread, and attention states. **Note:** Always use with a modifier of `.pf-m-read`, `.pf-m-unread`, or `.pf-m-attention`. |
+| `.pf-m-notify` | `.pf-v6-c-button` | Indicates that the button should show the user notification of an event. **Note:** This is intended for use with a bell icon in the notification badge. |
+| `.pf-m-favorite` | `.pf-v6-c-button .pf-m-plain` | Modifies a plain button to be a favorite button. **Note:** This is intended for use with a star icon. |
+| `.pf-m-favorited` | `.pf-v6-c-button .pf-m-plain .pf-m-favorite` | Modifies a favorite button to indicate that item is favorited.  |

package/docs/components/Card/examples/Card.md

@@ -212,6 +212,35 @@ cssPrefix: pf-v6-c-card
 
 ```
 
+### Card with header that wraps
+
+```html
+<div class="pf-v6-c-card">
+  <div class="pf-v6-c-card__header pf-m-wrap">
+    <div class="pf-v6-c-card__actions pf-m-no-offset">
+      <button class="pf-v6-c-button pf-m-primary" type="button">
+        <span class="pf-v6-c-button__text">Primary action</span>
+      </button>
+
+      <button class="pf-v6-c-button pf-m-secondary" type="button">
+        <span class="pf-v6-c-button__text">Secondary action</span>
+      </button>
+
+      <button class="pf-v6-c-button pf-m-tertiary" type="button">
+        <span class="pf-v6-c-button__text">Tertiary action</span>
+      </button>
+    </div>
+    <div class="pf-v6-c-card__title">
+      <h2
+        class="pf-v6-c-card__title-text"
+      >This is a longer card title that takes up more space</h2>
+    </div>
+  </div>
+  <div class="pf-v6-c-card__body">This is the card body</div>
+</div>
+
+```
+
 ### Actions with no offset
 
 ```html
@@ -1690,6 +1719,7 @@ A card is a generic rectangular container that can be used to build other compon
 | `.pf-v6-c-card__sr-input` | `<input>` | Creates an input which, when focused, makes a following `.pf-v6-c-card` appear focused. |
 | `.pf-m-compact` | `.pf-v6-c-card` | Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred. |
 | `.pf-m-display-lg` | `.pf-v6-c-card` | Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases. |
+| `.pf-m-wrap` | `.pf-v6-c-card__header` | Modifies the card header to wrap its children. |
 | `.pf-m-no-fill` | `.pf-v6-c-card__body` | Sets a `.pf-v6-c-card__body` not to fill the available space in `.pf-v6-c-card`. `.pf-m-no-fill` can be added to multiple card bodies. |
 | `.pf-m-selectable` | `.pf-v6-c-card` | Modifies a card to be selectable.  |
 | `.pf-m-clickable` | `.pf-v6-c-card` | Modifies a card to be clickable. |

package/docs/components/ClipboardCopy/examples/ClipboardCopy.md

@@ -503,6 +503,34 @@ cssPrefix: pf-v6-c-clipboard-copy
 
 ```
 
+### Inline compact with truncation
+
+```html
+<div class="pf-v6-c-clipboard-copy pf-m-inline pf-m-truncate">
+  <span class="pf-v6-c-clipboard-copy__text">
+    <span class="pf-v6-c-truncate">
+      <span
+        class="pf-v6-c-truncate__start"
+      >This lengthy, copyable content will be truncated with default settings when the truncation prop is simply set to true. This is useful for quickly applying truncation without needing to worry about any other properties to set.</span>
+    </span>
+  </span>
+  <span class="pf-v6-c-clipboard-copy__actions">
+    <span class="pf-v6-c-clipboard-copy__actions-item">
+      <button
+        class="pf-v6-c-button pf-m-no-padding pf-m-plain"
+        type="button"
+        aria-label="Copy to clipboard"
+      >
+        <span class="pf-v6-c-button__icon">
+          <i class="fas fa-copy" aria-hidden="true"></i>
+        </span>
+      </button>
+    </span>
+  </span>
+</div>
+
+```
+
 ## Documentation
 
 ### Accessibility
@@ -529,6 +557,7 @@ cssPrefix: pf-v6-c-clipboard-copy
 | `.pf-v6-c-clipboard-copy__actions-item` | `<span>` | Initiates the inline copy clipboard actions item element. **Required** |
 | `.pf-m-inline` | `.pf-v6-c-clipboard-copy` | Modifies the clipboard copy component for inline styles. |
 | `.pf-m-block` | `.pf-v6-c-clipboard-copy.pf-m-inline` | Modifies the inline copy clipboard component to have block formatting. |
+| `.pf-m-truncate` | `.pf-v6-c-clipboard-copy.pf-m-truncate` | Modifies the inline copy clipboard component for use with text used in trucate component. |
 | `.pf-m-expanded` | `.pf-v6-c-clipboard-copy` | Modifies the clipboard copy component for the expanded state. |
 | `.pf-m-expanded` | `.pf-v6-c-button.pf-m-control` | Modifies the control toggle button for the expanded state. |
 | `.pf-m-code` | `code.pf-v6-c-clipboard-copy__text` | Modifies the inline copy clipboard text styles for use with the `<code>` element. |

package/docs/components/DataList/examples/DataList.md

@@ -1757,7 +1757,7 @@ When a list item includes more than one block of content, it can be difficult fo
   id="draggable-help"
 >Activate the reorder button and use the arrow keys to reorder the list or use your mouse to drag/reorder. Press escape to cancel the reordering.</div>
 <ul
-  class="pf-v6-c-data-list"
+  class="pf-v6-c-data-list pf-m-compact"
   role="list"
   aria-label="Draggable data list rows"
   id="data-list-draggable"

package/docs/components/Divider/examples/Divider.md

@@ -18,7 +18,7 @@ cssPrefix: pf-v6-c-divider
 ```html
 <ul role="list">
   <li>List item one</li>
-  <li class="pf-v6-c-divider" role="separator"></li>
+  <li class="pf-v6-c-divider" role="presentation"></li>
   <li>List item two</li>
 </ul>
 

package/docs/components/Drawer/examples/Drawer.md

@@ -550,6 +550,7 @@ cssPrefix: pf-v6-c-drawer
         class="pf-v6-c-drawer__splitter pf-m-vertical"
         role="separator"
         tabindex="0"
+        aria-valuenow="50"
         aria-orientation="vertical"
       >
         <div class="pf-v6-c-drawer__splitter-handle"></div>
@@ -597,6 +598,7 @@ cssPrefix: pf-v6-c-drawer
         class="pf-v6-c-drawer__splitter pf-m-vertical"
         role="separator"
         tabindex="0"
+        aria-valuenow="50"
         aria-orientation="vertical"
       >
         <div class="pf-v6-c-drawer__splitter-handle"></div>
@@ -647,6 +649,7 @@ cssPrefix: pf-v6-c-drawer
         class="pf-v6-c-drawer__splitter"
         role="separator"
         tabindex="0"
+        aria-valuenow="50"
         aria-orientation="horizontal"
       >
         <div class="pf-v6-c-drawer__splitter-handle"></div>
@@ -694,6 +697,7 @@ cssPrefix: pf-v6-c-drawer
         class="pf-v6-c-drawer__splitter pf-m-vertical"
         role="separator"
         tabindex="0"
+        aria-valuenow="50"
         aria-orientation="vertical"
       >
         <div class="pf-v6-c-drawer__splitter-handle"></div>

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

@@ -5640,9 +5640,9 @@ cssPrefix: pf-v6-c-menu
             </span>
             <span class="pf-v6-c-menu__item-description">This is a description</span>
           </a>
-          <div class="pf-v6-c-menu__item-action pf-m-favorited">
+          <div class="pf-v6-c-menu__item-action">
             <button
-              class="pf-v6-c-button pf-m-plain"
+              class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
               type="button"
               role="menuitem"
               aria-label="Starred"
@@ -5666,9 +5666,9 @@ cssPrefix: pf-v6-c-menu
             </span>
             <span class="pf-v6-c-menu__item-description">This is a description</span>
           </a>
-          <div class="pf-v6-c-menu__item-action pf-m-favorited">
+          <div class="pf-v6-c-menu__item-action">
             <button
-              class="pf-v6-c-button pf-m-plain"
+              class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
               type="button"
               role="menuitem"
               aria-label="Starred"
@@ -5699,7 +5699,7 @@ cssPrefix: pf-v6-c-menu
           </a>
           <div class="pf-v6-c-menu__item-action">
             <button
-              class="pf-v6-c-button pf-m-plain"
+              class="pf-v6-c-button pf-m-favorite pf-m-plain"
               type="button"
               role="menuitem"
               aria-label="Not starred"
@@ -5728,7 +5728,7 @@ cssPrefix: pf-v6-c-menu
           </a>
           <div class="pf-v6-c-menu__item-action">
             <button
-              class="pf-v6-c-button pf-m-plain"
+              class="pf-v6-c-button pf-m-favorite pf-m-plain"
               type="button"
               role="menuitem"
               aria-label="Not starred"

package/docs/components/Nav/examples/Navigation.md

@@ -230,6 +230,7 @@ cssPrefix: pf-v6-c-nav
         class="pf-v6-c-nav__subnav"
         aria-labelledby="expandable-example3"
         hidden
+        inert
       >
         <ul class="pf-v6-c-nav__list" role="list">
           <li class="pf-v6-c-nav__item">
@@ -376,6 +377,7 @@ cssPrefix: pf-v6-c-nav
         class="pf-v6-c-nav__subnav"
         aria-labelledby="nav-mixed-link4"
         hidden
+        inert
       >
         <ul class="pf-v6-c-nav__list" role="list">
           <li class="pf-v6-c-nav__item">
@@ -442,6 +444,7 @@ cssPrefix: pf-v6-c-nav
         class="pf-v6-c-nav__subnav"
         aria-labelledby="expandable-third-level-example-example-1"
         hidden
+        inert
       >
         <ul class="pf-v6-c-nav__list" role="list">
           <li class="pf-v6-c-nav__item">

package/docs/components/Page/examples/Page.md

@@ -412,6 +412,7 @@ This component provides the basic chrome for a page, including sidebar and main
 | `.pf-v6-c-page__main-body` | `<div>` | Creates the body section for a page section. **Required** |
 | `.pf-v6-c-page__main-group` | `<div>` | Creates the group of `.pf-v6-c-page__main-*` sections. Can be used in combination with `.pf-m-sticky-[top/bottom]` to make multiple sections sticky. |
 | `.pf-v6-c-page__drawer` | `<div>` | Creates a container for the drawer component when placing the main page element in the drawer body. |
+| `.pf-m-no-sidebar` | `.pf-v6-c-page` | Modifies the page grid for layouts without a sidebar. |
 | `.pf-m-expanded` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the expanded state. |
 | `.pf-m-collapsed` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the collapsed state. |
 | `.pf-m-page-insets` | `.pf-v6-c-page__sidebar-body` | Modifies a sidebar body padding/inset to visually match padding of page elements. |

package/docs/components/Table/examples/Table.md

@@ -1150,7 +1150,7 @@ Note: Table column widths will respond automatically when toggling expanded rows
           class="pf-v6-c-button pf-m-plain"
           id="table-expandable-expandable-toggle-thead"
           type="button"
-          aria-controls="table-expandable-content-thead"
+          aria-controls="table-expandable-content-1 table-expandable-content-2 table-expandable-content-3 table-expandable-content-4"
           aria-labelledby="table-expandable-node-thead"
           aria-label="Toggle all rows"
         >
@@ -1620,7 +1620,7 @@ Note: Table column widths will respond automatically when toggling expanded rows
           id="expandable-set-width-columns-example-expandable-toggle-thead"
           type="button"
           aria-expanded="true"
-          aria-controls="expandable-set-width-columns-example-content-thead"
+          aria-controls="expandable-set-width-columns-example-content-1 expandable-set-width-columns-example-content-2 expandable-set-width-columns-example-content-3 expandable-set-width-columns-example-content-4"
           aria-labelledby="expandable-set-width-columns-example-node-thead"
           aria-label="Toggle all rows"
           aria-describedby="true"
@@ -2096,7 +2096,7 @@ Note: Table column widths will respond automatically when toggling expanded rows
           class="pf-v6-c-button pf-m-plain"
           id="table-expandable-nested-table-expandable-toggle-thead"
           type="button"
-          aria-controls="table-expandable-nested-table-content-thead"
+          aria-controls="table-expandable-nested-table-content-1 table-expandable-nested-table-content-2 table-expandable-nested-table-content-3 table-expandable-nested-table-content-4"
           aria-labelledby="table-expandable-nested-table-node-thead"
           aria-label="Toggle all rows"
         >
@@ -5285,7 +5285,7 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
           class="pf-v6-c-button pf-m-small pf-m-plain"
           id="table-compact-expandable-expandable-toggle-thead"
           type="button"
-          aria-controls="table-compact-expandable-content-thead"
+          aria-controls="table-compact-expandable-content-1 table-compact-expandable-content-2 table-compact-expandable-content-3 table-compact-expandable-content-4"
           aria-labelledby="table-compact-expandable-node-thead"
           aria-label="Toggle all rows"
         >
@@ -20222,12 +20222,9 @@ For sticky columns to function correctly, the parent table's width must be contr
         </label>
       </td>
 
-      <td
-        class="pf-v6-c-table__td pf-v6-c-table__favorite pf-m-favorited"
-        role="cell"
-      >
+      <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Starred"
           id="table-favorites-favorite-button1"
@@ -20284,7 +20281,7 @@ For sticky columns to function correctly, the parent table's width must be contr
 
       <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Not starred"
           id="table-favorites-favorite-button2"
@@ -20337,12 +20334,9 @@ For sticky columns to function correctly, the parent table's width must be contr
         </label>
       </td>
 
-      <td
-        class="pf-v6-c-table__td pf-v6-c-table__favorite pf-m-favorited"
-        role="cell"
-      >
+      <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Starred"
           id="table-favorites-favorite-button3"
@@ -20397,7 +20391,7 @@ For sticky columns to function correctly, the parent table's width must be contr
 
       <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Not starred"
           id="table-favorites-favorite-button4"
@@ -20459,7 +20453,7 @@ For sticky columns to function correctly, the parent table's width must be contr
         <div class="pf-v6-c-action-list pf-m-icons">
           <div class="pf-v6-c-action-list__item">
             <button
-              class="pf-v6-c-button pf-m-plain"
+              class="pf-v6-c-button pf-m-favorite pf-m-plain"
               type="button"
               aria-label="Favorite all"
             >
@@ -20502,12 +20496,9 @@ For sticky columns to function correctly, the parent table's width must be contr
 
   <tbody class="pf-v6-c-table__tbody" role="rowgroup">
     <tr class="pf-v6-c-table__tr" role="row">
-      <td
-        class="pf-v6-c-table__td pf-v6-c-table__favorite pf-m-favorited"
-        role="cell"
-      >
+      <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Starred"
           id="table-favorites-sortable-favorite-button1"
@@ -20534,12 +20525,9 @@ For sticky columns to function correctly, the parent table's width must be contr
     </tr>
 
     <tr class="pf-v6-c-table__tr" role="row">
-      <td
-        class="pf-v6-c-table__td pf-v6-c-table__favorite pf-m-favorited"
-        role="cell"
-      >
+      <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Starred"
           id="table-favorites-sortable-favorite-button3"
@@ -20566,7 +20554,7 @@ For sticky columns to function correctly, the parent table's width must be contr
     <tr class="pf-v6-c-table__tr" role="row">
       <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Not starred"
           id="table-favorites-sortable-favorite-button2"
@@ -20593,7 +20581,7 @@ For sticky columns to function correctly, the parent table's width must be contr
     <tr class="pf-v6-c-table__tr" role="row">
       <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Not starred"
           id="table-favorites-sortable-favorite-button4"
@@ -20620,7 +20608,7 @@ For sticky columns to function correctly, the parent table's width must be contr
     <tr class="pf-v6-c-table__tr" role="row">
       <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Not starred"
           id="table-favorites-sortable-favorite-button5"