[MDCTabScroller] needs a mixin to disable animations and/or alter CSS transition time

[cletusw]

I'm using TabBar for a scrollable set of tabs, but since Shift+MouseWheel is a little onerous for horizontal scrolling (for non-Mac, non-touch users), I also need to be able to scroll the TabBar programmatically (when the user hovers over divs at the TabBar edges).

Previously I've done this in JS via setTimeout & scrollLeft. To avoid reaching into TabScroller's internals I'm prepared to use its incrementScroll method, but that uses an animation with a 250ms transition duration, preventing me from, say, manually moving 2 pixels every frame. To go this route I'd need a Sass mixin to disable the CSS transition.

I could instead allow the transition to happen and stop it when the user mouses out of the edge divs. For this I'd need a mixin to increase the transition duration to a few seconds (otherwise the user can't stop it when they see the tab they want) AND a method in the controller to stop the animation (I'm prepared to just call handleInteraction, but it would probably be more semantic to just make stopScrollAnimation public.)

material-components-web/packages/mdc-tab-scroller/foundation.ts

Line 293 in ef99808

private stopScrollAnimation_() {

[bonniezhou]

The best route to go would be to use the incrementScroll method. You're right that the scroll animation is currently hard-coded to 250ms, but we should move this into a Sass variable $mdc-tab-scroller-transition-duration, which you can then override. Feel free to submit a PR for this! :)

[cletusw]

@bonniezhou Created #5142, but I'm not sure that's enough. I'm used to overriding with mixins, but not variables. Do I need a mixin as well? Are there Google-internal examples for overriding in this way? Thanks!

[cletusw]

^^^ @abhiomkar maybe you can help? Thanks!

[abhiomkar]

Please see https://glitch.com/@material for some of the examples of overriding styles.

[cletusw]

Can this be re-opened? After separate conversation with @abhiomkar it turns out I'll need a mixin for this, not just a variable.

[cletusw]

Created a new PR to add a mixin for this: #5154