1.7.0 • Published 24 days ago

@spectrum-web-components/action-menu v1.7.0

Weekly downloads
176
License
Apache-2.0
Repository
github
Last release
24 days ago

Overview

An <sp-action-menu> is an action button that triggers an overlay with <sp-menu-items> for activation. 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. By default, <sp-action-menu> does not manage a selection. If you'd like for a selection to be managed, use selects="single" on the <sp-menu> to activate this functionality.

Usage

See it on NPM! How big is this package in your project? Try it on Stackblitz

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

Import the side effectful registration of <sp-action-menu> via:

import '@spectrum-web-components/action-menu/sp-action-menu.js';

The default of <sp-action-menu> will load dependencies in @spectrum-web-components/overlay asynchronously via a dynamic import. In the case that you would like to import those tranverse dependencies statically, import the side effectful registration of <sp-action-menu> as follows:

import '@spectrum-web-components/action-menu/sync/sp-action-menu.js';

When looking to leverage the ActionMenu base class as a type and/or for extension purposes, do so via:

import { ActionMenu } from '@spectrum-web-components/action-menu';

Options

Sizes

<sp-action-menu size="s">
    <span slot="label">More Actions</span>
    <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-action-menu>
<sp-action-menu size="m">
    <span slot="label">More Actions</span>
    <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-action-menu>
<sp-action-menu size="l">
    <span slot="label">More Actions</span>
    <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-action-menu>
<sp-action-menu size="xl">
    <span slot="label">More Actions</span>
    <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-action-menu>

Variants

No icon

In order to deliver an <sp-action-menu> without an icon, use the label-only slot. This will supress any icon from being displayed, both the default ellipsis icon or any icon the user might provide to the element.

<sp-action-menu>
    <span slot="label-only">More Actions</span>
    <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-action-menu>

No visible label

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

<sp-action-menu label="More Actions">
    <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-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>
    <sp-icon-settings slot="icon"></sp-icon-settings>
    <span slot="label">Actions under the gear</span>
    <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-action-menu>

Selection

When selects is set to single, the <sp-action-menu> element will maintain one selected item after an initial selection is made.

<p>
    The value of the `&lt;sp-action-menu&gt;` element is:
    <span id="single-value"></span>
</p>
<sp-action-menu
    selects="single"
    onchange="this.previousElementSibling.querySelector('#single-value').textContent=this.value"
>
    <span slot="label">Available shapes</span>
    <sp-menu-item value="shape-1-square">Square</sp-menu-item>
    <sp-menu-item value="shape-2-triangle">Triangle</sp-menu-item>
    <sp-menu-item value="shape-3-parallelogram">Parallelogram</sp-menu-item>
    <sp-menu-item value="shape-4-star">Star</sp-menu-item>
    <sp-menu-item value="shape-5-hexagon">Hexagon</sp-menu-item>
    <sp-menu-item value="shape-6-circle" disabled>Circle</sp-menu-item>
</sp-action-menu>

Force Popover on Mobile Devices

On mobile, the menu can be exposed in either a sp-popover or sp-tray. By default, sp-action-menu will render an sp-tray. If you would like to render sp-popover on mobile, add the attribute force-popover to the sp-action-menu.

Usage Guidance:

  • Use a tray when a menu’s proximity to its trigger is considered to be less important to the experience, or for showing a volume of content that is too overwhelming for a popover.
  • Use a popover when a menu’s proximity to its trigger is considered to be important to the experience, or for showing a volume of content that is manageable for a popover.

To see this functionality in action, load this page from your mobile device or use Chrome DevTools (or equivalent) and select a mobile device once the Device Toolbar (the phone/tablet icon) is active.

<sp-action-menu force-popover>
    <span slot="label">Action Menu</span>
    <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-action-menu>

Adding tootip in action menu

Tooltip in action menu can be attached via adding <sp-tooltip> and can be customized by using various parameters (e.g. placement, content, etc) as needed.

<sp-action-menu>
    <sp-tooltip slot="tooltip" self-managed placement="bottom">
        Content
    </sp-tooltip>
    <span slot="label">Available shapes</span>
    <sp-menu-item value="shape-1-square">Square</sp-menu-item>
    <sp-menu-item value="shape-2-triangle">Triangle</sp-menu-item>
    <sp-menu-item value="shape-3-parallelogram">Parallelogram</sp-menu-item>
</sp-action-menu>

Accessibility

An <sp-action-menu> parent will ensure that the internal <sp-menu> features a role of listbox and contains children with the role option. 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 to assist in selecting of a new value.

