shoelace/docs/pages/components
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
..
alert.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
animated-image.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
animation.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
avatar.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
badge.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
breadcrumb-item.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
breadcrumb.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
button-group.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
button.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
card.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
carousel-item.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
carousel.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
checkbox.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
color-picker.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
copy-button.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
details.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
dialog.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
divider.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
drawer.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
dropdown.md Submenus (#1527) 2023-08-21 17:26:41 -04:00
format-bytes.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
format-date.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
format-number.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
icon-button.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
icon.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
image-comparer.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
include.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
input.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
menu-item.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
menu-label.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
menu.md Submenus (#1527) 2023-08-21 17:26:41 -04:00
mutation-observer.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
option.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
popup.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
progress-bar.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
progress-ring.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
qr-code.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
radio-button.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
radio-group.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
radio.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
range.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
rating.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
relative-time.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
resize-observer.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
select.md Submenus (#1527) 2023-08-21 17:26:41 -04:00
skeleton.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
spinner.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
split-panel.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
switch.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
tab-group.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
tab-panel.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
tab.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
tag.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
textarea.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
tooltip.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
tree-item.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
tree.md React import paths (#1507) 2023-08-11 13:09:44 -04:00
visually-hidden.md fix typo 2023-06-08 15:41:03 -04:00