Collapsible Component

[simon-wg]

Added a drop in replacement to ContentPane which allows for dropdown.

It's not done being styled yet. Send help I suck at CSS.

[simon-wg]

A drop in replacement for content-pane to make it collapsible.

[GAsplund]

With the new design, do we still need to re-implement ContentPane? Since that just provides CSS that wraps its content, none of which I can see affecting this.

[simon-wg]

Not sure, I didn't know ContentPane needed changes tbh

[GAsplund]

What I mean is to instead of creating a ContentPaneCollapsible that seems to duplicate CSS, we could move the functionality into just Collapsible that implements the new UI elements used

[simon-wg]

I'm not completely sure how that would work, do you mean something like having a prop passed which determines whether the Content pane should be collapsible then?

[simon-wg]

I'm thinking that we don't want to do that since every Content pane would have to be client side then, but maybe the benefit of less duplication is worth it.

[GAsplund]

I would solve this by replacing:

<ContentPaneCollapsible>
  [...]
</ContentPaneCollapsible>

with:

<ContentPane>
  <Collapsible>
    [...]
  </Collapsible>
</ContentPane>

Since with the new design you propose I cannot see why we would create a derivative of ContentPane to make it work with this.

(Side note, I noticed that Collapsible is not used and has duplicated code with ContentPaneCollapsible)

[simon-wg]

That seems to work great honestly, I'll look at replacing it with that solution.

[GAsplund]

I'm thinking that we don't want to do that since every Content pane would have to be client side then, but maybe the benefit of less duplication is worth it.

You could probably make the component entirely server-side by using a hidden checkbox and CSS, similarly to the touchscreen version of header dropdown links

[simon-wg]

I was wrong about the client side issue btw, Collapsible just needed to be dropped in like you showed. Not sure why it wasn't used 😅

[simon-wg]

@GAsplund thoughts now?

[simon-wg]

I think it's fine to keep using a client component here, it shouldn't have any noticeable impact

[GAsplund]

Overall, I like it! Maybe move the header out of the collapsible so that it won't have a chance of being hidden (and imo makes more sense cuz it's not part of lunch contents).

I would also point out that we would probably like to minimize hydration and bundle size, so keeping client-side code to a minimum is always preferable. If you don't want to change it then that's fine, but I will probably do a pass over it later if that's the case.

[simon-wg]

What you're saying sounds good, if you've got time I'd love to see how to do it with checkboxes and CSS instead! We'd probably wanna do the same for the NavDrawer component as well.

[GAsplund]

If it can/should be done for the nav drawer as well then I'm probably ready to approve this (once it's marked ready). I can get a fix for both elements later.

[GAsplund]

LGTM