@patternfly/patternfly 6.4.0 → 6.5.0-prerelease.10

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

@@ -449,7 +449,7 @@ cssPrefix: pf-v6-c-drawer
       </div>
       <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
       <div
-        class="pf-v6-c-drawer__body pf-m-paddinng"
+        class="pf-v6-c-drawer__body"
         style="--pf-v6-c-drawer__panel__body--PaddingInlineStart: 48px;"
       >Drawer panel body content with modified inline start padding</div>
     </div>

package/docs/components/MenuToggle/examples/MenuToggle.md

@@ -262,6 +262,45 @@ cssPrefix: pf-v6-c-menu-toggle
 
 ```
 
+### Plain circle
+
+```html isBeta
+<button
+  class="pf-v6-c-menu-toggle pf-m-circle pf-m-plain"
+  type="button"
+  aria-expanded="false"
+  aria-label="Circle styled actions"
+>
+  <span class="pf-v6-c-menu-toggle__icon">
+    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+  </span>
+</button>
+&nbsp;
+<button
+  class="pf-v6-c-menu-toggle pf-m-circle pf-m-expanded pf-m-plain"
+  type="button"
+  aria-expanded="true"
+  aria-label="Circle and expanded styled actions"
+>
+  <span class="pf-v6-c-menu-toggle__icon">
+    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+  </span>
+</button>
+&nbsp;
+<button
+  class="pf-v6-c-menu-toggle pf-m-circle pf-m-plain pf-m-disabled"
+  type="button"
+  aria-expanded="false"
+  disabled
+  aria-label="Circle and disabled styled actions"
+>
+  <span class="pf-v6-c-menu-toggle__icon">
+    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+  </span>
+</button>
+
+```
+
 ### Plain with text
 
 ```html
@@ -2189,6 +2228,7 @@ Shown with default, primary, and secondary styling
 | `.pf-m-secondary` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the secondary variation. |
 | `.pf-m-text` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the text variation. |
 | `.pf-m-plain` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the plain variation. |
+| `.pf-m-circle` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component to be circular in shape. This is intended to be applied only to a plain menu toggle without any text. |
 | `.pf-m-expanded` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
 | `.pf-m-full-height` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
 | `.pf-m-full-width` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component to full width of parent. |

package/docs/components/Progress/examples/Progress.md

@@ -496,7 +496,7 @@ When conveying status, you should ensure:
   <div class="pf-v6-c-progress__status" aria-hidden="true">
     <span class="pf-v6-c-progress__measure">33%</span>
     <span class="pf-v6-c-progress__status-icon">
-      <i class="fas fa-fw fa-times-circle" aria-hidden="true"></i>
+      <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
     </span>
   </div>
   <div
@@ -591,7 +591,7 @@ When conveying status, you should ensure:
   <div class="pf-v6-c-progress__status" aria-hidden="true">
     <span class="pf-v6-c-progress__measure">33%</span>
     <span class="pf-v6-c-progress__status-icon">
-      <i class="fas fa-fw fa-times-circle" aria-hidden="true"></i>
+      <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
     </span>
   </div>
   <div
@@ -621,7 +621,7 @@ When conveying status, you should ensure:
   >Title</div>
   <div class="pf-v6-c-progress__status" aria-hidden="true">
     <span class="pf-v6-c-progress__status-icon">
-      <i class="fas fa-fw fa-times-circle" aria-hidden="true"></i>
+      <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
     </span>
   </div>
   <div

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

@@ -8179,6 +8179,94 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
 | `.pf-m-no-background` | `.pf-v6-c-table__expandable-row-content` | Modifies the expandable row content to have a transparent background. For in compound expandable when the parent expandable row has no padding with `.pf-m-no-padding`. |
 | `.pf-m-no-animate-expand` | `.pf-v6-c-table__control-row.pf-m-expanded` | Disables animation on a compound expandable row. **Note:** Used to disable the animation when clicking between compound expandable items. |
 