1.6.0

2 months ago

1.4.1-beta.0

3 months ago

1.5.0

3 months ago

1.4.0

3 months ago

1.1.0-beta.50

7 months ago

1.1.0-beta.51

7 months ago

1.1.0-beta.54

7 months ago

1.1.0-beta.55

7 months ago

1.1.0-beta.52

7 months ago

1.1.0-beta.53

7 months ago

1.4.0-beta.0

4 months ago

1.3.0

4 months ago

1.1.0-beta.10

8 months ago

1.1.0-beta.11

8 months ago

1.1.0-beta.14

8 months ago

1.1.0-beta.15

8 months ago

1.1.0-beta.12

8 months ago

1.1.0-beta.13

8 months ago

1.1.0-beta.18

8 months ago

1.1.0-beta.19

8 months ago

1.3.0-testing.0

4 months ago

1.1.0-beta.16

8 months ago

1.1.0-beta.17

8 months ago

1.1.0-beta.9

8 months ago

1.1.0-beta.8

8 months ago

1.1.0-beta.7

8 months ago

1.1.0-beta.2

8 months ago

1.1.0-beta.21

8 months ago

1.1.0-beta.6

8 months ago

1.1.0-beta.22

8 months ago

1.1.0-beta.5

8 months ago

1.1.0-beta.4

8 months ago

1.1.0-beta.20

8 months ago

1.1.0-beta.3

8 months ago

1.1.0-beta.25

8 months ago

1.1.0-beta.26

8 months ago

1.1.0-beta.23

8 months ago

1.1.0-beta.24

8 months ago

1.1.0-beta.29

8 months ago

1.1.0-beta.27

8 months ago

1.1.0-beta.28

8 months ago

1.1.0-beta.32

8 months ago

1.1.0-beta.33

8 months ago

1.1.0-beta.30

8 months ago

1.1.0-beta.31

8 months ago

1.1.0-beta.36

8 months ago

1.1.0-beta.37

7 months ago

1.1.0-beta.34

8 months ago

1.1.0-beta.35

8 months ago

1.1.0-beta.38

7 months ago

1.1.0-beta.39

7 months ago

1.3.1-beta.0

4 months ago

1.1.0-beta.40

7 months ago

1.1.0-beta.43

7 months ago

1.1.0-beta.44

7 months ago

1.1.0-beta.41

7 months ago

1.1.0-beta.42

7 months ago

1.1.0-beta.47

7 months ago

1.1.0-beta.48

7 months ago

1.1.0-beta.45

7 months ago

1.1.0-beta.46

7 months ago

1.7.0

24 days ago

1.5.0-beta.0

3 months ago

1.3.0-beta.1

4 months ago

1.3.0-beta.2

4 months ago

1.3.0-beta.3

4 months ago

1.3.0-beta.4

4 months ago

1.3.0-beta.5

4 months ago

1.3.0-beta.6

4 months ago

1.3.0-beta.0

4 months ago

1.5.1-beta.0

3 months ago

1.6.0-beta.0

3 months ago

1.2.0

4 months ago

1.1.1

5 months ago

1.1.0

5 months ago

1.1.2

5 months ago

1.2.0-beta.9

4 months ago

1.0.2

7 months ago

1.2.0-beta.8

4 months ago

1.0.1

8 months ago

1.0.3

7 months ago

1.2.0-beta.1

5 months ago

1.2.0-beta.0

5 months ago

1.2.0-beta.3

5 months ago

1.2.0-beta.2

5 months ago

1.2.0-beta.5

5 months ago

1.2.0-beta.4

5 months ago

1.2.0-beta.7

4 months ago

1.2.0-beta.6

5 months ago

1.2.0-beta.16

4 months ago

1.2.0-beta.15

4 months ago

1.2.0-beta.18

4 months ago

1.2.0-beta.17

4 months ago

1.2.0-beta.12

4 months ago

1.2.0-beta.11

4 months ago

1.2.0-beta.14

4 months ago

1.2.0-beta.13

4 months ago

1.6.1-beta.0

2 months ago

1.2.0-beta.10

4 months ago

1.2.0-beta.19

4 months ago

1.0.0-rc.9

8 months ago

1.0.0-rc.7

8 months ago

1.0.0-rc.8

8 months ago

1.0.0-rc.5

8 months ago

1.0.0-rc.6

8 months ago

1.0.0-rc.10

8 months ago

1.0.0-rc.3

8 months ago

1.0.0-rc.4

