Refactor Table/DataTable related components in Figma

[SeamusLeonardHPE]

Building on the release of the "data and friends" and work that has been done by platform teams, led by Marina

HPE Datatable components and move into main library file

• Research & list required atomic components
• Collab with devs to spec all required states

Known issues

Lacking a table footer variant of

[SeamusLeonardHPE]

Related issue 6290
Related from backlog issue 3258

[SeamusLeonardHPE]

Considerations for planning

HTML/CSS Alignment

 

• Basic Structure:
  Cells 
Headers
  Rows 



• Styles: CSS properties: colors, borders, padding, text alignment, font styles, and hover states.

• Attributes: Such as colspan and rowspan for merging cells across columns or rows.

• Accessibility Features: Including the use of scope for headers and aria-labels for more complex tables. 

Atomic Component Design in Figma

 
1. Table Cell (<td>):

•  States: Normal, Hover, Selected, Disabled.
•  Styles: Background color, border, padding, text color, font size.
•  Props: Data type (text, numeric, custom HTML), text alignment, truncation or wrapping.

 
2. Table Header (<th>):

•  States: Normal, Hover, Selected, Disabled.
•  Styles: Often has distinct styling from cells for emphasis; consider bold text, different background, or an icon for sorting.
•  Props: Sortable (none, ascending, descending), alignment, colspan/rowspan.

 
3. Table Footer (<tfoot>):

•  Typically used for summary rows; might not be as common but should be styled for consistency.
•  States & Styles: Similar to the header but used for aggregating data or providing additional information.
•   Props: Alignment, spanning.

 

Customisation Considerations

 

• Interactivity & States: Ensure that the designs account for user interaction states like hover, active, focus, and selected. This may involve subtle color changes, borders, or shadow effects.
•  Data Types & Alignment: Differentiate between text and numerical data. Text is usually left-aligned, while numerical data is right-aligned for easier comparison. Consider also date formats, currency, and potentially icons or images.
•   Scalability: Design components with scalability in mind, allowing for tables with varying numbers of rows and columns. Consider how the table will look with minimal data versus very dense data.
•  Accessibility: Design with accessibility in mind, ensuring that tables can be navigated and understood when using screen readers. This might involve considering how to represent th scope or other ARIA attributes visually.

Research & Alignment

• Define and connect with primary stake holder form product teams, suggest Greg & Marina
• What solutions are team using already (some teams use table builder plugins & style the imported data). We maybe don’t have to be dogmatic about “how” the teams use our component as long as they are implanting our guidance. Experiment & document plugins pros & cons

Other considerations:

Should we be providing pre composed solutions (as templates or components) for larger patterns rows, columns & tables
E.G,
A Column component with 10/20/50 cells that can be batch composed with alignment data type etc
A row component that allows customisation per cell?

Tables, columns & cells that are content driven width. Vs fixed width.
Text wrap vs truncation

Data:

• Get access to accurate platform data for testing - code sandbox & CSVs to allow us to test the designs in browser & in figma.

[SeamusLeonardHPE]

Previous related tickets worth reviewing:

#3258
#3468

Primary stakeholder @gregfuruiye

There is a currently published table solutions from the COM team
https://www.figma.com/file/3cwJzWspbhUapvwPANrOyi/COM-Resources?type=design&node-id=52-371&mode=design

SC Pattern Library
https://www.figma.com/file/26ASd530nNvQFmgvfwTsaE/SC_Table?type=design&node-id=7%3A139&mode=design&t=h0MLjXh9kd5z7bK6-1

[CillianHPE]

Task update.

• Initial Table Refactor Completed
• Component Anatomy Diagram Made
• Table component explainer videos in progress.
• Experiementing with surfacing the Table cell content props to the Table cell level to eliminate the amount of nesting.

TO DO

• Set up testing file for key designers
• Organise users testing (5 users for now)
• Refine Feedback

Link to Figma

@SeamusLeonardHPE

[SeamusLeonardHPE]

Staged ready to be published pending decisions and impact on

• Checkbox atom
• Slot component
• Progress bar

Since this components is likely to be consumed in great numbers I'd like to be cautious, rather than release & refactor.

@CillianHPE if there are any other blockers lets connect on Thur.

[CillianHPE]

@SeamusLeonardHPE

I can say that is unblocked now that checkbox element is complete.
Once the "Ready-to-Use" Table templates and will be able to publish the Table Cells within this Sprint.

[CillianHPE]

https://www.figma.com/file/hrr9Gghw2kdh8iC0AqGkci/%233705-DataTable-refactor?type=design&node-id=28797-3082&mode=design

@SeamusLeonardHPE

Also, a reminder that we need to move the templates across tot he template library, post publish.

Ready for review now.

[SeamusLeonardHPE]

Published and announced:

https://hpe.slack.com/archives/C04LMJWQT/p1714653942208649