@patternfly/react-core 6.0.0-alpha.75 → 6.0.0-alpha.77

package/src/components/ClipboardCopy/ClipboardCopyToggle.tsx

@@ -31,10 +31,11 @@ export const ClipboardCopyToggle: React.FunctionComponent<ClipboardCopyTogglePro
     aria-controls={contentId}
     aria-expanded={isExpanded}
     {...props}
-  >
-    <div className={css(styles.clipboardCopyToggleIcon)}>
-      <AngleRightIcon aria-hidden="true" />
-    </div>
-  </Button>
+    icon={
+      <div className={css(styles.clipboardCopyToggleIcon)}>
+        <AngleRightIcon aria-hidden="true" />
+      </div>
+    }
+  />
 );
 ClipboardCopyToggle.displayName = 'ClipboardCopyToggle';

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyButton.test.tsx.snap

@@ -38,19 +38,23 @@ exports[`Matches snapshot 1`] = `
       id="button-id"
       type="button"
     >
-      <svg
-        aria-hidden="true"
-        class="pf-v6-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 448 512"
-        width="1em"
+      <span
+        class="pf-v6-c-button__icon pf-m-start"
       >
-        <path
-          d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          class="pf-v6-svg"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          viewBox="0 0 448 512"
+          width="1em"
+        >
+          <path
+            d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"
+          />
+        </svg>
+      </span>
     </button>
   </div>
 </DocumentFragment>

package/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap

@@ -14,23 +14,27 @@ exports[`Matches snapshot 1`] = `
     id="main-id"
     type="button"
   >
-    <div
-      class="pf-v6-c-clipboard-copy__toggle-icon"
+    <span
+      class="pf-v6-c-button__icon pf-m-start"
     >
-      <svg
-        aria-hidden="true"
-        class="pf-v6-svg"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        viewBox="0 0 256 512"
-        width="1em"
+      <div
+        class="pf-v6-c-clipboard-copy__toggle-icon"
       >
-        <path
-          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-        />
-      </svg>
-    </div>
+        <svg
+          aria-hidden="true"
+          class="pf-v6-svg"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          viewBox="0 0 256 512"
+          width="1em"
+        >
+          <path
+            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+          />
+        </svg>
+      </div>
+    </span>
   </button>
 </DocumentFragment>
 `;

package/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx

@@ -9,9 +9,7 @@ export const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionCompo
     variant="inline-compact"
     additionalActions={
       <ClipboardCopyAction>
-        <Button variant="plain" aria-label="Run in web terminal">
-          <PlayIcon aria-hidden />
-        </Button>
+        <Button variant="plain" aria-label="Run in web terminal" icon={<PlayIcon aria-hidden />} />
       </ClipboardCopyAction>
     }
   >

package/src/components/CodeBlock/examples/CodeBlockBasic.tsx

@@ -39,9 +39,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
         </ClipboardCopyButton>
       </CodeBlockAction>
       <CodeBlockAction>
-        <Button variant="plain" aria-label="Play icon">
-          <PlayIcon />
-        </Button>
+        <Button variant="plain" aria-label="Play icon" icon={<PlayIcon />} />
       </CodeBlockAction>
     </React.Fragment>
   );

package/src/components/CodeBlock/examples/CodeBlockExpandable.tsx

@@ -60,9 +60,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
         </ClipboardCopyButton>
       </CodeBlockAction>
       <CodeBlockAction>
-        <Button variant="plain" aria-label="Play icon">
-          <PlayIcon />
-        </Button>
+        <Button variant="plain" aria-label="Play icon" icon={<PlayIcon />} />
       </CodeBlockAction>
     </React.Fragment>
   );

package/src/components/DataList/DataListToggle.tsx

@@ -43,11 +43,12 @@ export const DataListToggle: React.FunctionComponent<DataListToggleProps> = ({
         aria-labelledby={ariaLabel !== 'Details' ? null : `${rowid} ${id}`}
         aria-expanded={isExpanded}
         {...buttonProps}
-      >
-        <div className={css(styles.dataListToggleIcon)}>
-          <AngleRightIcon />
-        </div>
-      </Button>
+        icon={
+          <div className={css(styles.dataListToggleIcon)}>
+            <AngleRightIcon />
+          </div>
+        }
+      />
     </div>
   </div>
 );

package/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap

@@ -21,23 +21,27 @@ exports[`DataListToggle should match snapshot (auto-generated) 1`] = `
         id="string"
         type="button"
       >
