Overview

Menu, Popover, and Tooltip components use the Floating UI library to position a floating element. A number is passed to a Floating UI's middleware option, for example, offset( 4 ), which represents the 4-pixel unit spacing between the floating element and its anchor. This leaves the code exposed to hardcoded values. We should consider using JS tokens instead of hardcoded values in .vue and .ts files. This idea was mentioned in a comment in useFloatingMenu.ts and this patch.

Requirements

• Floating UI: The floating-ui library requires pixel units to function correctly, so we'd need to convert our rem values back into pixels before passing them to the library. https://floating-ui.com/docs/misc#relative-units
• Jest test compatibility: Jest tests have trouble parsing JS design tokens. In this patch, we decided to postpone this work until we've resolved these issues.
• Accessibility: Setting the max-width/max-height in pixel values prevents text size zoom settings from working completely. (Thanks to @Volker_E for pointing this out in T390102!)

Related tasks

T324688: Publish design tokens as JS variables
T390102: Popover: Don't set max-width/max-height in px values

Acceptance Criteria

• Replace hardcoded values with JS tokens in useFloatingMenu.ts, Popover.vue, and Tooltip.ts.
• Ensure Jest tests can interpret the JS tokens.