@patternfly/patternfly 6.3.0-prerelease.8 → 6.3.0

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

@@ -161,7 +161,7 @@ cssPrefix: pf-v6-c-breadcrumb
       </span>
       <span class="pf-v6-c-breadcrumb__dropdown">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text"
+          class="pf-v6-c-menu-toggle pf-m-text pf-m-small pf-m-plain"
           type="button"
           aria-expanded="false"
           aria-label="Menu toggle"

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

@@ -2022,7 +2022,36 @@ A favorite button should use a plain button with the star icon. Applying `.pf-m-
   aria-label="not starred"
 >
   <span class="pf-v6-c-button__icon">
-    <i class="fas fa-star" aria-hidden="true"></i>
+    <span class="pf-v6-c-button__icon-favorite">
+      <svg
+        class="pf-v6-svg"
+        viewBox="0 0 576 512"
+        fill="currentColor"
+        aria-hidden="true"
+        role="img"
+        width="1em"
+        height="1em"
+      >
+        <path
+          d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
+        />
+      </svg>
+    </span>
+    <span class="pf-v6-c-button__icon-favorited">
+      <svg
+        class="pf-v6-svg"
+        viewBox="0 0 576 512"
+        fill="currentColor"
+        aria-hidden="true"
+        role="img"
+        width="1em"
+        height="1em"
+      >
+        <path
+          d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
+        />
+      </svg>
+    </span>
   </span>
 </button>
 <button
@@ -2031,7 +2060,117 @@ A favorite button should use a plain button with the star icon. Applying `.pf-m-
   aria-label="starred"
 >
   <span class="pf-v6-c-button__icon">
-    <i class="fas fa-star" aria-hidden="true"></i>
+    <span class="pf-v6-c-button__icon-favorite">
+      <svg
+        class="pf-v6-svg"
+        viewBox="0 0 576 512"
+        fill="currentColor"
+        aria-hidden="true"
+        role="img"
+        width="1em"
+        height="1em"
+      >
+        <path
+          d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"
+        />
+      </svg>
+    </span>
+    <span class="pf-v6-c-button__icon-favorited">
+      <svg
+        class="pf-v6-svg"
+        viewBox="0 0 576 512"
+        fill="currentColor"
+        aria-hidden="true"
+        role="img"
+        width="1em"
+        height="1em"
+      >
+        <path
+          d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"
+        />
+      </svg>
+    </span>
+  </span>
+</button>
+
+```
+
+### Settings
+
+```html
+<button
+  class="pf-v6-c-button pf-m-settings pf-m-plain"
+  type="button"
+  aria-label="Settings"
+>
+  <span class="pf-v6-c-button__icon">
+    <i class="fas fa-cog" aria-hidden="true"></i>
+  </span>
+</button>
+
+```
+
+### Hamburger
+
+```html
+<button
+  class="pf-v6-c-button pf-m-hamburger pf-m-plain"
+  type="button"
+  aria-expanded="false"
+  aria-label="Hamburger"
+>
+  <span class="pf-v6-c-button__icon">
+    <svg
+      viewBox="0 0 10 10"
+      class="pf-v6-c-button--hamburger-icon pf-v6-svg"
+      width="1em"
+      height="1em"
+    >
+      <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
+      <path class="pf-v6-c-button--hamburger-icon--middle" d="M1,5 L9,5" />
+      <path class="pf-v6-c-button--hamburger-icon--arrow" d="M1,5 L1,5 L1,5" />
+      <path class="pf-v6-c-button--hamburger-icon--bottom" d="M9,9 L1,9" />
+    </svg>
+  </span>
+</button>
+<button
+  class="pf-v6-c-button pf-m-expand pf-m-hamburger pf-m-plain"
+  type="button"
+  aria-expanded="false"
+  aria-label="Hamburger"
+>
+  <span class="pf-v6-c-button__icon">
+    <svg
+      viewBox="0 0 10 10"
+      class="pf-v6-c-button--hamburger-icon pf-v6-svg"
+      width="1em"
+      height="1em"
+    >
+      <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
+      <path class="pf-v6-c-button--hamburger-icon--middle" d="M1,5 L9,5" />
+      <path class="pf-v6-c-button--hamburger-icon--arrow" d="M1,5 L1,5 L1,5" />
+      <path class="pf-v6-c-button--hamburger-icon--bottom" d="M9,9 L1,9" />
+    </svg>
+  </span>
+</button>
+<button
+  class="pf-v6-c-button pf-m-collapse pf-m-hamburger pf-m-expanded pf-m-plain"
+  type="button"
+  aria-expanded="true"
+  aria-label="Hamburger"
+>
+  <span class="pf-v6-c-button__icon">
+    <svg
+      viewBox="0 0 10 10"
+      class="pf-v6-c-button--hamburger-icon pf-v6-svg"
+      width="1em"
+      height="1em"
+    >
+      <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
+      <path class="pf-v6-c-button--hamburger-icon--middle" d="M1,5 L9,5" />
+      <path class="pf-v6-c-button--hamburger-icon--arrow" d="M1,5 L1,5 L1,5" />
+      <path class="pf-v6-c-button--hamburger-icon--bottom" d="M9,9 L1,9" />
+    </svg>
   </span>
 </button>
 
