Refactor: [M3-6522-copy-tooltip] CopyTooltip: Styled component and v7 story

packages/manager/.changeset/pr-9323-tech-stories-1687882441444.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+MUI v5 Migration - Components > CopyTooltip  ([#9323](https://github.com/linode/manager/pull/9323))

packages/manager/src/components/Chip.stories.tsx

@@ -62,7 +62,7 @@ export const WithDeleteButton: StoryObj<ChipProps> = {
 };
 
 const meta: Meta<ChipProps> = {
-  title: 'Components/Core/Chip',
+  title: 'Components/Chip',
   component: Chip,
   args: { label: 'Chip', onDelete: undefined },
 };

packages/manager/src/components/CopyTooltip/CopyTooltip.stories.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip';
+import type { Meta, StoryObj } from '@storybook/react';
+import type { CopyTooltipProps } from './CopyTooltip';
+
+export const Default: StoryObj<CopyTooltipProps> = {
+  render: (args) => <CopyTooltip {...args} />,
+};
+
+export const WithCopyableText: StoryObj<CopyTooltipProps> = {
+  render: (args) => <CopyTooltip {...args} copyableText text="Copyable Text" />,
+};
+
+const meta: Meta<CopyTooltipProps> = {
+  title: 'Components/Tooltip/Copy Tooltip',
+  component: CopyTooltip,
+  args: {
+    text: 'Copyable Text',
+    copyableText: false,
+    onClickCallback: undefined,
+  },
+  argTypes: {
+    onClickCallback: { action: 'clicked, text copied' },
+  },
+};
+export default meta;

packages/manager/src/components/CopyTooltip/CopyTooltip.tsx

@@ -1,57 +1,38 @@
-import { Theme } from '@mui/material/styles';
-import copy from 'copy-to-clipboard';
 import * as React from 'react';
+import copy from 'copy-to-clipboard';
 import FileCopy from 'src/assets/icons/copy.svg';
 import ToolTip from 'src/components/core/Tooltip';
-import { makeStyles } from 'tss-react/mui';
+import { isPropValid } from 'src/utilities/isPropValid';
+import { styled } from '@mui/material/styles';
 
-interface Props {
-  text: string;
+export interface CopyTooltipProps {
+  /**
+   * Additional classes to be applied to the root element.
+   */
   className?: string;
+  /**
+   * If true, the text will be displayed in the tooltip.
+   * @default false
+   */
   copyableText?: boolean;
+  /**
+   * Callback to be executed when the icon is clicked.
+   */
   onClickCallback?: () => void;
+  /**
+   * The text to be copied to the clipboard.
+   */
+  text: string;
 }
 
-const useStyles = makeStyles()((theme: Theme) => ({
-  root: {
-    position: 'relative',
-    padding: 4,
-    backgroundColor: 'transparent',
-    transition: theme.transitions.create(['background-color']),
-    borderRadius: 4,
-    border: 'none',
-    cursor: 'pointer',
-    color: theme.color.grey1,
-    '& svg': {
-      transition: theme.transitions.create(['color']),
-      color: theme.color.grey1,
-      margin: 0,
-      position: 'relative',
-      width: 20,
-      height: 20,
-    },
-    '& svg:hover': {
-      color: theme.palette.primary.main,
-    },
-  },
-  flex: {
-    display: 'flex',
-    width: 'auto !important',
-  },
-  copyableTextBtn: {
-    padding: 0,
-    backgroundColor: 'transparent',
-    border: 'none',
-    cursor: 'pointer',
-    font: 'inherit',
-    color: theme.palette.text.primary,
-  },
-}));
+/**
+ *
+ * Content that is to be copied should be displayed before (to the left of) the clipboard icon.<br />
+ * If horizontal space is limited, truncate the content.
+ */
 
-export const CopyTooltip = (props: Props) => {
-  const { classes, cx } = useStyles();
+export const CopyTooltip = (props: CopyTooltipProps) => {
   const [copied, setCopied] = React.useState<boolean>(false);
-
   const { text, className, copyableText, onClickCallback } = props;
 
   const handleIconClick = () => {
@@ -65,18 +46,49 @@ export const CopyTooltip = (props: Props) => {
 
   return (
     <ToolTip title={copied ? 'Copied!' : 'Copy'} placement="top" data-qa-copied>
-      <button
+      <StyledCopyTooltipButton
         aria-label={`Copy ${text} to clipboard`}
         name={text}
         type="button"
         onClick={handleIconClick}
-        className={cx(classes.root, className, {
-          [classes.copyableTextBtn]: copyableText,
-        })}
+        className={className}
         data-qa-copy-btn
       >
         {copyableText ? text : <FileCopy />}
-      </button>
+      </StyledCopyTooltipButton>
     </ToolTip>
   );
 };
+
+const StyledCopyTooltipButton = styled('button', {
+  label: 'StyledCopyTooltipButton',
+  shouldForwardProp: (prop) => isPropValid(['copyableText', 'text'], prop),
+})<Omit<CopyTooltipProps, 'text'>>(({ theme, ...props }) => ({
+  position: 'relative',
+  padding: 4,
+  backgroundColor: 'transparent',
+  transition: theme.transitions.create(['background-color']),
+  borderRadius: 4,
+  border: 'none',
+  cursor: 'pointer',
+  color: theme.color.grey1,
+  '& svg': {
+    transition: theme.transitions.create(['color']),
+    color: theme.color.grey1,
+    margin: 0,
+    position: 'relative',
+    width: 20,
+    height: 20,
+  },
+  '& svg:hover': {
+    color: theme.palette.primary.main,
+  },
+  ...(props.copyableText && {
+    padding: 0,
+    backgroundColor: 'transparent',
+    border: 'none',
+    cursor: 'pointer',
+    font: 'inherit',
+    color: theme.palette.text.primary,
+  }),
+}));