Added new modifier class to clipboard copy

Author: Eric Olkowski

packages/react-core/package.json

@@ -54,7 +54,7 @@
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.2.0-prerelease.20",
+    "@patternfly/patternfly": "6.2.0-prerelease.21",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"

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

@@ -1,4 +1,4 @@
-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';
@@ -115,7 +115,7 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
       textWhenExpanded: text
     };
 
-    this.clipboardRef = React.createRef();
+    this.clipboardRef = createRef();
   }
 
   static defaultProps: PickOptional<ClipboardCopyProps> = {
@@ -219,6 +219,7 @@ class ClipboardCopy extends Component<ClipboardCopyProps, ClipboardCopyState> {
           variant === ClipboardCopyVariant.inlineCompact && styles.modifiers.inline,
           isBlock && styles.modifiers.block,
           this.state.expanded && styles.modifiers.expanded,
+          shouldTruncate && styles.modifiers.truncate,
           className
         )}
         ref={this.clipboardRef}

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

@@ -105,6 +105,52 @@ test(`Renders with class ${styles.modifiers.block} when isBlock is passed`, () =
   expect(screen.getByTestId(testId)).toHaveClass(styles.modifiers.block);
 });
 
+test(`Does not render 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 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 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 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 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('Spreads additional props to container div', () => {
   render(
     <ClipboardCopy data-testid={testId} role="group">

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-28"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-30"
           data-ouia-component-type="PF6/TextInput"
           data-ouia-safe="true"
           id="text-input-generated-id"

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

@@ -66,9 +66,9 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 ```ts file="./ClipboardCopyInlineCompactInSentence.tsx"
 ```
 
-### With truncation
+### Inline compact 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"
+```ts file="./ClipboardCopyInlineCompactTruncation.tsx"
 ```

…opy/examples/ClipboardCopyTruncation.tsx …ClipboardCopyInlineCompactTruncation.tsxpackages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyTruncation.tsx renamed to packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactTruncation.tsx packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyTruncation.tsx renamed to packages/react-core/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactTruncation.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
 import { ClipboardCopy } from '@patternfly/react-core';
-export const ClipboardCopyTruncation: React.FunctionComponent = () => (
+export const ClipboardCopyInlineCompactTruncation: 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

packages/react-docs/package.json

@@ -23,7 +23,7 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "dependencies": {
-    "@patternfly/patternfly": "6.2.0-prerelease.20",
+    "@patternfly/patternfly": "6.2.0-prerelease.21",
     "@patternfly/react-charts": "workspace:^",
     "@patternfly/react-code-editor": "workspace:^",
     "@patternfly/react-core": "workspace:^",

packages/react-icons/package.json

@@ -33,7 +33,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@patternfly/patternfly": "6.2.0-prerelease.20",
+    "@patternfly/patternfly": "6.2.0-prerelease.21",
     "fs-extra": "^11.3.0",
     "tslib": "^2.8.1"
   },

packages/react-styles/package.json

@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.2.0-prerelease.20",
+    "@patternfly/patternfly": "6.2.0-prerelease.21",
     "change-case": "^5.4.4",
     "fs-extra": "^11.3.0"
   },

packages/react-tokens/package.json

@@ -29,7 +29,7 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.2.0-prerelease.20",
+    "@patternfly/patternfly": "6.2.0-prerelease.21",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"
   }