Components / More

RowActions

The buttons at the end of a row: out of the way until the row is pointed at or holds focus, always shown on touch screens, and in the Tab order only on the row that holds the Tab stop. ListRow, Tree and ChatMessage draw their actions with it; use it for a row of your own.

Source Edit this page

Shown while the row holds focus

When to use

A row (a list entry, a tree item, a message) with a few commands of its own that would clutter every row if always shown.

Use something else when:

the commands are the main thing the row does: make the row a button or a link (ListRow with onClick or href).
the controls always show: a Toolbar or an Inline of buttons.
the row is a whole list of rows: ListRow and Tree already render it.

Usage

tsx

import { IconButton, RowActions } from "@arshad-shah/cynosure";

<li className="file-row">
  <Button ref={main}>report.pdf</Button>
  <RowActions tabbable={main}>
    <IconButton icon={edit} label="Rename" variant="ghost" size="sm" />
    <IconButton icon={trash} label="Delete" variant="ghost" size="sm" />
  </RowActions>
</li>

The row is the element that holds RowActions: hovering it, or focus anywhere in it, shows the actions. When the row is a larger element around it, mark that element with data-row-actions-host (ChatMessage marks the whole message).

In the tab order only on the tab stop row

Props

Every prop of RowActions
Prop	What it does	Type	Default
`children`	The controls: `IconButton`s, a `Menu`, a `Toolbar` of them.	`ReactNode`
`tabbable`	Whether the controls are in the Tab order. A ref to the row's own control (the one a list's roving focus moves between): they are in it only while that control is the list's Tab stop, or always when the ref is empty (a row that cannot be pressed). `true` or `false`: always or never. Left out: their own tabindex is left alone (a `Toolbar` inside manages it).	`boolean \| RefObject<HTMLElement \| null>`
`shown`	Shown whatever the pointer does, such as on a selected row. Default false.	`boolean`	`false`
`className`	Added to the root element, for layout (its place in the row).	`string`
`style`	Layout only. Restyle through --cy-row-actions-* tokens.	`CSSProperties`

Generated from the type definitions in @arshad-shah/cynosure 0.5.0.

Behaviour and accessibility

With a mouse (hover: hover) the actions are hidden by opacity only: they keep their place, so nothing moves when they show, and they stay focusable, so focus reveals them. They show while the row is hovered or holds focus, while a menu of theirs is open, and with shown (a selected row).
On touch screens (no hover) they are always shown; each button keeps a 44px hit area.
tabbable with a ref to the row's own control: the actions are in the Tab order only while that control is the list's Tab stop (roving focus moves it), and always for a row with no control. true or false: always or never. Left out, their own tabindex is kept, as for a Toolbar inside, whose arrows move between them.

Behaviour and accessibility, table 1
Key	Action
`TabTab`	From the row's control (the Tab stop) to its actions, then on
`ShiftShift`+`TabTab`	Back to the row's control

Touch

Always shown: there is no hover to wait for.

Touch shows them always

Theming

Tokens: --cy-row-actions-gap (between the controls) and --cy-row-actions-background (behind them, for actions drawn over a row, as ListRow does with the row's own colour).

ListRow · Tree · ChatMessage · IconButton · Menu

These examples run Cynosure 0.5.0 (commit 50ce30b), the version on npm.

When to useLink to "When to use"

UsageLink to "Usage"

PropsLink to "Props"

Behaviour and accessibilityLink to "Behaviour and accessibility"

TouchLink to "Touch"

ThemingLink to "Theming"