[table] feat(Table2): new 'scroll' instance method

[ccullotta]

Fixes #5915

Enables functionality which can address this scroll issue

Checklist

• [n/a] Includes tests
• Update documentation

Changes proposed in this pull request:

• Add a new instance method Table2.prototype.scroll() which allows users to manually scroll the table by a given left / top offset in pixels
• Demonstrate usage of this new method in table-dev-app
• Provide an API to display a visual indicator that shows the user an affordance for auto-scrolling

Reviewers should focus on:

If this change makes sense as a "enable-new-feature" solution to the above issue, vs changing default table behavior. Also that the new "scroll" function behavior makes sense for general context.

Screenshot

[adidahiya]

lint fix, also added some basic doc strings

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[adidahiya]

ran prettier

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[adidahiya]

created basic demo

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[adidahiya]

making demo a little nicer

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[ccullotta]

GIF of the solution:

[adidahiya]

In general, the idea of a Table2.prototype.scroll instance method sounds fine; it seems reasonable to add this next to the existing scrollToRegion instance method. But we'll need to do some work to make it more usable.

First off, there should be some visual indication that the user is triggering a scroll. One idea for this would be to add a linear gradient that fades from partially-transparent $black to fully-transparent $black at the top / bottom of the table's main quadrant. This could be supported with modifier classes on the <Table2> component, something like Classes.TABLE_BODY_IS_SCROLLING_{TOP|LEFT|BOTTOM|TOP}.

Secondly, the example needs to have improved scroll trigger behavior. When I move my mouse back towards the middle of the table (away from the 30% top or bottom regions), the scrolling should stop immediately. It shouldn't continue as an automatic animation.

For documentation, you should add to the "Instance methods" section of the table docs:

blueprint/packages/table/src/docs/table-api.md

Line 17 in 3c58026

@### Instance methods

[adidahiya]

remove unnecessary copyright

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[adidahiya]

small fixes

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[adidahiya]

removed cruft and will-change edits

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[ccullotta]

Updated to fix scrolling behavior to be more responsive. Added both a cursor, and a visual overlay affect to show the user is scrolling. Interested for feedback on setScrollOverlayBackground, I initially worked it as a setScrollIndicator (left, right, top,..) function, but decided that this seemed too rigid. Perhaps this is too custom though?

[adidahiya]

merged scroll and setScrolling indicator into setScrolling

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[adidahiya]

nice, this is looking pretty close!

I would suggest adding this to the main mutableTable example, with a toggle to enable the behavior (titled something like "Demo programmatic scrolling API" in the sidebar)

some small polish items, if possible (might be ok to address as follow-ups):

1. sometimes the scroll indicator sticks around after you mouse off and reach the end of the table, like at the end of this gif:

2. sometimes it keeps scrolling after I've moused off quickly, like this:

[ccullotta]

was able to fix the first issue, second one is still eluding me, but hoping we can fix that as a flup? Also merged my example into the existing with the switch being "Demo programmatic scrolling API"

[adidahiya]

adding enum that was accidentally ommitted

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[adidahiya]

almost there!

yes it's fine to fix that second issue as a FLUP

[adidahiya]

removing more cruft

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[ccullotta]

Copied over the instance method from table 2 into table as well, apparently it was required for the documentation to port into the instance method docs, and I assume that both should have it anyhow. Also added the documentation. There is a little funkiness with the formatting though, @adidahiya do you have any dots?

[ccullotta]

The above is capitalized correctly in the commits I made ftr, just forgot to recompile

[adidahiya]

making certain state properties private class properties

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[adidahiya]

looks good in table-dev-app preview!

re: typedef in this bit of the docs... the docs-theme is a bit buggy when it comes to this... I'll try to fix it in a follow-up PR

[adidahiya]

use table2 for documentation string

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.