@@ -2068,7 +2207,7 @@ Semantic buttons and links are important for usability as well as accessibility.
 | `.pf-v6-c-button` | `<button>, <span>` |  Initiates a button. Always use it with a modifier class. **Required** |
 | `.pf-v6-c-button__icon` | `<span>` | Initiates a button icon. |
 | `.pf-v6-c-button__progress` | `<span>` | Initiates a button progress container. |
-| `.pf-v6-c-button__count` | `<span>` | Initiates a button count container. **Note:** Count should only be used on link buttons.|
+| `.pf-v6-c-button__count` | `<span>` | Initiates a button count container. **Note:** Count should only be used on link buttons. |
 | `.pf-m-primary` | `.pf-v6-c-button` | Modifies for primary styles. |
 | `.pf-m-secondary` | `.pf-v6-c-button` | Modifies for secondary styles. |
 | `.pf-m-tertiary` | `.pf-v6-c-button` | Modifies for tertiary styles. |
@@ -2091,5 +2230,9 @@ Semantic buttons and links are important for usability as well as accessibility.
 | `.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.  |
+| `.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. |
+| `.pf-m-settings` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to be a settings button. |
+| `.pf-m-hamburger` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to be a hamburger button. |
+| `.pf-m-expand` | `.pf-v6-c-button.pf-m-hamburger` | Modifies a hamburger button to indicate that it will expand a menu. |
+| `.pf-m-collapse` | `.pf-v6-c-button.pf-m-hamburger` | Modifies a hamburger button to indicate that it will collapse a menu. |

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

@@ -101,7 +101,7 @@ cssPrefix: pf-v6-c-card
         class="pf-v6-c-menu-toggle pf-m-plain"
         type="button"
         aria-expanded="false"
-        aria-label="Menu toggle"
+        aria-label="Card menu toggle"
         id="card-action-example-1-menu-toggle-kebab"
       >
         <span class="pf-v6-c-menu-toggle__icon">
@@ -142,7 +142,7 @@ cssPrefix: pf-v6-c-card
         class="pf-v6-c-menu-toggle pf-m-plain"
         type="button"
         aria-expanded="false"
-        aria-label="Menu toggle"
+        aria-label="Card menu toggle"
         id="card-action-example-2-menu-toggle-kebab"
       >
         <span class="pf-v6-c-menu-toggle__icon">
@@ -185,7 +185,7 @@ cssPrefix: pf-v6-c-card
         class="pf-v6-c-menu-toggle pf-m-plain"
         type="button"
         aria-expanded="false"
-        aria-label="Menu toggle"
+        aria-label="Card menu toggle"
         id="card-action-example-3-menu-toggle-kebab"
       >
         <span class="pf-v6-c-menu-toggle__icon">
@@ -1434,7 +1434,7 @@ cssPrefix: pf-v6-c-card
         class="pf-v6-c-menu-toggle pf-m-plain"
         type="button"
         aria-expanded="false"
-        aria-label="Menu toggle"
+        aria-label="Card menu toggle"
         id="card-expandable-example-menu-toggle-kebab"
       >
         <span class="pf-v6-c-menu-toggle__icon">
@@ -1497,7 +1497,7 @@ cssPrefix: pf-v6-c-card
         class="pf-v6-c-menu-toggle pf-m-plain"
         type="button"
         aria-expanded="false"
-        aria-label="Menu toggle"
+        aria-label="Card menu toggle"
         id="card-expandable-image-example-menu-toggle-kebab"
       >
         <span class="pf-v6-c-menu-toggle__icon">
@@ -1545,7 +1545,7 @@ cssPrefix: pf-v6-c-card
         class="pf-v6-c-menu-toggle pf-m-plain"
         type="button"
         aria-expanded="false"
-        aria-label="Menu toggle"
+        aria-label="Card menu toggle"
         id="card-expanded-example-menu-toggle-kebab"
       >
         <span class="pf-v6-c-menu-toggle__icon">
@@ -1588,7 +1588,7 @@ cssPrefix: pf-v6-c-card
         class="pf-v6-c-menu-toggle pf-m-plain"
         type="button"
         aria-expanded="false"
-        aria-label="Menu toggle"
+        aria-label="Card menu toggle"
         id="card-full-height-example-menu-toggle-kebab"
       >
         <span class="pf-v6-c-menu-toggle__icon">
@@ -1631,7 +1631,7 @@ cssPrefix: pf-v6-c-card
         class="pf-v6-c-menu-toggle pf-m-plain"
         type="button"
         aria-expanded="false"
-        aria-label="Menu toggle"
+        aria-label="Card menu toggle"
         id="card-toggle-on-right-example-menu-toggle-kebab"
       >
         <span class="pf-v6-c-menu-toggle__icon">

