search

canonical / vanilla-framework

From community websites to web applications, this CSS framework will help you achieve a consistent look and feel.
https://vanillaframework.io
GNU Lesser General Public License v3.0
837 stars 166 forks source link

Collapsable side panel #5037

Open acarege opened 6 months ago

acarege commented 6 months ago

Component/pattern to amend

We need a collapsable variant of p-panel for applications.

Visual

https://github.com/canonical/vanilla-framework/assets/145002845/bf46a235-85e2-4fe1-aae8-e43b59166214

Context

For the automotive feature of Anbox Cloud, we need a collapsable side panel. You can see the layout for the said feature in the screen record above. The main goals of that page are:

The second point is optional. Some users might not use the side panel at all. Some others may use it from time to time but don't want to have it visible all the time because the main attraction of the page is the AAOS screen. Due to these reasons, the better UX decision is to give user the flexibility of choice on whether they want to see the side panel.

bartaz commented 6 months ago

Currently panels can be opened/closed fully. A button that triggers it could be in the main panel.

panel

Is there any benefit of having the panel constantly there, but in collapsed state? It doesn't seem to show any information in collapsed mode, apart from the button to open it.

acarege commented 6 months ago

Thank you for the quick reply @bartaz ☺️

I believe that having the collapsed state instead of a button trigger creates a more integrated experience. With the collapsed state, the fact that "controls are an integrated part of the AOOS streaming" is conveyed better IMO. I also think that native state actions for a design element should live inside that element whenever possible. In our example:

When you consider this, it makes sense that expand/collapse is together with widen/shrink inside the panel itself, as both actions are related to the panel state.

While reflecting on my choice and considering your button proposal these were my additional thoughts:

Lmk what you think!

bartaz commented 6 months ago

Thanks @acarege for more context.

My suggestion was just to show a similar functionality may currently work with what's in Vanilla.

If there are reasons to extend it to have collapsible panels (and you clearly show that there are) I think the next step would be to bring this up on next Vanilla Working Group, to decide if that's something that should go to Vanilla directly, or should that be developed in your project only for now.

acarege commented 6 months ago

Thank you for the suggestion, I find them very helpful because they might point to a more feasible direction that we haven't thought of, or they might not be suitable but still allow us to reflect on our decision and push us to provide logical reasons for them 🤓

I will attend the next Vanilla WG meeting to extend the discussion as you mentioned. Looking forward!

danielmutis commented 6 months ago

WG: in order to have this in Vanilla there is a lot of work that is required. Exploring similar solutions in other products, detail the way in which we want to do expand and collapse behaviour (including the side nav). For now, this will be implemented as designed in Anbox, but in order to include it in Vanilla there needs to be more detailed explorations.

syncronize-issues-to-jira[bot] commented 3 weeks ago

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-15278.

This message was autogenerated