-        <div
-          class="pf-v6-c-data-list__toggle-icon"
+        <span
+          class="pf-v6-c-button__icon pf-m-start"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 256 512"
-            width="1em"
+          <div
+            class="pf-v6-c-data-list__toggle-icon"
           >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </div>
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 256 512"
+              width="1em"
+            >
+              <path
+                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+              />
+            </svg>
+          </div>
+        </span>
       </button>
     </div>
   </div>

package/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snap

@@ -21,23 +21,27 @@ exports[`Renders to match snapshot 1`] = `
         id="ex-toggle2"
         type="button"
       >
-        <div
-          class="pf-v6-c-data-list__toggle-icon"
+        <span
+          class="pf-v6-c-button__icon pf-m-start"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v6-svg"
-            fill="currentColor"
-            height="1em"
-            role="img"
-            viewBox="0 0 256 512"
-            width="1em"
+          <div
+            class="pf-v6-c-data-list__toggle-icon"
           >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
-          </svg>
-        </div>
+            <svg
+              aria-hidden="true"
+              class="pf-v6-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 256 512"
+              width="1em"
+            >
+              <path
+                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+              />
+            </svg>
+          </div>
+        </span>
       </button>
     </div>
   </div>

package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap

@@ -94,19 +94,23 @@ exports[`With popover opened 1`] = `
                   data-ouia-safe="true"
                   type="button"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-                    />
-                  </svg>
+                  <span
+                    class="pf-v6-c-button__icon pf-m-start"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="pf-v6-svg"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      viewBox="0 0 256 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                      />
+                    </svg>
+                  </span>
                 </button>
               </div>
               <div
@@ -196,19 +200,23 @@ exports[`With popover opened 1`] = `
                   data-ouia-safe="true"
                   type="button"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 256 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    />
-                  </svg>
+                  <span
+                    class="pf-v6-c-button__icon pf-m-start"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="pf-v6-svg"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      viewBox="0 0 256 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                      />
+                    </svg>
+                  </span>
                 </button>
               </div>
             </div>

package/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap

@@ -42,19 +42,23 @@ exports[`Drawer expands from bottom 1`] = `
                 data-ouia-safe="true"
                 type="button"
               >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v6-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 352 512"
-                  width="1em"
+                <span
+                  class="pf-v6-c-button__text"
                 >
-                  <path
-                    d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 352 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                    />
+                  </svg>
+                </span>
               </button>
             </div>
           </div>
@@ -131,19 +135,23 @@ exports[`Drawer has resizable callback and id 1`] = `
                   data-ouia-safe="true"
                   type="button"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 352 512"
-                    width="1em"
+                  <span
+                    class="pf-v6-c-button__text"
                   >
-                    <path
-                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                    />
-                  </svg>
+                    <svg
+                      aria-hidden="true"
+                      class="pf-v6-svg"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      viewBox="0 0 352 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                      />
+                    </svg>
+                  </span>
                 </button>
               </div>
             </div>
@@ -222,19 +230,23 @@ exports[`Drawer has resizable css and color variants 1`] = `
                   data-ouia-safe="true"
                   type="button"
                 >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v6-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 352 512"
-                    width="1em"
+                  <span
+                    class="pf-v6-c-button__text"
                   >
-                    <path
-                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                    />
-                  </svg>
+                    <svg
+                      aria-hidden="true"
+                      class="pf-v6-svg"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      viewBox="0 0 352 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                      />
+                    </svg>
+                  </span>
                 </button>
               </div>
             </div>