package/docs/components/CodeBlock/examples/CodeBlock.md

@@ -83,7 +83,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
 kind: HelmChartRepository
 metadata:
 name: azure-sample-repo<div
-  class="pf-v6-c-expandable-section"
+  class="pf-v6-c-expandable-section pf-m-detached"
 ><div
   class="pf-v6-c-expandable-section__content"
   hidden
@@ -95,7 +95,7 @@ name: azure-sample-repo<div
 </div>
 </code>
 </pre>
-    <div class="pf-v6-c-expandable-section">
+    <div class="pf-v6-c-expandable-section pf-m-detached">
       <div class="pf-v6-c-expandable-section__toggle">
         <button
           class="pf-v6-c-button pf-m-link"
@@ -153,7 +153,7 @@ name: azure-sample-repo<div
 kind: HelmChartRepository
 metadata:
 name: azure-sample-repo<div
-  class="pf-v6-c-expandable-section pf-m-expanded"
+  class="pf-v6-c-expandable-section pf-m-expanded pf-m-detached"
 ><div
   class="pf-v6-c-expandable-section__content"
   id="code-block-expandable-expanded-content"
@@ -164,12 +164,12 @@ name: azure-sample-repo<div
 </div>
 </code>
 </pre>
-    <div class="pf-v6-c-expandable-section pf-m-expanded">
+    <div class="pf-v6-c-expandable-section pf-m-expanded pf-m-detached">
       <div class="pf-v6-c-expandable-section__toggle">
         <button
           class="pf-v6-c-button pf-m-link"
           type="button"
-          aria-expanded="true"
+          aria-expanded
           aria-controls="code-block-expandable-expanded-content"
         >
           <span class="pf-v6-c-button__icon pf-m-start">

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

@@ -165,7 +165,7 @@ When a list item includes more than one block of content, it can be difficult fo
           class="pf-v6-c-menu-toggle pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-checkboxes-actions-addl-cells-item-1-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -212,7 +212,7 @@ When a list item includes more than one block of content, it can be difficult fo
           class="pf-v6-c-menu-toggle pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-checkboxes-actions-addl-cells-item-2-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -269,7 +269,7 @@ When a list item includes more than one block of content, it can be difficult fo
           class="pf-v6-c-menu-toggle pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-checkboxes-actions-addl-cells-item-3-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -373,7 +373,7 @@ When a list item includes more than one block of content, it can be difficult fo
           class="pf-v6-c-menu-toggle pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-expandable-item-1-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -434,7 +434,7 @@ When a list item includes more than one block of content, it can be difficult fo
           class="pf-v6-c-menu-toggle pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-expandable-item-2-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -499,7 +499,7 @@ When a list item includes more than one block of content, it can be difficult fo
           class="pf-v6-c-menu-toggle pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-expandable-item-3-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -573,10 +573,10 @@ When a list item includes more than one block of content, it can be difficult fo
       </div>
       <div class="pf-v6-c-data-list__item-action">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
+          class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-expandable-compact-item-1-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -637,10 +637,10 @@ When a list item includes more than one block of content, it can be difficult fo
       </div>
       <div class="pf-v6-c-data-list__item-action">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
+          class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-expandable-compact-item-2-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -702,10 +702,10 @@ When a list item includes more than one block of content, it can be difficult fo
       </div>
       <div class="pf-v6-c-data-list__item-action">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
+          class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-expandable-compact-item-3-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -782,7 +782,7 @@ When a list item includes more than one block of content, it can be difficult fo
           class="pf-v6-c-menu-toggle pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-expandable-nested-item-1-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -978,7 +978,7 @@ When a list item includes more than one block of content, it can be difficult fo
           class="pf-v6-c-menu-toggle pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-expandable-nested-item-2-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -1043,7 +1043,7 @@ When a list item includes more than one block of content, it can be difficult fo
           class="pf-v6-c-menu-toggle pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-expandable-nested-item-3-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -1115,10 +1115,10 @@ When a list item includes more than one block of content, it can be difficult fo
       </div>
       <div class="pf-v6-c-data-list__item-action">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
+          class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-compact-item-1-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -1160,10 +1160,10 @@ When a list item includes more than one block of content, it can be difficult fo
       </div>
       <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-lg">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
+          class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-compact-item-2-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -1215,10 +1215,10 @@ When a list item includes more than one block of content, it can be difficult fo
       </div>
       <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-xl">
         <button
-          class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
+          class="pf-v6-c-menu-toggle pf-m-small pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-compact-item-3-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -1369,7 +1369,7 @@ When a list item includes more than one block of content, it can be difficult fo
           class="pf-v6-c-menu-toggle pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-flex-modifiers-item-1-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">
@@ -1458,7 +1458,7 @@ When a list item includes more than one block of content, it can be difficult fo
           class="pf-v6-c-menu-toggle pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
+          aria-label="Data list item menu toggle"
           id="data-list-flex-modifiers-2-item-1-menu-toggle"
         >
           <span class="pf-v6-c-menu-toggle__icon">