From e62d6c0f353dfbe3fd6610b9cbda72949c7edd8c Mon Sep 17 00:00:00 2001 From: Zeno Rocha Date: Mon, 17 Oct 2022 21:48:20 -0700 Subject: [PATCH] feat(design-system): Add tooltip component #25 (#116) * feat(design-system): Add tooltip component #25 * format * Apply suggestions from code review Co-authored-by: Vitor Capretz * Fix import * Add tooltip to code block icons * formatting Co-authored-by: Vitor Capretz --- apps/preview/src/pages/_app.tsx | 7 +++- packages/design-system/package.json | 1 + packages/design-system/src/code/code.tsx | 41 +++++++++++-------- packages/design-system/src/index.ts | 1 + packages/design-system/src/tooltip/index.ts | 1 + .../src/tooltip/tooltip-arrow.tsx | 1 + .../src/tooltip/tooltip-content.tsx | 26 ++++++++++++ .../src/tooltip/tooltip-provider.tsx | 1 + .../src/tooltip/tooltip-trigger.tsx | 1 + .../design-system/src/tooltip/tooltip.tsx | 22 ++++++++++ yarn.lock | 27 ++++++++++++ 11 files changed, 110 insertions(+), 19 deletions(-) create mode 100644 packages/design-system/src/tooltip/index.ts create mode 100644 packages/design-system/src/tooltip/tooltip-arrow.tsx create mode 100644 packages/design-system/src/tooltip/tooltip-content.tsx create mode 100644 packages/design-system/src/tooltip/tooltip-provider.tsx create mode 100644 packages/design-system/src/tooltip/tooltip-trigger.tsx create mode 100644 packages/design-system/src/tooltip/tooltip.tsx diff --git a/apps/preview/src/pages/_app.tsx b/apps/preview/src/pages/_app.tsx index 26af0b54be..cc2ff4cc66 100644 --- a/apps/preview/src/pages/_app.tsx +++ b/apps/preview/src/pages/_app.tsx @@ -1,6 +1,11 @@ import '../styles/globals.css'; import type { AppProps } from 'next/app'; +import { Tooltip } from 'design-system'; export default function MyApp({ Component, pageProps }: AppProps) { - return ; + return ( + + + + ); } diff --git a/packages/design-system/package.json b/packages/design-system/package.json index a22e2f27bf..b46aebeb96 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -17,6 +17,7 @@ "format": "prettier --write \"**/*.{ts,tsx,md}\"" }, "dependencies": { + "@radix-ui/react-tooltip": "^1.0.0", "classnames": "2.3.2", "prism-react-renderer": "1.3.5", "utils": "*" diff --git a/packages/design-system/src/code/code.tsx b/packages/design-system/src/code/code.tsx index bd3d0fa806..35c542bb42 100644 --- a/packages/design-system/src/code/code.tsx +++ b/packages/design-system/src/code/code.tsx @@ -4,6 +4,7 @@ import * as React from 'react'; import { IconButton } from '../icon-button'; import { copyTextToClipboard } from 'utils'; import { IconClipboard, IconCheck, IconDownload } from '../icons'; +import { Tooltip } from '../tooltip'; interface CodeProps { children: any; @@ -79,25 +80,29 @@ export const Code: React.FC> = ({ boxShadow: 'rgb(0 0 0 / 10%) 0px 5px 30px -5px', }} > - { - setIsCopied(true); - await copyTextToClipboard(value); - setTimeout(() => setIsCopied(false), 3000); - }} - > - {isCopied ? : } - + + + { + setIsCopied(true); + await copyTextToClipboard(value); + setTimeout(() => setIsCopied(false), 3000); + }} + > + {isCopied ? : } + + + Copy to Clipboard + - - - + + + + + + + Download HTML +
; +type ContentProps = React.ComponentPropsWithoutRef; + +export interface TooltipProps extends ContentProps {} + +export const TooltipContent = React.forwardRef< + ContentElement, + Readonly +>(({ className, sideOffset = 6, children, ...props }, forwardedRef) => ( + + + {children} + + + +)); + +TooltipContent.displayName = 'TooltipContent'; diff --git a/packages/design-system/src/tooltip/tooltip-provider.tsx b/packages/design-system/src/tooltip/tooltip-provider.tsx new file mode 100644 index 0000000000..c2169fa8e2 --- /dev/null +++ b/packages/design-system/src/tooltip/tooltip-provider.tsx @@ -0,0 +1 @@ +export { TooltipProvider } from '@radix-ui/react-tooltip'; diff --git a/packages/design-system/src/tooltip/tooltip-trigger.tsx b/packages/design-system/src/tooltip/tooltip-trigger.tsx new file mode 100644 index 0000000000..fc63a2a786 --- /dev/null +++ b/packages/design-system/src/tooltip/tooltip-trigger.tsx @@ -0,0 +1 @@ +export { TooltipTrigger } from '@radix-ui/react-tooltip'; diff --git a/packages/design-system/src/tooltip/tooltip.tsx b/packages/design-system/src/tooltip/tooltip.tsx new file mode 100644 index 0000000000..e41fc6f78f --- /dev/null +++ b/packages/design-system/src/tooltip/tooltip.tsx @@ -0,0 +1,22 @@ +import { Root } from '@radix-ui/react-tooltip'; +import * as React from 'react'; +import { TooltipArrow } from './tooltip-arrow'; +import { TooltipContent } from './tooltip-content'; +import { TooltipProvider } from './tooltip-provider'; +import { TooltipTrigger } from './tooltip-trigger'; + +type RootProps = React.ComponentPropsWithoutRef; + +export interface TooltipProps extends RootProps {} + +export const TooltipRoot: React.FC> = ({ + children, + ...props +}) => {children}; + +export const Tooltip = Object.assign(TooltipRoot, { + Arrow: TooltipArrow, + Provider: TooltipProvider, + Content: TooltipContent, + Trigger: TooltipTrigger, +}); diff --git a/yarn.lock b/yarn.lock index d088cc644f..cb9ce25b6b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -922,6 +922,25 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-compose-refs" "1.0.0" +"@radix-ui/react-tooltip@^1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.0.tgz#f7fcecf2bac5c31cd14666b5acd056015fc21646" + integrity sha512-RB06pov+O4Npy10ei1C6fsyB9QoOjz7Ubo8Sl3qdKtLgkL9iI96925DYtH0bxx6MH6YB2FuzLU6B75qn3AQQQw== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/primitive" "1.0.0" + "@radix-ui/react-compose-refs" "1.0.0" + "@radix-ui/react-context" "1.0.0" + "@radix-ui/react-dismissable-layer" "1.0.0" + "@radix-ui/react-id" "1.0.0" + "@radix-ui/react-popper" "1.0.0" + "@radix-ui/react-portal" "1.0.0" + "@radix-ui/react-presence" "1.0.0" + "@radix-ui/react-primitive" "1.0.0" + "@radix-ui/react-slot" "1.0.0" + "@radix-ui/react-use-controllable-state" "1.0.0" + "@radix-ui/react-visually-hidden" "1.0.0" + "@radix-ui/react-use-callback-ref@1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz#9e7b8b6b4946fe3cbe8f748c82a2cce54e7b6a90" @@ -968,6 +987,14 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-use-layout-effect" "1.0.0" +"@radix-ui/react-visually-hidden@1.0.0": + version "1.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.0.tgz#4d69d7e3b6d21ee4678ed6de5215dcd068394401" + integrity sha512-MwAhMdX+n6S4InwRKSnpUsp+lLkYG6izQF56ul6guSX2mBBLOMV9Frx7xJlkEe2GjKLzbNuHhaCS6e5gopmZNA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-primitive" "1.0.0" + "@radix-ui/rect@1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.0.0.tgz#0dc8e6a829ea2828d53cbc94b81793ba6383bf3c"