Side list - New component request

Harshakramesh commented 1 week ago

What does this request relate to?

Planning to adopt this component in the GLP notifications experience.

Describe the feature you'd like to request.

We are working on the GLP notifications north star experience. As a part of it we are looking to adopt a new layout which is similar to an outlook experience, where user's can select the message in the left side list and view the details on the right.

This kind of an experience will fit will in a notifications use case. Where user's need to go to and fro b/w a list and a detailed page instead can view the notification list and detials in the same page.

The new notification experience will be an internal POC for Kobe PI where we are using a full page list. But in the Landon PI we are targeting for GA where we plan to use outlook kind of experience.

We took the inspiration from the support team's design where they have adopted this layout for viewing and managing support cases. - Worked by @GinaTaylor and team.

cc: @SeamusLeonardHPE @halocline

Links to Figma files with use cases or ideations from you.

Figma Link to the notifications/Event hub concept mock targeting in Landon PI s:

The side list component and variants: : https://www.figma.com/design/Gaj4ohgQMWDlT6sf6svciS/GLCP-178822-%26-GLCP-178748---%5BNotifications%5D-Unified-notifications-with-alerts%2C-task-%26-announcements?node-id=13709-12984&t=Eu31pQIouvMxlnrv-1

Figma Link to the short term notification experience in Kobe_WIP (POC): https://www.figma.com/design/Gaj4ohgQMWDlT6sf6svciS/GLCP-178822-%26-GLCP-178748---%5BNotifications%5D-Unified-notifications-with-alerts%2C-task-%26-announcements?node-id=14324-62431&t=Eu31pQIouvMxlnrv-1

Figma Link to the view and manage support cases (Worked by @GinaTaylor and team): https://www.figma.com/design/j7gyNHDnxbFNm4NGXHJl6p/View-Cases-(Case-Mgmt)-on-GLP-Support-Hub?node-id=9871-28387&t=A01VILBvv6XWYWqb-1

How urgent is this request?

Fairly urgent

Is there anything else you would like to mention?

Happy to set up a meeting and run you through the notification UX.

MikeKingdom commented 1 week ago

@Harshakramesh Where's the figma?

Harshakramesh commented 6 days ago

@MikeKingdom I have added the Figma links, there was some issue when I make them a link, but now its visible. Thanks.

halocline commented 4 days ago

On initial review, I am seeing this as:

The components composing the template already exist List + custom list items. I think these could be added as "template" examples. The template can serve as an example for how the list items and item detail view interact, where the currently "selected" item's detail is displayed in the detail view.
As we look to create a catalog of page layouts, I can see this List/Detail page layout being a valuable early addition.
In addition to the List/Detail page layout, there is the element of the Side Navigation. My interpretation is that this navigation provides navigation across pages. If so, the Side Nav should be pulled out of Page and given a greater level in the information hierarchy where pages are children of the Side Nav.

Harshakramesh commented 3 days ago

Thanks @halocline,

Yes, we already have the list component which was designed by @KennyAtHPE a while ago which probably needs to be revisited (correct me if I am wrong). Adding a template and defining the interactions with filters and empty states will be helpful.
So the notification center/event hub (name is not finilized) has 3 sections : 1. Alerts and tasks 2. Announcements and 3. Audit logs. The idea is user can switch b/w these 3 sections using the side nav. The same can be handled via tabs as well.

Let me know if you need a demo, I can set up a meeting for same. Regarding the timeline, we are looking to have this template and components ready to be consumed via Figma and Grommet by Landon PI which might be starting by end of October. Let me know if it is a reasonable timeline.

halocline commented 3 days ago

@Harshakramesh Thank you for the additional detail. I think a conversation would be helpful. We will want to break these features down into:

What exists and is achievable today.
What enhancements to existing components are needed (Figma vs. Grommet).
What is truly "new."

Additionally it would be good for the team to have a chance to ask questions so we have a better understanding of the nuanced details.

grommet / hpe-design-system