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 |

qualifierEnd

Appends qualifier to the caption.

| type | required | default | | ---- | -------- | ------- | | bool | false | false |

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 |