8 months ago

1.0.0-rc.1

8 months ago

1.0.0-rc.2

8 months ago

0.50.0-beta.11

8 months ago

0.50.0-beta.12

8 months ago

0.50.0-beta.10

8 months ago

1.1.0-beta.1

8 months ago

1.1.0-beta.0

8 months ago

0.50.0-beta.9

8 months ago

0.50.0-beta.8

8 months ago

0.50.0-beta.7

8 months ago

0.50.0-beta.6

8 months ago

0.50.0-beta.5

8 months ago

0.50.0-beta.4

8 months ago

1.0.0

8 months ago

0.50.0-beta.3

8 months ago

0.50.0-beta.2

8 months ago

1.0.0-rc.0

9 months ago

0.50.0-beta.1

9 months ago

0.49.0-beta.2

9 months ago

0.50.0-beta.0

9 months ago

0.49.0

9 months ago

0.49.0-beta.1

9 months ago

0.48.0-beta.0

9 months ago

0.48.0-beta.1

9 months ago

0.48.0-beta.2

9 months ago

0.49.0-beta.0

9 months ago

0.48.1

9 months ago

0.43.0

1 year ago

0.44.0

12 months ago

0.45.0

11 months ago

0.42.5

1 year ago

0.48.0

10 months ago

0.46.0

11 months ago

0.47.1

10 months ago

0.47.2

10 months ago

0.47.0

11 months ago

0.42.4

1 year ago

0.42.3

1 year ago

0.42.2

1 year ago

0.42.1

1 year ago

0.42.0

1 year ago

0.41.2

1 year ago

0.41.1

1 year ago

0.41.0

1 year ago

0.40.5

1 year ago

0.40.4

1 year ago

0.40.3

1 year ago

0.40.2

2 years ago

0.40.1

2 years ago

0.35.1-rc.15

2 years ago

0.35.1-rc.26

2 years ago

0.35.1-rc.24

2 years ago

0.38.0

2 years ago

0.35.1-rc.34

2 years ago

0.35.1-rc.43

2 years ago

0.35.1-rc.41

2 years ago

0.39.1

2 years ago

0.39.0

2 years ago

0.39.4

2 years ago

0.39.3

2 years ago

0.39.2

2 years ago

0.36.0

2 years ago

0.40.0

2 years ago

0.37.0

2 years ago

0.34.1-rc.0

2 years ago

0.34.0

2 years ago

0.35.0

2 years ago

0.32.0

2 years ago

0.31.1-react.3

2 years ago

0.31.1-react.2

2 years ago

0.33.2

2 years ago

0.33.1

2 years ago

0.33.0

2 years ago

0.30.0

2 years ago

0.31.0

2 years ago

0.31.1-react.21

2 years ago

0.16.1-overlay.8

2 years ago

0.16.1-overlay.7

2 years ago

0.16.1-overlay.9

2 years ago

0.16.0

2 years ago

0.16.1

2 years ago

0.16.2

2 years ago

0.15.14

2 years ago

0.15.13

2 years ago

0.15.12-react.75

2 years ago

0.15.12-react.50

2 years ago

0.15.12

2 years ago

0.15.12-react.48

2 years ago

0.15.12-react.49

2 years ago

0.15.9-react.54

3 years ago

0.15.12-react.32

2 years ago

0.15.10-style.28

3 years ago

0.15.10

2 years ago

0.15.11

2 years ago

0.15.9

3 years ago

0.15.4

3 years ago

0.15.5

3 years ago

0.15.6

3 years ago

0.15.7

3 years ago

0.15.8

3 years ago

0.15.1

3 years ago

0.15.2

3 years ago

0.15.3

3 years ago

0.14.1-devmode.0

3 years ago

0.14.1-devmode.7

3 years ago

0.14.0

3 years ago

0.14.1

3 years ago

0.15.0

3 years ago

0.15.0-devmode.0

3 years ago

0.13.16

3 years ago

0.14.2-devmode.0

3 years ago

0.13.15-slim.2

3 years ago

0.13.15

3 years ago

0.13.14

3 years ago

0.13.13

3 years ago

0.13.12

3 years ago

0.13.11

3 years ago

0.13.11-slim.10

3 years ago

0.14.0-slim.10

3 years ago

0.13.9-express.0

3 years ago

0.13.8

3 years ago

0.13.9

3 years ago

0.13.10

3 years ago

0.13.6

3 years ago

0.13.7

3 years ago

0.13.2

3 years ago

0.13.3

3 years ago

