@patternfly/react-core 4.264.0 → 4.265.0

package/package.json

@@ -1,10 +1,17 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.264.0",
+  "version": "4.265.0",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
+  "exports": {
+    ".": "./dist/esm/index.js",
+    "./dist/*": "./dist/*",
+    "./next": "./dist/esm/next",
+    "./deprecated": "./dist/esm/deprecated",
+    "./package.json": "./package.json"
+  },
   "typesVersions": {
     "*": {
       "next": [
@@ -44,18 +51,18 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.93.0",
-    "@patternfly/react-styles": "^4.92.0",
-    "@patternfly/react-tokens": "^4.94.0",
+    "@patternfly/react-icons": "^4.93.1",
+    "@patternfly/react-styles": "^4.92.1",
+    "@patternfly/react-tokens": "^4.94.1",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.221.2",
+    "@patternfly/patternfly": "4.221.3",
     "@rollup/plugin-commonjs": "^21.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
@@ -70,5 +77,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "e1f95ce96852165dd4d102cd87c6b49288f01eff"
+  "gitHead": "47c6127c70191349261aec122b56e6ca61fa0c99"
 }

package/src/components/Badge/Badge.tsx

@@ -3,6 +3,8 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Badge/badge';
 
 export interface BadgeProps extends React.HTMLProps<HTMLSpanElement> {
+  /** Text announced by screen readers to indicate the current content/status of the badge. */
+  screenReaderText?: string;
   /**  Adds styling to the badge to indicate it has been read */
   isRead?: boolean;
   /** content rendered inside the Badge */
@@ -15,6 +17,7 @@ export const Badge: React.FunctionComponent<BadgeProps> = ({
   isRead = false,
   className = '',
   children = '',
+  screenReaderText,
   ...props
 }: BadgeProps) => (
   <span
@@ -22,6 +25,7 @@ export const Badge: React.FunctionComponent<BadgeProps> = ({
     className={css(styles.badge, (isRead ? styles.modifiers.read : styles.modifiers.unread) as any, className)}
   >
     {children}
+    {screenReaderText && <span className="pf-screen-reader">{screenReaderText}</span>}
   </span>
 );
 Badge.displayName = 'Badge';

package/src/components/Badge/__tests__/Badge.test.tsx

@@ -31,6 +31,16 @@ test('Renders with class name pf-m-read when isRead prop is true', () => {
   expect(screen.getByText('Test')).toHaveClass('pf-m-read');
 });
 
+test('Does not render pf-screen-reader class by default', () => {
+  render(<Badge>Test</Badge>);
+  expect(screen.getByText('Test')).not.toContainHTML('<span class="pf-screen-reader"></span>');
+});
+
+test('Renders screenReaderText passed via prop', () => {
+  render(<Badge screenReaderText="Custom screen reader text">Test</Badge>);
+  expect(screen.getByText('Custom screen reader text')).toBeInTheDocument();
+});
+
 test('Renders with custom class name when className prop is provided', () => {
   render(<Badge className="custom-class">Test</Badge>);
   expect(screen.getByText('Test')).toHaveClass('custom-class');

package/src/components/Badge/examples/BadgeUnread.tsx

@@ -3,6 +3,17 @@ import { Badge } from '@patternfly/react-core';
 
 export const BadgeUnread: React.FunctionComponent = () => (
   <React.Fragment>
-    <Badge key={1}>7</Badge> <Badge key={2}>24</Badge> <Badge key={3}>240</Badge> <Badge key={4}>999+</Badge>
+    <Badge key={1} screenReaderText="Unread Messages">
+      7
+    </Badge>
+    <Badge key={2} screenReaderText="Unread Messages">
+      24
+    </Badge>
+    <Badge key={3} screenReaderText="Unread Messages">
+      240
+    </Badge>
+    <Badge key={4} screenReaderText="Unread Messages">
+      999+
+    </Badge>
   </React.Fragment>
 );

package/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx

@@ -26,7 +26,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
   const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
   const [menuHeights, setMenuHeights] = React.useState<any>({});
   const [activeMenu, setActiveMenu] = React.useState<string>('breadcrumbs-rootMenu');
-  const [breadcrumb, setBreadcrumb] = React.useState<JSX.Element>();
+  const [breadcrumb, setBreadcrumb] = React.useState<JSX.Element | null>();
   const [withMaxMenuHeight, setWithMaxMenuHeight] = React.useState(false);
 
   const onToggle = (isOpen: boolean, key: string) => {
@@ -37,6 +37,12 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
       case 'label':
         setBreadcrumb(labelsBreadcrumb(isOpen));
         break;
+      case 'pause-app':
+        setBreadcrumb(pauseRolloutsAppGrpBreadcrumb(isOpen));
+        break;
+      case 'pause-label':
+        setBreadcrumb(pauseRolloutsLabelsBreadcrumb(isOpen));
+        break;
       default:
         break;
     }
@@ -46,14 +52,17 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     setWithMaxMenuHeight(checked);
   };
 
-  const drillOut = (toMenuId: string, fromPathId: string, _breadcrumb: JSX.Element | null) => {
-    const indexOfMenuId = menuDrilledIn.indexOf(toMenuId);
-    const menuDrilledInSansLast = menuDrilledIn.slice(0, indexOfMenuId);
-    const indexOfMenuIdPath = drilldownPath.indexOf(fromPathId);
-    const pathSansLast = drilldownPath.slice(0, indexOfMenuIdPath);
-    setMenuDrilledIn(menuDrilledInSansLast);
-    setDrilldownPath(pathSansLast);
+  const drillOut = (toMenuId: string, fromPathId: string, breadcrumb: JSX.Element | null) => {
+    setMenuDrilledIn(prevMenuDrilledIn => {
+      const indexOfMenuId = prevMenuDrilledIn.indexOf(toMenuId);
+      return prevMenuDrilledIn.slice(0, indexOfMenuId);
+    });
+    setDrilldownPath(prevDrilldownPath => {
+      const indexOfMenuIdPath = prevDrilldownPath.indexOf(fromPathId);
+      return prevDrilldownPath.slice(0, indexOfMenuIdPath);
+    });
     setActiveMenu(toMenuId);
+    setBreadcrumb(breadcrumb);
   };
 
   const setHeight = (menuId: string, height: number) => {
@@ -146,31 +155,59 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
     </Breadcrumb>
   );
 
-  const pauseRolloutsAppGrpBreadcrumb = (
+  const pauseRolloutsAppGrpBreadcrumb = (isOpen: boolean) => (
     <Breadcrumb>
       <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
         Root
       </BreadcrumbItem>
-      <BreadcrumbItem
-        component="button"
-        onClick={() => drillOut('breadcrumbs-drilldownMenuPause', 'group:app_grouping', pauseRolloutsBreadcrumb)}
-      >
-        Pause rollouts
+      <BreadcrumbItem isDropdown>
+        <Dropdown
+          toggle={
+            <BadgeToggle id="toggle-id" onToggle={open => onToggle(open, 'pause-app')}>
+              1
+            </BadgeToggle>
+          }
+          isOpen={isOpen}
+          dropdownItems={[
+            <DropdownItem
+              key="dropdown-pause"
+              component="button"
+              icon={<AngleLeftIcon />}
+              onClick={() => drillOut('breadcrumbs-drilldownMenuPause', 'group:app_grouping', pauseRolloutsBreadcrumb)}
+            >
+              Pause rollouts
+            </DropdownItem>
+          ]}
+        />
       </BreadcrumbItem>
       <BreadcrumbHeading component="button">Application Grouping</BreadcrumbHeading>
     </Breadcrumb>
   );
 
-  const pauseRolloutsLabelsBreadcrumb = (
+  const pauseRolloutsLabelsBreadcrumb = (isOpen: boolean) => (
     <Breadcrumb>
       <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
         Root
       </BreadcrumbItem>
-      <BreadcrumbItem
-        component="button"
-        onClick={() => drillOut('breadcrumbs-drilldownMenuPause', 'group:labels', pauseRolloutsBreadcrumb)}
-      >
-        Pause rollouts
+      <BreadcrumbItem isDropdown>
+        <Dropdown
+          toggle={
+            <BadgeToggle id="toggle-id" onToggle={open => onToggle(open, 'pause-label')}>
+              1
+            </BadgeToggle>
+          }
+          isOpen={isOpen}
+          dropdownItems={[
+            <DropdownItem
+              key="dropdown-pause"
+              component="button"
+              icon={<AngleLeftIcon />}
+              onClick={() => drillOut('breadcrumbs-drilldownMenuPause', 'group:labels', pauseRolloutsBreadcrumb)}
+            >
+              Pause rollouts
+            </DropdownItem>
+          ]}
+        />
       </BreadcrumbItem>
       <BreadcrumbHeading component="button">Labels</BreadcrumbHeading>
     </Breadcrumb>
@@ -205,6 +242,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
         onDrillIn={drillIn}
         onDrillOut={() => drillOut}
         onGetMenuHeight={setHeight}
+        isScrollable={withMaxMenuHeight}
       >
         {breadcrumb && (
           <>
@@ -270,7 +308,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
                     itemId="group:app_grouping"
                     description="Groups A-C"
                     direction="down"
-                    onClick={() => setBreadcrumb(pauseRolloutsAppGrpBreadcrumb)}
+                    onClick={() => setBreadcrumb(pauseRolloutsAppGrpBreadcrumb(false))}
                     drilldownMenu={
                       <DrilldownMenu id="breadcrumbs-drilldownMenuGrouping">
                         <MenuItem itemId="group_a">Group A</MenuItem>
@@ -285,7 +323,7 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
                   <MenuItem
                     itemId="group:labels"
                     direction="down"
-                    onClick={() => setBreadcrumb(pauseRolloutsLabelsBreadcrumb)}
+                    onClick={() => setBreadcrumb(pauseRolloutsLabelsBreadcrumb(false))}
                     drilldownMenu={
                       <DrilldownMenu id="breadcrumbs-drilldownMenuLabels">
                         <MenuItem itemId="label_1">Label 1</MenuItem>

package/src/components/TimePicker/TimePicker.tsx

@@ -426,16 +426,6 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     });
   };
 
-  onBlur = (event: React.FocusEvent<HTMLInputElement>) => {
-    const { timeRegex } = this.state;
-    const { delimiter, is24Hour, includeSeconds } = this.props;
-    const time = parseTime(event.currentTarget.value, timeRegex, delimiter, !is24Hour, includeSeconds);
-
-    this.setState({
-      isInvalid: !this.isValid(time)
-    });
-  };
-
   render() {
     const {
       'aria-label': ariaLabel,
@@ -507,7 +497,6 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
         iconVariant="clock"
         onClick={this.onInputClick}
         onChange={this.onInputChange}
-        onBlur={this.onBlur}
         autoComplete="off"
         isDisabled={isDisabled}
         ref={this.inputRef}

package/src/components/Tooltip/examples/Tooltip.md

@@ -13,68 +13,17 @@ import './TooltipExamples.css';
 
 ### Basic
 
-```js
-import React from 'react';
-import { Tooltip } from '@patternfly/react-core';
-
-<div style={{ margin: '100px' }}>
-  <Tooltip
-    content={
-      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
-    }
-  >
-    <span tabIndex="0" style={{ border: '1px dashed' }}>
-      I have a tooltip!
-    </span>
-  </Tooltip>
-</div>;
+```ts file="./TooltipBasic.tsx"
 ```
 
 ### Tooltip react ref
 
-```js
-import React from 'react';
-import { Tooltip } from '@patternfly/react-core';
-
-TooltipReactRef = () => {
-  const tooltipRef = React.useRef();
-  return (
-    <div style={{ margin: '100px' }}>
-      <button aria-describedby="tooltip-ref1" ref={tooltipRef}>
-        Tooltip attached via react ref
-      </button>
-      <Tooltip
-        id="tooltip-ref1"
-        content={
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
-          </div>
-        }
-        reference={tooltipRef}
-      />
-    </div>
-  );
-};
+```ts file="./TooltipReactRef.tsx"
 ```
 
 ### Tooltip selector ref
 
-```js
-import React from 'react';
-import { Tooltip } from '@patternfly/react-core';
-
-<div style={{ margin: '100px' }}>
-  <button aria-describedby="tooltip-ref2" id="tooltip-selector">
-    Tooltip attached via selector ref
-  </button>
-  <Tooltip
-    id="tooltip-ref2"
-    content={
-      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.</div>
-    }
-    reference={() => document.getElementById('tooltip-selector')}
-  />
-</div>;
+```ts file="./TooltipSelectorRef.tsx"
 ```
 
 ### On icon with dynamic content
@@ -83,239 +32,10 @@ When the tooltip is used as a wrapper and its content will dynamically update, t
 
 When using a React or selector ref with a tooltip that has dynamic content, the `aria` and `aria-live` props do not need to be manually passed in.
 
-```js
-import React from 'react';
-import { Tooltip, Button } from '@patternfly/react-core';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
-
-IconExample = () => {
-  const [showSuccessContent, setShowSuccessContent] = React.useState(false);
-  const copyText = 'Copy to clipboard';
-  const doneCopyText = 'Successfully copied to clipboard!';
-  const [content, setContent] = React.useState(copyText);
-  return (
-    <div style={{ margin: '100px' }}>
-      <Tooltip aria="none" aria-live="polite" content={showSuccessContent ? doneCopyText : copyText}>
-        <Button
-          aria-label="Clipboard"
-          variant="plain"
-          id="tt-ref"
-          onClick={() => setShowSuccessContent(!showSuccessContent)}
-        >
-          <CopyIcon />
-        </Button>
-      </Tooltip>
-    </div>
-  );
-};
+```ts file="./TooltipIcon.tsx"
 ```
 
 ### Options
 
-```js
-import React from 'react';
-import { Button, Tooltip, Checkbox, Select, SelectOption, TextInput } from '@patternfly/react-core';
-
-OptionsTooltip = () => {
-  const [trigger, setTrigger] = React.useState(['mouseenter', 'focus']);
-  const [isVisible, setIsVisible] = React.useState(true);
-  const [contentLeftAligned, setContentLeftAligned] = React.useState(false);
-  const [enableFlip, setEnableFlip] = React.useState(true);
-  const [position, setPosition] = React.useState('top');
-  const [positionSelectOpen, setPositionSelectOpen] = React.useState(false);
-  const [flipSelectOpen, setFlipSelectOpen] = React.useState(false);
-  const [flipBehavior, setFlipBehavior] = React.useState('flip');
-  const [entryDelayInput, setEntryDelayInput] = React.useState(0);
-  const [exitDelayInput, setExitDelayInput] = React.useState(0);
-  const [animationDuration, setAnimationDuration] = React.useState(300);
-  const tipBoxRef = React.useRef(null);
-
-  const scrollToRef = ref => {
-    if (ref && ref.current) {
-      ref.current.scrollTop = 400;
-      ref.current.scrollLeft = 300;
-    }
-  };
-
-  React.useEffect(() => {
-    scrollToRef(tipBoxRef);
-  }, []);
-
-  return (
-    <>
-      <div>
-        <div style={{ border: '1px solid' }}>
-          <Checkbox
-            label="trigger: mouseenter"
-            isChecked={trigger.includes('mouseenter')}
-            onChange={checked => {
-              let updatedTrigger;
-              checked && (updatedTrigger = trigger.concat('mouseenter'));
-              !checked && (updatedTrigger = trigger.filter(t => t !== 'mouseenter'));
-              setIsVisible(false);
-              setTrigger(updatedTrigger);
-            }}
-            aria-label="trigger: mouseenter"
-            id="trigger_mouseenter"
-          />
-          <Checkbox
-            label="trigger: focus"
-            isChecked={trigger.includes('focus')}
-            onChange={checked => {
-              let updatedTrigger;
-              checked && (updatedTrigger = trigger.concat('focus'));
-              !checked && (updatedTrigger = trigger.filter(t => t !== 'focus'));
-              setIsVisible(false);
-              setTrigger(updatedTrigger);
-            }}
-            aria-label="trigger: focus"
-            id="trigger_focus"
-          />
-          <Checkbox
-            label="trigger: click"
-            isChecked={trigger.includes('click')}
-            onChange={checked => {
-              let updatedTrigger;
-              checked && (updatedTrigger = trigger.concat('click'));
-              !checked && (updatedTrigger = trigger.filter(t => t !== 'click'));
-              setIsVisible(false);
-              setTimeout(() => setTrigger(updatedTrigger));
-            }}
-            aria-label="trigger: click"
-            id="trigger_click"
-          />
-          <Checkbox
-            label="trigger: manual"
-            isChecked={trigger.includes('manual')}
-            onChange={checked => {
-              let updatedTrigger;
-              checked && (updatedTrigger = trigger.concat('manual'));
-              !checked && (updatedTrigger = trigger.filter(t => t !== 'manual'));
-              setIsVisible(false);
-              setTrigger(updatedTrigger);
-            }}
-            aria-label="trigger: manual"
-            id="trigger_manual"
-          />
-        </div>
-        <div style={{ border: '1px solid' }}>
-          <Checkbox
-            label="content left-aligned"
-            isChecked={contentLeftAligned}
-            onChange={checked => setContentLeftAligned(checked)}
-            aria-label="content left-aligned"
-            id="content_left_aligned"
-          />
-        </div>
-        <div style={{ border: '1px solid' }}>
-          <Checkbox
-            label="enableFlip"
-            isChecked={enableFlip}
-            onChange={checked => setEnableFlip(checked)}
-            aria-label="enableFlip"
-            id="enable_flip"
-          />
-        </div>
-        <div style={{ border: '1px solid' }}>
-          position (will flip if enableFlip is true). The 'auto' position requires enableFlip to be set to true.
-          <Select
-            onToggle={() => setPositionSelectOpen(!positionSelectOpen)}
-            onSelect={(event, selection) => {
-              setPosition(selection);
-              setPositionSelectOpen(false);
-            }}
-            isOpen={positionSelectOpen}
-            selections={position}
-            menuAppendTo={() => document.body}
-          >
-            <SelectOption value="auto" />
-            <SelectOption value="top" />
-            <SelectOption value="bottom" />
-            <SelectOption value="left" />
-            <SelectOption value="right" />
-            <SelectOption value="top-start" />
-            <SelectOption value="top-end" />
-            <SelectOption value="bottom-start" />
-            <SelectOption value="bottom-end" />
-            <SelectOption value="left-start" />
-            <SelectOption value="left-end" />
-            <SelectOption value="right-start" />
-            <SelectOption value="right-end" />
-          </Select>
-        </div>
-        <div style={{ border: '1px solid' }}>
-          <Checkbox
-            label="isVisible (also set trigger to only manual to programmatically control it)"
-            isChecked={isVisible}
-            onChange={checked => setIsVisible(checked)}
-            aria-label="isVisible"
-            id="is_visible"
-          />
-        </div>
-        <div style={{ border: '1px solid' }}>
-          Entry delay (ms){' '}
-          <TextInput
-            value={entryDelayInput}
-            type="number"
-            onChange={val => setEntryDelayInput(val)}
-            aria-label="entry delay"
-          />
-          Exit delay (ms) <TextInput
-            value={exitDelayInput}
-            type="number"
-            onChange={val => setExitDelayInput(val)}
-            aria-label="exit delay"
-          />
-          Animation duration (ms){' '}
-          <TextInput
-            value={animationDuration}
-            type="number"
-            onChange={val => setAnimationDuration(val)}
-            aria-label="animation duration"
-          />
-        </div>
-        <div style={{ border: '1px solid' }}>
-          flip behavior examples (enableFlip has to be true). "flip" will try to flip the tooltip to the opposite of the
-          starting position. The second option ensures that there are 3 escape positions for every possible starting
-          position (default). This setting is ignored if position prop is set to 'auto'.
-          <Select
-            onToggle={() => setFlipSelectOpen(!flipSelectOpen)}
-            onSelect={(event, selection) => {
-              console.log(selection);
-              setFlipBehavior(selection);
-              setFlipSelectOpen(false);
-            }}
-            isOpen={flipSelectOpen}
-            selections={flipBehavior}
-            menuAppendTo={() => document.body}
-          >
-            <SelectOption value="flip" />
-            <SelectOption value="clockwise">['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom']</SelectOption>
-          </Select>
-        </div>
-      </div>
-      <div id="tooltip-boundary" className="tooltip-box" ref={tipBoxRef}>
-        <Tooltip
-          content={
-            <div>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
-            </div>
-          }
-          trigger={trigger.join(' ')}
-          enableFlip={enableFlip}
-          flipBehavior={flipBehavior === 'flip' ? 'flip' : ['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom']}
-          position={position}
-          isVisible={isVisible}
-          entryDelay={entryDelayInput}
-          exitDelay={exitDelayInput}
-          animationDuration={animationDuration}
-          isContentLeftAligned={contentLeftAligned}
-          appendTo={() => document.getElementById('tooltip-boundary')}
-        >
-          <Button className="tooltip-button">Tooltip</Button>
-        </Tooltip>
-      </div>
-    </>
-  );
-};
+```ts file="./TooltipOptions.tsx"
 ```

package/src/components/Tooltip/examples/TooltipBasic.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Button, Tooltip } from '@patternfly/react-core';
+
+export const TooltipBasic: React.FunctionComponent = () => (
+  <div style={{ margin: '100px' }}>
+    <Tooltip
+      content={
+        <div>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+        </div>
+      }
+    >
+      <Button>I have a tooltip!</Button>
+    </Tooltip>
+  </div>
+);

package/src/components/Tooltip/examples/TooltipIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Tooltip, Button } from '@patternfly/react-core';
+import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+
+export const TooltipIcon: React.FunctionComponent = () => {
+  const [showSuccessContent, setShowSuccessContent] = React.useState(false);
+  const copyText: string = 'Copy to clipboard';
+  const doneCopyText: string = 'Successfully copied to clipboard!';
+
+  return (
+    <div style={{ margin: '100px' }}>
+      <Tooltip aria="none" aria-live="polite" content={showSuccessContent ? doneCopyText : copyText}>
+        <Button
+          aria-label="Clipboard"
+          variant="plain"
+          id="tt-ref"
+          onClick={() => setShowSuccessContent(!showSuccessContent)}
+        >
+          <CopyIcon />
+        </Button>
+      </Tooltip>
+    </div>
+  );
+};