Tooltip + Dropdown fix

.storybook/theme.js

@@ -10,7 +10,7 @@ export default create({
 
     brandTitle: 'Code0 Pictor',
     brandUrl: 'https://code0.tech',
-    brandImage: 'https://cdn.discordapp.com/attachments/1173726744130375791/1176472242469740604/Logo.png',
+    brandImage: 'https://cdn.discordapp.com/attachments/1187919509298888746/1187921987868299388/Logo.png',
     brandTarget: '_self',
 
     // UI

src/components/button/Button.stories.tsx

@@ -20,7 +20,7 @@ const meta = {
     }
 }
 
-type ButtonStory = StoryObj<{ icon: boolean, disabled: boolean}>;
+type ButtonStory = StoryObj<{ icon: boolean, disabled: boolean }>;
 type ButtonGroupStory = StoryObj<typeof ButtonGroup>;
 
 export default meta

src/components/dropdown/Dropdown.stories.tsx

@@ -25,7 +25,7 @@ export const Dropdowns = () => {
         </Dropdown>
 
 
-        <Dropdown position={"bottom"} align={"start"}>
+        <Dropdown position={"top"} align={"center"}>
             <Dropdown.Trigger>
                 <Button>Open Dropdown</Button>
             </Dropdown.Trigger>

src/components/dropdown/Dropdown.style.scss

@@ -76,47 +76,20 @@
 
   &__menu {
     @include box(false, $color);
+    box-shadow: 0 0 2rem .5rem rgba($bodyBg, 1);
 
-    position: absolute;
+    position: fixed;
+    top: 0;
+    word-break: break-word;
+    left: 0;
     display: none;
     z-index: 99999;
     padding: .5rem;
-    width: 200px;
 
     &--active {
       display: block;
     }
 
-    &[data-position="left"] {
-      inset: 0 auto auto 0;
-      top: 50%;
-      transform: translateX(calc(-100% - .5rem)) translateY(-50%);
-    }
-
-    &[data-position="right"] {
-      top: 50%;
-      right: 0;
-      transform: translateX(calc(100% + .5rem)) translateY(-50%);
-    }
-
-    &[data-position="bottom"] {
-      top: calc(100% + 1rem);
-    }
-
-    &[data-position="top"] {
-      bottom: calc(100% + .5rem);
-    }
-
-    &[data-align="start"] {
-      right: auto;
-      left: 0;
-    }
-
-    &[data-align="end"] {
-      left: auto;
-      right: 0;
-    }
-
   }
 
 }

src/components/dropdown/Dropdown.tsx

@@ -7,11 +7,13 @@ import {DropdownItem} from "./DropdownItem";
 import {DropdownItemGroup} from "./DropdownItemGroup";
 
 export interface DropdownType {
-    children: ReactElement<DropdownTriggerType & DropdownMenuType>[],
+    children: ReactElement<DropdownTriggerType & DropdownMenuType>[]
     //defaults to 'bottom'
     position?: 'top' | 'bottom' | 'left' | 'right'
     //defaults to 'start'
-    align?: 'start' | 'end'
+    align?: 'start' | 'center' | 'end'
+    //defaults to 3 times the size of trigger
+    maxWidthFactor?: number
 }
 
 export interface DropdownTriggerType {
@@ -24,7 +26,7 @@ export interface DropdownMenuType {
 
 const Dropdown: React.FC<DropdownType> = (props) => {
 
-    const {position, align, children, ...args} = props
+    const {position = "bottom", align = "start", maxWidthFactor = 3, children, ...args} = props
     const trigger = getChild(children, DropdownTrigger)
     const menu = getChild(children, DropdownMenu)
 
@@ -70,7 +72,22 @@ const Dropdown: React.FC<DropdownType> = (props) => {
 
         const calculatePosition = () => {
             const calculatedPosition = getPositionAroundTarget(trigger, menu, position)
-            menu.setAttribute("data-position", calculatedPosition)
+            menu.setAttribute("data-position", calculatedPosition.position)
+            menu.style.maxWidth = `${trigger.offsetWidth * maxWidthFactor}px`
+            if (calculatedPosition.position == "top" || calculatedPosition.position == "bottom") {
+                const alignmentX = align == "start" ? calculatedPosition.x :
+                                   align == "center" ? calculatedPosition.x - ((menu.offsetWidth - trigger.offsetWidth) / 2) :
+                                   calculatedPosition.x - (menu.offsetWidth - trigger.offsetWidth)
+
+                menu.style.transform = `translate(${alignmentX}px,${calculatedPosition.y}px)`
+            } else {
+
+                const alignmentY = align == "start" ? calculatedPosition.y :
+                                   align == "center" ? calculatedPosition.y - ((menu.offsetHeight - trigger.offsetHeight) / 2) :
+                                   calculatedPosition.y - (menu.offsetHeight - trigger.offsetHeight)
+
+                menu.style.transform = `translate(${calculatedPosition.x}px,${alignmentY}px)`
+            }
         }
 
         //calculate right position for the menu and set this as new attribute
@@ -102,7 +119,6 @@ const Dropdown: React.FC<DropdownType> = (props) => {
             "onClick": triggerOnClick
         })}
 
-        {/*calculate position based on props*/}
         {!!menu ? React.cloneElement(menu as ReactElement, {
             "data-position": position,
             "data-align": align,

src/components/tooltip/Tooltip.stories.tsx

@@ -0,0 +1,55 @@
+import {Meta} from "@storybook/react";
+import Tooltip from "./Tooltip";
+import Button from "../button/Button";
+import React from "react";
+
+const meta: Meta = {
+    title: "Tooltip"
+}
+
+export const TooltipExample = () => {
+    return <>
+        <Tooltip position={"top"}>
+            <Tooltip.Trigger>
+                <Button>
+                    Test
+                </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Menu>
+                Test 2
+            </Tooltip.Menu>
+        </Tooltip>
+        <Tooltip position={"left"}>
+            <Tooltip.Trigger>
+                <Button>
+                    Test
+                </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Menu>
+                Test 2
+            </Tooltip.Menu>
+        </Tooltip>
+        <Tooltip position={"bottom"}>
+            <Tooltip.Trigger>
+                <Button>
+                    Test
+                </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Menu>
+                Test 2
+            </Tooltip.Menu>
+        </Tooltip>
+        <Tooltip position={"right"}>
+            <Tooltip.Trigger>
+                <Button>
+                    Test
+                </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Menu>
+                Test 2
+            </Tooltip.Menu>
+        </Tooltip>
+    </>
+}
+
+export default meta

src/components/tooltip/Tooltip.style.scss

@@ -0,0 +1,87 @@
+@import "../../styles/helpers";
+
+.tooltip {
+
+  $color: $secondary;
+  width: fit-content;
+
+  &__trigger {
+    width: fit-content;
+    position: relative;
+
+    > * {
+      margin: 0 !important;
+    }
+  }
+
+  &__trigger:hover + &__menu {
+    display: block;
+  }
+
+  &__menu {
+    @include box(false, $color);
+    box-shadow: 0 0 2rem .5rem rgba($bodyBg, 1);
+
+    position: fixed;
+    top: 0;
+    word-break: break-word;
+    left: 0;
+    display: none;
+    z-index: 99999;
+    padding: .5rem;
+
+    &:hover {
+      display: block;
+    }
+
+    &[data-position="left"] {
+      &:before {
+        position: absolute;
+        content: "";
+        top: 0;
+        right: -.5rem;
+        background: transparent;
+        width: .5rem;
+        height: 100%;
+      }
+    }
+
+    &[data-position="right"] {
+      &:before {
+        position: absolute;
+        content: "";
+        top: 0;
+        left: -.5rem;
+        background: transparent;
+        width: .5rem;
+        height: 100%;
+      }
+    }
+
+    &[data-position="bottom"] {
+      &:before {
+        position: absolute;
+        content: "";
+        top: -.5rem;
+        left: 0;
+        background: transparent;
+        width: 100%;
+        height: .5rem;
+      }
+    }
+
+    &[data-position="top"] {
+      &:before {
+        position: absolute;
+        content: "";
+        bottom: calc(-.5rem - 1px);
+        left: 0;
+        background: transparent;
+        width: calc(100% + 2px);
+        height: .5rem;
+      }
+    }
+
+  }
+
+}