FabMenu

A Fab that opens a stack of actions - extended pills, each a FabMenuItem - from one corner of a page.

Demos

For usage examples, visit the component demo page: FabMenu

Import

import { FabMenu } from '@soroush.tech/design-system/FabMenu'

Props

Prop	Type	Default	Description
`children`	`FabMenuItem`s	-	The actions, in the order they are drawn: top to bottom.
`icon` / `closeIcon`	`ReactNode`	an add icon / a close icon	The trigger's icon while closed and while open.
`label`	`ReactNode`	-	A label makes the trigger an extended fab; without it, it is a circle.
`aria-label`	`string`	-	Names a trigger with no label - the same open or closed.
`isOpen` / `defaultOpen`	`boolean`	`false`	Controlled with `onOpen` and `onClose`, or at first.
`onOpen` / `onClose`	`(event) => void`	-	Fired when it asks to open or close - on a press, Escape, a press away or an action chosen.
`direction`	`'up'	'down'	'left'
`align`	`'start'	'end'`	`'end'`
`color`	`keyof Theme['palette']`	`'primary'`	The trigger's color.
`size`	`keyof Theme['sizes']`	`'md'`	The trigger's size, and the items'.
`m`, `p`, ... , `className`, `data-testid`			Spacing as `theme.space` keys; on the root.

Against the window

The actions are measured against the window as the menu opens, and again as the window is resized or the page scrolls - so a menu near the edge of a small screen never opens off it. The room kept from the edge is theme.space[2]; the step between the actions theme.space[1].

A row that does not fit becomes a column. If a row is wider than the room beside the trigger, it opens as a column instead - above the trigger where there is more room above it, else below - and goes back to the row once the window has room for it. Each action counts as wide as its whole label.
A column is no wider than the room it has, along the edge it lines up with, so a long label is cut with an ellipsis and the action stays on the screen.
A column is no taller than the room it has, and scrolls when it would be: the focus keys still reach every action, scrolling it into view.

Customization

theme.components.FabMenu styles the root (the trigger's box) and the list (the stack of actions). Its defaultProps set direction, align, color and size. The trigger and the items are Fabs: their look is theme.components.Fab's.

Source code

If this page does not answer your question, have a look at the implementation of the component for more detail.