@patternfly/react-core 6.2.0-prerelease.32 → 6.2.0-prerelease.34

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

@@ -1,4 +1,3 @@
-import { type JSX } from 'react';
 import { render, screen } from '@testing-library/react';
 import { CardFooter } from '../CardFooter';
 
@@ -27,7 +26,7 @@ describe('CardFooter', () => {
 
   test('allows passing in a React Component as the component', () => {
     const Component = () => <div>im a div</div>;
-    render(<CardFooter component={Component as unknown as keyof JSX.IntrinsicElements} />);
+    render(<CardFooter component={Component as unknown as keyof React.JSX.IntrinsicElements} />);
     expect(screen.getByText('im a div')).toBeInTheDocument();
   });
 });

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

@@ -1,4 +1,6 @@
 import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/Card/card';
+import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import { CardHeader } from '../CardHeader';
 import { CardContext } from '../Card';
@@ -13,6 +15,18 @@ describe('CardHeader', () => {
     const { asFragment } = render(<CardHeader actions="test" />);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test(`Should render CardHeader without ${styles.modifiers.wrap} by default`, () => {
+    render(<CardHeader data-testid="card-header" />);
+
+    expect(screen.getByTestId('card-header')).not.toHaveClass(styles.modifiers.wrap);
+  });
+
+  test(`Should render CardHeader with ${styles.modifiers.wrap} class when hasWrap is true`, () => {
+    render(<CardHeader data-testid="card-header-will-wrap" hasWrap />);
+
+    expect(screen.getByTestId('card-header-will-wrap')).toHaveClass(styles.modifiers.wrap);
+  });
 });
 
 // TODO: check if hasNoOffset for actions/selectableActions and className for selectableActions render

package/src/components/Card/examples/Card.md

@@ -16,7 +16,7 @@ propComponents:
 ouia: true
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
 import pfLogoSmall from '../../assets/PF-IconLogo.svg';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';

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

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Card, CardHeader, CardTitle, CardBody, Checkbox, Gallery } from '@patternfly/react-core';
 
 export const CardClickable: React.FunctionComponent = () => {
-  const [isSecondary, setIsSecondary] = React.useState<boolean>(false);
+  const [isSecondary, setIsSecondary] = useState<boolean>(false);
 
   const toggleVariant = (checked: boolean) => {
     setIsSecondary(checked);

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

@@ -1,11 +1,12 @@
+import { useState } from 'react';
 import { Card, CardHeader, CardTitle, CardBody, Button, Checkbox, Gallery } from '@patternfly/react-core';
 
 export const CardClickable: React.FunctionComponent = () => {
-  const [isChecked1, setIsChecked1] = React.useState(false);
-  const [isChecked2, setIsChecked2] = React.useState(false);
-  const [isChecked3, setIsChecked3] = React.useState(false);
-  const [isClicked, setIsClicked] = React.useState(false);
-  const [isSecondary, setIsSecondary] = React.useState<boolean>(false);
+  const [isChecked1, setIsChecked1] = useState(false);
+  const [isChecked2, setIsChecked2] = useState(false);
+  const [isChecked3, setIsChecked3] = useState(false);
+  const [isClicked, setIsClicked] = useState(false);
+  const [isSecondary, setIsSecondary] = useState<boolean>(false);
 
   const id1 = 'clickable-selectable-card-input-1';
   const id2 = 'clickable-selectable-card-input-2';

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

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Card,
   CardHeader,
@@ -17,10 +17,10 @@ import {
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const CardExpandable: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [isChecked, setIsChecked] = React.useState<boolean>(false);
-  const [isExpanded, setIsExpanded] = React.useState<boolean>(false);
-  const [isToggleRightAligned, setIsToggleRightAligned] = React.useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
+  const [isToggleRightAligned, setIsToggleRightAligned] = useState<boolean>(false);
 
   const onSelect = () => {
     setIsOpen(!isOpen);

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

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Card,
   CardHeader,
@@ -16,9 +17,9 @@ import pfLogoSmall from '../../PF-IconLogo.svg';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const CardExpandableWithIcon: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [isChecked, setIsChecked] = React.useState<boolean>(false);
-  const [isExpanded, setIsExpanded] = React.useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
 
   const onSelect = () => {
     setIsOpen(!isOpen);

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

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Card,
   CardHeader,
@@ -15,8 +16,8 @@ import {
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const CardTitleInHeader: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [isChecked, setIsChecked] = React.useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isChecked, setIsChecked] = useState<boolean>(false);
 
   const onSelect = () => {
     setIsOpen(!isOpen);

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

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Checkbox,
   Card,
@@ -13,8 +14,8 @@ import {
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const CardOnlyActionsInCardHead: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [isChecked, setIsChecked] = React.useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isChecked, setIsChecked] = useState<boolean>(false);
 
   const onSelect = () => {
     setIsOpen(!isOpen);

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

@@ -1,10 +1,11 @@
+import { useState } from 'react';
 import { Card, CardHeader, CardTitle, CardBody, Checkbox, Gallery } from '@patternfly/react-core';
 
 export const SelectableCard: React.FunctionComponent = () => {
-  const [isChecked1, setIsChecked1] = React.useState(false);
-  const [isChecked2, setIsChecked2] = React.useState(false);
-  const [isChecked3, setIsChecked3] = React.useState(false);
-  const [isSecondary, setIsSecondary] = React.useState<boolean>(false);
+  const [isChecked1, setIsChecked1] = useState(false);
+  const [isChecked2, setIsChecked2] = useState(false);
+  const [isChecked3, setIsChecked3] = useState(false);
+  const [isSecondary, setIsSecondary] = useState<boolean>(false);
 
   const id1 = 'selectable-card-input-1';
   const id2 = 'selectable-card-input-2';

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

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Card, CardHeader, CardTitle, CardBody, Gallery } from '@patternfly/react-core';
 
 export const SingleSelectableCard: React.FunctionComponent = () => {
-  const [isChecked, setIsChecked] = React.useState('');
+  const [isChecked, setIsChecked] = useState('');
   const id1 = 'single-selectable-card-input-1';
   const id2 = 'single-selectable-card-input-2';
   const id3 = 'single-selectable-card-input-3';

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

@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Card, CardHeader, CardBody, Gallery, Flex } from '@patternfly/react-core';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 
 export const CardTile: React.FunctionComponent = () => {
-  const [isChecked, setIsChecked] = React.useState('');
+  const [isChecked, setIsChecked] = useState('');
   const id1 = 'tile-1';
   const id2 = 'tile-2';
   const id3 = 'tile-3';

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

@@ -1,10 +1,11 @@
+import { useState } from 'react';
 import { Card, CardHeader, CardBody, Gallery, Flex } from '@patternfly/react-core';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 
 export const CardTileMulti: React.FunctionComponent = () => {
-  const [isChecked1, setIsChecked1] = React.useState(false);
-  const [isChecked2, setIsChecked2] = React.useState(false);
-  const [isChecked3, setIsChecked3] = React.useState(false);
+  const [isChecked1, setIsChecked1] = useState(false);
+  const [isChecked2, setIsChecked2] = useState(false);
+  const [isChecked3, setIsChecked3] = useState(false);
   const id1 = 'multi-tile-1';
   const id2 = 'multi-tile-2';
   const id3 = 'multi-tile-3';

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

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Brand,
   Card,
@@ -17,9 +18,9 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg';
 
 export const CardWithImageAndActions: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [isChecked, setIsChecked] = React.useState<boolean>(false);
-  const [hasNoOffset, setHasNoOffset] = React.useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+  const [hasNoOffset, setHasNoOffset] = useState<boolean>(false);
 
   const onSelect = () => {
     setIsOpen(!isOpen);

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

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Card, CardTitle, CardBody, CardFooter, Checkbox } from '@patternfly/react-core';
 
 export const CardWithModifiers: React.FunctionComponent = () => {
   const mods = ['isCompact', 'isLarge', 'isFullHeight', 'isPlain'];
-  const [modifiers, setModifiers] = React.useState({});
+  const [modifiers, setModifiers] = useState({});
 
   return (
     <Fragment>

package/src/components/Checkbox/examples/Checkbox.md

@@ -6,7 +6,7 @@ cssPrefix: pf-v6-c-check
 propComponents: ['Checkbox']
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 
 ## Examples
 

package/src/components/Checkbox/examples/CheckboxControlled.tsx

@@ -1,11 +1,11 @@
-import { Fragment } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import { Checkbox } from '@patternfly/react-core';
 
 export const CheckboxControlled: React.FunctionComponent = () => {
-  const [isChecked1, setIsChecked1] = React.useState<boolean>(false);
-  const [isChecked2, setIsChecked2] = React.useState<boolean>(false);
-  const [isChecked3, setIsChecked3] = React.useState<boolean>(false);
-  const [isChecked4, setIsChecked4] = React.useState<boolean>(false);
+  const [isChecked1, setIsChecked1] = useState<boolean>(false);
+  const [isChecked2, setIsChecked2] = useState<boolean>(false);
+  const [isChecked3, setIsChecked3] = useState<boolean>(false);
+  const [isChecked4, setIsChecked4] = useState<boolean>(false);
 
   const handleChange = (event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
     const target = event.currentTarget;
@@ -30,14 +30,14 @@ export const CheckboxControlled: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isChecked1 !== null) {
       setIsChecked2(isChecked1);
       setIsChecked3(isChecked1);
     }
   }, [isChecked1]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setIsChecked1((isChecked2 && isChecked3) || (isChecked2 || isChecked3 ? null : false));
   }, [isChecked2, isChecked3]);
 

package/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -1,9 +1,10 @@
-import { Component, Fragment } from 'react';
+import { Component, Fragment, createRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
 import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
 import { TooltipPosition } from '../Tooltip';
 import { TextInput } from '../TextInput';
+import { Truncate, TruncateProps } from '../Truncate';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import { ClipboardCopyButton } from './ClipboardCopyButton';
 import { ClipboardCopyToggle } from './ClipboardCopyToggle';
@@ -92,6 +93,8 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   children: string | string[];
   /** Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction. */
   additionalActions?: React.ReactNode;
+  /** Enables and customizes truncation for an inline-compact ClipboardCopy. */
+  truncation?: boolean | Omit<TruncateProps, 'content'>;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -101,6 +104,7 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
 class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
   static displayName = 'ClipboardCopy';
   timer = null as number;
+  private clipboardRef: React.RefObject<any>;
   constructor(props: ClipboardCopyProps) {
     super(props);
     const text = Array.isArray(this.props.children) ? this.props.children.join(' ') : (this.props.children as string);
@@ -110,6 +114,8 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
       copied: false,
       textWhenExpanded: text
     };
+
+    this.clipboardRef = createRef();
   }
 
   static defaultProps: PickOptional<ClipboardCopyProps> = {
@@ -128,6 +134,7 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
     textAriaLabel: 'Copyable input',
     toggleAriaLabel: 'Show content',
     additionalActions: null,
+    truncation: false,
     ouiaSafe: true
   };
 
@@ -184,6 +191,7 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
       position,
       className,
       additionalActions,
+      truncation,
       ouiaId,
       ouiaSafe,
       ...divProps
@@ -191,30 +199,45 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
     const textIdPrefix = 'text-input-';
     const toggleIdPrefix = 'toggle-';
     const contentIdPrefix = 'content-';
+
+    const copyableText = this.state.text;
+    const shouldTruncate = variant === ClipboardCopyVariant.inlineCompact && truncation;
+    const inlineCompactContent = shouldTruncate ? (
+      <Truncate
+        refToGetParent={this.clipboardRef}
+        content={copyableText}
+        {...(typeof truncation === 'object' && truncation)}
+      />
+    ) : (
+      copyableText
+    );
+
     return (
       <div
         className={css(
           styles.clipboardCopy,
-          variant === 'inline-compact' && styles.modifiers.inline,
+          variant === ClipboardCopyVariant.inlineCompact && styles.modifiers.inline,
           isBlock && styles.modifiers.block,
           this.state.expanded && styles.modifiers.expanded,
+          shouldTruncate && styles.modifiers.truncate,
           className
         )}
+        ref={this.clipboardRef}
         {...divProps}
         {...getOUIAProps(ClipboardCopy.displayName, ouiaId, ouiaSafe)}
       >
-        {variant === 'inline-compact' && (
+        {variant === ClipboardCopyVariant.inlineCompact && (
           <GenerateId prefix="">
             {(id) => (
               <Fragment>
                 {!isCode && (
                   <span className={css(styles.clipboardCopyText)} id={`${textIdPrefix}${id}`}>
-                    {this.state.text}
+                    {inlineCompactContent}
                   </span>
                 )}
                 {isCode && (
                   <code className={css(styles.clipboardCopyText, styles.modifiers.code)} id={`${textIdPrefix}${id}`}>
-                    {this.state.text}
+                    {inlineCompactContent}
                   </code>
                 )}
                 <span className={css(styles.clipboardCopyActions)}>
@@ -229,7 +252,7 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
                       textId={`text-input-${id}`}
                       aria-label={hoverTip}
                       onClick={(event: any) => {
-                        onCopy(event, this.state.text);
+                        onCopy(event, copyableText);
                         this.setState({ copied: true });
                       }}
                       onTooltipHidden={() => this.setState({ copied: false })}
@@ -244,12 +267,12 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
             )}
           </GenerateId>
         )}
-        {variant !== 'inline-compact' && (
+        {variant !== ClipboardCopyVariant.inlineCompact && (
           <GenerateId prefix="">
             {(id) => (
               <Fragment>
                 <div className={css(styles.clipboardCopyGroup)}>
-                  {variant === 'expansion' && (
+                  {variant === ClipboardCopyVariant.expansion && (
                     <ClipboardCopyToggle
                       isExpanded={this.state.expanded}
                       onClick={(_event) => {
@@ -257,7 +280,7 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
                         if (this.state.expanded) {
                           this.setState({ text: this.state.textWhenExpanded });
                         } else {
-                          this.setState({ textWhenExpanded: this.state.text });
+                          this.setState({ textWhenExpanded: copyableText });
                         }
                       }}
                       id={`${toggleIdPrefix}${id}`}
@@ -269,7 +292,7 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
                   <TextInput
                     readOnlyVariant={isReadOnly || this.state.expanded ? 'default' : undefined}
                     onChange={this.updateText}
-                    value={this.state.expanded ? this.state.textWhenExpanded : this.state.text}
+                    value={this.state.expanded ? this.state.textWhenExpanded : copyableText}
                     id={`text-input-${id}`}
                     aria-label={textAriaLabel}
                     {...(isCode && { dir: 'ltr' })}
@@ -283,7 +306,7 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
                     textId={`text-input-${id}`}
                     aria-label={hoverTip}
                     onClick={(event: any) => {
-                      onCopy(event, this.state.expanded ? this.state.textWhenExpanded : this.state.text);
+                      onCopy(event, this.state.expanded ? this.state.textWhenExpanded : copyableText);
                       this.setState({ copied: true });
                     }}
                     onTooltipHidden={() => this.setState({ copied: false })}
@@ -298,7 +321,7 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
                     id={`content-${id}`}
                     onChange={this.updateTextWhenExpanded}
                   >
-                    {this.state.text}
+                    {copyableText}
                   </ClipboardCopyExpanded>
                 )}
               </Fragment>

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

@@ -1,6 +1,7 @@
 import { screen, render } from '@testing-library/react';
-import { ClipboardCopy } from '../ClipboardCopy';
+import { ClipboardCopy, ClipboardCopyVariant } from '../ClipboardCopy';
 import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
+import truncateStyles from '@patternfly/react-styles/css/components/Truncate/truncate';
 import userEvent from '@testing-library/user-event';
 
 jest.mock('../../../helpers/GenerateId/GenerateId');
@@ -27,6 +28,19 @@ jest.mock('../ClipboardCopyToggle', () => ({
   )
 }));
 
+jest.mock('../../Truncate', () => ({
+  Truncate: ({ className, trailingNumChars, content, position, tooltipPosition, ...props }) => (
+    <div data-testid="Truncate-mock" {...props}>
+      <p>{`Truncate content: ${content}`}</p>
+      <p>{`Truncate className: ${className}`}</p>
+      <p>{`Truncate position: ${position}`}</p>
+      <p>{`Truncate trailingNumChars: ${trailingNumChars}`}</p>
+      <p>{`Truncate tooltipPosition: ${tooltipPosition}`}</p>
+      {children}
+    </div>
+  )
+}));
+
 const children = 'Copyable text';
 const testId = 'clipboard-copy';
 
@@ -350,6 +364,178 @@ test('Can take array of strings as children', async () => {
   expect(onCopyMock).toHaveBeenCalledWith(expect.any(Object), children);
 });
 
+describe('ClipboardCopy with truncation', () => {
+  test(`Does not render ClipboardCopy component with class ${styles.modifiers.truncate} by default`, () => {
+    render(<ClipboardCopy data-testid={testId}>{children}</ClipboardCopy>);
+
+    expect(screen.getByTestId(testId)).not.toHaveClass(styles.modifiers.truncate);
+  });
+
+  test(`Does not render ClipboardCopy component with class ${styles.modifiers.truncate} for expansion variant`, () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.expansion} data-testid={testId}>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByTestId(testId)).not.toHaveClass(styles.modifiers.truncate);
+  });
+
+  test(`Does not render ClipboardCopy component with class ${styles.modifiers.truncate} for inlinecompact variant and truncation is false`, () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact} data-testid={testId}>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByTestId(testId)).not.toHaveClass(styles.modifiers.truncate);
+  });
+
+  test(`Renders ClipboardCopy component with class ${styles.modifiers.truncate} when truncation is true and variant is inline-compact`, () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact} truncation data-testid={testId}>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByTestId(testId)).toHaveClass(styles.modifiers.truncate);
+  });
+
+  test(`Renders ClipboardCopy component with class ${styles.modifiers.truncate} when truncation is an object and variant is inlinecompact`, () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact} truncation={{}} data-testid={testId}>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByTestId(testId)).toHaveClass(styles.modifiers.truncate);
+  });
+
+  test('Does not render with Truncate component by default', () => {
+    render(<ClipboardCopy>{children}</ClipboardCopy>);
+
+    expect(screen.queryByTestId('Truncate-mock')).not.toBeInTheDocument();
+  });
+
+  test('Does not render with Truncate component when truncation is true and variant is not inline-compact', () => {
+    render(<ClipboardCopy truncation>{children}</ClipboardCopy>);
+
+    expect(screen.queryByTestId('Truncate-mock')).not.toBeInTheDocument();
+  });
+
+  test('Does not render with Truncate component when truncation is true and variant is expansion', () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.expansion} truncation>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.queryByTestId('Truncate-mock')).not.toBeInTheDocument();
+  });
+
+  test('Does not render with Truncate component when truncation is an object and variant is not inline-compact', () => {
+    render(<ClipboardCopy truncation={{}}>{children}</ClipboardCopy>);
+
+    expect(screen.queryByTestId('Truncate-mock')).not.toBeInTheDocument();
+  });
+
+  test('Does not render with Truncate component when truncation is an object and variant is expansion', () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.expansion} truncation={{}}>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.queryByTestId('Truncate-mock')).not.toBeInTheDocument();
+  });
+
+  test('Does not render with Truncate component when variant="inline-compact" and truncation is false', () => {
+    render(<ClipboardCopy variant={ClipboardCopyVariant.inlineCompact}>{children}</ClipboardCopy>);
+
+    expect(screen.queryByTestId('Truncate-mock')).not.toBeInTheDocument();
+  });
+
+  test('Renders with Truncate component when variant="inline-compact" and truncation is true', () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact} truncation>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByTestId('Truncate-mock')).toBeInTheDocument();
+  });
+
+  test('Passes children to Truncate content prop when variant="inline-compact" and truncation is true', () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact} truncation>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByText(`Truncate content: ${children}`)).toBeInTheDocument();
+  });
+
+  test('Renders with Truncate component when variant="inline-compact" and truncation is an object', () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact} truncation={{}}>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByTestId('Truncate-mock')).toBeInTheDocument();
+  });
+
+  test('Passes children to Truncate content prop when variant="inline-compact" and truncation is an object', () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact} truncation={{}}>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByText(`Truncate content: ${children}`)).toBeInTheDocument();
+  });
+
+  test('Passes className prop to Truncate when variant="inline-compact" and truncation is passed', () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact} truncation={{ className: 'clipboard-truncate' }}>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByText(`Truncate className: clipboard-truncate`)).toBeInTheDocument();
+  });
+
+  test('Passes trailingNumChars prop to Truncate when variant="inline-compact" and truncation is passed', () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact} truncation={{ trailingNumChars: 5 }}>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByText(`Truncate trailingNumChars: 5`)).toBeInTheDocument();
+  });
+
+  test('Passes position prop to Truncate when variant="inline-compact" and truncation is passed', () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact} truncation={{ position: 'start' }}>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByText(`Truncate position: start`)).toBeInTheDocument();
+  });
+
+  test('Passes tooltipPosition prop to Truncate when variant="inline-compact" and truncation is passed', () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact} truncation={{ tooltipPosition: 'bottom' }}>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByText(`Truncate tooltipPosition: bottom`)).toBeInTheDocument();
+  });
+});
+
 test('Matches snapshot', () => {
   const { asFragment } = render(
     <ClipboardCopy id="snapshot" ouiaId="snapshot">