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

package/helpers/package.json

@@ -3,6 +3,6 @@
   "main": "../dist/js/helpers/index.js",
   "module": "../dist/esm/helpers/index.js",
   "typings": "../dist/esm/helpers/index.d.ts",
-  "version": "6.0.0-alpha.74",
+  "version": "6.0.0-alpha.76",
   "private": true
 }

package/layouts/package.json

@@ -3,6 +3,6 @@
   "main": "../dist/js/layouts/index.js",
   "module": "../dist/esm/layouts/index.js",
   "typings": "../dist/esm/layouts/index.d.ts",
-  "version": "6.0.0-alpha.74",
+  "version": "6.0.0-alpha.76",
   "private": true
 }

package/next/package.json

@@ -3,6 +3,6 @@
   "main": "../dist/js/next/index.js",
   "module": "../dist/esm/next/index.js",
   "typings": "../dist/esm/next/index.d.ts",
-  "version": "6.0.0-alpha.74",
+  "version": "6.0.0-alpha.76",
   "private": true
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.75",
+  "version": "6.0.0-alpha.77",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -47,15 +47,15 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.27",
-    "@patternfly/react-styles": "^6.0.0-alpha.26",
-    "@patternfly/react-tokens": "^6.0.0-alpha.26",
+    "@patternfly/react-icons": "^6.0.0-alpha.28",
+    "@patternfly/react-styles": "^6.0.0-alpha.27",
+    "@patternfly/react-tokens": "^6.0.0-alpha.27",
     "focus-trap": "7.5.4",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.160",
+    "@patternfly/patternfly": "6.0.0-alpha.166",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"
@@ -64,5 +64,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "f24b63f9a1e7677168873e056da40677ae691a3f"
+  "gitHead": "6aa99644b0c6023e74c89dfc428522e09e0420ee"
 }

package/src/components/AboutModal/AboutModalBoxCloseButton.tsx

@@ -17,9 +17,7 @@ export const AboutModalBoxCloseButton: React.FunctionComponent<AboutModalBoxClos
   ...props
 }: AboutModalBoxCloseButtonProps) => (
   <div className={css(styles.aboutModalBoxClose)} {...props}>
-    <Button variant="plain" onClick={onClose} aria-label={ariaLabel}>
-      <TimesIcon />
-    </Button>
+    <Button variant="plain" onClick={onClose} aria-label={ariaLabel} icon={<TimesIcon />} />
   </div>
 );
 AboutModalBoxCloseButton.displayName = 'AboutModalBoxCloseButton';

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap

