FabMenu

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

A Fab that opens a stack of actions - extended pills, each a FabMenuItem - from one corner of a page. The trigger is a disclosure button (aria-expanded, aria-controls) whose icon turns to a close one while the menu is open. The actions zoom in over theme.transitions, the one next to the trigger first, and are out of the tree while it is closed. Where it floats is the page's: no position is built in.

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

;<FabMenu aria-label="Create">
  <FabMenuItem icon={<Icon name="add" color="inherit" />} onClick={newDocument}>
    New document
  </FabMenuItem>
  <FabMenuItem onClick={newFolder}>New folder</FabMenuItem>
</FabMenu>

Examples

Default

const args: Partial<FabMenuProps> = { 'aria-label': 'Create' }

<Corner>
  <FabMenu {...args}>{actions}</FabMenu>
</Corner>

Extended

const args: Partial<FabMenuProps> = { label: 'Create' }

<Corner>
  <FabMenu {...args}>{actions}</FabMenu>
</Corner>

Down

const args: Partial<FabMenuProps> = { direction: 'down', align: 'start', 'aria-label': 'Create' }

<Flex flexDirection="row" alignItems="flex-start" width="22rem" minHeight="16rem">
  <FabMenu {...args}>{actions}</FabMenu>
</Flex>

Open

const args: Partial<FabMenuProps> = { 'aria-label': 'Create' }

<Corner>
  <FabMenu {...args} defaultOpen>
    {actions}
  </FabMenu>
</Corner>

Colors

const args: Partial<FabMenuProps> = { 'aria-label': 'Create', defaultOpen: true }

<Corner>
  <FabMenu {...args}>
    <FabMenuItem icon={add}>Secondary</FabMenuItem>
    <FabMenuItem icon={add} color="success">
      Success
    </FabMenuItem>
    <FabMenuItem icon={add} color="error">
      Error
    </FabMenuItem>
    <FabMenuItem icon={add} disabled>
      Off
    </FabMenuItem>
  </FabMenu>
</Corner>

Corners

const args: Partial<FabMenuProps> = { 'aria-label': 'Create' }

<CornersDemo {...args} axis="column" />

Corners Sideways

const args: Partial<FabMenuProps> = { 'aria-label': 'Create' }

<CornersDemo {...args} axis="row" />

Sideways

const args: Partial<FabMenuProps> = { 'aria-label': 'Create' }

<Flex flexDirection="column" gap={6} alignItems="center" width="32rem">
  <Flex flexDirection="row" justifyContent="flex-end" width="100%">
    <FabMenu {...args} direction="left" defaultOpen>
      {actions}
    </FabMenu>
  </Flex>
  <Flex flexDirection="row" justifyContent="flex-start" width="100%">
    <FabMenu {...args} direction="right" defaultOpen>
      {actions}
    </FabMenu>
  </Flex>
</Flex>

Controlled

Nothing yet

const args: Partial<FabMenuProps> = { 'aria-label': 'Create' }

<ControlledDemo {...args} />