tag and tooltip

figma · Jun 15, 2024 · 35ced8e · 35ced8e
1 parent bf27a90
commit 35ced8e
Show file tree

Hide file tree

Showing 10 changed files with 147 additions and 59 deletions.
diff --git a/figma.config.json b/figma.config.json
@@ -89,11 +89,12 @@
       "<FIGMA_URL_TEXT_CONTENT_TITLE>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2153-7838",
       "<FIGMA_URL_TEXT_AREA>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762:1135",
       "<FIGMA_URL_TEXT_AREA_FIELD>": "https://figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=9762-3088",
-      "<FIGMA_URL_CARDS_PRODUCT_INFO_CARD>": "https://www.figma.com/design/J0KLPKXiONDRssXD1AX9Oi/SDS?node-id=7753-4465&m=dev",
-      "<FIGMA_URL_CARDS_PRICING_CARD>": "https://www.figma.com/design/J0KLPKXiONDRssXD1AX9Oi/SDS?node-id=7722-3736&t=zlze7QSzfpWykbLu-11",
-      "<FIGMA_URL_CARDS_TESTIMONIAL_CARD>": "https://www.figma.com/design/J0KLPKXiONDRssXD1AX9Oi/SDS?node-id=7717-3946&t=zlze7QSzfpWykbLu-11",
-      "<FIGMA_URL_CARDS_STATS_CARD>": "https://www.figma.com/design/J0KLPKXiONDRssXD1AX9Oi/SDS?node-id=2236-15082&t=zlze7QSzfpWykbLu-11",
-      "<FIGMA_URL_CARDS_REVIEW_CARD>": "https://www.figma.com/design/J0KLPKXiONDRssXD1AX9Oi/SDS?node-id=2236-16106&t=zlze7QSzfpWykbLu-11"
+      "<FIGMA_URL_TOOLTIP>": "https://www.figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=315-32700",
+      "<FIGMA_URL_CARDS_PRODUCT_INFO_CARD>": "https://www.figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=7753-4465&m=dev",
+      "<FIGMA_URL_CARDS_PRICING_CARD>": "https://www.figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=7722-3736&t=zlze7QSzfpWykbLu-11",
+      "<FIGMA_URL_CARDS_TESTIMONIAL_CARD>": "https://www.figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=7717-3946&t=zlze7QSzfpWykbLu-11",
+      "<FIGMA_URL_CARDS_STATS_CARD>": "https://www.figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2236-15082&t=zlze7QSzfpWykbLu-11",
+      "<FIGMA_URL_CARDS_REVIEW_CARD>": "https://www.figma.com/design/J0KLPKXiONDRssXD1AX9Oi?node-id=2236-16106&t=zlze7QSzfpWykbLu-11"
     }
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/stories/ui/Tag.stories.tsx b/src/stories/ui/Tag.stories.tsx
@@ -18,10 +18,10 @@ const meta: Meta<typeof Tag> = {
 export default meta;
 
 export const Default: StoryObj<typeof Tag> = {
-  args: { variant: "default" },
+  args: { variant: "primary" },
   render: (args) => (
     <Flex wrap alignPrimary="center" gap="300">
-      <Tag scheme="default" {...args}>
+      <Tag scheme="brand" {...args}>
         Default
       </Tag>
       <Tag scheme="danger" {...args}>
@@ -42,11 +42,11 @@ export const Default: StoryObj<typeof Tag> = {
 
 export const Removable: StoryObj<typeof Tag> = {
   args: {
-    variant: "default",
+    variant: "primary",
   },
   render: (args) => (
     <Flex wrap gap="300">
-      <Tag onRemove={() => {}} scheme="default" {...args}>
+      <Tag onRemove={() => {}} scheme="brand" {...args}>
         Default
       </Tag>
       <Tag onRemove={() => {}} scheme="danger" {...args}>
@@ -66,10 +66,10 @@ export const Removable: StoryObj<typeof Tag> = {
 };
 
 export const TagButtonDefault: StoryObj<typeof TagButton> = {
-  args: { variant: "default" },
+  args: { variant: "primary" },
   render: (args) => (
     <Flex wrap alignPrimary="center" gap="300">
-      <TagButton scheme="default" {...args}>
+      <TagButton scheme="brand" {...args}>
         Default
       </TagButton>
       <TagButton scheme="danger" {...args}>

diff --git a/src/stories/ui/Tooltip.stories.tsx b/src/stories/ui/Tooltip.stories.tsx
@@ -1,6 +1,12 @@
-import type { Meta } from "@storybook/react";
-import { IconHelpCircle } from "icons";
-import { DialogTrigger, IconButton, Text, Tooltip } from "ui";
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  IconArrowDown,
+  IconArrowLeft,
+  IconArrowRight,
+  IconArrowUp,
+} from "icons";
+import { Flex } from "layout";
+import { DialogTrigger, IconButton, TextSmall, TextStrong, Tooltip } from "ui";
 
 const meta: Meta<typeof Tooltip> = {
   component: Tooltip,
@@ -10,13 +16,53 @@ const meta: Meta<typeof Tooltip> = {
 
 export default meta;
 
-export const Default = (args: any) => (
-  <DialogTrigger>
-    <IconButton aria-label="Help">
-      <IconHelpCircle />
-    </IconButton>
-    <Tooltip {...args}>
-      <Text>For help accessing your account, please contact support.</Text>
-    </Tooltip>
-  </DialogTrigger>
-);
+export const Default: StoryObj<typeof Tooltip> = {
+  render: () => (
+    <Flex type="half" gap="200" alignPrimary="center">
+      <DialogTrigger>
+        <IconButton aria-label="Up">
+          <IconArrowUp />
+        </IconButton>
+        <Tooltip placement="top">
+          <TextStrong>Something interesting</TextStrong>
+          <TextSmall>
+            For help accessing your account, please contact support.
+          </TextSmall>
+        </Tooltip>
+      </DialogTrigger>
+      <DialogTrigger>
+        <IconButton aria-label="Down">
+          <IconArrowDown />
+        </IconButton>
+        <Tooltip placement="bottom">
+          <TextStrong>Something interesting</TextStrong>
+          <TextSmall>
+            For help accessing your account, please contact support.
+          </TextSmall>
+        </Tooltip>
+      </DialogTrigger>
+      <DialogTrigger>
+        <IconButton aria-label="Left">
+          <IconArrowLeft />
+        </IconButton>
+        <Tooltip placement="left">
+          <TextStrong>Something interesting</TextStrong>
+          <TextSmall>
+            For help accessing your account, please contact support.
+          </TextSmall>
+        </Tooltip>
+      </DialogTrigger>
+      <DialogTrigger>
+        <IconButton aria-label="Right">
+          <IconArrowRight />
+        </IconButton>
+        <Tooltip placement="right">
+          <TextStrong>Something interesting</TextStrong>
+          <TextSmall>
+            For help accessing your account, please contact support.
+          </TextSmall>
+        </Tooltip>
+      </DialogTrigger>
+    </Flex>
+  ),
+};
diff --git a/src/ui/Tag/Tag.figma.tsx b/src/ui/Tag/Tag.figma.tsx
@@ -5,7 +5,8 @@ import { Tag, TagToggle, TagToggleGroup, TagToggleList } from "./Tag";
 figma.connect(Tag, "<FIGMA_URL_TAG>", {
   props: {
     onRemove: figma.boolean("Is Removable", {
-      true: true, // TODO: this needs to be a function.
+      // @ts-expect-error
+      true: () => {},
       false: undefined,
     }),
     label: figma.string("Label"),
@@ -19,8 +20,9 @@ figma.connect(Tag, "<FIGMA_URL_TAG>", {
       Neutral: "neutral",
     }),
   },
-  example: ({ label, scheme, variant }) => (
-    <Tag variant={variant} scheme={scheme}>
+  example: ({ label, scheme, onRemove, variant }) => (
+    // @ts-expect-error
+    <Tag variant={variant} scheme={scheme} onRemove={onRemove}>
       {label}
     </Tag>
   ),

diff --git a/src/ui/Tag/Tag.tsx b/src/ui/Tag/Tag.tsx
@@ -14,8 +14,8 @@ import {
 import { AnchorOrButton, type AnchorOrButtonProps } from "utils";
 import "./tag.css";
 
-type TagScheme = "default" | "danger" | "positive" | "warning" | "neutral";
-type TagVariant = "default" | "secondary";
+type TagScheme = "brand" | "danger" | "positive" | "warning" | "neutral";
+type TagVariant = "primary" | "secondary";
 
 type SharedTagProps = {
   scheme?: TagScheme;
@@ -29,8 +29,9 @@ export type TagProps = SharedTagProps &
   React.ComponentPropsWithoutRef<"span">;
 export function Tag({
   children,
-  scheme = "default",
-  variant = "default",
+  scheme = "brand",
+  variant = "primary",
+  onRemove,
   ...props
 }: TagProps) {
   const classNames = clsx(
@@ -41,8 +42,8 @@ export function Tag({
   return (
     <span {...props} className={classNames}>
       {children}{" "}
-      {props.onRemove && (
-        <RACButton className="tag-remove-button" onPress={props.onRemove}>
+      {onRemove && (
+        <RACButton className="tag-remove-button" onPress={onRemove}>
           <IconX size="16" />
         </RACButton>
       )}
@@ -54,8 +55,8 @@ export type TagButtonProps = SharedTagProps & AnchorOrButtonProps;
 export const TagButton = React.forwardRef(function Tag(
   {
     className,
-    scheme = "default",
-    variant = "default",
+    scheme = "brand",
+    variant = "primary",
     ...props
   }: TagButtonProps,
   ref: React.ForwardedRef<HTMLElement>,

diff --git a/src/ui/Tag/tag.css b/src/ui/Tag/tag.css
@@ -29,7 +29,7 @@
 }
 
 .tag {
-  --border-radius: var(--sds-size-radius-100);
+  --border-radius: var(--sds-size-radius-200);
   align-items: center;
   background-color: var(--tag-background-color);
   border-radius: var(--border-radius);
@@ -45,7 +45,7 @@
   }
 }
 
-.tag-scheme-default {
+.tag-scheme-brand {
   --tag-color: var(--sds-color-text-brand-on-brand);
   --tag-icon: var(--sds-color-icon-brand-on-brand);
   --tag-background-color: var(--sds-color-background-brand-default);
@@ -184,7 +184,6 @@
   --tag-color: var(--sds-color-text-brand-tertiary);
   --tag-icon: var(--sds-color-icon-brand-tertiary);
   --tag-background-color: var(--sds-color-background-brand-tertiary);
-  --border-radius: var(--sds-size-radius-200);
   cursor: pointer;
   gap: var(--sds-size-space-200);
   outline: none;

diff --git a/src/ui/Tooltip/Tooltip.figma.tsx b/src/ui/Tooltip/Tooltip.figma.tsx
@@ -0,0 +1,25 @@
+import figma from "@figma/code-connect";
+import { TextSmall, TextStrong } from "ui/Text/Text";
+import { Tooltip } from "./Tooltip";
+
+figma.connect(Tooltip, "<FIGMA_URL_TOOLTIP>", {
+  props: {
+    body: figma.boolean("Show Body", {
+      true: <TextSmall>{figma.string("Body")}</TextSmall>,
+      false: undefined,
+    }),
+    title: figma.string("Title"),
+    placement: figma.enum("Placement", {
+      Bottom: "bottom",
+      Top: "top",
+      Right: "right",
+      Left: "left",
+    }),
+  },
+  example: ({ placement, title, body }) => (
+    <Tooltip placement={placement}>
+      <TextStrong>{title}</TextStrong>
+      {body}
+    </Tooltip>
+  ),
+});
diff --git a/src/ui/Tooltip/Tooltip.tsx b/src/ui/Tooltip/Tooltip.tsx
@@ -12,10 +12,15 @@ export interface TooltipProps extends Omit<RACPopoverProps, "children"> {
   children: React.ReactNode;
 }
 
-export function Tooltip({ children, className, ...props }: TooltipProps) {
+export function Tooltip({
+  children,
+  className,
+  offset = 16,
+  ...props
+}: TooltipProps) {
   const classNames = clsx(className, "tooltip");
   return (
-    <RACPopover className={classNames} {...props}>
+    <RACPopover className={classNames} offset={offset} {...props}>
       <TooltipOverlayArrow />
       <Dialog>{children}</Dialog>
     </RACPopover>

diff --git a/src/ui/Tooltip/tooltip.css b/src/ui/Tooltip/tooltip.css
@@ -1,5 +1,9 @@
 .tooltip {
   .tooltip-overlay-arrow {
+    --offset-x: 0px;
+    --offset-y: 0px;
+    --offset-border-x: 0px;
+    --offset-border-y: 0px;
     display: flex;
     position: relative;
     width: var(--sds-typography-scale-04);
@@ -8,64 +12,68 @@
 
   .tooltip-overlay-arrow svg {
     --rotation: 0deg;
+    --width: var(--sds-typography-scale-04);
     display: block;
     height: calc(0.5 * var(--sds-typography-scale-04));
-    width: var(--sds-typography-scale-04);
+    width: var(--width);
     &:first-child {
       fill: var(--sds-color-border-default-default);
-      position: absolute;
       left: 0;
-      transform: translateY(calc(0 * var(--sds-size-stroke-border)))
+      position: absolute;
+      transform: translate(var(--offset-x), var(--offset-y))
         rotate(var(--rotation));
     }
     &:last-child {
       fill: var(--sds-color-background-default-default);
-      transform: translateY(calc(1.5 * var(--sds-size-stroke-border)))
+      transform: translate(
+          calc(var(--offset-x) + var(--offset-border-x)),
+          calc(var(--offset-y) + var(--offset-border-y))
+        )
         rotate(var(--rotation));
     }
   }
 
+  &[data-placement="top"],
+  &[data-placement="bottom"] {
+    text-align: center;
+  }
+
   &[data-placement="top"] {
-    &:has(.tooltip-overlay-arrow) {
-      margin-bottom: var(--sds-size-space-200);
+    .tooltip-overlay-arrow svg {
+      --offset-border-y: calc(-1.5 * var(--sds-size-stroke-border));
     }
   }
 
   &[data-placement="bottom"] {
-    &:has(.tooltip-overlay-arrow) {
-      margin-top: var(--sds-size-space-200);
-    }
-
     .tooltip-overlay-arrow svg {
+      --offset-border-y: calc(1.5 * var(--sds-size-stroke-border));
       --rotation: 180deg;
     }
   }
 
   &[data-placement="right"] {
-    &:has(.tooltip-overlay-arrow) {
-      margin-left: var(--sds-size-space-200);
-    }
-
     .tooltip-overlay-arrow svg {
+      --offset-x: calc(0.25 * var(--width));
+      --offset-border-x: calc(1.5 * var(--sds-size-stroke-border));
       --rotation: 90deg;
     }
   }
 
   &[data-placement="left"] {
-    &:has(.tooltip-overlay-arrow) {
-      margin-right: var(--sds-size-space-200);
-    }
-
     .tooltip-overlay-arrow svg {
+      --offset-x: calc(-0.25 * var(--width));
+      --offset-border-x: calc(-1.5 * var(--sds-size-stroke-border));
       --rotation: -90deg;
     }
   }
 
   > .dialog {
-    --dialog-padding-y: var(--sds-size-space-400);
+    --dialog-padding-y: var(--sds-size-space-200);
     box-shadow: var(--sds-effects-shadows-drop-shadow-200);
+    gap: var(--sds-size-space-100);
     padding-left: var(--sds-size-space-300);
     padding-right: var(--sds-size-space-300);
+    max-width: calc(var(--global-dialog-max-width) / 2);
     width: 100%;
   }
 }