HomeElementl

[dagit] Simplify Table styles

Description

[dagit] Simplify Table styles

Summary:
Simplify tables in Dagit:

  • Make all tables width: 100% to remove that from callsites
  • Remove striped usage in favor of tr-level gray keyline boxshadow
  • Set first-child and last-child table cells to be flush against the horizontal sides
  • Add a $compact transient prop to render small tables with minimal padding
  • Add a storybook example

The striped version was a step in the right direction to get us to a true table without having lots of internal borders -- as is the default in Blueprint Table -- but the stripes are still a bit cluttered.

By extending the first-child and last-child table cells to the edges, we get better alignment with headers and other page content. To that end, I added a bit more padding to Page to restore some breathing room whitespace around table edges.

Screenshots below.

Test Plan:
View Storybook example, verify rendering as described above.

Load Dagit, navigate to all affected tables, verify rendering as described above.

Reviewers: bengotow, prha

Reviewed By: bengotow

Differential Revision: https://dagster.phacility.com/D6117

Details

Provenance
dishAuthored on Jan 22 2021, 7:27 PM
Reviewer
bengotow
Differential Revision
D6117: [dagit] Simplify Table styles
Parents
R1:8c14da1e700a: [dagit] Repair launch button loading state
Branches
Unknown
Tags
Unknown