Merge branch 'next' into feat/relative-sizing

digdir · Oct 23, 2024 · 4dcf746 · 4dcf746
2 parents 0e96b56 + e0c8bc4
commit 4dcf746
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 22 deletions.
diff --git a/apps/storefront/app/grunnleggende/for-designere/eget-tema/page.mdx b/apps/storefront/app/grunnleggende/for-designere/eget-tema/page.mdx
@@ -43,7 +43,7 @@ Dette alternativet krever **ikke** Token Studio. Med dette alternativet kjører
 1. Gå til [Temabyggeren](https://next.theme.designsystemet.no) og generer fargeskalaen ut i fra dine profilfarger.
 2. Hent komponentbiblioteket fra [Figma Community](https://www.figma.com/community/file/1322138390374166141/designsystemet-core-ui-kit) (Trykk "Open in Figma"). Merk at dette blir en kopi av komponentbiblioteket uten noen kobling mot hovedfilen. Filen har nå lagt seg i dine "drafts", så du må flytte den til et fornuftig sted i din organisasjon.
 3. Installer designsystemets [plugin for Figma](https://www.figma.com/community/plugin/1382044395533039221/designsystemet-beta).
-4. Kopier kodesnutten og lim den inn i pluginen du installerte i steg 2. Utvikler må kjøre samme kodesnutten i en terminal for å generere Design Tokens for kode. 
+4. Gå tilbake til [Temabyggeren](https://next.theme.designsystemet.no) og klikk "Ta i bruk tema". Kopier kodesnutten og lim den inn i pluginen du installerte i steg 3. (For å generere Design Tokens for kode må utvikler kjøre samme kodesnutt i en terminal.) 
 5. Velg "Oppdater variabler". Nå skal du se alle komponentene med dine egne profilfarger i Figma. For at andre designere i organisasjonen skal kunne bruke komponentene må du publisere filen.
 
 

diff --git a/packages/css/tooltip.css b/packages/css/tooltip.css
@@ -3,15 +3,41 @@
   --dsc-tooltip-color: var(--ds-color-neutral-background-default);
   --dsc-tooltip-border-radius: var(--ds-border-radius-default);
   --dsc-tooltip-padding: var(--ds-spacing-1) var(--ds-spacing-2);
+  --dsc-tooltip-arrow-size: var(--ds-spacing-2);
 
   background: var(--dsc-tooltip-background);
   border-radius: var(--dsc-tooltip-border-radius);
   box-sizing: border-box;
   color: var(--dsc-tooltip-color);
   line-height: var(--ds-line-height-sm);
   padding: var(--dsc-tooltip-padding);
-}
 
-.ds-tooltip__arrow {
-  fill: var(--dsc-tooltip-background);
+  &::before {
+    content: '';
+    background: var(--dsc-tooltip-background);
+    box-sizing: border-box;
+    height: var(--dsc-tooltip-arrow-size);
+    width: var(--dsc-tooltip-arrow-size);
+    position: absolute;
+    left: var(--ds-tooltip-arrow-x);
+    top: var(--ds-tooltip-arrow-y);
+    translate: -50% -50%;
+    rotate: 45deg;
+  }
+
+  &[data-placement='top']::before {
+    top: 100%;
+  }
+
+  &[data-placement='left']::before {
+    left: 100%;
+  }
+
+  &[data-placement='right']::before {
+    left: 0;
+  }
+
+  &[data-placement='bottom']::before {
+    top: 0;
+  }
 }
diff --git a/packages/react/src/components/Tooltip/Tooltip.tsx b/packages/react/src/components/Tooltip/Tooltip.tsx
@@ -1,7 +1,6 @@
 import {
-  FloatingArrow,
   FloatingPortal,
-  arrow,
+  type MiddlewareState,
   autoUpdate,
   flip,
   offset,
@@ -26,9 +25,6 @@ import { Fragment, cloneElement, forwardRef, useRef, useState } from 'react';
 
 import type { PortalProps } from '../../types';
 
-const ARROW_HEIGHT = 7;
-const ARROW_GAP = 4;
-
 export type TooltipProps = {
   /**
    * The element that triggers the tooltip.
@@ -84,26 +80,26 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     ref,
   ) => {
     const [isOpen, setIsOpen] = useState(defaultOpen);
+    const internalOpen = userOpen ?? isOpen;
 
     const Container = portal ? FloatingPortal : Fragment;
 
-    const arrowRef = useRef<SVGSVGElement>(null);
-    const internalOpen = userOpen ?? isOpen;
-
     const { refs, floatingStyles, context } = useFloating({
       open: internalOpen,
       onOpenChange: setIsOpen,
       placement,
       whileElementsMounted: autoUpdate,
       middleware: [
-        offset(ARROW_HEIGHT + ARROW_GAP),
+        offset((data) => {
+          // get pseudo element arrow size
+          const styles = getComputedStyle(data.elements.floating, '::before');
+          return parseFloat(styles.height);
+        }),
         flip({
           fallbackAxisSideDirection: 'start',
         }),
         shift(),
-        arrow({
-          element: arrowRef,
-        }),
+        arrowPseudoElement,
       ],
     });
 
@@ -161,12 +157,6 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
               })}
             >
               {content}
-              <FloatingArrow
-                ref={arrowRef}
-                context={context}
-                className='ds-tooltip__arrow'
-                height={ARROW_HEIGHT}
-              />
             </div>
           </Container>
         )}
@@ -176,3 +166,24 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
 );
 
 Tooltip.displayName = 'Tooltip';
+
+const arrowPseudoElement = {
+  name: 'ArrowPseudoElement',
+  fn(data: MiddlewareState) {
+    const { elements, rects, placement } = data;
+
+    const arrowX = rects.reference.width / 2 + rects.reference.x - data.x;
+    const arrowY = rects.reference.height / 2 + rects.reference.y - data.y;
+
+    elements.floating.setAttribute('data-placement', placement);
+    elements.floating.style.setProperty(
+      '--ds-tooltip-arrow-x',
+      `${Math.round(arrowX)}px`,
+    );
+    elements.floating.style.setProperty(
+      '--ds-tooltip-arrow-y',
+      `${Math.round(arrowY)}px`,
+    );
+    return data;
+  },
+};