From 171d9339cf52b161a089e3b699aa1a66761fc545 Mon Sep 17 00:00:00 2001 From: Alban Bailly Date: Tue, 27 Jun 2023 12:12:04 -0400 Subject: [PATCH 1/3] Refactor: [M3-6522-copy-tooltip] Styled component and v7 story --- .../manager/src/components/Chip.stories.tsx | 2 +- .../CopyTooltip/CopyTooltip.stories.mdx | 43 ------- .../CopyTooltip/CopyTooltip.stories.tsx | 26 +++++ .../components/CopyTooltip/CopyTooltip.tsx | 108 ++++++++++-------- 4 files changed, 87 insertions(+), 92 deletions(-) delete mode 100644 packages/manager/src/components/CopyTooltip/CopyTooltip.stories.mdx create mode 100644 packages/manager/src/components/CopyTooltip/CopyTooltip.stories.tsx diff --git a/packages/manager/src/components/Chip.stories.tsx b/packages/manager/src/components/Chip.stories.tsx index 77e68c29061..1600b5e3897 100644 --- a/packages/manager/src/components/Chip.stories.tsx +++ b/packages/manager/src/components/Chip.stories.tsx @@ -62,7 +62,7 @@ export const WithDeleteButton: StoryObj = { }; const meta: Meta = { - title: 'Components/Core/Chip', + title: 'Components/Chip', component: Chip, args: { label: 'Chip', onDelete: undefined }, }; diff --git a/packages/manager/src/components/CopyTooltip/CopyTooltip.stories.mdx b/packages/manager/src/components/CopyTooltip/CopyTooltip.stories.mdx deleted file mode 100644 index b064c36241a..00000000000 --- a/packages/manager/src/components/CopyTooltip/CopyTooltip.stories.mdx +++ /dev/null @@ -1,43 +0,0 @@ -import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'; -import { CopyTooltip } from 'src/components/CopyTooltip/CopyTooltip'; - - ( -
- -
- ), - ]} -/> - -export const Template = (args) => { - return ; -}; - -# Copy Tooltip - -## Usage - -Content that is to be copied should be displayed before (to the left of) the clipboard icon.
-If horizontal space is limited, truncate the content. - - - - {Template.bind({})} - - - - diff --git a/packages/manager/src/components/CopyTooltip/CopyTooltip.stories.tsx b/packages/manager/src/components/CopyTooltip/CopyTooltip.stories.tsx new file mode 100644 index 00000000000..0a2ae08e1df --- /dev/null +++ b/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 = { + render: (args) => , +}; + +export const WithCopyableText: StoryObj = { + render: (args) => , +}; + +const meta: Meta = { + title: 'Components/Tooltip/Copy Tooltip', + component: CopyTooltip, + args: { + text: 'Copyable Text', + copyableText: false, + onClickCallback: undefined, + }, + argTypes: { + onClickCallback: { action: 'clicked, text copied' }, + }, +}; +export default meta; diff --git a/packages/manager/src/components/CopyTooltip/CopyTooltip.tsx b/packages/manager/src/components/CopyTooltip/CopyTooltip.tsx index 17275a96b56..157bda19846 100644 --- a/packages/manager/src/components/CopyTooltip/CopyTooltip.tsx +++ b/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.
+ * 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(false); - const { text, className, copyableText, onClickCallback } = props; const handleIconClick = () => { @@ -65,18 +46,49 @@ export const CopyTooltip = (props: Props) => { return ( - + ); }; + +const StyledCopyTooltipButton = styled('button', { + label: 'StyledCopyTooltipButton', + shouldForwardProp: (prop) => isPropValid(['copyableText', 'text'], prop), +})>(({ 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, + }), +})); From b28ca84878102fcc43f5a42e156fd20de4cfb716 Mon Sep 17 00:00:00 2001 From: Alban Bailly Date: Tue, 27 Jun 2023 12:14:01 -0400 Subject: [PATCH 2/3] Added changeset: MUI v5 Migration - Components > CopyTooltip --- .../manager/.changeset/pr-9323-tech-stories-1687882441444.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-9323-tech-stories-1687882441444.md diff --git a/packages/manager/.changeset/pr-9323-tech-stories-1687882441444.md b/packages/manager/.changeset/pr-9323-tech-stories-1687882441444.md new file mode 100644 index 00000000000..dad99b1692d --- /dev/null +++ b/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)) From e98a49cadadfc9287343d106a90d0f1c49968eef Mon Sep 17 00:00:00 2001 From: Alban Bailly Date: Thu, 29 Jun 2023 11:49:03 -0400 Subject: [PATCH 3/3] Refactor: [M3-6522-copy-tooltip] feedback - missing props --- packages/manager/src/components/CopyTooltip/CopyTooltip.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/manager/src/components/CopyTooltip/CopyTooltip.tsx b/packages/manager/src/components/CopyTooltip/CopyTooltip.tsx index 157bda19846..a92568f773d 100644 --- a/packages/manager/src/components/CopyTooltip/CopyTooltip.tsx +++ b/packages/manager/src/components/CopyTooltip/CopyTooltip.tsx @@ -53,6 +53,7 @@ export const CopyTooltip = (props: CopyTooltipProps) => { onClick={handleIconClick} className={className} data-qa-copy-btn + {...props} > {copyableText ? text : }