feat(components): Add table components

[mjhuff]

Closes EXEC-1250 and EXEC-1248

Overview

This PR adds several table components to components, introducing a couple new concepts to our design system:

First: Semantic tables. While tables are powerful from a design and accessibility perspective, they can lead to some implementation pitfalls if devs are not careful. I've done my best to write helpful comments on when to use which table-esque component. There are a couple important dev considerations when using tables:

1. Child content by its nature must be injected in a <table>, and this means that when using a component with <table>, it's best practice to also inject <tr> tags appropriately. Not doing so isn't the end of the world, but it's a good idea to do so in order to capture the benefits for using semantic table tags. This can't really be enforced through testing, but I have added comments.

2. Tables are really our first foray into dealing with non-design system components that should directly share the same styling with design system components, ie, if we have table headers that are grid-enforced, we do care about the injected child content using the same layout styling. When this issue has come up in the past, we've done some hacky things to make content align, but it wasn't great. A solution for now is to introduce CSS grid into our componentization, which mitigates most of the hacks. There's probably still more we can do to make shared styling accessible (like style constants within components that are utilized by injected components), but I do want to sit and think about this a bit.

Second: CSS animation constants. This is highly subject to change as Design starts thinking about unified animations, but it's neat we're starting to do more of it.

Screen.Recording.2025-02-27.at.11.04.28.AM.mov

List Accordion Demo

Test Plan and Hands on Testing

• See storybook: https://s3-us-west-2.amazonaws.com/opentrons-components/components_add-table-components/index.html when CI has sufficiently run. Specifically the SubListTable, ListTable, and ListAccordion components. Note that SubListTable and ListTable should be identical in terms of functionality, they are just semantically different, see code comments.

Changelog

• Added several new table components to the Design system.

Risk assessment

low

[codecov]

Codecov Report

Attention: Patch coverage is 0.55866% with 178 lines in your changes missing coverage. Please review.

Project coverage is 63.12%. Comparing base (1bcbccb) to head (055cc35).
Report is 4 commits behind head on edge.

Files with missing lines	Patch %	Lines
components/src/molecules/ListAccordion/index.tsx	0.00%	96 Missing ⚠️
components/src/atoms/ListTable/index.tsx	0.00%	41 Missing ⚠️
components/src/atoms/SubListTable/index.tsx	0.00%	41 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##             edge   #17604       +/-   ##
===========================================
+ Coverage   25.70%   63.12%   +37.41%     
===========================================
  Files        2843     2847        +4     
  Lines      218884   219294      +410     
  Branches    17947    18186      +239     
===========================================
+ Hits        56268   138430    +82162     
+ Misses     162601    80672    -81929     
- Partials       15      192      +177     

Flag	Coverage Δ
protocol-designer	18.96% <0.55%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
components/src/ui-style-constants/animation.ts	100.00% <100.00%> (ø)
components/src/ui-style-constants/index.ts	100.00% <ø> (ø)
components/src/atoms/ListTable/index.tsx	0.00% <0.00%> (ø)
components/src/atoms/SubListTable/index.tsx	0.00% <0.00%> (ø)
components/src/molecules/ListAccordion/index.tsx	0.00% <0.00%> (ø)

... and 1519 files with indirect coverage changes

[koji]

@mjhuff
question
The design mentions to Helix in Figma but I don't see any web design. Does the design team plan to design a table for web(Desktop app/PD/AI)?

[mjhuff]

@mjhuff question The design mentions to Helix in Figma but I don't see any web design. Does the design team plan to design a table for web(Desktop app/PD/AI)?

It sounds like eventually yes but not currently. Mel was ok placing the components in Helix, but we can talk to her if you have thoughts!

[koji]

@mjhuff question The design mentions to Helix in Figma but I don't see any web design. Does the design team plan to design a table for web(Desktop app/PD/AI)?

It sounds like eventually yes but not currently. Mel was ok placing the components in Helix, but we can talk to her if you have thoughts!

Thanks!
I will have a meeting about UI components with Mel today so I will ask about that since Desktop app has some tables but engineers haven't requested the design team to design a table component so there might be a gap between what we have in the code base and what Mel/the design team thinks.

Also I talked about the unification with Shlok. He told me if supporting web/ODD in one component make its code complicated, it would be okay to create components separately.

[sfoster1]

I think this looks good implementation-wise, but I think it would be even better if you could put the stuff about when and when not to use the components that is currently in comments into description fields in storybook so that it will show up when you navigate there.