@patternfly/react-core 6.0.0-alpha.99 → 6.0.0-prerelease.1

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

@@ -1,6 +1,8 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { CardHeader } from '../CardHeader';
+import { CardContext } from '../Card';
 
 describe('CardHeader', () => {
   test('onExpand adds the toggle button', () => {
@@ -13,3 +15,330 @@ describe('CardHeader', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 });
+
+// TODO: check if hasNoOffset for actions/selectableActions and className for selectableActions render
+describe('Card with actions and selectableActions', () => {
+  test('Does not render selectable or clickable actions by default', () => {
+    render(<CardHeader>Test</CardHeader>);
+
+    expect(screen.queryByRole('checkbox')).not.toBeInTheDocument();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+  });
+
+  test('Renders checkbox input when Card has isSelectable and selectableActions.variant = "multiple"', () => {
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ variant: 'multiple' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+  });
+  test('Renders checkbox input by default when Card has isSelectable and selectableActions is passed with any props', () => {
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ className: 'test' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+  });
+  test('Renders radio input when Card has isSelectable and selectableActions.variant = "single"', () => {
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ variant: 'single' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('radio')).toBeInTheDocument();
+  });
+  test('Renders default ID for selectable card input when selectableActions.selectableActionId is not passed', () => {
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ variant: 'multiple' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('checkbox').getAttribute('id')).toMatch(/^card-selectable/);
+  });
+  test('Renders custom ID for selectable card input when selectableActions.selectableActionId is passed', () => {
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ variant: 'multiple', selectableActionId: 'custom-id' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('checkbox')).toHaveAttribute('id', 'custom-id');
+  });
+  test('Renders name on a selectable card input', () => {
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ variant: 'single', name: 'test' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('radio')).toHaveAttribute('name', 'test');
+  });
+  test('Renders a selectable card input as not checked by default', () => {
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ variant: 'multiple' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('checkbox')).not.toBeChecked();
+  });
+  test('Renders a selectable card input as checked when Card has isSelected = true', () => {
+    render(
+      <CardContext.Provider value={{ isSelectable: true, isSelected: true }}>
+        <CardHeader selectableActions={{ variant: 'multiple' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('checkbox')).toBeChecked();
+  });
+  test('Renders a selectable card input as checked when deprecated selectableActions.isChecked is true', () => {
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ variant: 'multiple', isChecked: true }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('checkbox')).toBeChecked();
+  });
+  test('Renders additional props on selectable card input when selectableActions.selectableActionProps is passed', () => {
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ variant: 'multiple', selectableActionProps: { style: { color: 'red' } } }}>
+          Test
+        </CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('checkbox')).toHaveAttribute('style');
+  });
+
+  test('Does not call onChange for selectable card when card is not clicked', async () => {
+    const user = userEvent.setup();
+    const onChangeMock = jest.fn();
+
+    render(
+      <>
+        <button>Test click</button>
+        <CardContext.Provider value={{ isSelectable: true }}>
+          <CardHeader selectableActions={{ variant: 'multiple', onChange: onChangeMock }}>Test</CardHeader>
+        </CardContext.Provider>
+      </>
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Test click' }));
+    expect(onChangeMock).not.toHaveBeenCalled();
+  });
+  test('Calls onChange for selectable card when card is clicked', async () => {
+    const user = userEvent.setup();
+    const onChangeMock = jest.fn();
+
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ variant: 'multiple', onChange: onChangeMock }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    const labelElement = document.querySelector('label');
+    await user.click(labelElement as HTMLElement);
+    expect(onChangeMock).toHaveBeenCalled();
+  });
+
+  test('Renders button element when Card has isClickable and selectableActions.onClickAction is passed"', () => {
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader selectableActions={{ onClickAction: () => {} }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+  test('Renders anchor element when Card has isClickable and selectableActions.to is passed"', () => {
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader selectableActions={{ to: '#' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('link')).toBeInTheDocument();
+  });
+  test('Renders href when Card has isClickable and selectableActions.to is passed"', () => {
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader selectableActions={{ to: '#some-id' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('link')).toHaveAttribute('href', '#some-id');
+  });
+  test('Does not render ID on clickable element when selectableActions.selectableActionId is not passed"', () => {
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader selectableActions={{ to: '#' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('link')).not.toHaveAttribute('id');
+  });
+  test('Renders ID on clickable element when selectableActions.selectableActionId is passed"', () => {
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader selectableActions={{ to: '#', selectableActionId: 'custom-id' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('link')).toHaveAttribute('id', 'custom-id');
+  });
+  test('Renders additional props on clickable element when selectableActions.selectableActionProps is passed', () => {
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader selectableActions={{ to: '#', selectableActionProps: { style: { color: 'red' } } }}>
+          Test
+        </CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('link')).toHaveAttribute('style');
+  });
+  test('Does not render target="_blank" on clickable card anchor element by default"', () => {
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader selectableActions={{ to: '#' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('link')).not.toHaveAttribute('target');
+  });
+  test('Renders target="_blank" on clickable card anchor element when selectableActions.isExternalLink is true"', () => {
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader selectableActions={{ to: '#', isExternalLink: true }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('link')).toHaveAttribute('target', '_blank');
+  });
+  test('Calls onClickAction for clickable card when card is clicked', async () => {
+    const user = userEvent.setup();
+    const onClickMock = jest.fn();
+
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader selectableActions={{ onClickAction: onClickMock }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    await user.click(screen.getByRole('button'));
+    expect(onClickMock).toHaveBeenCalled();
+  });
+
+  test('Throws error when Card is either clickable or selectable only and has actions prop passed"', () => {
+    const errorMock = jest.fn() as any;
+    global.console = { error: errorMock } as any;
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader
+          actions={{ actions: <button>Toggle</button> }}
+          selectableActions={{ to: '#', selectableActionAriaLabel: 'Link' }}
+        >
+          Test
+        </CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(errorMock).toHaveBeenCalled();
+  });
+  test('Does not throw error when Card is both clickable and selectable and has actions prop passed"', () => {
+    const errorMock = jest.fn() as any;
+    global.console = { error: errorMock } as any;
+    render(
+      <CardContext.Provider value={{ isClickable: true, isSelectable: true }}>
+        <CardHeader
+          actions={{ actions: <button>Toggle</button> }}
+          selectableActions={{ to: '#', selectableActionAriaLabel: 'Link' }}
+        >
+          Test
+        </CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(errorMock).not.toHaveBeenCalled();
+  });
+  test('Throws error when Card has isClickable and selectableActions.selectableActionAriaLabel or selectableActions.selectableActionAriaLabelledby is not passed"', () => {
+    const errorMock = jest.fn() as any;
+    global.console = { error: errorMock } as any;
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader selectableActions={{ to: '#' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(errorMock).toHaveBeenCalled();
+  });
+  test('Throws error when Card has isSelectable and selectableActions.selectableActionAriaLabel or selectableActions.selectableActionAriaLabelledby is not passed"', () => {
+    const errorMock = jest.fn() as any;
+    global.console = { error: errorMock } as any;
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ variant: 'multiple' }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(errorMock).toHaveBeenCalled();
+  });
+
+  test('Renders accessible name on selectable card input when selectableActions.selectableActionAriaLabel is passed', () => {
+    const accessibleName = 'Accessible name';
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ variant: 'multiple', selectableActionAriaLabel: accessibleName }}>
+          Test
+        </CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('checkbox')).toHaveAccessibleName(accessibleName);
+  });
+  test('Renders accessible name on selectable card input when selectableActions.selectableActionAriaLabelledby is passed', () => {
+    const labelingId = 'labelling-id';
+    const accessibleName = 'Accessible name';
+    render(
+      <CardContext.Provider value={{ isSelectable: true }}>
+        <CardHeader selectableActions={{ variant: 'multiple', selectableActionAriaLabelledby: labelingId }}>
+          <div id={labelingId}>{accessibleName}</div>
+        </CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('checkbox')).toHaveAccessibleName(accessibleName);
+  });
+  test('Renders accessible name on clickable card clickable element when selectableActions.selectableActionAriaLabel is passed', () => {
+    const accessibleName = 'Accessible name';
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader selectableActions={{ to: '#', selectableActionAriaLabel: accessibleName }}>Test</CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('link')).toHaveAccessibleName(accessibleName);
+  });
+  test('Renders accessible name on clickable card clickable element when selectableActions.selectableActionAriaLabelledby is passed', () => {
+    const labelingId = 'labelling-id';
+    const accessibleName = 'Accessible name';
+    render(
+      <CardContext.Provider value={{ isClickable: true }}>
+        <CardHeader selectableActions={{ to: '#', selectableActionAriaLabelledby: labelingId }}>
+          <div id={labelingId}>{accessibleName}</div>
+        </CardHeader>
+      </CardContext.Provider>
+    );
+
+    expect(screen.getByRole('link')).toHaveAccessibleName(accessibleName);
+  });
+});

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

@@ -29,7 +29,7 @@ exports[`CardHeader onExpand adds the toggle button 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <span
             class="pf-v6-c-card__header-toggle-icon"

package/src/components/Card/examples/CardClickable.tsx

@@ -4,10 +4,6 @@ import { Card, CardHeader, CardTitle, CardBody, Checkbox, Gallery } from '@patte
 export const CardClickable: React.FunctionComponent = () => {
   const [isSecondary, setIsSecondary] = React.useState<boolean>(false);
 
-  const id1 = 'clickable-card-input-1';
-  const id2 = 'clickable-card-input-2';
-  const id3 = 'clickable-card-input-3';
-
   const toggleVariant = (checked: boolean) => {
     setIsSecondary(checked);
   };
@@ -24,44 +20,38 @@ export const CardClickable: React.FunctionComponent = () => {
       />
       <div style={{ marginTop: '15px' }}>
         <Gallery hasGutter>
-          <Card id="clickable-card-example-1" isClickable variant={isSecondary ? 'secondary' : 'default'}>
+          <Card isClickable variant={isSecondary ? 'secondary' : 'default'}>
             <CardHeader
               selectableActions={{
                 // eslint-disable-next-line no-console
-                onClickAction: () => console.log(`${id1} clicked`),
-                selectableActionId: id1,
-                selectableActionAriaLabelledby: 'clickable-card-example-1',
-                name: 'clickable-card-example'
+                onClickAction: () => console.log(`First card in actionable example clicked`),
+                selectableActionAriaLabelledby: 'clickable-card-example-title-1'
               }}
             >
-              <CardTitle>First card</CardTitle>
+              <CardTitle id="clickable-card-example-title-1">First card in the actionable example</CardTitle>
             </CardHeader>
             <CardBody>This card performs an action on click.</CardBody>
           </Card>
-          <Card id="clickable-card-example-2" isClickable variant={isSecondary ? 'secondary' : 'default'}>
+          <Card isClickable variant={isSecondary ? 'secondary' : 'default'}>
             <CardHeader
               selectableActions={{
                 to: '#',
-                selectableActionId: id2,
-                selectableActionAriaLabelledby: 'clickable-card-example-2',
-                name: 'clickable-card-example'
+                selectableActionAriaLabelledby: 'clickable-card-example-title-2'
               }}
             >
-              <CardTitle>Second card</CardTitle>
+              <CardTitle id="clickable-card-example-title-2">Second card in the actionable example</CardTitle>
             </CardHeader>
             <CardBody>This card can navigate to a link on click.</CardBody>
           </Card>
-          <Card id="clickable-card-example-3" isClickable isDisabled variant={isSecondary ? 'secondary' : 'default'}>
+          <Card isClickable isDisabled variant={isSecondary ? 'secondary' : 'default'}>
             <CardHeader
               selectableActions={{
                 // eslint-disable-next-line no-console
-                onClickAction: () => console.log(`${id3} clicked`),
-                selectableActionId: id3,
-                selectableActionAriaLabelledby: 'clickable-card-example-3',
-                name: 'clickable-card-example'
+                onClickAction: () => console.log(`Third card in actionable example clicked`),
+                selectableActionAriaLabelledby: 'clickable-card-example-title-3'
               }}
             >
-              <CardTitle>Third card</CardTitle>
+              <CardTitle id="clickable-card-example-title-3">Third card in the actionable example</CardTitle>
             </CardHeader>
             <CardBody>This card is clickable but disabled.</CardBody>
           </Card>

package/src/components/Card/examples/CardClickableSelectable.tsx

@@ -61,7 +61,8 @@ export const CardClickable: React.FunctionComponent = () => {
                 selectableActionId: id1,
                 selectableActionAriaLabelledby: 'clickable-selectable-card-example-1',
                 name: id1,
-                onChange
+                onChange,
+                hasNoOffset: true
               }}
             >
               <CardTitle>
@@ -84,7 +85,8 @@ export const CardClickable: React.FunctionComponent = () => {
                 selectableActionId: id2,
                 selectableActionAriaLabelledby: 'clickable-selectable-card-example-2',
                 name: id2,
-                onChange
+                onChange,
+                hasNoOffset: true
               }}
             >
               <CardTitle>Second Card</CardTitle>
@@ -110,7 +112,8 @@ export const CardClickable: React.FunctionComponent = () => {
                 selectableActionId: id3,
                 selectableActionAriaLabelledby: 'clickable-selectable-card-example-3',
                 name: id3,
-                onChange
+                onChange,
+                hasNoOffset: true
               }}
             >
               <CardTitle>

package/src/components/Card/examples/CardSelectable.tsx

@@ -53,7 +53,8 @@ export const SelectableCard: React.FunctionComponent = () => {
                 selectableActionId: id1,
                 selectableActionAriaLabelledby: 'selectable-card-example-1',
                 name: id1,
-                onChange
+                onChange,
+                hasNoOffset: true
               }}
             >
               <CardTitle>First card</CardTitle>
@@ -71,7 +72,8 @@ export const SelectableCard: React.FunctionComponent = () => {
                 selectableActionId: id2,
                 selectableActionAriaLabelledby: 'selectable-card-example-2',
                 name: id2,
-                onChange
+                onChange,
+                hasNoOffset: true
               }}
             >
               <CardTitle>Second card</CardTitle>
@@ -90,7 +92,8 @@ export const SelectableCard: React.FunctionComponent = () => {
                 selectableActionId: id3,
                 selectableActionAriaLabelledby: 'selectable-card-example-3',
                 name: id3,
-                onChange
+                onChange,
+                hasNoOffset: true
               }}
             >
               <CardTitle>Third card</CardTitle>

package/src/components/Card/examples/CardSingleSelectable.tsx

@@ -20,7 +20,8 @@ export const SingleSelectableCard: React.FunctionComponent = () => {
             selectableActionAriaLabelledby: 'single-selectable-card-example-1',
             name: 'single-selectable-card-example',
             variant: 'single',
-            onChange
+            onChange,
+            hasNoOffset: true
           }}
         >
           <CardTitle>First card</CardTitle>
@@ -34,7 +35,8 @@ export const SingleSelectableCard: React.FunctionComponent = () => {
             selectableActionAriaLabelledby: 'single-selectable-card-example-2',
             name: 'single-selectable-card-example',
             variant: 'single',
-            onChange
+            onChange,
+            hasNoOffset: true
           }}
         >
           <CardTitle>Second card</CardTitle>
@@ -48,7 +50,8 @@ export const SingleSelectableCard: React.FunctionComponent = () => {
             selectableActionAriaLabelledby: 'single-selectable-card-example-3',
             name: 'single-selectable-card-example',
             variant: 'single',
-            onChange
+            onChange,
+            hasNoOffset: true
           }}
         >
           <CardTitle>Third card</CardTitle>

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -231,6 +231,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
                         this.setState({ copied: true });
                       }}
                       onTooltipHidden={() => this.setState({ copied: false })}
+                      hasNoPadding
                     >
                       {this.state.copied ? clickTip : hoverTip}
                     </ClipboardCopyButton>

package/src/components/ClipboardCopy/ClipboardCopyButton.tsx

@@ -43,6 +43,8 @@ export interface ClipboardCopyButtonProps
   variant?: 'control' | 'plain';
   /** Callback when tooltip's hide transition has finished executing */
   onTooltipHidden?: () => void;
+  /** Removes padding from clipboard copy button. This is used for inline-compact variant */
+  hasNoPadding?: boolean;
 }
 
 export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonProps> = ({
@@ -58,6 +60,7 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
   variant = 'control',
   onTooltipHidden = () => {},
   className,
+  hasNoPadding = false,
   ...props
 }: ClipboardCopyButtonProps) => {
   const triggerRef = React.createRef<HTMLButtonElement>();
@@ -78,6 +81,7 @@ export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonPro
       <Button
         type="button"
         variant={variant}
+        hasNoPadding={hasNoPadding}
         onClick={onClick}
         aria-label={ariaLabel}
         className={className}

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

@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { ClipboardCopyButton } from '../ClipboardCopyButton';
 import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
+import '@testing-library/jest-dom';
 
 jest.mock('../../Tooltip', () => ({
   Tooltip: ({ content, children, exitDelay, entryDelay, maxWidth, position, onTooltipHidden }) => (
@@ -89,6 +90,13 @@ test('Passes variant to Button when variant is passed', () => {
   expect(screen.getByRole('button')).toHaveClass(buttonStyles.modifiers.plain);
 });
 
+test('Removes padding when hasNoPadding prop passed', () => {
+  render(<ClipboardCopyButton variant="plain" hasNoPadding {...requiredProps} />);
+
+  expect(screen.getByRole('button')).toHaveClass(buttonStyles.modifiers.plain);
+  expect(screen.getByRole('button')).toHaveClass(buttonStyles.modifiers.noPadding);
+});
+
 test('Calls onClick when ClipboardCopyButton is clicked', async () => {
   const user = userEvent.setup();
 

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

@@ -39,7 +39,7 @@ exports[`Matches snapshot 1`] = `
       type="button"
     >
       <span
-        class="pf-v6-c-button__icon pf-m-start"
+        class="pf-v6-c-button__icon"
       >
         <svg
           aria-hidden="true"

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

@@ -15,7 +15,7 @@ exports[`Matches snapshot 1`] = `
     type="button"
   >
     <span
-      class="pf-v6-c-button__icon pf-m-start"
+      class="pf-v6-c-button__icon"
     >
       <div
         class="pf-v6-c-clipboard-copy__toggle-icon"

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

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

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

@@ -22,7 +22,7 @@ exports[`DataListToggle should match snapshot (auto-generated) 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <div
             class="pf-v6-c-data-list__toggle-icon"

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

@@ -22,7 +22,7 @@ exports[`Renders to match snapshot 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <div
             class="pf-v6-c-data-list__toggle-icon"

package/src/components/DatePicker/DatePicker.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DatePicker/date-picker';
-import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 import calendarMonthStyles from '@patternfly/react-styles/css/components/CalendarMonth/calendar-month';
 import { TextInput, TextInputProps } from '../TextInput/TextInput';
+import { Button } from '../Button';
 import { Popover, PopoverProps } from '../Popover/Popover';
 import { InputGroup, InputGroupItem } from '../InputGroup';
 import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
@@ -325,17 +325,15 @@ const DatePickerBase = (
               />
             </InputGroupItem>
             <InputGroupItem>
-              <button
+              <Button
                 ref={buttonRef}
-                // TODO: Removed style follow up work with issue #8457
-                className={css(buttonStyles.button, buttonStyles.modifiers.control)}
+                variant="control"
                 aria-label={buttonAriaLabel}
-                type="button"
                 onClick={() => setPopoverOpen(!popoverOpen)}
-                disabled={isDisabled}
-              >
-                <OutlinedCalendarAltIcon />
-              </button>
+                isDisabled={isDisabled}
+                icon={<OutlinedCalendarAltIcon />}
+                aria-haspopup="dialog"
+              />
             </InputGroupItem>
           </InputGroup>
         </div>