@@ -347,19 +359,23 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`]
                 data-ouia-safe="true"
                 type="button"
               >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v6-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 352 512"
-                  width="1em"
+                <span
+                  class="pf-v6-c-button__text"
                 >
-                  <path
-                    d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 352 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                    />
+                  </svg>
+                </span>
               </button>
             </div>
           </div>
@@ -417,19 +433,23 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] =
                 data-ouia-safe="true"
                 type="button"
               >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v6-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 352 512"
-                  width="1em"
+                <span
+                  class="pf-v6-c-button__text"
                 >
-                  <path
-                    d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 352 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                    />
+                  </svg>
+                </span>
               </button>
             </div>
           </div>
@@ -487,19 +507,23 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] =
                 data-ouia-safe="true"
                 type="button"
               >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v6-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 352 512"
-                  width="1em"
+                <span
+                  class="pf-v6-c-button__text"
                 >
-                  <path
-                    d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 352 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                    />
+                  </svg>
+                </span>
               </button>
             </div>
           </div>

package/src/components/DualListSelector/DualListSelectorControl.tsx

@@ -11,6 +11,8 @@ import styles from '@patternfly/react-styles/css/components/DualListSelector/dua
 export interface DualListSelectorControlProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'> {
   /** Content to be rendered in the dual list selector control. */
   children?: React.ReactNode;
+  /** Icon to be rendered in the dual list selector control. */
+  icon?: React.ReactNode;
   /** @hide forwarded ref */
   innerRef?: React.Ref<any>;
   /** Flag indicating the control is disabled. */
@@ -30,6 +32,7 @@ export interface DualListSelectorControlProps extends Omit<React.HTMLProps<HTMLD
 export const DualListSelectorControlBase: React.FunctionComponent<DualListSelectorControlProps> = ({
   innerRef,
   children,
+  icon,
   className,
   'aria-label': ariaLabel,
   isDisabled = true,
@@ -50,6 +53,7 @@ export const DualListSelectorControlBase: React.FunctionComponent<DualListSelect
         aria-label={ariaLabel}
         tabIndex={-1}
         ref={ref}
+        icon={icon}
       >
         {children}
       </Button>

package/src/components/DualListSelector/DualListSelectorListItem.tsx

@@ -81,9 +81,11 @@ export const DualListSelectorListItemBase: React.FunctionComponent<DualListSelec
           <div className={css(styles.dualListSelectorDraggable)}>
             {/** TODO once keyboard accessibility is enabled, remove `component=span`
              and add `aria-label={draggableButtonAriaLabel}` */}
-            <Button variant={ButtonVariant.plain} component="span">
-              <GripVerticalIcon style={{ verticalAlign: '-0.3em' }} />
-            </Button>
+            <Button
+              variant={ButtonVariant.plain}
+              component="span"
+              icon={<GripVerticalIcon style={{ verticalAlign: '-0.3em' }} />}
+            />
           </div>
         )}
         <span className={css(styles.dualListSelectorItem)}>

package/src/components/DualListSelector/examples/DualListSelectorBasic.tsx

@@ -105,30 +105,26 @@ export const DualListSelectorBasic: React.FunctionComponent = () => {
           isDisabled={!availableOptions.some((option) => option.selected)}
           onClick={() => moveSelected(true)}
           aria-label="Add selected"
-        >
-          <AngleRightIcon />
-        </DualListSelectorControl>
+          icon={<AngleRightIcon />}
+        />
         <DualListSelectorControl
           isDisabled={availableOptions.length === 0}
           onClick={() => moveAll(true)}
           aria-label="Add all"
-        >
-          <AngleDoubleRightIcon />
-        </DualListSelectorControl>
+          icon={<AngleDoubleRightIcon />}
+        />
         <DualListSelectorControl
           isDisabled={chosenOptions.length === 0}
           onClick={() => moveAll(false)}
           aria-label="Remove all"
-        >
-          <AngleDoubleLeftIcon />
-        </DualListSelectorControl>
+          icon={<AngleDoubleLeftIcon />}
+        />
         <DualListSelectorControl
           onClick={() => moveSelected(false)}
           isDisabled={!chosenOptions.some((option) => option.selected)}
           aria-label="Remove selected"
-        >
-          <AngleLeftIcon />
-        </DualListSelectorControl>
+          icon={<AngleLeftIcon />}
+        />
       </DualListSelectorControlsWrapper>
       <DualListSelectorPane
         title="Chosen options"