HomePhabricator
Diffusion Comm 5ac45fa7c608

[web] introduce panel component

Description

[web] introduce panel component

Summary:
This component introduces the "Panel" component. I built the "Panel" component as the new UI is moslty made up of these "Panels" to house various parts of Comm, and I wanted to make sure we could easily enforce the style rules that every "Panel" will need. The "Panel" component is made up of two parts: the header and the body.

Here are some examples of the header:

Screenshot 2023-12-29 at 6.11.31 PM.png (164×1 px, 43 KB)

Screenshot 2023-12-29 at 6.12.04 PM.png (230×1 px, 19 KB)

Screenshot 2023-12-29 at 6.11.23 PM.png (300×562 px, 15 KB)

Screenshot 2023-12-29 at 6.11.59 PM.png (208×434 px, 10 KB)

Here are examples of the body:

Screenshot 2023-12-29 at 6.14.27 PM.png (1×1 px, 245 KB)

Screenshot 2023-12-29 at 6.14.07 PM.png (840×648 px, 78 KB)

Screenshot 2023-12-29 at 6.14.21 PM.png (1×234 px, 14 KB)

Screenshot 2023-12-29 at 6.13.48 PM.png (1×280 px, 21 KB)

Another thing the "Panel" component needs to consider is that a "Panel" component can have multiple sections. For example, in the screenshot below the app list has one section but the chat card has two sections (the thread list, and the message list). In the screenshot you can see that the message list has a darker background shade than the thread list, indicating that there are two sections here.

Screenshot 2023-12-29 at 6.03.35 PM.png (1×1 px, 259 KB)

Here is an example of a card with three sections (thread list, message list, and members list). Please note that the thread list and members list have the same lighter shade of black compared to the message list)

Screenshot 2023-12-29 at 6.03.27 PM.png (1×1 px, 311 KB)

Depends on 10499

Test Plan:
Please see the following screenshots

Here is an example of single section card (should be no visual differences which is expected)

Screenshot 2023-12-29 at 6.20.34 PM.png (1×434 px, 40 KB)

Here is an example of a two section card:

Screenshot 2023-12-29 at 6.22.31 PM.png (1×682 px, 52 KB)

Here is an example of a three section card:

Screenshot 2023-12-29 at 7.01.37 PM.png (1×1 px, 61 KB)

safari (checking for the shadow styles):

Screenshot 2024-01-03 at 1.35.57 PM.png (1×3 px, 889 KB)

firefox (checking for the shadow styles):

Screenshot 2024-01-03 at 1.36.25 PM.png (2×3 px, 883 KB)

Reviewers: atul, kamil, rohan

Reviewed By: atul

Subscribers: ashoat, tomek

Differential Revision: https://phab.comm.dev/D10500

Details

Provenance
ginsuAuthored on Jan 3 2024, 12:44 PM
Reviewer
atul
Differential Revision
D10500: [web] introduce panel component
Parents
rCOMM2a82d05adb5e: [web] introduce community header
Branches
Unknown
Tags
Unknown