Skip to main content

FloatingPanel

Status: No dedicated documentation exists in design-system-docs (checked main + all open PRs, verified 2026-08-19). This is a factual scaffold, not real guidance — every qualitative section below is an explicit placeholder for a human writer. Nothing has been invented.

Source: DTSL/design-system → packages/product/@dtsl-react/src/components/molecular/FloatingPanel/types/FloatingPanel.types.ts (package @dtsl/react, exported as FloatingPanel)

Props (verbatim from source)​

export interface FloatingPanelProps {
	isVisible: boolean
	setIsVisible: (visible: boolean) => void
	children: React.ReactNode
	className?: string
	style?: React.CSSProperties
	triggerRef: React.RefObject<HTMLElement>
}

Note: this is used internally by Timepicker (imported as _FloatingPanel in its source) — likely a general-purpose positioned-panel primitive that other molecular components build on.

When to Use​

TODO — no existing UX/product guidance found in source, Storybook, or docs. Needs input from design/PM.

When NOT to Use​

TODO — needs UX/product input. Name the alternative component if one exists (e.g. Popover or SelectMenu, which appear to serve similar triggered-panel use cases).

Decision Logic​

TODO — needs UX/product input on FloatingPanel vs Popover selection.

Accessibility​

TODO — needs UX/product input.

Common Mistakes​

TODO — needs UX/product input.