search

intuit / devtools-ds

UI components, libraries, and templates for building robust devtools experiences.
https://intuit.github.io/devtools-ds
MIT License
251 stars 15 forks source link

table: make the header sticky #23

Closed tylerkrupicka closed 2 years ago

tylerkrupicka commented 2 years ago

What Changed

Adds on to https://github.com/intuit/devtools-ds/pull/22.

The table component now supports a sticky header when scrolling, mirroring the behavior in the network panel.

I moved to my own PR because I had to fix the resize observer logic, because it was reserving extra space even if the parent scrolled. Also added Adrian as a contributor, and fixed a bottom border double-up on Chrome.

Why

Make the table resize better with long lists.

What might be impacted

Todo:

📦 Published PR as canary version: 1.1.3-canary.23.465.0
:sparkles: Test out this PR locally via: ```bash npm install @devtools-ds/console@1.1.3-canary.23.465.0 npm install @devtools-ds/dom-inspector@1.1.3-canary.23.465.0 npm install @devtools-ds/diagnostic@1.1.3-canary.23.465.0 npm install @devtools-ds/icon@1.1.3-canary.23.465.0 npm install @devtools-ds/navigation@1.1.3-canary.23.465.0 npm install @devtools-ds/node@1.1.3-canary.23.465.0 npm install @devtools-ds/object-inspector@1.1.3-canary.23.465.0 npm install @devtools-ds/table@1.1.3-canary.23.465.0 npm install @devtools-ds/tree@1.1.3-canary.23.465.0 npm install @devtools-ds/create@1.1.3-canary.23.465.0 npm install @devtools-ds/docs@1.1.3-canary.23.465.0 npm install @devtools-ds/object-parser@1.1.3-canary.23.465.0 npm install @devtools-ds/port-controller@1.1.3-canary.23.465.0 npm install @devtools-ds/storybook-theme-addon@1.1.3-canary.23.465.0 npm install @devtools-ds/storybook-utils@1.1.3-canary.23.465.0 npm install @devtools-ds/themes@1.1.3-canary.23.465.0 # or yarn add @devtools-ds/console@1.1.3-canary.23.465.0 yarn add @devtools-ds/dom-inspector@1.1.3-canary.23.465.0 yarn add @devtools-ds/diagnostic@1.1.3-canary.23.465.0 yarn add @devtools-ds/icon@1.1.3-canary.23.465.0 yarn add @devtools-ds/navigation@1.1.3-canary.23.465.0 yarn add @devtools-ds/node@1.1.3-canary.23.465.0 yarn add @devtools-ds/object-inspector@1.1.3-canary.23.465.0 yarn add @devtools-ds/table@1.1.3-canary.23.465.0 yarn add @devtools-ds/tree@1.1.3-canary.23.465.0 yarn add @devtools-ds/create@1.1.3-canary.23.465.0 yarn add @devtools-ds/docs@1.1.3-canary.23.465.0 yarn add @devtools-ds/object-parser@1.1.3-canary.23.465.0 yarn add @devtools-ds/port-controller@1.1.3-canary.23.465.0 yarn add @devtools-ds/storybook-theme-addon@1.1.3-canary.23.465.0 yarn add @devtools-ds/storybook-utils@1.1.3-canary.23.465.0 yarn add @devtools-ds/themes@1.1.3-canary.23.465.0 ```
tylerkrupicka commented 2 years ago

Bundle Size Report

name master pr +/- %
@devtools-ds/themes 6.10 kB 6.45 kB 349.00 Bytes 6%
@devtools-ds/table 23.88 kB 23.45 kB -427.00 Bytes -2%
Total 29.98 kB 29.90 kB -78.00 Bytes -0.26%

❌ Failed! ❌

Courtesy of your bundle-size bot :package::rocket:

tylerkrupicka commented 2 years ago

Build Info

Your PR was successfully deployed by CircleCI #464

Storybook

tylerkrupicka commented 2 years ago

Tested in Chrome and FF, looks good after box shadow changes

tylerkrupicka commented 2 years ago

:rocket: PR was released in v1.2.0 :rocket: