feat(clipboard): remove textarea from clipboard copy (#1840)

patternfly · Apr 24, 2019 · 8bb26a2 · 8bb26a2
1 parent 242c835
commit 8bb26a2
Show file tree

Hide file tree

Showing 15 changed files with 42 additions and 110 deletions.
diff --git a/packages/patternfly-4/react-charts/package.json b/packages/patternfly-4/react-charts/package.json
@@ -46,7 +46,7 @@
     "victory-core": "^31.1.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "2.5.0",
+    "@patternfly/patternfly": "2.6.1",
     "@patternfly/react-tokens": "^2.3.4",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",

diff --git a/packages/patternfly-4/react-core/package.json b/packages/patternfly-4/react-core/package.json
@@ -59,7 +59,7 @@
     "@babel/plugin-transform-typescript": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "@patternfly/patternfly": "2.5.0",
+    "@patternfly/patternfly": "2.6.1",
     "@types/enzyme": "3.9.0",
     "@types/exenv": "^1.2.0",
     "@types/jest": "^24.0.11",

diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopy.d.ts b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopy.d.ts
@@ -1,4 +1,4 @@
-import { FunctionComponent, HTMLProps, MouseEvent } from 'react';
+import { FunctionComponent, HTMLProps, MouseEvent, ReactNode, HTMLDivElement } from 'react';
 import { OneOf } from '../../typeUtils';
 import { PopoverPosition } from '../Popover';
 
@@ -8,9 +8,9 @@ export const ClipboardCopyVariant = {
 };
 
 export interface ClipboardCopyProps extends HTMLProps<HTMLDivElement> {
+  className?: string;
   hoverTip?: string;
   clickTip?: string;
-  'toggle-aria-label'?: string;
   isReadOnly?: boolean;
   variant?: OneOf<typeof ClipboardCopyVariant, keyof typeof ClipboardCopyVariant>;
   position?: OneOf<typeof PopoverPosition, keyof typeof PopoverPosition>;
@@ -20,6 +20,7 @@ export interface ClipboardCopyProps extends HTMLProps<HTMLDivElement> {
   switchDelay?: number;
   onCopy?: (event: MouseEvent, text?: string) => void;
   onChange?: (text: string) => void;
+  children?: ReactNode;
 }
 
 declare const ClipboardCopy: FunctionComponent<ClipboardCopyProps>;

diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopy.js b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopy.js
@@ -60,7 +60,7 @@ class ClipboardCopy extends React.Component {
       'toggle-aria-label': toggleAriaLabel,
       variant,
       position,
-      classname,
+      className,
       onChange,
       ...props
     } = this.props;
@@ -70,7 +70,7 @@ class ClipboardCopy extends React.Component {
     const copyButtonIdPrefix = 'copy-button-';
     return (
       <div
-        className={css(styles.clipboardCopy, this.state.expanded && styles.modifiers.expanded, classname)}
+        className={css(styles.clipboardCopy, this.state.expanded && styles.modifiers.expanded, className)}
         {...props}
       >
         <GenerateId prefix="">
@@ -134,7 +134,7 @@ class ClipboardCopy extends React.Component {
 
 ClipboardCopy.propTypes = {
   /** Additional classes added to the clipboard copy container. */
-  classname: PropTypes.string,
+  className: PropTypes.string,
   /** Tooltip message to display when hover the copy button */
   hoverTip: PropTypes.string,
   /** Tooltip message to display when clicking the copy button */

diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ExpandedContent.d.ts b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ExpandedContent.d.ts
diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ExpandedContent.js b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ExpandedContent.js
@@ -3,15 +3,26 @@ import styles from '@patternfly/patternfly/components/ClipboardCopy/clipboard-co
 import { css } from '@patternfly/react-styles';
 import PropTypes from 'prop-types';
 
-const ExpandedContent = ({ className, children, onChange, ...props }) => (
-  <div className={css(styles.clipboardCopyExpandableContent, className)} {...props}>
-    <textarea
-      onChange={e => onChange(e.target.value, e)}
-      value={children}
-      style={{ resize: 'none', width: '100%', height: '100%', borderWidth: '0' }}
-    />
-  </div>
-);
+class ExpandedContent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { className, children, onChange, ...props } = this.props;
+    return (
+      <div
+        suppressContentEditableWarning="true"
+        className={css(styles.clipboardCopyExpandableContent, className)}
+        onInput={e => onChange(e.target.innerText, e)}
+        contentEditable="true"
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+}
 
 ExpandedContent.propTypes = {
   className: PropTypes.string,

diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ToggleButton.d.ts b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ToggleButton.d.ts
diff --git a/...nfly-4/react-core/src/components/ClipboardCopy/__snapshots__/ExpandedContent.test.js.snap b/...nfly-4/react-core/src/components/ClipboardCopy/__snapshots__/ExpandedContent.test.js.snap
@@ -3,19 +3,11 @@
 exports[`expanded content render 1`] = `
 <div
   className="pf-c-clipboard-copy__expandable-content class-1"
+  contentEditable="true"
   id="id-1"
+  onInput={[Function]}
+  suppressContentEditableWarning="true"
 >
-  <textarea
-    onChange={[Function]}
-    style={
-      Object {
-        "borderWidth": "0",
-        "height": "100%",
-        "resize": "none",
-        "width": "100%",
-      }
-    }
-    value="This is my text"
-  />
+  This is my text
 </div>
 `;
diff --git a/packages/patternfly-4/react-docs/package.json b/packages/patternfly-4/react-docs/package.json
@@ -15,7 +15,7 @@
   "dependencies": {
     "@mdx-js/mdx": "1.0.2",
     "@mdx-js/react": "1.0.2",
-    "@patternfly/patternfly": "2.5.0",
+    "@patternfly/patternfly": "2.6.1",
     "@patternfly/react-core": "^3.11.0",
     "@patternfly/react-icons": "^3.7.5",
     "gatsby": "2.3.14",

diff --git a/packages/patternfly-4/react-inline-edit-extension/package.json b/packages/patternfly-4/react-inline-edit-extension/package.json
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/",
   "dependencies": {
-    "@patternfly/patternfly": "2.5.0",
+    "@patternfly/patternfly": "2.6.1",
     "@patternfly/react-core": "^3.11.0",
     "@patternfly/react-icons": "^3.7.5",
     "@patternfly/react-styles": "^3.1.0",

diff --git a/packages/patternfly-4/react-styled-system/package.json b/packages/patternfly-4/react-styled-system/package.json
@@ -44,7 +44,7 @@
     "react": "^16.4.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "2.5.0",
+    "@patternfly/patternfly": "2.6.1",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
     "glob": "^7.1.2",

diff --git a/packages/patternfly-4/react-table/package.json b/packages/patternfly-4/react-table/package.json
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react/tree/master/packages/patternfly-4/react-table#readme",
   "dependencies": {
-    "@patternfly/patternfly": "2.5.0",
+    "@patternfly/patternfly": "2.6.1",
     "@patternfly/react-core": "^3.11.0",
     "@patternfly/react-icons": "^3.7.5",
     "@patternfly/react-styles": "^3.1.0",

diff --git a/packages/patternfly-4/react-tokens/package.json b/packages/patternfly-4/react-tokens/package.json
@@ -30,7 +30,7 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "2.5.0",
+    "@patternfly/patternfly": "2.6.1",
     "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",

diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
@@ -34,7 +34,7 @@
   "devDependencies": {
     "@fortawesome/free-regular-svg-icons": "^5.7.2",
     "@fortawesome/free-solid-svg-icons": "^5.7.2",
-    "@patternfly/patternfly": "2.5.0",
+    "@patternfly/patternfly": "2.6.1",
     "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
     "fs-extra": "^6.0.1",
     "glob": "^7.1.2",