0.13.4

3 years ago

0.13.5

3 years ago

0.13.3-express.0

3 years ago

0.13.8-express.9

3 years ago

0.13.0

4 years ago

0.13.1

4 years ago

0.13.2-express.0

4 years ago

0.12.1

4 years ago

0.12.0

4 years ago

0.11.6

4 years ago

0.11.5

4 years ago

0.11.4

4 years ago

0.11.3

4 years ago

0.11.2

4 years ago

0.11.2-beta.3

4 years ago

0.11.1

4 years ago

0.11.2-alpha.1

4 years ago

0.11.0

4 years ago

0.11.1-alpha.1

4 years ago

0.10.4

4 years ago

0.10.5-alpha.1

4 years ago

0.10.3

4 years ago

0.10.4-alpha.1

4 years ago

0.10.3-alpha.1

4 years ago

0.10.2

4 years ago

0.10.2-alpha.14

4 years ago

0.10.2-alpha.13

4 years ago

0.10.2-alpha.12

4 years ago

0.10.2-alpha.1

4 years ago

0.10.1

4 years ago

0.10.1-alpha.22

4 years ago

0.10.1-alpha.0

4 years ago

0.10.0

4 years ago

0.9.8-alpha.0

4 years ago

0.9.7

4 years ago

0.9.6

4 years ago

0.9.6-alpha.1

4 years ago

0.9.6-alpha.0

4 years ago

0.9.5-alpha.26

4 years ago

0.9.5

4 years ago

0.9.5-alpha.23

4 years ago

0.9.5-alpha.22

4 years ago

0.9.5-alpha.21

4 years ago

0.9.5-beta.17

4 years ago

0.9.5-beta.16

4 years ago

0.9.5-beta.11

4 years ago

0.9.5-beta.10

4 years ago

0.9.5-beta.13

4 years ago

0.9.5-beta.12

4 years ago

0.9.5-beta.15

4 years ago

0.9.5-beta.14

4 years ago

0.9.5-alpha.12

4 years ago

0.9.5-alpha.11

4 years ago

0.9.5-alpha.10

4 years ago

0.9.5-alpha.17

4 years ago

0.9.5-alpha.9

4 years ago

0.9.4

4 years ago

0.9.3

4 years ago

0.9.2

4 years ago

0.9.1

4 years ago

0.9.0

4 years ago

0.8.3-alpha.33

4 years ago

0.8.3

4 years ago

0.8.2

4 years ago

0.8.1

4 years ago

0.8.0

4 years ago

0.6.6-alpha.178

4 years ago

0.7.0

4 years ago

0.7.0-alpha.40

4 years ago

0.6.6-alpha.169

4 years ago

0.6.6-alpha.84

5 years ago

0.6.6-alpha.85

5 years ago

0.6.6-alpha.60

5 years ago

0.6.5-alpha.0

5 years ago

0.6.5

5 years ago

0.6.4

5 years ago

0.6.4-beta.17

5 years ago

0.6.4-alpha.17

5 years ago

0.6.3

5 years ago

0.6.2

5 years ago

0.6.2-alpha.0

5 years ago

0.6.1

5 years ago

0.6.0

5 years ago

0.5.7-alpha.44

5 years ago

0.5.7

5 years ago

0.5.7-alpha.1

5 years ago

0.5.6-alpha.0

5 years ago

0.5.6

5 years ago

0.5.5

5 years ago

0.5.4

5 years ago

0.5.3

5 years ago

0.5.2

5 years ago

0.5.1

5 years ago

0.5.0

5 years ago

0.4.11-alpha.38

5 years ago

0.4.11-alpha.6

5 years ago

0.4.10

5 years ago

0.4.9

5 years ago

0.4.8

5 years ago

0.4.7

5 years ago

0.4.6

5 years ago

0.4.5

5 years ago

0.4.5-alpha.0

5 years ago

0.4.5-alpha.1

5 years ago

0.4.4

5 years ago

0.4.3

5 years ago

0.4.2

5 years ago

0.4.1

5 years ago

0.4.0

5 years ago

0.3.8

5 years ago

0.3.7

5 years ago

0.3.6

5 years ago

0.3.5

5 years ago

0.3.4

6 years ago

0.3.3

6 years ago

0.3.2

6 years ago

0.3.1

6 years ago

0.3.0

6 years ago

0.2.2

6 years ago

0.2.1

6 years ago

0.2.0

6 years ago

0.1.3

6 years ago

0.1.2

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago

0.0.1

6 years ago