@@ -14,19 +14,23 @@ exports[`AboutModalBoxCloseButton Test 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__icon pf-m-start"
       >
-        <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>
 </DocumentFragment>
@@ -46,19 +50,23 @@ exports[`AboutModalBoxCloseButton Test close button aria label 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__icon pf-m-start"
       >
-        <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>
 </DocumentFragment>
@@ -78,19 +86,23 @@ exports[`AboutModalBoxCloseButton Test onclose 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__icon pf-m-start"
       >
-        <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>
 </DocumentFragment>

package/src/components/ActionList/examples/ActionListWithIcons.tsx

@@ -8,14 +8,10 @@ export const ActionListWithIcons: React.FunctionComponent = () => (
     <h4>With list icons wrapper</h4>
     <ActionList isIconList>
       <ActionListItem>
-        <Button variant="plain" id="with-icons-times-button" aria-label="times icon button">
-          <TimesIcon />
-        </Button>
+        <Button variant="plain" id="with-icons-times-button" aria-label="times icon button" icon={<TimesIcon />} />
       </ActionListItem>
       <ActionListItem>
-        <Button variant="plain" id="with-icons-check-button" aria-label="check icon button">
-          <CheckIcon />
-        </Button>
+        <Button variant="plain" id="with-icons-check-button" aria-label="check icon button" icon={<CheckIcon />} />
       </ActionListItem>
     </ActionList>
     <br />
@@ -23,26 +19,38 @@ export const ActionListWithIcons: React.FunctionComponent = () => (
     <ActionList>
       <ActionListGroup isIconGroup>
         <ActionListItem>
-          <Button variant="plain" id="with-icons-list-times-button" aria-label="times icon button">
-            <TimesIcon />
-          </Button>
+          <Button
+            variant="plain"
+            id="with-icons-list-times-button"
+            aria-label="times icon button"
+            icon={<TimesIcon />}
+          />
         </ActionListItem>
         <ActionListItem>
-          <Button variant="plain" id="with-icons-list-check-button" aria-label="check icon button">
-            <CheckIcon />
-          </Button>
+          <Button
+            variant="plain"
+            id="with-icons-list-check-button"
+            aria-label="check icon button"
+            icon={<CheckIcon />}
+          />
         </ActionListItem>
       </ActionListGroup>
       <ActionListGroup isIconGroup>
         <ActionListItem>
-          <Button variant="plain" id="with-icons-group-times-button" aria-label="times icon button">
-            <TimesIcon />
-          </Button>
+          <Button
+            variant="plain"
+            id="with-icons-group-times-button"
+            aria-label="times icon button"
+            icon={<TimesIcon />}
+          />
         </ActionListItem>
         <ActionListItem>
-          <Button variant="plain" id="with-icons-group-check-button" aria-label="check icon button">
-            <CheckIcon />
-          </Button>
+          <Button
+            variant="plain"
+            id="with-icons-group-check-button"
+            aria-label="check icon button"
+            icon={<CheckIcon />}
+          />
         </ActionListItem>
       </ActionListGroup>
     </ActionList>

package/src/components/Alert/AlertActionCloseButton.tsx

@@ -32,10 +32,9 @@ export const AlertActionCloseButton: React.FunctionComponent<AlertActionCloseBut
         onClick={onClose}
         aria-label={ariaLabel === '' ? `Close ${variantLabel || alertVariantLabel} alert: ${title}` : ariaLabel}
         className={className}
+        icon={<TimesIcon />}
         {...props}
-      >
-        <TimesIcon />
-      </Button>
+      />
     )}
   </AlertContext.Consumer>
 );

package/src/components/Alert/AlertToggleExpandButton.tsx

@@ -31,11 +31,12 @@ export const AlertToggleExpandButton: React.FunctionComponent<AlertToggleExpandB
       aria-expanded={isExpanded}
       aria-label={ariaLabel === '' ? `Toggle ${variantLabel || alertVariantLabel} alert: ${title}` : ariaLabel}
       {...props}
-    >
-      <span className={css(styles.alertToggleIcon)}>
-        <AngleRightIcon aria-hidden="true" />
-      </span>
-    </Button>
+      icon={
+        <span className={css(styles.alertToggleIcon)}>
+          <AngleRightIcon aria-hidden="true" />
+        </span>
+      }
+    />
   );
 };
 AlertToggleExpandButton.displayName = 'AlertToggleExpandButton';

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap

@@ -11,19 +11,23 @@ exports[`AlertActionCloseButton should match snapshot 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__icon pf-m-start"
     >
-      <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>
 </DocumentFragment>
 `;

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap

@@ -10,7 +10,11 @@ exports[`AlertActionLink should match snapshot (auto-generated) 1`] = `
     data-ouia-safe="true"
     type="button"
   >
-    string
+    <span
+      class="pf-v6-c-button__text"
+    >
+      string
+    </span>
   </button>
 </DocumentFragment>
 `;

package/src/components/Alert/__tests__/__snapshots__/AlertActionCloseButton.test.tsx.snap

@@ -4,21 +4,7 @@ exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <button
     aria-label="Close variantLabel alert: title"
-  >
-    <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>
-  </button>
+  />
   <p>
     variant: plain
   </p>
@@ -35,6 +21,20 @@ exports[`Matches the snapshot 1`] = `
   </p>
   <div
     data-testid="icon"
-  />
+  >
+    <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>
+  </div>
 </DocumentFragment>
 `;

package/src/components/Alert/__tests__/__snapshots__/AlertToggleExpandButton.test.tsx.snap

@@ -5,13 +5,7 @@ exports[`Matches snapshot 1`] = `
   <button
     aria-expanded="false"
     aria-label="Toggle variantLabel alert: title"
-  >
-    <span
-      class="pf-v6-c-alert__toggle-icon"
-    >
-      Icon mock
-    </span>
-  </button>
+  />
   <p>
     variant: plain
   </p>
@@ -28,6 +22,12 @@ exports[`Matches snapshot 1`] = `
   </p>
   <div
     data-testid="icon"
-  />
+  >
+    <span
+      class="pf-v6-c-alert__toggle-icon"
+    >
+      Icon mock
+    </span>
+  </div>
 </DocumentFragment>
 `;

package/src/components/Button/Button.tsx

@@ -198,12 +198,11 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
           />
         </span>
       )}
