Merge pull request #235 from qualcomm/olaf/gutters-arrows

fix: popup gutters and arrows

Author: R-Bower

.changeset/better-falcons-stay.md

@@ -0,0 +1,8 @@
+---
+"@qualcomm-ui/dom": patch
+"@qualcomm-ui/qds-core": patch
+---
+
+refactor(floating-ui): replace arrow rotation with clip-path diamond
+
+commit: 7717aa9

.changeset/green-planets-argue.md

@@ -0,0 +1,9 @@
+---
+"@qualcomm-ui/core": minor
+"@qualcomm-ui/dom": minor
+"@qualcomm-ui/qds-core": minor
+---
+
+feat(floating-ui): read gutter from CSS --gutter custom property
+
+commit: 0db5e35

packages/common/core/src/combobox/combobox.machine.ts

@@ -310,7 +310,6 @@ const comboboxMachineBase = {
       selectionBehavior: props.multiple ? "clear" : "replace",
       ...props,
       positioning: {
-        gutter: 2,
         placement: "bottom-start",
         sameWidth: true,
         ...props.positioning,

packages/common/core/src/select/select.machine.ts

@@ -626,7 +626,6 @@ export const selectMachine: MachineConfig<SelectSchema> =
         ...props,
         collection: props.collection ?? emptyCollection(),
         positioning: {
-          gutter: 2,
           placement: "bottom-start",
           sameWidth: true,
           ...props.positioning,

packages/common/dom/src/floating-ui/get-placement.ts

@@ -21,11 +21,11 @@ import {
 
 import {getWindow, raf} from "@qualcomm-ui/dom/query"
 import {noop, runIfFn} from "@qualcomm-ui/utils/functions"
-import {isNull} from "@qualcomm-ui/utils/guard"
 import {compact} from "@qualcomm-ui/utils/object"
 
 import {getAnchorElement} from "./get-anchor"
 import {
+  cssVars,
   rectMiddleware,
   shiftArrowMiddleware,
   transformOriginMiddleware,
@@ -43,7 +43,6 @@ const defaultOptions: PositioningOptions = {
   arrowSelector: "[data-part=arrow]",
   fitViewport: false,
   flip: true,
-  gutter: 8,
   listeners: true,
   overflowPadding: 8,
   overlap: false,
@@ -63,7 +62,6 @@ interface Options extends RequiredBy<
   | "strategy"
   | "placement"
   | "listeners"
-  | "gutter"
   | "flip"
   | "slide"
   | "overlap"
@@ -93,18 +91,25 @@ function getArrowMiddleware(arrowElement: HTMLElement | null, opts: Options) {
   })
 }
 
-function getOffsetMiddleware(arrowElement: HTMLElement | null, opts: Options) {
-  if (isNull(opts.offset ?? opts.gutter)) {
-    return
+function getOffsetMiddleware(
+  arrowElement: HTMLElement | null,
+  opts: Options,
+  contextEl?: Element | null,
+) {
+  let cssGutter: number | undefined
+  if (contextEl) {
+    const parsed = parseFloat(
+      getComputedStyle(contextEl).getPropertyValue(cssVars.gutter.variable),
+    )
+    if (!Number.isNaN(parsed)) {
+      cssGutter = parsed
+    }
   }
+
   return offset(({placement}) => {
     const arrowOffset = (arrowElement?.clientHeight || 0) / 2
-
-    const gutter = opts.offset?.mainAxis ?? opts.gutter
-    const mainAxis =
-      typeof gutter === "number"
-        ? gutter + arrowOffset
-        : (gutter ?? arrowOffset)
+    const gutter = opts.offset?.mainAxis ?? opts.gutter ?? cssGutter ?? 2
+    const mainAxis = gutter + arrowOffset
 
     const {hasAlign} = getPlacementDetails(placement)
     const shift = !hasAlign ? opts.shift : undefined
@@ -206,7 +211,7 @@ function getPlacementImpl(
   const arrowEl = floating.querySelector<HTMLElement>(options.arrowSelector)
 
   const middleware: (Middleware | undefined)[] = [
-    getOffsetMiddleware(arrowEl, options),
+    getOffsetMiddleware(arrowEl, options, reference.contextElement),
     getFlipMiddleware(options),
     getShiftMiddleware(options),
     getArrowMiddleware(arrowEl, options),

packages/common/dom/src/floating-ui/get-styles.ts

@@ -7,19 +7,12 @@
 import type {Placement} from "@floating-ui/dom"
 
 import {cssVars} from "./middleware"
-import type {PlacementSide, PositioningOptions} from "./types"
+import type {PositioningOptions} from "./types"
 
 export interface GetPlacementStylesOptions {
   placement?: Placement | undefined
 }
 
-const ARROW_FLOATING_STYLE: Record<PlacementSide, string> = {
-  bottom: "rotate(45deg)",
-  left: "rotate(135deg)",
-  right: "rotate(315deg)",
-  top: "rotate(225deg)",
-} as const
-
 interface ArrowPlacementStyle {
   [p: string]: string
   height: string
@@ -33,7 +26,6 @@ interface ArrowTipPlacementStyle {
   left: "0"
   position: "absolute"
   top: "0"
-  transform: any
   width: "100%"
   zIndex: "inherit"
 }
@@ -83,9 +75,6 @@ export function getPlacementStyles(
       left: "0",
       position: "absolute",
       top: "0",
-      transform: placement
-        ? ARROW_FLOATING_STYLE[placement.split("-")[0] as PlacementSide]
-        : undefined,
       width: "100%",
       zIndex: "inherit",
     } as const,

packages/common/dom/src/floating-ui/middleware.ts

@@ -44,6 +44,7 @@ export const cssVars: Record<
   | "arrowHeight"
   | "arrowWidth"
   | "arrowSizeHalf"
+  | "gutter"
   | "referenceWidth"
   | "transformOrigin",
   CssVar
@@ -54,6 +55,7 @@ export const cssVars: Record<
   arrowSize: toVar("--arrow-size"),
   arrowSizeHalf: toVar("--arrow-size-half"),
   arrowWidth: toVar("--arrow-width", "--arrow-size"),
+  gutter: toVar("--gutter"),
   referenceWidth: toVar("--reference-width"),
   transformOrigin: toVar("--transform-origin"),
 } as const

packages/common/qds-core/src/header-bar/qds-header-bar.css

@@ -45,6 +45,7 @@
 }
 
 .qui-header-bar__nav {
+  --gutter: 4;
   align-items: center;
   display: flex;
   gap: var(--spacing-110);

packages/common/qds-core/src/number-input/qds-number-input.css

@@ -163,6 +163,7 @@
 }
 
 .qui-number-input__unit-select {
+  --gutter: 3;
   align-items: center;
   background: var(--color-background-neutral-01);
   border: none;

packages/common/qds-core/src/popover/qds-popover.css

@@ -1,7 +1,9 @@
 .qui-popover__content {
   --arrow-size: 10px;
+  background: var(--color-surface-overlay);
   border-radius: 4px;
   box-shadow: var(--shadow-high);
+  color: var(--color-text-neutral-primary);
   display: flex;
   flex-direction: column;
   font: var(--font-static-body-xs-default);
@@ -12,8 +14,6 @@
   z-index: calc(var(--z-index-popover) + var(--layer-index));
 
   --arrow-background: var(--color-surface-overlay);
-  background: var(--color-surface-overlay);
-  color: var(--color-text-neutral-primary);
 
   &[data-emphasis="brand"] {
     --arrow-background: var(--color-background-brand-primary);
@@ -22,6 +22,10 @@
   }
 }
 
+.qui-popover__arrow-tip {
+  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+}
+
 .qui-popover__label {
   color: inherit;
   font: var(--font-static-heading-xxs-bold);