JSPM – @spectrum-web-components/action-menu@0.4.5-alpha.1+e39e02a1

Package Exports

@spectrum-web-components/action-menu

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@spectrum-web-components/action-menu) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Description

An <sp-action-menu /> is simply an action button with a Popover. Use an <sp-menu> element to outline the items that will be made available to the user when interacting with the sp-action-menu element.

Installation

npm install @spectrum-web-components/action-menu

# or

yarn add @spectrum-web-components/action-menu

Example

<sp-action-menu>
    <span slot="label">More Actions</span>
    <sp-menu>
        <sp-menu-item>
            Deselect
        </sp-menu-item>
        <sp-menu-item>
            Select inverse
        </sp-menu-item>
        <sp-menu-item>
            Feather...
        </sp-menu-item>
        <sp-menu-item>
            Select and mask...
        </sp-menu-item>
        <sp-menu-divider></sp-menu-divider>
        <sp-menu-item>
            Save selection
        </sp-menu-item>
        <sp-menu-item disabled>
            Make work path
        </sp-menu-item>
    </sp-menu>
</sp-action-menu>

Variants

No visible label

The visible label that is be provided via the default <slot> interface can be ommitted in preference of an icon only interface. In this context be sure that the <sp-action-menu> remains accessible to screen readers by applying the label attribute. This will apply an aria-label attribute of the same value to the <botton> element that toggles the menu list.

<sp-action-menu label="More Actions">
    <sp-menu>
        <sp-menu-item>
            Deselect
        </sp-menu-item>
        <sp-menu-item>
            Select inverse
        </sp-menu-item>
        <sp-menu-item>
            Feather...
        </sp-menu-item>
        <sp-menu-item>
            Select and mask...
        </sp-menu-item>
        <sp-menu-divider></sp-menu-divider>
        <sp-menu-item>
            Save selection
        </sp-menu-item>
        <sp-menu-item disabled>
            Make work path
        </sp-menu-item>
    </sp-menu>
</sp-action-menu>

Alternate icon

A custom icon can be supplied via the icon slot in order to replace the default meatballs icon.

<sp-action-menu label="More actions">
    <sp-icon slot="icon" size="xxs" name="ui:ChevronDownSmall"></sp-icon>
    <span slot="label">Actions Under the Arrow</span>
    <sp-menu>
        <sp-menu-item>
            Deselect
        </sp-menu-item>
        <sp-menu-item>
            Select inverse
        </sp-menu-item>
        <sp-menu-item>
            Feather...
        </sp-menu-item>
        <sp-menu-item>
            Select and mask...
        </sp-menu-item>
        <sp-menu-divider></sp-menu-divider>
        <sp-menu-item>
            Save selection
        </sp-menu-item>
        <sp-menu-item disabled>
            Make work path
        </sp-menu-item>
    </sp-menu>
</sp-action-menu>

Accessibility

An sp-action-menu parent will ensure that the wrapped sp-menu features a role of menu and contains children with the role menuitem. Upon focusing the sp-action-menu using ArrowDown will also open the menu while throwing focus into first selected (or unselected when none are selected) menu item for easy selecting of a new value.