-      {variant === ButtonVariant.plain && children === null && icon ? icon : null}
-      {variant !== ButtonVariant.plain && icon && (iconPosition === 'start' || iconPosition === 'left') && (
+      {icon && (iconPosition === 'start' || iconPosition === 'left') && (
         <span className={css(styles.buttonIcon, styles.modifiers.start)}>{icon}</span>
       )}
-      {children}
-      {variant !== ButtonVariant.plain && icon && (iconPosition === 'end' || iconPosition === 'right') && (
+      {children && <span className={css('pf-v6-c-button__text')}>{children}</span>}
+      {icon && (iconPosition === 'end' || iconPosition === 'right') && (
         <span className={css(styles.buttonIcon, styles.modifiers.end)}>{icon}</span>
       )}
       {countOptions && (

package/src/components/Button/__tests__/Button.test.tsx

@@ -35,7 +35,7 @@ test('Renders with class pf-v6-c-button by default', () => {
 
 test('Renders with class pf-m-primary by default', () => {
   render(<Button>Button</Button>);
-  expect(screen.getByText('Button')).toHaveClass('pf-m-primary');
+  expect(screen.getByText('Button').parentElement).toHaveClass('pf-m-primary');
 });
 
 test('Renders with custom class', () => {
@@ -76,7 +76,7 @@ test('Renders with class pf-m-disabled when isDisabled = true and component is n
       Disabled Anchor Button
     </Button>
   );
-  expect(screen.getByText('Disabled Anchor Button')).toHaveClass('pf-m-disabled');
+  expect(screen.getByText('Disabled Anchor Button').parentElement).toHaveClass('pf-m-disabled');
 });
 
 test('Renders with class pf-m-aria-disabled when isAriaDisabled = true', () => {
@@ -206,14 +206,14 @@ test('Renders custom icon with class pf-m-in-progress when isLoading = true and
   );
 
   expect(screen.getByText('ICON')).toBeVisible();
-  expect(screen.getByText('ICON').parentElement).toHaveClass('pf-m-in-progress');
+  expect(screen.getByText('ICON').parentElement?.parentElement).toHaveClass('pf-m-in-progress');
 });
 
 test('Renders as custom component when component is passed', () => {
   const component = 'a';
   render(<Button component={component}>anchor button</Button>);
 
-  expect(screen.getByText('anchor button').tagName).toBe('A');
+  expect(screen.getByText('anchor button').parentElement?.tagName).toBe('A');
 });
 
 test('aria-disabled is set to true and tabIndex to -1 if component is not a button and is disabled', () => {
@@ -222,7 +222,7 @@ test('aria-disabled is set to true and tabIndex to -1 if component is not a butt
       Disabled Anchor Button
     </Button>
   );
-  const anchor = screen.getByText('Disabled Anchor Button');
+  const anchor = screen.getByText('Disabled Anchor Button').parentElement;
   expect(anchor).toHaveAttribute('tabindex', '-1');
   expect(anchor).toHaveAttribute('aria-disabled', 'true');
 });

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

@@ -11,7 +11,11 @@ exports[`Renders basic button 1`] = `
     data-ouia-safe="true"
     type="button"
   >
-    Basic Button
+    <span
+      class="pf-v6-c-button__text"
+    >
+      Basic Button
+    </span>
   </button>
 </DocumentFragment>
 `;

package/src/components/Button/examples/ButtonDisabled.tsx

@@ -35,18 +35,14 @@ export const ButtonDisabled: React.FunctionComponent = () => (
       <Button variant="link" isDanger isDisabled>
         Danger link
       </Button>
-      <Button isDisabled variant="plain" aria-label="Action">
-        <TimesIcon />
-      </Button>
+      <Button isDisabled variant="plain" aria-label="Action" icon={<TimesIcon />} />
     </Flex>
     <br />
     <Flex columnGap={{ default: 'columnGapSm' }}>
       <Button isDisabled variant="control">
         Control
       </Button>
-      <Button isDisabled variant="control" aria-label="Copy">
-        <CopyIcon />
-      </Button>
+      <Button isDisabled variant="control" aria-label="Copy" icon={<CopyIcon />} />
     </Flex>
   </>
 );

package/src/components/Button/examples/ButtonPlainHasNoPadding.tsx

@@ -5,9 +5,7 @@ import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-
 export const ButtonPlainHasNoPadding: React.FunctionComponent = () => (
   <p>
     This is an example of a button
-    <Button variant="plain" hasNoPadding aria-label="More info">
-      <QuestionCircleIcon />
-    </Button>
+    <Button variant="plain" hasNoPadding aria-label="More info" icon={<QuestionCircleIcon />} />
     which is placed inline with text
   </p>
 );

package/src/components/Button/examples/ButtonVariations.tsx

@@ -42,16 +42,12 @@ export const ButtonVariations: React.FunctionComponent = () => (
       <Button variant="link" isDanger>
         Danger link
       </Button>
-      <Button variant="plain" aria-label="Action">
-        <TimesIcon />
-      </Button>
+      <Button variant="plain" aria-label="Action" icon={<TimesIcon />} />
     </Flex>
     <br />
     <Flex columnGap={{ default: 'columnGapSm' }}>
       <Button variant="control">Control</Button>
-      <Button variant="control" aria-label="Copy">
-        <CopyIcon />
-      </Button>
+      <Button variant="control" aria-label="Copy" icon={<CopyIcon />} />
     </Flex>
     <br />
     <Flex columnGap={{ default: 'columnGapSm' }}>

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -292,9 +292,8 @@ export const CalendarMonth = ({
             variant="plain"
             aria-label={prevMonthAriaLabel}
             onClick={(ev: React.MouseEvent) => onMonthClick(ev, prevMonth)}
-          >
-            <AngleLeftIcon aria-hidden={true} />
-          </Button>
+            icon={<AngleLeftIcon aria-hidden={true} />}
+          />
         </div>
         <InputGroup>
           <InputGroupItem isFill>
@@ -359,9 +358,8 @@ export const CalendarMonth = ({
             variant="plain"
             aria-label={nextMonthAriaLabel}
             onClick={(ev: React.MouseEvent) => onMonthClick(ev, nextMonth)}
-          >
-            <AngleRightIcon aria-hidden={true} />
-          </Button>
+            icon={<AngleRightIcon aria-hidden={true} />}
+          />
         </div>
       </div>
       <table className={styles.calendarMonthCalendar} onMouseLeave={() => setHoveredDate(undefined)}>

package/src/components/Card/CardHeader.tsx

@@ -91,11 +91,12 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
               onExpand(evt, cardId);
             }}
             {...toggleButtonProps}
-          >
-            <span className={css(styles.cardHeaderToggleIcon)}>
-              <AngleRightIcon aria-hidden="true" />
-            </span>
-          </Button>
+            icon={
+              <span className={css(styles.cardHeaderToggleIcon)}>
+                <AngleRightIcon aria-hidden="true" />
+              </span>
+            }
+          />
         </div>
       );
 

package/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snap

@@ -29,21 +29,25 @@ exports[`CardHeader onExpand adds the toggle button 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-card__header-toggle-icon"
+          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"
+          <span
+            class="pf-v6-c-card__header-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>
+            <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>
         </span>
       </button>
     </div>

package/src/components/ClipboardCopy/ClipboardCopyButton.tsx

@@ -83,11 +83,10 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
         className={className}
         id={id}
         aria-labelledby={`${id} ${textId}`}
+        icon={<CopyIcon />}
         {...props}
         ref={triggerRef}
-      >
-        <CopyIcon />
-      </Button>
+      />
     </Tooltip>
   );
 };