feat(ClipboardCopy): 9712 allow alternative title

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

@@ -47,6 +47,8 @@ export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>
   isBlock?: boolean;
   /** Adds Clipboard Copy variant styles. */
   variant?: typeof ClipboardCopyVariant | 'inline' | 'expansion' | 'inline-compact';
+  /** Replaces the textinput text, useful for expansion variant when you want to provide a summary of the text that will be copied. Will force isReadOnly on the textInput part. */
+  title?: string;
   /** Copy button tooltip position. */
   position?:
     | TooltipPosition
@@ -104,6 +106,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
     isExpanded: false,
     isCode: false,
     variant: 'inline',
+    title: '',
     position: TooltipPosition.top,
     maxWidth: '150px',
     exitDelay: 1500,
@@ -160,6 +163,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
       toggleAriaLabel,
       variant,
       position,
+      title,
       className,
       additionalActions,
       ouiaId,
@@ -169,6 +173,7 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
     const textIdPrefix = 'text-input-';
     const toggleIdPrefix = 'toggle-';
     const contentIdPrefix = 'content-';
+
     return (
       <div
         className={css(
@@ -237,9 +242,9 @@ class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopySta
                     />
                   )}
                   <TextInput
-                    readOnlyVariant={isReadOnly || this.state.expanded ? 'default' : undefined}
+                    readOnlyVariant={isReadOnly || title || this.state.expanded ? 'default' : undefined}
                     onChange={this.updateText}
-                    value={this.state.text as string | number}
+                    value={title || (this.state.text as string | number)}
                     id={`text-input-${id}`}
                     aria-label={textAriaLabel}
                     {...(isCode && { dir: 'ltr' })}

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

@@ -25,6 +25,11 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 ```ts file="./ClipboardCopyExpanded.tsx"
 ```
 
+### Expanded with alternate title
+
+```ts file="./ClipboardCopyExpandedWithAltTitle.tsx"
+```
+
 ### Read only expanded
 
 ```ts file="./ClipboardCopyReadOnlyExpanded.tsx"

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
+
+export const ClipboardCopyExpanded: React.FunctionComponent = () => (
+  <ClipboardCopy
+    hoverTip="Copy"
+    title="The info you need, expand to see what actually gets copied"
+    clickTip="Copied"
+    variant={ClipboardCopyVariant.expansion}
+  >
+    This could be a lot of information that you'd want to summarize with a title as above. The title above will be
+    readonly as it was defined as a title rather than just the first part of this text. However, a user can still modify
+    this content which gets copied into the clipboard. You can use the isReadOnly flag to prevent them from changing
+    this.
+  </ClipboardCopy>
+);