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
deleted file mode 100644
index b28cbbd0799..00000000000
--- a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopy.d.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { ClipboardEvent, FunctionComponent, HTMLProps, ReactNode } from 'react';
-import { OneOf, Omit } from '../../helpers/typeUtils';
-import { PopoverPosition } from '../Popover';
-
-export enum ClipboardCopyVariant {
-  inline = 'inline',
-  expansion = 'expansion'
-}
-
-export interface ClipboardCopyProps extends Omit<HTMLProps<HTMLDivElement>, 'onChange'> {
-  className?: string;
-  hoverTip?: string;
-  clickTip?: string;
-  textAriaLabel?: string;
-  toggleAriaLabel?: string;
-  isReadOnly?: boolean;
-  variant?: OneOf<typeof ClipboardCopyVariant, keyof typeof ClipboardCopyVariant>;
-  position?: OneOf<typeof PopoverPosition, keyof typeof PopoverPosition>;
-  maxWidth?: string;
-  exitDelay?: number;
-  entryDelay?: number;
-  switchDelay?: number;
-  onCopy?: (event: ClipboardEvent<HTMLDivElement>, text?: string) => void;
-  onChange?: (text?: string) => void;
-  children?: ReactNode;
-}
-
-declare const ClipboardCopy: FunctionComponent<ClipboardCopyProps>;
-
-export default ClipboardCopy;
diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopy.md b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopy.md
index 07a14e5d868..83f941d39b6 100644
--- a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopy.md
+++ b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopy.md
@@ -2,6 +2,7 @@
 title: 'Clipboard copy'
 cssPrefix: 'pf-c-copyclipboard'
 propComponents: ['ClipboardCopy']
+typescript: true
 ---
 
 import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopy.js b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx
similarity index 62%
rename from packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopy.js
rename to packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx
index 19f982baa37..6b8f75fd50d 100644
--- a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopy.js
+++ b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx
@@ -1,15 +1,16 @@
-import React from 'react';
+import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
 import { css } from '@patternfly/react-styles';
-import PropTypes from 'prop-types';
+import { OneOf, Omit } from '../../helpers/typeUtils';
+import { PopoverPosition } from '../Popover';
 import { TextInput } from '../TextInput';
 import { TooltipPosition } from '../Tooltip';
 import GenerateId from '../../helpers/GenerateId/GenerateId';
-import CopyButton from './CopyButton';
-import ToggleButton from './ToggleButton';
-import ExpandedContent from './ExpandedContent';
+import { ClipboardCopyButton } from './ClipboardCopyButton';
+import { ClipboardCopyToggle } from './ClipboardCopyToggle';
+import { ClipboardCopyExpanded } from './ClipboardCopyExpanded';
 
