Skip to content

Commit 54d636f

Browse files
committed
feat(action-menu): remove menu selection by default
Use the `selects` attribute set to `single` for previous functionality.
1 parent 6f21bef commit 54d636f

File tree

2 files changed

+27
-1
lines changed

2 files changed

+27
-1
lines changed

packages/action-menu/README.md

+24-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
## Description
22

3-
An `<sp-action-menu>` is 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.
3+
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 held by the `<sp-menu>` that is presented in its overlay, use `selects="single"` to activate this functionality.
44

55
### Usage
66

@@ -219,6 +219,29 @@ A custom icon can be supplied via the `icon` slot in order to replace the defaul
219219
</sp-action-menu>
220220
```
221221

222+
### Selection.
223+
224+
When `selects` is set to `single`, the `<sp-action-menu>` element will maintain one selected item after an initial selection is made.
225+
226+
```html
227+
<p>
228+
The value of the `&lt;sp-action-menu&gt;` element is:
229+
<span id="single-value"></span>
230+
</p>
231+
<sp-action-menu
232+
selects="single"
233+
onchange="this.previousElementSibling.querySelector('#single-value').textContent=this.value"
234+
>
235+
<span slot="label">Available shapes</span>
236+
<sp-menu-item value="shape-1-square">Square</sp-menu-item>
237+
<sp-menu-item value="shape-2-triangle">Triangle</sp-menu-item>
238+
<sp-menu-item value="shape-3-parallelogram">Parallelogram</sp-menu-item>
239+
<sp-menu-item value="shape-4-star">Star</sp-menu-item>
240+
<sp-menu-item value="shape-5-hexagon">Hexagon</sp-menu-item>
241+
<sp-menu-item value="shape-6-circle" disabled>Circle</sp-menu-item>
242+
</sp-action-menu>
243+
```
244+
222245
## Accessibility
223246

224247
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.

packages/action-menu/src/ActionMenu.ts

+3
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,9 @@ import actionMenuStyles from './action-menu.css.js';
3030
* @element sp-action-menu
3131
* @slot icon - The icon to use for action button
3232
* @slot label - The label to use on for the action button
33+
* @attr selects - By default `sp-action-menu` does not manage a selection. If
34+
* you'd like for a selection to be held by the `sp-menu` that it presents in
35+
* its overlay, use `selects="single" to activate this functionality.
3336
*/
3437
export class ActionMenu extends ObserveSlotText(PickerBase, 'label') {
3538
public static get styles(): CSSResultArray {

0 commit comments

Comments
 (0)