popover to tooltip

figma · Jun 12, 2024 · 833d1cf · 833d1cf
1 parent 9b2d390
commit 833d1cf
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 26 deletions.
diff --git a/...stories/ui/primitives/Popover.stories.tsx → ...stories/ui/primitives/Tooltip.stories.tsx b/...stories/ui/primitives/Popover.stories.tsx → ...stories/ui/primitives/Tooltip.stories.tsx
@@ -1,10 +1,10 @@
 import type { Meta } from "@storybook/react";
 import { IconHelpCircle } from "icons";
-import { DialogTrigger, IconButton, Popover, Text } from "ui/primitives";
+import { DialogTrigger, IconButton, Text, Tooltip } from "ui/primitives";
 
-const meta: Meta<typeof Popover> = {
-  component: Popover,
-  title: "UI Primitives/Popover",
+const meta: Meta<typeof Tooltip> = {
+  component: Tooltip,
+  title: "UI Primitives/Tooltip",
   parameters: { layout: "centered" },
 };
 
@@ -15,8 +15,8 @@ export const Default = (args: any) => (
     <IconButton aria-label="Help">
       <IconHelpCircle />
     </IconButton>
-    <Popover {...args}>
+    <Tooltip {...args}>
       <Text>For help accessing your account, please contact support.</Text>
-    </Popover>
+    </Tooltip>
   </DialogTrigger>
 );
diff --git a/src/ui/primitives/Popover/Popover.tsx → src/ui/primitives/Tooltip/Tooltip.tsx b/src/ui/primitives/Popover/Popover.tsx → src/ui/primitives/Tooltip/Tooltip.tsx
@@ -6,28 +6,28 @@ import {
   type PopoverProps as RACPopoverProps,
 } from "react-aria-components";
 import { Dialog } from "ui/primitives";
-import "./popover.css";
+import "./tooltip.css";
 
-export interface PopoverProps extends Omit<RACPopoverProps, "children"> {
+export interface TooltipProps extends Omit<RACPopoverProps, "children"> {
   children: React.ReactNode;
 }
 
-export function Popover({ children, className, ...props }: PopoverProps) {
-  const classNames = clsx(className, "popover");
+export function Tooltip({ children, className, ...props }: TooltipProps) {
+  const classNames = clsx(className, "tooltip");
   return (
     <RACPopover className={classNames} {...props}>
-      <PopoverOverlayArrow />
+      <TooltipOverlayArrow />
       <Dialog>{children}</Dialog>
     </RACPopover>
   );
 }
 
-export type PopoverOverlayArrowProps = RACOverlayArrowProps;
-export function PopoverOverlayArrow({
+export type TooltipOverlayArrowProps = RACOverlayArrowProps;
+export function TooltipOverlayArrow({
   className,
   ...props
-}: PopoverOverlayArrowProps) {
-  const classNames = clsx(className, "popover-overlay-arrow");
+}: TooltipOverlayArrowProps) {
+  const classNames = clsx(className, "tooltip-overlay-arrow");
   return (
     <RACOverlayArrow {...props} className={classNames}>
       <svg viewBox="0 0 10 5">

diff --git a/src/ui/primitives/Popover/popover.css → src/ui/primitives/Tooltip/tooltip.css b/src/ui/primitives/Popover/popover.css → src/ui/primitives/Tooltip/tooltip.css
@@ -1,11 +1,11 @@
-.popover {
-  .popover-overlay-arrow {
+.tooltip {
+  .tooltip-overlay-arrow {
     display: flex;
     position: relative;
     width: var(--sds-typography-scale-04);
   }
 
-  .popover-overlay-arrow svg {
+  .tooltip-overlay-arrow svg {
     --rotation: 0deg;
     display: block;
     height: calc(0.5 * var(--sds-typography-scale-04));
@@ -25,37 +25,37 @@
   }
 
   &[data-placement="top"] {
-    &:has(.popover-overlay-arrow) {
+    &:has(.tooltip-overlay-arrow) {
       margin-bottom: var(--sds-size-gap-sm);
     }
   }
 
   &[data-placement="bottom"] {
-    &:has(.popover-overlay-arrow) {
+    &:has(.tooltip-overlay-arrow) {
       margin-top: var(--sds-size-gap-sm);
     }
 
-    .popover-overlay-arrow svg {
+    .tooltip-overlay-arrow svg {
       --rotation: 180deg;
     }
   }
 
   &[data-placement="right"] {
-    &:has(.popover-overlay-arrow) {
+    &:has(.tooltip-overlay-arrow) {
       margin-left: var(--sds-size-gap-sm);
     }
 
-    .popover-overlay-arrow svg {
+    .tooltip-overlay-arrow svg {
       --rotation: 90deg;
     }
   }
 
   &[data-placement="left"] {
-    &:has(.popover-overlay-arrow) {
+    &:has(.tooltip-overlay-arrow) {
       margin-right: var(--sds-size-gap-sm);
     }
 
-    .popover-overlay-arrow svg {
+    .tooltip-overlay-arrow svg {
       --rotation: -90deg;
     }
   }

diff --git a/src/ui/primitives/index.ts b/src/ui/primitives/index.ts
@@ -15,7 +15,6 @@ export * from "./Menu/Menu";
 export * from "./Navigation/Navigation";
 export * from "./Notification/Notification";
 export * from "./Pagination/Pagination";
-export * from "./Popover/Popover";
 export * from "./Radio/Radio";
 export * from "./Search/Search";
 export * from "./Select/Select";
@@ -26,3 +25,4 @@ export * from "./Table/Table";
 export * from "./Tag/Tag";
 export * from "./Text/Text";
 export * from "./TextArea/TextArea";
+export * from "./Tooltip/Tooltip";