shoelace/src
Cory LaViska a4fc1c5b44
Submenus (#1527)
* [RFC] Proof-of-concept commit for submenu support

This is a Request For Comments to seek directional guidance towards
implementing the submenu slot of menu-item.

Includes:
- SubmenuController to manage event listeners on menu-item.
- Example usage in menu-item documentation.
- Trivial tests to check rendering.

Outstanding questions include:
- Accessibility concerns. E.g. where to handle 'ArrowRight',
  'ArrowLeft'?
- Should selection of menu-item denoting submenu be possible or
  customizable?
- How to parameterize contained popup?
- Implementation concerns:
  - Use of ref / id
  - delegation of some rendering to the controller
  - What to test

Related to [#620](https://github.com/shoelace-style/shoelace/issues/620).

* Update submenu-controller.ts

Removed extraneous `console.log()`.

* PoC working of ArrowRight to focus on submenu.

* Revert "PoC working of ArrowRight to focus on submenu."

(Didn't mean to publish this.)

This reverts commit be04e9a221.

* [WIP] Submenu WIP continues.

- Submenus now close on change-of-focus, not a timeout.
- Keyboard navigation support added.
- Skidding fix for better alignment.
- Submenu documentation moved to Menu page.
- Tests for accessibility, right and left arrow keys.

* Cleanup: Removed dead code and dead code comments.

* style: Eslint warnings and errors fixed. npm run verify now passes.

* fix: 2 changes to menu / submenu on-click behavior:

1. Close submenu on click explicitly, so this occurs even if the menu is
   not inside of an sl-dropdown.

2. In menu, ignore clicks that do not explicitly target a menu-item.
   Clicks that were on (e.g. a menu-border) were emitting select events.

* fix: Prevent menu's extraneous Enter / space key propagation.

Menu's handleKeyDown calls item.click (to emit the selection).
Propagating the keyboard event on Enter / space would the cause re-entry
into a submenu, so prevent the needless propagation.

* Submenu tweaks ...

- 100 ms delay when opening submenus on mouseover
- Shadows added
- Distance added to popup to have submenus overlap menu slightly.

* polish up submenu stuff

* stay highlighted when submenu is open

* update changelog

* resolve feedback

---------

Co-authored-by: Bryce Moore <bryce.moore@gmail.com>
2023-08-21 17:26:41 -04:00
..
components Submenus (#1527) 2023-08-21 17:26:41 -04:00
events <sl-copy> (#1483) 2023-08-11 10:27:34 -04:00
internal fix broken tests for shoelace-element (#1516) 2023-08-14 11:23:00 -04:00
styles Underscore was missing (#1195) 2023-02-16 10:39:01 -05:00
themes add more design tokens to docs 2023-01-23 12:55:36 -05:00
translations <sl-copy> (#1483) 2023-08-11 10:27:34 -04:00
utilities <sl-copy> (#1483) 2023-08-11 10:27:34 -04:00
declaration.d.ts Added stepUp, stepDown and showPicker functions (#1013) 2022-11-21 12:41:09 -05:00
shoelace-autoloader.ts fix typo 2023-07-03 15:17:43 -04:00
shoelace.ts <sl-copy> (#1483) 2023-08-11 10:27:34 -04:00