+## Plain variant
+
+### Plain example
+
+```html isBeta
+<table
+  class="pf-v6-c-table pf-m-grid-md pf-m-plain"
+  role="grid"
+  aria-label="This is a plain table example"
+  id="table-plain"
+>
+  <caption class="pf-v6-c-table__caption">This is the table caption</caption>
+
+  <thead class="pf-v6-c-table__thead">
+    <tr class="pf-v6-c-table__tr" role="row">
+      <th class="pf-v6-c-table__th" role="columnheader" scope="col">Repositories</th>
+
+      <th class="pf-v6-c-table__th" role="columnheader" scope="col">Branches</th>
+
+      <th
+        class="pf-v6-c-table__th"
+        role="columnheader"
+        scope="col"
+      >Pull requests</th>
+
+      <th class="pf-v6-c-table__th" role="columnheader" scope="col">Workspaces</th>
+
+      <th class="pf-v6-c-table__th" role="columnheader" scope="col">Last commit</th>
+    </tr>
+  </thead>
+
+  <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"
+        role="cell"
+        data-label="Repository name"
+      >Repository 1</td>
+      <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
+      <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
+      <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
+      <td
+        class="pf-v6-c-table__td"
+        role="cell"
+        data-label="Last commit"
+      >2 days ago</td>
+    </tr>
+    <tr class="pf-v6-c-table__tr" role="row">
+      <td
+        class="pf-v6-c-table__td"
+        role="cell"
+        data-label="Repository name"
+      >Repository 2</td>
+      <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
+      <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
+      <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
+      <td
+        class="pf-v6-c-table__td"
+        role="cell"
+        data-label="Last commit"
+      >2 days ago</td>
+    </tr>
+    <tr class="pf-v6-c-table__tr" role="row">
+      <td
+        class="pf-v6-c-table__td"
+        role="cell"
+        data-label="Repository name"
+      >Repository 3</td>
+      <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
+      <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
+      <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
+      <td
+        class="pf-v6-c-table__td"
+        role="cell"
+        data-label="Last commit"
+      >2 days ago</td>
+    </tr>
+  </tbody>
+</table>
+
+```
+
+### Plain variant usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-plain` | `.pf-v6-c-table` | Modifies the table to have a transparent background. |
+
 ## Compact variant
 
 ### Compact example

package/docs/components/Tabs/examples/Tabs.md

