Hi everyone,
I’d like to open a discussion around an alternative collapse behavior for AccordionPanel, and the trade-offs involved.
Background
AccordionPanel is built on top of SplitPanel, whose core invariant is that available space is always fully distributed among its children. This behavior is relied upon in many places (e.g. notebooks), so changing it at the SplitPanel / SplitLayout level is not desirable.
In the default accordion behavior, when the last visible section is collapsed, its space is redistributed to the nearest visible neighbor (above), which causes the visual effect of the section “dropping down” rather than collapsing in place.
This is consistent with SplitPanel semantics, but not always desirable from an accordion UX point of view.
The proposed approach
Instead of modifying SplitPanel behavior, I experimented with an opt-in AccordionPanel mode (collapseMode: 'in-place') that changes only the redistribution logic used by the accordion.
The key idea is introducing an internal, non-user-visible sink section at the end of the layout:
- The sink is not rendered or exposed to the user
- It participates in size redistribution
- It exists solely to absorb freed space when the last user-visible section collapses
As a result:
- User-visible sections collapse “in place”
- Space redistribution still happens
SplitPanel’s invariant of fully occupying available space remains intact- Default behavior is completely unchanged unless the new option is explicitly enabled
This is conceptually similar to spacer / glue elements used in other UI layout systems.
Trade-off
The main downside is that, in this mode, some space may be allocated to a non-visible internal section. From the layout’s perspective, the space is utilized; from the user’s perspective, it may appear unused.
This is a deliberate trade-off to avoid:
- Altering
SplitPanelsemantics - Introducing directional redistribution rules at the layout level
- Impacting existing consumers such as notebooks
Open questions
- Is this an acceptable compromise for an opt-in accordion-only mode?
- Would it be preferable to formalize this concept (e.g. a documented “sink” or spacer section)?
- Are there alternative approaches that preserve
SplitPanelinvariants while enabling predictable in-place accordion collapse?
I’d discussed this with @krassowski and would appreciate thoughts from others who have worked closely with Lumino layouts or have opinions on the UX vs. layout-invariant trade-off here.
Thanks!