-const clipboardCopyFunc = (event, text) => {
+export const clipboardCopyFunc = (event: any, text: string) => {
   const clipboard = event.currentTarget.parentElement;
   const el = document.createElement('input');
   el.value = text;
@@ -19,34 +20,89 @@ const clipboardCopyFunc = (event, text) => {
   clipboard.removeChild(el);
 };
 
-export const ClipboardCopyVariant = {
-  inline: 'inline',
-  expansion: 'expansion'
-};
+export enum ClipboardCopyVariant {
+  inline = 'inline',
+  expansion = 'expansion'
+}
+
+export interface ClipboardCopyState {
+  text: string | number; 
+  expanded: boolean;
+  copied: boolean;
+}
+
+export interface ClipboardCopyProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
+  /** Additional classes added to the clipboard copy container. */
+  className?: string;
+  /** Tooltip message to display when hover the copy button */
+  hoverTip?: string;
+  /** Tooltip message to display when clicking the copy button */
+  clickTip?: string;
+  /** Custom flag to show that the input requires an associated id or aria-label. */
+  textAriaLabel?: string;
+  /** Custom flag to show that the toggle button requires an associated id or aria-label. */
+  toggleAriaLabel?: string;
+  /** Flag to show if the input is read only. */
+  isReadOnly?: boolean;
+  /** Adds Clipboard Copy variant styles. */
+  variant?: typeof ClipboardCopyVariant | 'inline' | 'expansion'; 
+  /** Copy button popover position. */
+  position?: OneOf<typeof PopoverPosition, keyof typeof PopoverPosition>;
+  /** Maximum width of the tooltip (default 150px). */
+  maxWidth?: string;
+  /** Delay in ms before the tooltip disappears. */
+  exitDelay?: number;
+  /** Delay in ms before the tooltip appears. */
+  entryDelay?: number;
+  /** Delay in ms before the tooltip message switch to hover tip. */
+  switchDelay?: number;
+  /** A function that is triggered on clicking the copy button. */
+  onCopy?: (event: React.ClipboardEvent<HTMLDivElement>, text?: React.ReactNode) => void;
+  /** A function that is triggered on changing the text. */
+  onChange?: (text?: string | number) => void;
+  /** The text which is copied. */
+  children?: React.ReactNode;
+}
 
-class ClipboardCopy extends React.Component {
-  constructor(props) {
+export class ClipboardCopy extends React.Component<ClipboardCopyProps, ClipboardCopyState> {
+  timer = null as NodeJS.Timer;
+  constructor(props: ClipboardCopyProps) {
     super(props);
-    this.timer = null;
     this.state = {
-      text: this.props.children,
+      text: this.props.children as string | number,
       expanded: false,
       copied: false
     };
   }
 
-  expandContent = () => {
+  static defaultProps = {
+    hoverTip: 'Copy to clipboard',
+    clickTip: 'Successfully copied to clipboard!',
+    isReadOnly: false,
+    variant: 'inline', 
+    position: TooltipPosition.top,
+    maxWidth: '150px',
+    exitDelay: 1600,
+    entryDelay: 100,
+    switchDelay: 2000,
+    onCopy: clipboardCopyFunc,
+    onChange: (): any => undefined,
+    textAriaLabel: 'Copyable input',
+    toggleAriaLabel: 'Show content'
+  }
+  
+  expandContent = (_event: React.MouseEvent<Element, MouseEvent>) => {
     this.setState(prevState => ({
       expanded: !prevState.expanded
     }));
   };
 
-  updateText = text => {
+  updateText = (text: string | number) => {
     this.setState({ text });
     this.props.onChange(text);
   };
 
-  render() {
+  render = () => {
     const {
       isReadOnly,
       exitDelay,
@@ -61,7 +117,8 @@ class ClipboardCopy extends React.Component {
       variant,
       position,
       className,
-      ...props
+      onChange, // Don't pass to <div>
+      ...divProps
     } = this.props;
     const textIdPrefix = 'text-input-';
     const toggleIdPrefix = 'toggle-';
@@ -69,14 +126,14 @@ class ClipboardCopy extends React.Component {
     return (
       <div
         className={css(styles.clipboardCopy, this.state.expanded && styles.modifiers.expanded, className)}
-        {...props}
+        {...divProps}
       >
         <GenerateId prefix="">
           {id => (
             <React.Fragment>
               <div className={css(styles.clipboardCopyGroup)}>
                 {variant === 'expansion' && (
-                  <ToggleButton
+                  <ClipboardCopyToggle
                     isExpanded={this.state.expanded}
                     onClick={this.expandContent}
                     id={`${toggleIdPrefix}-${id}`}
@@ -88,11 +145,11 @@ class ClipboardCopy extends React.Component {
                 <TextInput
                   isReadOnly={isReadOnly || this.state.expanded}
                   onChange={this.updateText}
-                  value={this.state.text}
+                  value={this.state.text as string | number}
                   id={`text-input-${id}`}
                   aria-label={textAriaLabel}
                 />
-                <CopyButton
+                <ClipboardCopyButton
                   exitDelay={exitDelay}
                   entryDelay={entryDelay}
                   maxWidth={maxWidth}
@@ -100,7 +157,7 @@ class ClipboardCopy extends React.Component {
                   id={`copy-button-${id}`}
                   textId={`text-input-${id}`}
                   aria-label={hoverTip}
-                  onClick={event => {
+                  onClick={(event: any) => {
                     if (this.timer) {
                       clearTimeout(this.timer);
                       this.setState({ copied: false });
@@ -115,12 +172,12 @@ class ClipboardCopy extends React.Component {
                   }}
                 >
                   {this.state.copied ? clickTip : hoverTip}
-                </CopyButton>
+                </ClipboardCopyButton>
               </div>
               {this.state.expanded && (
-                <ExpandedContent id={`content-${id}`} onChange={this.updateText}>
+                <ClipboardCopyExpanded id={`content-${id}`} onChange={this.updateText}>
                   {this.state.text}
-                </ExpandedContent>
+                </ClipboardCopyExpanded>
               )}
             </React.Fragment>
           )}
@@ -129,57 +186,3 @@ class ClipboardCopy extends React.Component {
     );
   }
 }
-
-ClipboardCopy.propTypes = {
-  /** Additional classes added to the clipboard copy container. */
-  className: PropTypes.string,
-  /** Tooltip message to display when hover the copy button */
-  hoverTip: PropTypes.string,
-  /** Tooltip message to display when clicking the copy button */
-  clickTip: PropTypes.string,
-  /** Custom flag to show that the input requires an associated id or aria-label. */
-  textAriaLabel: PropTypes.string,
-  /** Custom flag to show that the toggle button requires an associated id or aria-label. */
-  toggleAriaLabel: PropTypes.string,
-  /** Flag to show if the input is read only. */
-  isReadOnly: PropTypes.bool,
-  /** Adds Clipboard Copy variant styles. */
-  variant: PropTypes.oneOf(Object.keys(ClipboardCopyVariant)),
-  /** Copy button popover position. */
-  position: PropTypes.oneOf(Object.keys(TooltipPosition)),
-  /** Maximum width of the tooltip (default 150px). */
-  maxWidth: PropTypes.string,
-  /** Delay in ms before the tooltip disappears. */
-  exitDelay: PropTypes.number,
-  /** Delay in ms before the tooltip appears. */
-  entryDelay: PropTypes.number,
-  /** Delay in ms before the tooltip message switch to hover tip. */
-  switchDelay: PropTypes.number,
-  /** A function that is triggered on clicking the copy button. */
-  onCopy: PropTypes.func,
-  /** A function that is triggered on changing the text. */
-  onChange: PropTypes.func,
-  /** The text which is copied. */
-  children: PropTypes.node.isRequired,
-  /** Additional props are spread to the container <div>. */
-  '': PropTypes.any // eslint-disable-line react/require-default-props
-};
-
-ClipboardCopy.defaultProps = {
-  className: '',
-  hoverTip: 'Copy to clipboard',
-  clickTip: 'Successfully copied to clipboard!',
-  isReadOnly: false,
-  variant: ClipboardCopyVariant.inline,
-  position: TooltipPosition.top,
-  maxWidth: '150px',
-  exitDelay: 1600,
-  entryDelay: 100,
-  switchDelay: 2000,
-  onCopy: clipboardCopyFunc,
-  onChange: () => {},
-  textAriaLabel: 'Copyable input',
-  toggleAriaLabel: 'Show content'
-};
-
-export default ClipboardCopy;
diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/CopyButton.test.js b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyButton.test.tsx
similarity index 65%
rename from packages/patternfly-4/react-core/src/components/ClipboardCopy/CopyButton.test.js
rename to packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyButton.test.tsx
index 4a429b538db..f8458f87210 100644
--- a/packages/patternfly-4/react-core/src/components/ClipboardCopy/CopyButton.test.js
+++ b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyButton.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import CopyButton from './CopyButton';
+import { ClipboardCopyButton } from './ClipboardCopyButton';
 
 const props = {
   id: 'my-id',
@@ -8,23 +8,23 @@ const props = {
   className: 'fancy-copy-button',
   onClick: jest.fn(),
   exitDelay: 1000,
-  entryDelay: 2000,
+  entryDelay: 2000,  
   maxWidth: '500px',
-  position: 'right',
+  position: 'right' as 'right',
   'aria-label': 'click this button to copy text'
 };
 
 test('copy button render', () => {
-  const view = shallow(<CopyButton {...props}>Copy Me</CopyButton>);
+  const view = shallow(<ClipboardCopyButton {...props}>Copy Me</ClipboardCopyButton>);
   expect(view).toMatchSnapshot();
 });
 
 test('copy button onClick', () => {
   const onclick = jest.fn();
   const view = shallow(
-    <CopyButton {...props} onClick={onclick}>
+    <ClipboardCopyButton {...props} onClick={onclick}>
       Copy to Clipboard
-    </CopyButton>
+    </ClipboardCopyButton>
   );
   view.find('button').simulate('click');
   expect(onclick).toBeCalled();
diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyButton.tsx b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyButton.tsx
new file mode 100644
index 00000000000..23c3bbc14df
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyButton.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
+import { css } from '@patternfly/react-styles';
+import { CopyIcon } from '@patternfly/react-icons';
+import { Tooltip } from '../Tooltip';
+
+export interface ClipboardCopyButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+  onClick: (event: React.MouseEvent) => void; 
+  children: React.ReactNode; 
+  id: string; 
+  textId: string; 
+  className?: string; 
+  exitDelay?: number; 
+  entryDelay?: number; 
+  maxWidth?: string; 
+  position?: 'top' | 'bottom' | 'left' | 'right'; 
+  'aria-label'?: string; 
+}
+
+export const ClipboardCopyButton: React.FunctionComponent<ClipboardCopyButtonProps> = ({
+  onClick,
+  className = '',
+  exitDelay = 100,
+  entryDelay = 100,
+  maxWidth = '100px',
+  position = 'top',
+  'aria-label': ariaLabel = 'Copyable input',
+  id, 
+  textId,
+  children,
+  ...props
+}: ClipboardCopyButtonProps) => (
+  <Tooltip
+    trigger="mouseenter focus click"
+    exitDelay={exitDelay}
+    entryDelay={entryDelay}
+    maxWidth={maxWidth}
+    position={position}
+    content={<div>{children}</div>}
+  >
+    <button
+      onClick={onClick}
+      className={css(styles.clipboardCopyGroupCopy, className)}
+      aria-label={ariaLabel}
+      id={id}
+      aria-labelledby={`${id} ${textId}`}
+      {...props}
+    >
+      <CopyIcon />
+    </button>
+  </Tooltip>
+);
diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ExpandedContent.test.js b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyExpanded.test.tsx
similarity index 65%
rename from packages/patternfly-4/react-core/src/components/ClipboardCopy/ExpandedContent.test.js
rename to packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyExpanded.test.tsx
index cf473f53323..9e81d9f36c8 100644
--- a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ExpandedContent.test.js
+++ b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyExpanded.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import ExpandedContent from './ExpandedContent';
+import { ClipboardCopyExpanded } from './ClipboardCopyExpanded';
 
 const props = {
   className: 'class-1',
@@ -9,9 +9,9 @@ const props = {
 
 test('expanded content render', () => {
   const view = shallow(
-    <ExpandedContent {...props} onChange={() => {}}>
+    <ClipboardCopyExpanded {...props}>
       This is my text
-    </ExpandedContent>
+    </ClipboardCopyExpanded>
   );
   expect(view).toMatchSnapshot();
 });
diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx
new file mode 100644
index 00000000000..b206a570976
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyExpanded.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
+import { css } from '@patternfly/react-styles';
+import { ClipboardCopyProps } from './ClipboardCopy';
+import { Omit } from '../../helpers/typeUtils';
+
+export interface ClipboardCopyExpandedProps extends Omit<ClipboardCopyProps, 'onChange'> {
+  className?: string; 
+  children: React.ReactNode; 
+  onChange?: (text: string, e: React.FormEvent<HTMLDivElement>) => void; 
+}
+
+export class ClipboardCopyExpanded extends React.Component<ClipboardCopyExpandedProps> {
+  contentRef = React.createRef<HTMLDivElement>();
+  constructor(props: any) {
+    super(props);
+  }
+
+  static defaultProps = {
+    onChange: (): any => undefined, 
+    className: ''
+  }
+
+  componentDidMount() {
+    if (this.contentRef.current) {
+      this.contentRef.current.innerText = this.props.children as string;
+    }
+  }
+
+  render() {
+    const { className, children, onChange, ...props } = this.props;
+    return (
+      <div
+        suppressContentEditableWarning
+        ref={this.contentRef}
+        className={css(styles.clipboardCopyExpandableContent, className)}
+        onInput={ (e: any) => onChange(e.target.innerText, e)}
+        contentEditable
+        {...props}
+      />
+    );
+  }
+}
diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ToggleButton.test.js b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.test.tsx
similarity index 63%
rename from packages/patternfly-4/react-core/src/components/ClipboardCopy/ToggleButton.test.js
rename to packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.test.tsx
index 48ab79ea2cc..e86a967b9fe 100644
--- a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ToggleButton.test.js
+++ b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import ToggleButton from './ToggleButton';
+import { ClipboardCopyToggle } from './ClipboardCopyToggle';
 
 const props = {
   id: 'my-id',
@@ -13,20 +13,20 @@ const props = {
 
 test('toggle button render', () => {
   const desc = 'toggle content';
-  const view = shallow(<ToggleButton {...props} aria-label={desc} />);
+  const view = shallow(<ClipboardCopyToggle {...props} aria-label={desc} />);
   expect(view).toMatchSnapshot();
 });
 
 test('toggle button onClick', () => {
   const onclick = jest.fn();
-  const view = shallow(<ToggleButton {...props} onClick={onclick} />);
+  const view = shallow(<ClipboardCopyToggle {...props} onClick={onclick} />);
   view.find('button').simulate('click');
   expect(onclick).toBeCalled();
 });
 
 test('toggle button is on expanded mode', () => {
-  let view = shallow(<ToggleButton {...props} isExpanded />);
+  let view = shallow(<ClipboardCopyToggle {...props} isExpanded />);
   expect(view.props()['aria-expanded']).toBe(true);
-  view = shallow(<ToggleButton {...props} isExpanded={false} />);
+  view = shallow(<ClipboardCopyToggle {...props} isExpanded={false} />);
   expect(view.props()['aria-expanded']).toBe(false);
 });
diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx
new file mode 100644
index 00000000000..20a58164d70
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
+import { css } from '@patternfly/react-styles';
+import { AngleRightIcon } from '@patternfly/react-icons';
+
+export interface ClipboardCopyToggleProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+  onClick: (event: React.MouseEvent) => void; 
+  id: string; 
+  textId: string; 
+  contentId: string; 
+  isExpanded?: boolean; 
+  className?: string; 
+}
+
+export const ClipboardCopyToggle: React.FunctionComponent<ClipboardCopyToggleProps> = ({
+  onClick, 
+  className = '',
+  id, 
+  textId, 
+  contentId,
+  isExpanded = false, 
+  ...props
+}: ClipboardCopyToggleProps) => {
+  return (
+  <button
+      onClick={onClick}
+      className={css(styles.clipboardCopyGroupToggle, className)}
+      id={id}
+      aria-labelledby={`${id} ${textId}`}
+      aria-controls={`${contentId}`}
+      aria-expanded={isExpanded}
+      {...props}
+    >
+      <AngleRightIcon aria-hidden="true" className={css(styles.clipboardCopyGroupToggleIcon)} />
+    </button>
+  )
+};
diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/CopyButton.js b/packages/patternfly-4/react-core/src/components/ClipboardCopy/CopyButton.js
deleted file mode 100644
index cac3c3ad11f..00000000000
--- a/packages/patternfly-4/react-core/src/components/ClipboardCopy/CopyButton.js
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from 'react';
-import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
-import { css } from '@patternfly/react-styles';
-import { CopyIcon } from '@patternfly/react-icons';
-import PropTypes from 'prop-types';
-import { Tooltip, TooltipPosition } from '../Tooltip';
-
-const CopyButton = ({
-  className,
-  onClick,
-  exitDelay,
-  entryDelay,
-  maxWidth,
-  position,
-  children,
-  'aria-label': ariaLabel,
-  id,
-  textId,
-  ...props
-}) => (
-  <Tooltip
-    trigger="mouseenter focus click"
-    exitDelay={exitDelay}
-    entryDelay={entryDelay}
-    maxWidth={maxWidth}
-    position={position}
-    content={<div>{children}</div>}
-  >
-    <button
-      onClick={onClick}
-      className={css(styles.clipboardCopyGroupCopy, className)}
-      aria-label={ariaLabel}
-      id={id}
-      aria-labelledby={`${id} ${textId}`}
-      {...props}
-    >
-      <CopyIcon />
-    </button>
-  </Tooltip>
-);
-
-CopyButton.propTypes = {
-  onClick: PropTypes.func.isRequired,
-  children: PropTypes.node.isRequired,
-  id: PropTypes.string.isRequired,
-  textId: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  exitDelay: PropTypes.number,
-  entryDelay: PropTypes.number,
-  maxWidth: PropTypes.string,
-  position: PropTypes.oneOf(Object.keys(TooltipPosition)),
-  'aria-label': PropTypes.string
-};
-
-CopyButton.defaultProps = {
-  className: '',
-  exitDelay: 100,
-  entryDelay: 100,
-  maxWidth: '100px',
-  position: 'top',
-  'aria-label': 'Copyable input'
-};
-
-export default CopyButton;
diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ExpandedContent.js b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ExpandedContent.js
deleted file mode 100644
index d6cd93f02a3..00000000000
--- a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ExpandedContent.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
-import { css } from '@patternfly/react-styles';
-import PropTypes from 'prop-types';
-
-class ExpandedContent extends React.Component {
-  constructor(props) {
-    super(props);
-    this.contentRef = React.createRef();
-  }
-
-  componentDidMount() {
-    if (this.contentRef.current) {
-      this.contentRef.current.innerText = this.props.children;
-    }
-  }
-
-  render() {
-    const { className, children, onChange, ...props } = this.props;
-    return (
-      <div
-        suppressContentEditableWarning="true"
-        ref={this.contentRef}
-        className={css(styles.clipboardCopyExpandableContent, className)}
-        onInput={e => onChange(e.target.innerText, e)}
-        contentEditable="true"
-        {...props}
-      />
-    );
-  }
-}
-
-ExpandedContent.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  onChange: PropTypes.func.isRequired
-};
-
-ExpandedContent.defaultProps = {
-  className: ''
-};
-
-export default ExpandedContent;
diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ToggleButton.js b/packages/patternfly-4/react-core/src/components/ClipboardCopy/ToggleButton.js
deleted file mode 100644
index d76066bd6b2..00000000000
--- a/packages/patternfly-4/react-core/src/components/ClipboardCopy/ToggleButton.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
-import { css } from '@patternfly/react-styles';
-import { AngleRightIcon } from '@patternfly/react-icons';
-import PropTypes from 'prop-types';
-
-const ToggleButton = ({ isExpanded, onClick, className, id, textId, contentId, ...props }) => (
-  <button
-    onClick={onClick}
-    className={css(styles.clipboardCopyGroupToggle, className)}
-    id={id}
-    aria-labelledby={`${id} ${textId}`}
-    aria-controls={`${contentId}`}
-    aria-expanded={isExpanded}
-    {...props}
-  >
-    <AngleRightIcon aria-hidden="true" className={css(styles.clipboardCopyGroupToggleIcon)} />
-  </button>
-);
-
-ToggleButton.propTypes = {
-  onClick: PropTypes.func.isRequired,
-  id: PropTypes.string.isRequired,
-  textId: PropTypes.string.isRequired,
-  contentId: PropTypes.string.isRequired,
-  isExpanded: PropTypes.bool,
-  className: PropTypes.string
-};
-
-ToggleButton.defaultProps = {
-  isExpanded: false,
-  className: ''
-};
-
-export default ToggleButton;
diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/__snapshots__/CopyButton.test.js.snap b/packages/patternfly-4/react-core/src/components/ClipboardCopy/__snapshots__/ClipboardCopyButton.test.tsx.snap
similarity index 100%
rename from packages/patternfly-4/react-core/src/components/ClipboardCopy/__snapshots__/CopyButton.test.js.snap
rename to packages/patternfly-4/react-core/src/components/ClipboardCopy/__snapshots__/ClipboardCopyButton.test.tsx.snap
diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/__snapshots__/ExpandedContent.test.js.snap b/packages/patternfly-4/react-core/src/components/ClipboardCopy/__snapshots__/ClipboardCopyExpanded.test.tsx.snap
similarity index 74%
rename from packages/patternfly-4/react-core/src/components/ClipboardCopy/__snapshots__/ExpandedContent.test.js.snap
rename to packages/patternfly-4/react-core/src/components/ClipboardCopy/__snapshots__/ClipboardCopyExpanded.test.tsx.snap
index f14b0416d8a..18a04b037a5 100644
--- a/packages/patternfly-4/react-core/src/components/ClipboardCopy/__snapshots__/ExpandedContent.test.js.snap
+++ b/packages/patternfly-4/react-core/src/components/ClipboardCopy/__snapshots__/ClipboardCopyExpanded.test.tsx.snap
@@ -3,9 +3,9 @@
 exports[`expanded content render 1`] = `
 <div
   className="pf-c-clipboard-copy__expandable-content class-1"
-  contentEditable="true"
+  contentEditable={true}
   id="id-1"
   onInput={[Function]}
-  suppressContentEditableWarning="true"
+  suppressContentEditableWarning={true}
 />
 `;
diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/__snapshots__/ToggleButton.test.js.snap b/packages/patternfly-4/react-core/src/components/ClipboardCopy/__snapshots__/ClipboardCopyToggle.test.tsx.snap
similarity index 100%
rename from packages/patternfly-4/react-core/src/components/ClipboardCopy/__snapshots__/ToggleButton.test.js.snap
rename to packages/patternfly-4/react-core/src/components/ClipboardCopy/__snapshots__/ClipboardCopyToggle.test.tsx.snap
diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/index.d.ts b/packages/patternfly-4/react-core/src/components/ClipboardCopy/index.d.ts
deleted file mode 100644
index b23494ba99b..00000000000
--- a/packages/patternfly-4/react-core/src/components/ClipboardCopy/index.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as ClipboardCopy, ClipboardCopyVariant, ClipboardCopyProps } from './ClipboardCopy';
diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/index.js b/packages/patternfly-4/react-core/src/components/ClipboardCopy/index.js
deleted file mode 100644
index 6c689e64223..00000000000
--- a/packages/patternfly-4/react-core/src/components/ClipboardCopy/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default as ClipboardCopy, ClipboardCopyVariant } from './ClipboardCopy';
diff --git a/packages/patternfly-4/react-core/src/components/ClipboardCopy/index.ts b/packages/patternfly-4/react-core/src/components/ClipboardCopy/index.ts
new file mode 100644
index 00000000000..01f1c31cc79
--- /dev/null
+++ b/packages/patternfly-4/react-core/src/components/ClipboardCopy/index.ts
@@ -0,0 +1 @@
+export * from './ClipboardCopy';
diff --git a/packages/patternfly-4/react-core/src/components/Tooltip/Tooltip.d.ts b/packages/patternfly-4/react-core/src/components/Tooltip/Tooltip.d.ts
index 76269e0417b..1adcd5e16d1 100644
--- a/packages/patternfly-4/react-core/src/components/Tooltip/Tooltip.d.ts
+++ b/packages/patternfly-4/react-core/src/components/Tooltip/Tooltip.d.ts
@@ -31,9 +31,7 @@ export interface TooltipProps extends Omit<HTMLProps<HTMLDivElement>, 'content'
   /** z-index of the tooltip */
   zIndex?: number;
   /** Size of the tooltip */
-  maxWidth?: '12.5rem';
-  /** Distance of the tooltip to its target, defaults to 15 */
-  distance?: number;
+  maxWidth?: string;
 }
 
 declare const Tooltip: FunctionComponent<TooltipProps>;
diff --git a/packages/patternfly-4/react-integration/cypress/integration/clipboardcopy.spec.ts b/packages/patternfly-4/react-integration/cypress/integration/clipboardcopy.spec.ts
new file mode 100644
index 00000000000..3c5290e1dc9
--- /dev/null
+++ b/packages/patternfly-4/react-integration/cypress/integration/clipboardcopy.spec.ts
@@ -0,0 +1,16 @@
+describe('Chip Group Demo Test', () => {
+  it('Navigate to demo section', () => {
+    cy.visit('http://localhost:3000/');
+    cy.get('#clipboard-copy-demo-nav-item-link').click(); 
+    cy.url().should('eq', 'http://localhost:3000/clipboard-copy-demo-nav-link');
+  });
+
+  it('Verify form input', () => {
+    cy.get('input').should('have.class', 'pf-c-form-control');
+  });
+  
+  it('Verify content expands', () => {
+    cy.get('.pf-c-clipboard-copy__group-toggle').click(); 
+    cy.get('.pf-c-clipboard-copy').should('have.class', 'pf-m-expanded');
+  });
+});
\ No newline at end of file
diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/Demos.ts b/packages/patternfly-4/react-integration/demo-app-ts/src/Demos.ts
index 625f8db9c78..0a72718a7aa 100644
--- a/packages/patternfly-4/react-integration/demo-app-ts/src/Demos.ts
+++ b/packages/patternfly-4/react-integration/demo-app-ts/src/Demos.ts
@@ -90,6 +90,11 @@ export const Demos: DemoInterface[] = [
     name: 'ContextSelector Demo', 
     componentType: Examples.ContextSelectorDemo
   },
+  {
+    id: 'clipboard-copy-demo', 
+    name: 'ClipboardCopy Demo',
+    componentType: Examples.ClipboardCopyDemo
+  },
   {
     id: 'empty-state-demo',
     name: 'Empty State Demo',
diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/ClipboardCopyDemo/ClipboardCopyDemo.tsx b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/ClipboardCopyDemo/ClipboardCopyDemo.tsx
new file mode 100644
index 00000000000..720d21293dc
--- /dev/null
+++ b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/ClipboardCopyDemo/ClipboardCopyDemo.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
+
+export class ClipboardCopyDemo extends React.Component {
+  render() {
+    return (
+      <ClipboardCopy variant={ClipboardCopyVariant.expansion}>
+        Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting
+        expansion.
+      </ClipboardCopy>
+    )
+  }
+}
diff --git a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts
index 807be131161..059f0f28b71 100644
--- a/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts
+++ b/packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts
@@ -12,6 +12,8 @@ export * from './ButtonDemo/ButtonDemo';
 export * from './CardDemo/CardDemo';
 export * from './CheckboxDemo/CheckboxDemo';
 export * from './ChipGroupDemo/ChipGroupDemo';
+export * from './ContextSelectorDemo/ContextSelectorDemo'; 
+export * from './ClipboardCopyDemo/ClipboardCopyDemo'; 
 export * from './ContextSelectorDemo/ContextSelectorDemo';
 export * from './DataListDemo/DataListDemo';
 export * from './EmptyStateDemo/EmptyStateDemo';