feat(tab-bar): Add a mixin to set scroller animation (#5172)

Author: abhiomkar

packages/mdc-tab-bar/README.md

@@ -107,6 +107,7 @@ Mixin | Description
 `mdc-tab-bar-width($width)` | Customizes the width of the tab bar.
 `mdc-tab-bar-density($density-scale)` | Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density` mixin for stacked variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.
 `mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.
+`mdc-tab-bar-tab-scroller-transition($duration-ms, $timing-function)` | Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition` mixin.
 
 
 ## `MDCTabBar` Properties and Methods

packages/mdc-tab-bar/_mixins.scss

@@ -20,9 +20,11 @@
 // THE SOFTWARE.
 //
 
+@import "@material/animation/variables";
 @import "@material/density/functions";
 @import "@material/feature-targeting/functions";
 @import "@material/feature-targeting/mixins";
+@import "@material/tab-scroller/mixins";
 @import "@material/tab/mixins";
 @import "./variables";
 
@@ -79,3 +81,20 @@
     @include mdc-tab-height($height, $query: $query);
   }
 }
+
+///
+/// Sets the CSS transition for the tab scrolling animation. This mixin is a proxy to `mdc-tab-scroller-transition`
+/// mixin.
+///
+/// @param {Number | String} $duration-ms - Duration (in ms) of the animation.
+/// @param {String} $timing-function - Optionally overrides the default animation timing function.
+///
+@mixin mdc-tab-bar-tab-scroller-transition(
+  $duration-ms,
+  $timing-function: $mdc-animation-standard-curve-timing-function,
+  $query: mdc-feature-all()
+) {
+  .mdc-tab-scroller {
+    @include mdc-tab-scroller-transition($duration-ms, $timing-function: $timing-function, $query: $query);
+  }
+}

packages/mdc-tab-bar/package.json

@@ -19,6 +19,7 @@
     "directory": "packages/mdc-tab-bar"
   },
   "dependencies": {
+    "@material/animation": "^3.1.0",
     "@material/base": "^3.1.0",
     "@material/density": "^0.0.0",
     "@material/elevation": "^3.1.0",

test/scss/_feature-targeting-test.scss

@@ -298,6 +298,7 @@
     @include mdc-tab-height(0, $query: $query);
     @include mdc-tab-bar-density(0, $query: $query);
     @include mdc-tab-bar-stacked-density(0, $query: $query);
+    @include mdc-tab-bar-tab-scroller-transition(0, $query: $query);
 
     // Theme
     @include mdc-theme-core-styles($query: $query);