Implement a new accordion design for SHA256 repository selection
Design
See Design UI for creating a repository as a sha256... (#426803 - closed)
Accordion | Accordion - expanded |
---|---|
Problem
The first version implemented a previous design (without an accordion): !136681 (merged)
Proposal
Update the UI to match proposed design
backend part is mostly ready: Add Accordion for Experimental Settings (New Pr... (!138544 - merged). But AccordionComponent
is not interactive (cannot open/close accordion items).
It requires frontend work to complete it.
Mark Florian's suggestion (
@markrian
):
We add interactivity in several different ways:
- Blank mount point for a Vue application (e.g., most page Vue applications, like Security Configuration)
- Placeholder mount point for Vue application (like gl_redirect_listbox_tag)
- Explicit vanilla JS interactivity applied to HAML template (like groups usage quota)
- Implicit vanilla JS interactivity applied to HAML template (like Bootstrap's data-toggle attributes)
- Implicit Vue instantiation (like our tooltips and popovers)
In this case, I would slightly lean towards the explicit vanilla JS approach, since accordions have very little functionality, and reimplementing in vanilla JS what's already implemented in GlAccordion
in Vue shouldn't be much effort.
I would also be (somewhat) okay with the placeholder mount point, though it requires a bit more effort to pass templates/data to the Vue application.
The blank mount point approach isn't reasonable here, as we try to avoid adding separate applications on a page (this point also applies to the approach above).
Finally, implicit approaches are nowadays frowned upon as it makes it harder to identify usage across the codebase (important for migrations or changes).