update tooltip arrow

CivicDataLab · Mar 6, 2024 · 8d03dc6 · 8d03dc6
1 parent c932a2b
commit 8d03dc6
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 26 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/opub-ui/.storybook/main.ts b/packages/opub-ui/.storybook/main.ts
@@ -8,7 +8,6 @@ const config = {
     getAbsolutePath('@storybook/addon-links'),
     getAbsolutePath('@storybook/addon-essentials'),
     getAbsolutePath('@storybook/addon-interactions'),
-    getAbsolutePath('@storybook/addon-mdx-gfm'),
   ],
   framework: {
     name: getAbsolutePath('@storybook/react-vite'),

diff --git a/packages/opub-ui/package.json b/packages/opub-ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "opub-ui",
   "description": "OPub UI Library",
-  "version": "0.2.9",
+  "version": "0.3.0",
   "private": false,
   "license": "MIT",
   "author": "CivicDataLab <[email protected]>",
@@ -122,7 +122,6 @@
     "@storybook/addon-essentials": "^7.6.17",
     "@storybook/addon-interactions": "^7.6.17",
     "@storybook/addon-links": "^7.6.17",
-    "@storybook/addon-mdx-gfm": "^7.6.17",
     "@storybook/addons": "^7.6.17",
     "@storybook/react": "^7.6.17",
     "@storybook/react-vite": "^7.6.17",

diff --git a/packages/opub-ui/src/components/Tooltip/Tooltip.module.scss b/packages/opub-ui/src/components/Tooltip/Tooltip.module.scss
@@ -23,7 +23,7 @@
   max-height: var(--radix-tooltip-content-available-height);
   box-shadow: var(--shadow-element-popover);
   border-radius: var(--op-tooltip-border-radius);
-  border: 1px solid var(--border-disabled);
+  border: 1px solid var(--border-subdued);
   background-color: var(--surface-default);
   word-break: break-word;
   padding: var(--space-1) var(--space-2);

diff --git a/packages/opub-ui/src/components/Tooltip/Tooltip.tsx b/packages/opub-ui/src/components/Tooltip/Tooltip.tsx
@@ -86,11 +86,26 @@ const Tooltip = (props: TooltipProps) => {
         >
           <Text variant="bodyMd">{content}</Text>
           {!hideArrow && (
-            <TooltipRadix.Arrow
-              stroke="var(--border-default)"
-              strokeWidth={2}
-              fill="var(--surface-default)"
-            />
+            <TooltipRadix.Arrow asChild>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                stroke-width="1"
+                stroke="var(--border-default)"
+                fill="var(--surface-default)"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                style={{
+                  transform: 'rotate(180deg)',
+                }}
+                className="absolute left-0 top-[-10px] h-[28px] w-[22px]"
+              >
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                <path d="M6 15l6 -6l6 6" />
+              </svg>
+            </TooltipRadix.Arrow>
           )}
         </TooltipRadix.Content>
       </TooltipRadix.Portal>