@asphalt-react/actionlist

Actionlist

A component to display a list of actions. It consists of 2 components

• Actionlist
• Action

Actionlist provides accessibility features to operate on Actions. It also represents a bunch of provided Actions as a list. It supports 3 sizes: small (s), medium (m), large (l) where small is the default size.

An Action can function as any HTML or React element. Each action has an option to include an icon before the caption.

💡 Checkout @asphalt-react/iconpack for SVG wrapped React components.

Accessibility

• Navigate among Actions using ↑ and ↓ arrow keys.
• home and end focuses the first and last Actions respectively.
• Select an action with the enter when in focus.
• Select an actionable action(behave as button) with the enter or space when in focus.
• Action and Actionlist takes care of necessary aria-* attributes.
• Actionlist has role="menu" and actions have role="menuitem" attributes.
• All the actions are organized as list items <li> in an unordered list <ul>.
• You can also add other aria-attributes like aria-labelledby, aria-label to assist screen readers.

Usage

import { Actionlist, Action } from "@asphalt-react/actionlist"
import { Link } from '@reach/router'

function App () {

    return (
        <Actionlist>
            <Action as="Link" asProps={{ to: "/document/edit" }}>
                Edit
            </Action>
            <Action actionable asProps={{ onClick: (event) => {} }}>
                Clone
            </Action>
            <Action>Share</Action>
            <Action>Delete</Action>
        </Actionlist>
    )
}

export default App;

Props

children

List of actions to display inside Actionlist.

type	required	default
node	true	N/A

size

Size of the Actionlist. Accepts s, m, l for small, medium & large.

type	required	default
enum	false	"s"

Action

An action item in an Actionlist. It renders an <a> tag by default.

Props

children

Add caption for each Action.

type	required	default
node	false	N/A

qualifier

Renders an icon or text before the Action's caption. Accepts SVG.

Checkout @asphalt-react/iconpack for SVG icons

type	required	default
union	false	N/A

danger

Applies danger styles to Action.

type	required	default
bool	false	false

actionable

Action behaves like a button.

type	required	default
bool	false	false

as

Use it to replace the default "anchor" tag with your router element. Accepts HTML element or a React component type.

type	required	default
elementType	false	N/A

asProps

Accepts props & attributes for the link element. You can pass attributes like onKeyPress, href.

type	required	default
object	false	{}

separator

Renders a separator before the Action, except for first one.

type	required	default
bool	false	false