Design System: Consistency between table headers

[thetanmancan]

Overview

We need to add table headers to our design system so that they appear consistent throughout the site.

Details

There are tables throughout the TDM site, but their headers are inconsistent in their color and styling. See the below images as examples.

Dark navy header

Screenshot from the Create Project page 2 table

Screenshot from the Create Project page 4 table

Screenshot from the Security table

Screenshot from the FAQ table

Dark blue header

Screenshot from the My Projects table

White header

Screenshot from the Feedback table

This issue comment is what the Submit Snapshot table should be referencing for its design update in #2004 .

Image of the Submit Snapshot form in 1407

Light gray header

Screenshot from the Create Project page 5 table

The reason the Create Project page 5 table's headers are light gray are 1. To indicate that it's not interactive like the calculator on earlier pages. 2. It's not intended to be printed.

This table does not need to have its header color changed to match the others in the style guide due to the above-stated reasons. It is included only to illustrate the diversity of table stylings on the site.

Action Items

• Decide on color and other styling guidelines for tables.
• Add issues for the styling guidelines to be applied to the tables on the My Projects page, Security page, FAQ, and Create Project pages 2, 4, and 5, if applicable.
• Review with design team. Update if needed based on feedback.
• Review with product and dev. Update if needed based on feedback.
• Add a slide on the the staging deck
• Get Stakeholder sign-off via the stakeholder meeting slide deck.

Resources

• Create separate form for submission #1407
• The following issues are dependent on the resolution of this issue.
  • Design: Update design for Submit Snapshot tables #2004
  • Design: Update the table on the Feedback page #2008
• Link to the Figma file of the TDM Design System
• Link to the My Projects page in the Dev site.
• Link to Create Project page 2 in the Dev site.
• Link to Create Project page 4 in the Dev site.
• Link to Create Project page 5 in the Dev site.
• Link to the Security page in the Dev site.
• Link to the FAQ page in the Dev site.
• Link to the Feedback page in the Dev site.
• Link to the Submit Snapshot page in the Dev site.

[ExperimentsInHonesty]

group the tables. Indicate why page 5 is different

[thetanmancan]

Hi @namigoeku. I can see in Figma that you've done quite a bit of work on this issue. Would you mind providing an update for this week? Thank you.

[namigoeku]

@thetanmancan No design updates. I’ve been studying Material Design’s documentation on tables to learn best practices. Will come to the meeting with questions for dev and design teams.

[thetanmancan]

Hi @namigoeku. When you get a chance, could you please provide an update on this issue? Thank you.

[namigoeku]

@thetanmancan I conducted some background research on best practices for tables. Here's a summary of what I did so far:

• Studied Material Design's style guide with regard to tables
• Brainstormed best practices related to table width with @NilakshiS
• Additional but not top priority: Looked into methods in making the header column look more neat
  • Truncate text [ex: truncate tex..]

I'll need 2 weeks to finish this ticket. By next meeting, I'll have designs ready for critique and will subsequently update the design system.