feat(ClipboardCopy): added truncation for inlinecompact variant

Author: Eric Olkowski

packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx

@@ -4,6 +4,7 @@ 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 React.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 React.Component<ClipboardCopyProps, ClipboardCopySta
       copied: false,
       textWhenExpanded: text
     };
+
+    this.clipboardRef = React.createRef();
   }
 
   static defaultProps: PickOptional<ClipboardCopyProps> = {
@@ -128,6 +134,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
     textAriaLabel: 'Copyable input',
     toggleAriaLabel: 'Show content',
     additionalActions: null,
+    truncation: false,
     ouiaSafe: true
   };
 
@@ -184,37 +191,59 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
       position,
       className,
       additionalActions,
+      truncation,
       ouiaId,
       ouiaSafe,
       ...divProps
     } = this.props;
     const textIdPrefix = 'text-input-';
     const toggleIdPrefix = 'toggle-';
     const contentIdPrefix = 'content-';
+
+    const copyableText = this.state.text;
+    const shouldTruncate = variant === ClipboardCopyVariant.inlineCompact && truncation;
+
     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,
           className
         )}
+        ref={this.clipboardRef}
         {...divProps}
         {...getOUIAProps(ClipboardCopy.displayName, ouiaId, ouiaSafe)}
       >
-        {variant === 'inline-compact' && (
+        {variant === ClipboardCopyVariant.inlineCompact && (
           <GenerateId prefix="">
             {(id) => (
               <React.Fragment>
                 {!isCode && (
                   <span className={css(styles.clipboardCopyText)} id={`${textIdPrefix}${id}`}>
-                    {this.state.text}
+                    {shouldTruncate ? (
+                      <Truncate
+                        refToGetParent={this.clipboardRef}
+                        content={copyableText}
+                        {...(typeof truncation === 'object' && truncation)}
+                      />
+                    ) : (
+                      copyableText
+                    )}
                   </span>
                 )}
                 {isCode && (
                   <code className={css(styles.clipboardCopyText, styles.modifiers.code)} id={`${textIdPrefix}${id}`}>
-                    {this.state.text}
+                    {shouldTruncate ? (
+                      <Truncate
+                        refToGetParent={this.clipboardRef}
+                        content={copyableText}
+                        {...(typeof truncation === 'object' && truncation)}
+                      />
+                    ) : (
+                      copyableText
+                    )}
                   </code>
                 )}
                 <span className={css(styles.clipboardCopyActions)}>
@@ -229,7 +258,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
                       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,20 +273,20 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
             )}
           </GenerateId>
         )}
-        {variant !== 'inline-compact' && (
+        {variant !== ClipboardCopyVariant.inlineCompact && (
           <GenerateId prefix="">
             {(id) => (
               <React.Fragment>
                 <div className={css(styles.clipboardCopyGroup)}>
-                  {variant === 'expansion' && (
+                  {variant === ClipboardCopyVariant.expansion && (
                     <ClipboardCopyToggle
                       isExpanded={this.state.expanded}
                       onClick={(_event) => {
                         this.expandContent(_event);
                         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 +298,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
                   <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 +312,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
                     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 +327,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
                     id={`content-${id}`}
                     onChange={this.updateTextWhenExpanded}
                   >
-                    {this.state.text}
+                    {copyableText}
                   </ClipboardCopyExpanded>
                 )}
               </React.Fragment>

packages/react-core/src/components/ClipboardCopy/__tests__/ClipboardCopy.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 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');
@@ -351,6 +352,40 @@ test('Can take array of strings as children', async () => {
   expect(onCopyMock).toHaveBeenCalledWith(expect.any(Object), children);
 });
 
+describe('ClipboardCopy with truncation', () => {
+  test('Does not render with truncate wrapper by default', () => {
+    render(<ClipboardCopy data-testid={testId}>{children}</ClipboardCopy>);
+
+    expect(screen.queryByTestId(testId)?.querySelector(`.${truncateStyles.truncate}`)).not.toBeInTheDocument();
+  });
+
+  test('Does not render with truncate wrapper when variant="inline-compact" and truncation is false', () => {
+    render(<ClipboardCopy variant={ClipboardCopyVariant.inlineCompact}>{children}</ClipboardCopy>);
+
+    expect(screen.getByText(children).parentElement).not.toHaveClass(truncateStyles.truncate);
+  });
+
+  test('Renders with truncate wrapper when variant="inline-compact" and truncation is true', () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact} truncation>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByText(children).parentElement).toHaveClass(truncateStyles.truncate);
+  });
+
+  test('Renders with truncate wrapper when variant="inline-compact" and truncation is prop object', () => {
+    render(
+      <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact} truncation={{ position: 'start' }}>
+        {children}
+      </ClipboardCopy>
+    );
+
+    expect(screen.getByText(children, { exact: false }).parentElement).toHaveClass(truncateStyles.truncate);
+  });
+});
+
 test('Matches snapshot', () => {
   const { asFragment } = render(
     <ClipboardCopy id="snapshot" ouiaId="snapshot">

packages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopy.test.tsx.snap

@@ -18,7 +18,7 @@ exports[`Matches snapshot 1`] = `
         <input
           aria-invalid="false"
           aria-label="Copyable input"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-27"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-28"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           id="text-input-generated-id"

packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopy.md

@@ -64,3 +64,10 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
 ```ts file="./ClipboardCopyInlineCompactInSentence.tsx"
 ```
+
+### With truncation
+
+You can control the truncation for an `inline-compact` variant by passing the `truncation` property. The following example shows the different ways to use the property: passing a boolean will apply default truncation, while passing an object of `TruncateProps` offers more fine-tuned control over the truncation behavior.
+
+```ts file="./ClipboardCopyTruncation.tsx"
+```

packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyTruncation.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ClipboardCopy } from '@patternfly/react-core';
+export const ClipboardCopyTruncation: React.FunctionComponent = () => (
+  <>
+    <ClipboardCopy truncation hoverTip="Copy" clickTip="Copied" variant="inline-compact">
+      This lengthy, copyable content will be truncated with default settings when the truncation prop is simply set to
+      true. This is useful for quickly applying truncation without needing to worry about any other properties to set.
+    </ClipboardCopy>
+    <br />
+    <br />
+    <ClipboardCopy truncation={{ position: 'start' }} hoverTip="Copy" clickTip="Copied" variant="inline-compact">
+      This lengthy, copyable content will be truncated with customized settings when the truncation prop is passed an
+      object containing Truncate props. This is useful for finetuning truncation for your particular use-case.
+    </ClipboardCopy>
+  </>
+);

packages/react-core/src/components/Truncate/Truncate.tsx

@@ -17,7 +17,7 @@ const truncateStyles = {
 
 const minWidthCharacters: number = 12;
 
-interface TruncateProps extends React.HTMLProps<HTMLSpanElement> {
+export interface TruncateProps extends React.HTMLProps<HTMLSpanElement> {
   /** Class to add to outer span */
   className?: string;
   /** Text to truncate */
@@ -42,6 +42,10 @@ interface TruncateProps extends React.HTMLProps<HTMLSpanElement> {
     | 'left-end'
     | 'right-start'
     | 'right-end';
+  /** The element whose parent to reference when calculating whether truncation should occur. This must be an ancestor
+   * of the ClipboardCopy, and must have a valid width value.
+   */
+  refToGetParent?: React.RefObject<any>;
 }
 
 const sliceContent = (str: string, slice: number) => [str.slice(0, str.length - slice), str.slice(-slice)];
@@ -52,6 +56,7 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
   tooltipPosition = 'top',
   trailingNumChars = 7,
   content,
+  refToGetParent,
   ...props
 }: TruncateProps) => {
   const [isTruncated, setIsTruncated] = React.useState(true);
@@ -85,8 +90,11 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
       setTextElement(textRef.current);
     }
 
-    if (subParentRef && subParentRef.current.parentElement.parentElement && !parentElement) {
-      setParentElement(subParentRef.current.parentElement.parentElement);
+    if (
+      refToGetParent?.current ||
+      (subParentRef && subParentRef.current.parentElement.parentElement && !parentElement)
+    ) {
+      setParentElement(refToGetParent.current.parentElement || subParentRef.current.parentElement.parentElement);
     }
   }, [textRef, subParentRef, textElement, parentElement]);