canonical / canonical/vanilla-framework
[New pattern]: Stacked side panels
- Dominant language
- HTML
- Stars
- 983
- Forks
- 216
- Avg merge
- 3d 13h
- Merged PRs (30d)
- 3
Description
# Pattern proposal: Stacked side panels
This pattern introduces the ability to open a secondary panel on top of an existing one, allowing users to complete contextual sub-flows without navigating away from the primary task.
## Visual
https://github.com/user-attachments/assets/e6645fae-a7e9-4c0e-8549-f6fd991c44e7
## Context
This pattern is a proposed extension to the existing side panel component. It introduces the concept of a **stacked side panel**, which enables users to launch a secondary panel from within a primary panel to complete a related but distinct action without leaving the original flow.
For example, when creating a repository mirror in Landscape, the user must also select a GPG key. If the key doesn't yet exist, they currently have to navigate away to create it. With stacked side panels, a user could add a new GPG key inline, within a secondary panel, and return to the original flow after completion. This improves task continuity and reduces navigation friction.
This pattern is not intended to replace stepped form flows, but rather to allow lightweight, contextual interactions nested within a primary process.
## State
- **Primary panel open / secondary panel closed**
- **Primary and secondary panels open (stacked)**
- **Secondary panel closed (returns focus to primary)**
- **Dismissed (both panels closed)**
## Progressive enhancement
The interaction model, particularly for mobile and small screens, has been inspired by [Silk’s Sheet with stacking](https://silkhq.co/#example-sheet-with-stacking-h2), which demonstrates a clear and effective way to manage multiple stacked panels in limited space.
Contributor guide
Research direction
Start by reading the existing side panel component and its current responsive behavior, then compare the proposed states with the linked stacking example. Done means the framework supports opening a secondary panel over a primary panel, returning focus to the primary panel when dismissed, and closing both panels as described.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100