Layered Dropdown Menu

[rohan-kadkol]

Changes

WIP

Creating this draft PR with my exploration steps. Once I realize the full scope of this task, will most likely be splitting this PR into smaller PRs.

Testing

Docs

[mayank99]

Before we get too far down this rabbithole, I just want to remind/note that this needs to be a generic pattern that shouldn't be tied to DropdownMenu. There are valid cases for a "sliding" panel that can be triggered by any arbitrary button within an InformationPanel or SideNavigation (submenu) or an AppUI widget.

Some other important requirements:

• It should likely be implemented as a disclosure pattern.
• It should probably move focus into the new panel when "opened".
• Since the "original" panel is off screen, it should be hidden from keyboard/AT users.
• It should contain a back button, which "closes" the panel and moves focus back.
• Maybe it should close on pressing Esc? Unsure.

It might be tricky to come up with the right abstraction for this, but that's part of the exploration work.

[mayank99]

Sharing this example from Firefox as an inspiration. It's basically a multi-level popover (rather than a menu).

I like the subtle animation and I like that it moves focus (although it's questionable that the focus is so far down the second screen. I think it should be on the back button instead).

https://github.com/iTwin/iTwinUI/assets/9084735/3d3c2a5f-b5b0-47ea-b0a0-c83ce50658eb