Chore(ClipboardCopy): add tooltip to play icon (#11583)

* Chore(ClipboardCopy): add tooltip to play icon

* renamed state variable and added a callback

* added tooltip to code block examples

Author: Mash707

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

@@ -1,18 +1,36 @@
 import React from 'react';
-import { ClipboardCopy, ClipboardCopyAction, Button } from '@patternfly/react-core';
+import { ClipboardCopy, ClipboardCopyAction, Button, Tooltip } from '@patternfly/react-core';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
-export const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionComponent = () => (
-  <ClipboardCopy
-    hoverTip="Copy"
-    clickTip="Copied"
-    variant="inline-compact"
-    additionalActions={
-      <ClipboardCopyAction>
-        <Button variant="plain" hasNoPadding aria-label="Run in web terminal" icon={<PlayIcon />} />
-      </ClipboardCopyAction>
-    }
-  >
-    2.3.4-2-redhat
-  </ClipboardCopy>
-);
+export const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionComponent = () => {
+  const [isRunning, setisRunning] = React.useState(false);
+  const runText: string = 'Run in web terminal';
+  const doneRunText: string = 'Running in web terminal';
+  return (
+    <ClipboardCopy
+      hoverTip="Copy"
+      clickTip="Copied"
+      variant="inline-compact"
+      additionalActions={
+        <ClipboardCopyAction>
+          <Tooltip
+            aria="none"
+            aria-live="polite"
+            content={isRunning ? doneRunText : runText}
+            onTooltipHidden={() => setisRunning(false)}
+          >
+            <Button
+              variant="plain"
+              hasNoPadding
+              aria-label="Run in web terminal"
+              icon={<PlayIcon />}
+              onClick={() => setisRunning(!isRunning)}
+            />
+          </Tooltip>
+        </ClipboardCopyAction>
+      }
+    >
+      2.3.4-2-redhat
+    </ClipboardCopy>
+  );
+};

packages/react-core/src/components/CodeBlock/examples/CodeBlockBasic.tsx

@@ -1,9 +1,19 @@
 import React from 'react';
-import { CodeBlock, CodeBlockAction, CodeBlockCode, ClipboardCopyButton, Button } from '@patternfly/react-core';
+import {
+  CodeBlock,
+  CodeBlockAction,
+  CodeBlockCode,
+  ClipboardCopyButton,
+  Button,
+  Tooltip
+} from '@patternfly/react-core';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
 export const BasicCodeBlock: React.FunctionComponent = () => {
   const [copied, setCopied] = React.useState(false);
+  const [isRunning, setisRunning] = React.useState(false);
+  const runText: string = 'Run in web terminal';
+  const doneRunText: string = 'Running in web terminal';
 
   const clipboardCopyFunc = (event, text) => {
     navigator.clipboard.writeText(text.toString());
@@ -39,7 +49,19 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
         </ClipboardCopyButton>
       </CodeBlockAction>
       <CodeBlockAction>
-        <Button variant="plain" aria-label="Play icon" icon={<PlayIcon />} />
+        <Tooltip
+          aria="none"
+          aria-live="polite"
+          content={isRunning ? doneRunText : runText}
+          onTooltipHidden={() => setisRunning(false)}
+        >
+          <Button
+            variant="plain"
+            aria-label="Run in web terminal"
+            icon={<PlayIcon />}
+            onClick={() => setisRunning(!isRunning)}
+          />
+        </Tooltip>
       </CodeBlockAction>
     </React.Fragment>
   );

packages/react-core/src/components/CodeBlock/examples/CodeBlockExpandable.tsx

@@ -6,13 +6,17 @@ import {
   ClipboardCopyButton,
   ExpandableSection,
   ExpandableSectionToggle,
-  Button
+  Button,
+  Tooltip
 } from '@patternfly/react-core';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
 export const ExpandableCodeBlock: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const [copied, setCopied] = React.useState(false);
+  const [isRunning, setisRunning] = React.useState(false);
+  const runText: string = 'Run in web terminal';
+  const doneRunText: string = 'Running in web terminal';
 
   const onToggle = (isExpanded) => {
     setIsExpanded(isExpanded);
@@ -60,7 +64,19 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
         </ClipboardCopyButton>
       </CodeBlockAction>
       <CodeBlockAction>
-        <Button variant="plain" aria-label="Play icon" icon={<PlayIcon />} />
+        <Tooltip
+          aria="none"
+          aria-live="polite"
+          content={isRunning ? doneRunText : runText}
+          onTooltipHidden={() => setisRunning(false)}
+        >
+          <Button
+            variant="plain"
+            aria-label="Run in web terminal"
+            icon={<PlayIcon />}
+            onClick={() => setisRunning(!isRunning)}
+          />
+        </Tooltip>
       </CodeBlockAction>
     </React.Fragment>
   );