fix: auto fallback position and align

cinnyapp · Apr 13, 2024 · 653eefb · 653eefb
1 parent 70f0316
commit 653eefb
Show file tree

Hide file tree

Showing 5 changed files with 455 additions and 88 deletions.
diff --git a/src/components/pop-out/PopOut.stories.tsx b/src/components/pop-out/PopOut.stories.tsx
@@ -1,26 +1,27 @@
 import FocusTrap from "focus-trap-react";
 import React, { useState } from "react";
-import { ComponentMeta } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { Text } from "../text";
 import { PopOut } from "./PopOut";
 import { Menu, MenuItem } from "../menu";
 import { Icon, Icons } from "../icon";
 import { IconButton } from "../icon-button";
 import { config } from "../../theme/config.css";
+import { Box } from "../box";
 
 export default {
   title: "PopOut",
   component: PopOut,
 } as ComponentMeta<typeof PopOut>;
 
-export const Interactive = () => {
+const Template: ComponentStory<typeof PopOut> = (args) => {
   const [open, setOpen] = useState(false);
 
   return (
-    <div style={{ height: "100vh" }}>
+    <Box justifyContent="Center" alignItems="Center" style={{ height: "100vh" }}>
       <PopOut
+        {...args}
         open={open}
-        align="Start"
         content={
           <FocusTrap
             focusTrapOptions={{
@@ -51,6 +52,8 @@ export const Interactive = () => {
           </IconButton>
         )}
       </PopOut>
-    </div>
+    </Box>
   );
 };
+
+export const Interactive = Template.bind({});
diff --git a/src/components/pop-out/PopOut.tsx b/src/components/pop-out/PopOut.tsx
@@ -47,17 +47,16 @@ export const PopOut = as<"div", PopOutProps>(
 
       const css = getRelativeFixedPosition(
         anchor.getBoundingClientRect(),
+        baseEl.getBoundingClientRect(),
         position,
         align,
         offset,
-        alignOffset,
-        baseEl.getBoundingClientRect()
+        alignOffset
       );
-      baseEl.style.top = css.top;
-      baseEl.style.bottom = css.bottom;
-      baseEl.style.left = css.left;
-      baseEl.style.right = css.right;
-      baseEl.style.transform = css.transform;
+      baseEl.style.top = css.top ?? "unset";
+      baseEl.style.bottom = css.bottom ?? "unset";
+      baseEl.style.left = css.left ?? "unset";
+      baseEl.style.right = css.right ?? "unset";
     }, [position, align, offset, alignOffset]);
 
     useEffect(() => {

diff --git a/src/components/tooltip/Tooltip.stories.tsx b/src/components/tooltip/Tooltip.stories.tsx
@@ -35,19 +35,207 @@ Surface.args = {
 };
 
 export const Interactive = () => (
-  <Box style={{ padding: "100px" }}>
+  <Box wrap="Wrap" gap="400" style={{ padding: "100px" }}>
+    <TooltipProvider
+      position="Top"
+      align="Start"
+      tooltip={
+        <Tooltip>
+          <Text truncate size="T300">
+            Top Start
+          </Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <IconButton variant="SurfaceVariant" size="600" ref={ref}>
+          <Icon src={Icons.Info} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+    <TooltipProvider
+      position="Top"
+      align="Center"
+      tooltip={
+        <Tooltip>
+          <Text truncate size="T300">
+            Top Center
+          </Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <IconButton variant="SurfaceVariant" size="600" ref={ref}>
+          <Icon src={Icons.Info} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+    <TooltipProvider
+      position="Top"
+      align="End"
+      tooltip={
+        <Tooltip>
+          <Text truncate size="T300">
+            Top End
+          </Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <IconButton variant="SurfaceVariant" size="600" ref={ref}>
+          <Icon src={Icons.Info} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+    <TooltipProvider
+      position="Right"
+      align="Start"
+      tooltip={
+        <Tooltip>
+          <Text truncate size="T300">
+            Right Start
+          </Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <IconButton variant="SurfaceVariant" size="600" ref={ref}>
+          <Icon src={Icons.Info} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+    <TooltipProvider
+      position="Right"
+      align="Center"
+      tooltip={
+        <Tooltip>
+          <Text truncate size="T300">
+            Right Center
+          </Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <IconButton variant="SurfaceVariant" size="600" ref={ref}>
+          <Icon src={Icons.Info} />
+        </IconButton>
+      )}
+    </TooltipProvider>
     <TooltipProvider
       position="Right"
+      align="End"
+      tooltip={
+        <Tooltip>
+          <Text truncate size="T300">
+            Right End
+          </Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <IconButton variant="SurfaceVariant" size="600" ref={ref}>
+          <Icon src={Icons.Info} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+    <TooltipProvider
+      position="Bottom"
+      align="Start"
+      tooltip={
+        <Tooltip>
+          <Text truncate size="T300">
+            Bottom Start
+          </Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <IconButton variant="SurfaceVariant" size="600" ref={ref}>
+          <Icon src={Icons.Info} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+    <TooltipProvider
+      position="Bottom"
+      align="Center"
+      tooltip={
+        <Tooltip>
+          <Text truncate size="T300">
+            Bottom Center
+          </Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <IconButton variant="SurfaceVariant" size="600" ref={ref}>
+          <Icon src={Icons.Info} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+    <TooltipProvider
+      position="Bottom"
+      align="End"
+      tooltip={
+        <Tooltip>
+          <Text truncate size="T300">
+            Bottom End
+          </Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <IconButton variant="SurfaceVariant" size="600" ref={ref}>
+          <Icon src={Icons.Info} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+    <TooltipProvider
+      position="Left"
+      align="Start"
+      tooltip={
+        <Tooltip>
+          <Text truncate size="T300">
+            Left Start
+          </Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <IconButton variant="SurfaceVariant" size="600" ref={ref}>
+          <Icon src={Icons.Info} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+    <TooltipProvider
+      position="Left"
+      align="Center"
+      tooltip={
+        <Tooltip>
+          <Text truncate size="T300">
+            Left Center
+          </Text>
+        </Tooltip>
+      }
+    >
+      {(ref) => (
+        <IconButton variant="SurfaceVariant" size="600" ref={ref}>
+          <Icon src={Icons.Info} />
+        </IconButton>
+      )}
+    </TooltipProvider>
+    <TooltipProvider
+      position="Left"
+      align="End"
       tooltip={
         <Tooltip>
           <Text truncate size="T300">
-            Tooltip is Long
+            Left End
           </Text>
         </Tooltip>
       }
     >
       {(ref) => (
-        <IconButton variant="Success" size="600" ref={ref}>
+        <IconButton variant="SurfaceVariant" size="600" ref={ref}>
           <Icon src={Icons.Info} />
         </IconButton>
       )}

diff --git a/src/components/tooltip/Tooltip.tsx b/src/components/tooltip/Tooltip.tsx
@@ -44,17 +44,16 @@ const useTooltip = (
 
     const tooltipCss = getRelativeFixedPosition(
       anchor.getBoundingClientRect(),
+      baseEl.getBoundingClientRect(),
       position,
       align,
       offset,
-      alignOffset,
-      baseEl.getBoundingClientRect()
+      alignOffset
     );
-    baseEl.style.top = tooltipCss.top;
-    baseEl.style.bottom = tooltipCss.bottom;
-    baseEl.style.left = tooltipCss.left;
-    baseEl.style.right = tooltipCss.right;
-    baseEl.style.transform = tooltipCss.transform;
+    baseEl.style.top = tooltipCss.top ?? "unset";
+    baseEl.style.bottom = tooltipCss.bottom ?? "unset";
+    baseEl.style.left = tooltipCss.left ?? "unset";
+    baseEl.style.right = tooltipCss.right ?? "unset";
   }, [position, align, offset, alignOffset]);
 
   useEffect(() => {