Implement: `Panel` component

[clarsen-czi]

Acceptance criteria

• make sure MUI's drawer would work, need to scope - DONE!
• implement the Panel using MUI's drawer

Design file

Specs found here: Figma link

Related work

• Feature PR in CZ ID codebase
• Design ticket for updating specs: #792

[cathystoli]

@sidneymbell We are going through our backlog and we never added any updates on our side but is this merged? Any other work needed?

[sidneymbell]

Apologies - the corresponding CZID project ended up increasing in scope quite a bit. The panel is done and implemented within the CZID codebase. There's a bit of work needed to port it over to SDS; I'll probably need to either pair or pass the ball to someone more familiar with the SDS codebase implementation style at some point to push it over the finish line, but the basic functionality is there. I can push a draft PR and ping the team by the end of next week.

Message ID: @.*** com>

[cathystoli]

Yes please! Feel free to create a ticket in our backlog and tag me in it to complete the work to port over to SDS :D

[sidneymbell]

Hey team. Quick question for @clarsen-czi -- can you clarify how you'd like this panel to behave with respect to headers and scrolling? Three use cases to consider:

1 - We have an app bar or header that is fixed into position at the top of the page (i.e., the header does not scroll away as the user scrolls the page content). We want the drawer / panel to be tucked underneath this header / app bar. Here is an example of what that looks like.

2 - We have an app bar or header that we want the drawer/panel to be tucked underneath, but the header can scroll away with the rest of the page. Here's what that looks like. https://github.com/chanzuckerberg/sci-components/assets/12618847/b0040fad-d491-4edc-9a2f-fe7828f20ab1

3 - We want the drawer/panel to squish everything on the page to the side when opened, including overlapping any headers that may be present. Here is what that looks like.

I've currently implemented version (2) in CZID. I also previously had implemented version (1), so happy to dig that up out of the git history if that's the preferred path here.

[clarsen-czi]

Hey @sidneymbell good questions!

There are two different panel variants: panelBasic and panelOverlay (SDS names not MUI).

For both panel variants, the panels should scroll independently of the rest of the page content, so if the user hovers over the panel and scrolls, the content within the panel will scroll, but the main content on the page will remain static and vise versa (if the user hovers over the main content and scrolls, the panel content will remain static)

For panelBasic:

• When opened it squishes the content on the page to provide room for the panel to open into (like how the filter panel and info panel function on CZ ID).
• To my knowledge, there is no product need to have the header collapse when the panel is opened (use case 3 you've described).
• If there is a fixed header, the panel content would scroll behind the header (like in this example you shared).
• If the header is NOT fixed, the header only scrolls out of view when the user scrolls the main content of the page. The header remains at the top of the page if the panel content is scrolled (i.e., the movement of the header is tied to the main content not the panels). I believe this is what you're describing in use case 2.

For panelOverlay:

• When opened, this panel overlaps all page content, except for fixed headers, and does NOT squish any page content
• When the main page content is scrolled, the page scrolls behind the panel and the panel content remains static
• When the panel content is scrolled, the main page content remains static

Let me know if that provides what you need for implementation. Definitely reach out if you need more clarifications!