fix(clipboard copy): Remove button padding for inline-compact variant (…

…#10885)

* fix(clipboard copy): Remove button padding for inline-compact variant

* remove padding from additional action button example

packages/react-core/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>

packages/react-core/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}

packages/react-core/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();
 

packages/react-core/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>
     }
   >