@@ -2986,6 +2986,193 @@ cssPrefix: pf-v6-c-tabs
 
 ```
 
+### Site navigation variation
+
+```html isBeta
+<div class="pf-v6-c-tabs pf-m-nav" role="region" id="nav-tabs">
+  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
+    <button
+      class="pf-v6-c-button pf-m-small pf-m-plain"
+      type="button"
+      aria-label="Scroll left"
+      disabled
+    >
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-angle-left" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
+  <ul class="pf-v6-c-tabs__list" role="tablist">
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="nav-tabs-users-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Users</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="nav-tabs-containers-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Containers</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="nav-tabs-database-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Database</span>
+      </button>
+    </li>
+
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="nav-tabs-server-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Server</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="nav-tabs-system-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">System</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="nav-tabs-network-wired-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Network</span>
+      </button>
+    </li>
+  </ul>
+
+  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
+    <button
+      class="pf-v6-c-button pf-m-small pf-m-plain"
+      type="button"
+      aria-label="Scroll right"
+      disabled
+    >
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-angle-right" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
+</div><br/ >
+As sub navigation:
+<div class="pf-v6-c-tabs pf-m-subtab pf-m-nav" role="region" id="nav-tabs">
+  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
+    <button
+      class="pf-v6-c-button pf-m-small pf-m-plain"
+      type="button"
+      aria-label="Scroll left"
+      disabled
+    >
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-angle-left" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
+  <ul class="pf-v6-c-tabs__list" role="tablist">
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="nav-tabs-users-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Users</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="nav-tabs-containers-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Containers</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="nav-tabs-database-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Database</span>
+      </button>
+    </li>
+
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="nav-tabs-server-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Server</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="nav-tabs-system-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">System</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="nav-tabs-network-wired-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Network</span>
+      </button>
+    </li>
+  </ul>
+
+  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
+    <button
+      class="pf-v6-c-button pf-m-small pf-m-plain"
+      type="button"
+      aria-label="Scroll right"
+      disabled
+    >
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-angle-right" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
+</div>
+
+```
+
 ## Tab item actions
 
 ### Help button example
@@ -10475,6 +10662,7 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
 | `.pf-m-initializing-accent` | `.pf-v6-c-tabs.pf-m-animate-current` | Modifies tabs styles while initializing the "current" tab's accent styles. |
 | `--pf-v6-c-tabs--link-accent--start` | `.pf-v6-c-tabs.pf-m-animate-current` | Sets the value for the "start" inset of the current tab's accent. |
 | `--pf-v6-c-tabs--link-accent--length` | `.pf-v6-c-tabs.pf-m-animate-current` | Sets the value for the length of the current tab's accent. |
+| `.pf-m-nav` | `.pf-v6-c-tabs` | Applies site navigation styling to the tab component. |
 | `.pf-m-current` | `.pf-v6-c-tabs__item` | Indicates that a tab item is currently selected. |
 | `.pf-m-action` | `.pf-v6-c-tabs__item` | Indicates that a tab item contains actions other than the tab link. |
 | `.pf-m-overflow` | `.pf-v6-c-tabs__item` | Applies overflow menu styling to a tab item. |

package/docs/components/Wizard/examples/Wizard.md

@@ -846,23 +846,23 @@ wrapperTag: div
               </div>
             </div>
             <div class="pf-v6-c-drawer__panel pf-m-width-33">
-              <div class="pf-v6-c-drawer__body">
-                <div class="pf-v6-c-drawer__head">
-                  <div class="pf-v6-c-drawer__actions">
-                    <div class="pf-v6-c-drawer__close">
-                      <button
-                        class="pf-v6-c-button pf-m-plain"
-                        type="button"
-                        aria-label="Close drawer panel"
-                      >
-                        <span class="pf-v6-c-button__icon">
-                          <i class="fas fa-times" aria-hidden="true"></i>
-                        </span>
-                      </button>
-                    </div>
-                  </div>drawer-panel
+              <div class="pf-v6-c-drawer__head">
+                drawer-panel
+                <div class="pf-v6-c-drawer__actions">
+                  <div class="pf-v6-c-drawer__close">
+                    <button
+                      class="pf-v6-c-button pf-m-plain"
+                      type="button"
+                      aria-label="Close drawer panel"
+                    >
+                      <span class="pf-v6-c-button__icon">
+                        <i class="fas fa-times" aria-hidden="true"></i>
+                      </span>
+                    </button>
+                  </div>
                 </div>
               </div>
+              <div class="pf-v6-c-drawer__body">drawer-body</div>
             </div>
           </div>
           <footer class="pf-v6-c-wizard__footer">

package/docs/demos/Dashboard/examples/Dashboard.md

@@ -597,10 +597,7 @@ cssPrefix: pf-d-dashboard
               style="--pf-v6-l-grid--item--Order-on-lg:3"
             >
               <div class="pf-v6-l-flex pf-m-column">
-                <div
-                  class="pf-v6-c-card pf-m-expanded"
-                  id="dashboard-demo-status-card-1"
-                >
+                <div class="pf-v6-c-card" id="dashboard-demo-status-card-1">
                   <div class="pf-v6-c-card__header">
                     <h2 class="pf-v6-c-title pf-m-xl">Status</h2>
                   </div>

package/docs/demos/DescriptionList/examples/DescriptionList.md

@@ -727,46 +727,44 @@ cssPrefix: pf-d-description-list
           </div>
         </div>
         <div class="pf-v6-c-drawer__panel pf-m-width-33-on-lg">
-          <div class="pf-v6-c-drawer__body">
-            <div class="pf-v6-c-drawer__head">
-              <div class="pf-v6-c-drawer__actions">
+          <div class="pf-v6-c-drawer__head">
+            <div class="pf-v6-c-drawer__actions">
+              <button
+                class="pf-v6-c-menu-toggle pf-m-plain"
+                type="button"
+                aria-expanded="false"
+                aria-label="Menu toggle"
+                id="description-list-in-drawer-example-toggle"
+              >
+                <span class="pf-v6-c-menu-toggle__icon">
+                  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+                </span>
+              </button>
+              <div class="pf-v6-c-drawer__close">
                 <button
-                  class="pf-v6-c-menu-toggle pf-m-plain"
+                  class="pf-v6-c-button pf-m-plain"
                   type="button"
-                  aria-expanded="false"
-                  aria-label="Menu toggle"
-                  id="description-list-in-drawer-example-toggle"
+                  aria-label="Close drawer panel"
                 >
-                  <span class="pf-v6-c-menu-toggle__icon">
-                    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+                  <span class="pf-v6-c-button__icon">
+                    <i class="fas fa-times" aria-hidden="true"></i>
                   </span>
                 </button>
-                <div class="pf-v6-c-drawer__close">
-                  <button
-                    class="pf-v6-c-button pf-m-plain"
-                    type="button"
-                    aria-label="Close drawer panel"
-                  >
-                    <span class="pf-v6-c-button__icon">
-                      <i class="fas fa-times" aria-hidden="true"></i>
-                    </span>
-                  </button>
-                </div>
               </div>
-              <div class="pf-v6-l-flex pf-m-space-items-sm">
-                <div class="pf-v6-l-flex__item">
-                  <span class="pf-v6-c-label pf-m-compact pf-m-blue">
-                    <span class="pf-v6-c-label__content">
-                      <span class="pf-v6-c-label__text">DC</span>
-                    </span>
+            </div>
+            <div class="pf-v6-l-flex pf-m-space-items-sm">
+              <div class="pf-v6-l-flex__item">
+                <span class="pf-v6-c-label pf-m-compact pf-m-blue">
+                  <span class="pf-v6-c-label__content">
+                    <span class="pf-v6-c-label__text">DC</span>
                   </span>
-                </div>
-                <div class="pf-v6-l-flex__item">
-                  <h2
-                    class="pf-v6-c-title pf-m-xl"
-                    id="description-list-in-drawer-example-drawer-label"
-                  >mary-test</h2>
-                </div>
+                </span>
+              </div>
+              <div class="pf-v6-l-flex__item">
+                <h2
+                  class="pf-v6-c-title pf-m-xl"
+                  id="description-list-in-drawer-example-drawer-label"
+                >mary-test</h2>
               </div>
             </div>
           </div>

package/docs/demos/Drawer/examples/Drawer.md

@@ -338,46 +338,44 @@ wrapperTag: div
           </div>
         </div>
         <div class="pf-v6-c-drawer__panel pf-m-width-33-on-lg" hidden>
-          <div class="pf-v6-c-drawer__body">
-            <div class="pf-v6-c-drawer__head">
-              <div class="pf-v6-c-drawer__actions">
+          <div class="pf-v6-c-drawer__head">
+            <div class="pf-v6-c-drawer__actions">
+              <button
+                class="pf-v6-c-menu-toggle pf-m-plain"
+                type="button"
+                aria-expanded="false"
+                aria-label="Menu toggle"
+                id="drawer-collapsed-example-toggle"
+              >
+                <span class="pf-v6-c-menu-toggle__icon">
+                  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+                </span>
+              </button>
+              <div class="pf-v6-c-drawer__close">
                 <button
-                  class="pf-v6-c-menu-toggle pf-m-plain"
+                  class="pf-v6-c-button pf-m-plain"
                   type="button"
-                  aria-expanded="false"
-                  aria-label="Menu toggle"
-                  id="drawer-collapsed-example-toggle"
+                  aria-label="Close drawer panel"
                 >
-                  <span class="pf-v6-c-menu-toggle__icon">
-                    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+                  <span class="pf-v6-c-button__icon">
+                    <i class="fas fa-times" aria-hidden="true"></i>
                   </span>
                 </button>
-                <div class="pf-v6-c-drawer__close">
-                  <button
-                    class="pf-v6-c-button pf-m-plain"
-                    type="button"
-                    aria-label="Close drawer panel"
-                  >
-                    <span class="pf-v6-c-button__icon">
-                      <i class="fas fa-times" aria-hidden="true"></i>
-                    </span>
-                  </button>
-                </div>
               </div>
-              <div class="pf-v6-l-flex pf-m-space-items-sm">
-                <div class="pf-v6-l-flex__item">
-                  <span class="pf-v6-c-label pf-m-compact pf-m-blue">
-                    <span class="pf-v6-c-label__content">
-                      <span class="pf-v6-c-label__text">DC</span>
-                    </span>
+            </div>
+            <div class="pf-v6-l-flex pf-m-space-items-sm">
+              <div class="pf-v6-l-flex__item">
+                <span class="pf-v6-c-label pf-m-compact pf-m-blue">
+                  <span class="pf-v6-c-label__content">
+                    <span class="pf-v6-c-label__text">DC</span>
                   </span>
-                </div>
-                <div class="pf-v6-l-flex__item">
-                  <h2
-                    class="pf-v6-c-title pf-m-xl"
-                    id="drawer-collapsed-example-drawer-label"
-                  >mary-test</h2>
-                </div>
+                </span>
+              </div>
+              <div class="pf-v6-l-flex__item">
+                <h2
+                  class="pf-v6-c-title pf-m-xl"
+                  id="drawer-collapsed-example-drawer-label"
+                >mary-test</h2>
               </div>
             </div>
           </div>