Create and contribute dashboard card templates for platform

halocline commented 8 months ago

As a user of platform, I act in a variety of roles each requiring different actions and levels of attention. My roles span a variety of HPE services which make it time consuming, opaque, and cumbersome to check in on each service individually. It would be a nice convenience for me to have a singular place where I can get a brief, at-a-glance overview of the services, tasks, and topics which are important to me. If the topics require my attention, or I'd like to investigate further, I'd like the convenience of the overview to be able to take me to my topic of interest.

As a service part of platform, I'd like the ability to present at-a-glance, relevant information to users about their service instance.

As UX designer, @jeffstolz is creating an experience where service providers can create and publish dashboard cards delivering at-a-glance information about their service and allow users to navigate from the card to the relevant topic and context within their service.

Additionally, to allow users to customize and personalize their platform home page, this experience will allow users to select from a menu of published dashboard cards, add them to their home screen, and order them according to their preference.

These cards should allow for services to have flexibility in the content they present, but feel visually part of the same family. @jeffstolz has begun design work on these cards visual presentation design file.

Deliverables

[ ] Add dashboard cards to the HPE Design System template library
- [ ] Design library
- [ ] Code library
[ ] Contribute coded dashboard cards to GLCP to be published and consumed from GLCP Storybook.

Considerations

[ ] Responsiveness. Likely container-driven layouts
[ ] Flexibility for a wide variety of services to customize content within the constraints of the template's anatomy.
[x] Accessibility (going to keep the native behavior for cards for now for the accessibility see research below)
- [ ] Focus - tab and arrow key behaviors
- [ ] Semantically correct headings
- [ ] Clear indication of a card's index, topic, and total number of cards in the collection

Initial codesandbox prototype for inspiration Arella and Chloe's intern project on chart customization for Consumption Analytics

KennyAtHPE commented 8 months ago

Amanda Vogel has been working on a similar experience and has a couple of new upcoming related use cases, would be good to reach out more.

jcfilben commented 8 months ago

Keyboard accessibility notes:

The plan is to deliver the card with the default keyboard behavior (tab through every interactive item) and then once we start working on the grid we will do more research and testing on the keyboard behavior. We will likely need to go back and make some changes to the card to better support keyboard behavior within the grid.

Additional resources: APG keyboard patterns published a few grid patterns. Right now the published examples only apply for grid items that have only one interaction associated with them. https://www.w3.org/WAI/ARIA/apg/patterns/grid/

APG does have an open issue for creating a grid example with complex items. https://www.w3.org/WAI/ARIA/apg/patterns/grid/examples/advanced-data-grid/ https://github.com/w3c/aria-practices/issues/155

Meta 2017 article https://engineering.fb.com/2017/03/28/web/aria-grid-supporting-nonvisual-layout-and-keyboard-traversal/ See section: Managing focus inside grid cells See section: Applying this UX pattern widely

britt6612 commented 8 months ago

Friday November 3rd

We had the kick off with Jeff afternoon we started going through the designs. One of the bigger items that came up was keyboard behavior

Monday November 6th

Started a react project in which we could build out the cards and leverage some of the work Matt had already did. Started researching keyboard behavior, Kenny connected w/ Jeff on what he’d expect from us on the design side which were to play more of a consulting role, help him with the Figma templates, and to review the current designs and to help him with the empty state design

Tuesday November 7th

Shared out the keyboard research in which we found and decided it would be a better option to keep the native html behavior. Kenny made adjustments to the cards with changes in which are shown in figma file. Code was cleaned up and changed with some of the feedback from shareout. figma link to the updated designs.

Wed November 8th

Added the empty states card to the figma as well as codesandbox. Jessica and Brittany went through the cards and figma to make sure it all aligned. kenny submitted feedback to Jeff

Thursday

Jeff came back with some changes on the figma file. Meeting so we can all be aligned sending code to devs to review

britt6612 commented 8 months ago

@halocline where is our Add dashboard cards to the HPE Design System template library are we adding this here as well as Contribute coded dashboard cards to GLCP to be published and consumed from GLCP Storybook.

KennyAtHPE commented 8 months ago

11/9 update: We all met w/ Jeff to share the current WIP. He made a couple of suggestions on the recommended changes, but overall we were all aligned. The designs have been updated accordingly within Figma.

britt6612 commented 8 months ago

11/13 met with developers Mike Taylor Jessica Kenny Sulaymon and myself to go over API structure concluded that our API is going to look like this for DashBoardCard

  // title: string | JSX
  // level: number
  // subtitle?: string
  // action:{ href: string, ButtonProps }
  // children?: JSX
  // notification?: NotificationProps

We are considering the option for their testing.

Add testID on Header because the team is using testID for their testing. Even though this is not the best practice to align with their code base we want to add this flexibility so they can still use our template without writing their own.
Allow JSX for the title (for now) so they can add what they need for their testing.

We are leaning towards option 2 so it doesn't get misunderstood that we are saying that `testId` is OK

recording is here https://hpe-my.sharepoint.com/:v:/p/brittany_archibeque/ESEC3x4YZ1VOhVsxWXawKWgBBzhYgw0fYQ9jLbPkVZ8SZg

jcfilben commented 8 months ago

11/13 We are thinking of not contributing the Dashboard Card to the template library at this point (from the code side). I think ideally these cards can just live on platform's storybook. They feel very specific to their use case and if we bring them into the design system template library we become responsible for documenting and maintaining them. It also means that the design system is standing behind this design decision. At this point I don't think we want to commit to that.

From the design side Kenny is planning to talk to Seamus, with the intent of adding this to the figma template library (not the actual use case examples but just the template)

grommet / hpe-design-system