feat(tab-bar): Add density mixin to tab-bar (#5070)

packages/mdc-tab-bar/README.md

@@ -105,6 +105,9 @@ To customize the width of the tab bar, use the following mixin.
 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`.
+
 
 ## `MDCTabBar` Properties and Methods
 

packages/mdc-tab-bar/_mixins.scss

@@ -20,14 +20,20 @@
 // THE SOFTWARE.
 //
 
+@import "@material/density/functions";
 @import "@material/feature-targeting/functions";
 @import "@material/feature-targeting/mixins";
+@import "@material/tab/mixins";
+@import "./variables";
 
 @mixin mdc-tab-bar-core-styles($query: mdc-feature-all()) {
   // postcss-bem-linter: define tab-bar
   .mdc-tab-bar {
     @include mdc-tab-bar-width(100%, $query);
   }
+
+  @include mdc-tab-bar-density($mdc-tab-bar-density-scale, $query: $query);
+  @include mdc-tab-bar-stacked-density($mdc-tab-bar-stacked-density-scale, $query: $query);
   // postcss-bem-linter: end
 }
 
@@ -38,3 +44,38 @@
     width: $width;
   }
 }
+
+///
+/// Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density()` mixin for stacked tab bar
+/// variant.
+///
+/// @param {Number} $density-scale Density scale value. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.
+///
+@mixin mdc-tab-bar-density($density-scale, $query: mdc-feature-all()) {
+  $height: mdc-density-prop-value(
+    $density-config: $mdc-tab-bar-density-config,
+    $density-scale: $density-scale,
+    $property-name: height,
+  );
+
+  .mdc-tab {
+    @include mdc-tab-height($height, $query: $query);
+  }
+}
+
+///
+/// Sets density scale to stacked tab bar variant.
+///
+/// @param {Number} $density-scale Density scale value. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.
+///
+@mixin mdc-tab-bar-stacked-density($density-scale, $query: mdc-feature-all()) {
+  $height: mdc-density-prop-value(
+    $density-config: $mdc-tab-bar-stacked-density-config,
+    $density-scale: $density-scale,
+    $property-name: height,
+  );
+
+  .mdc-tab--stacked {
+    @include mdc-tab-height($height, $query: $query);
+  }
+}

packages/mdc-tab-bar/_variables.scss

@@ -0,0 +1,47 @@
+//
+// Copyright 2019 Google Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+//
+
+@import "@material/density/variables";
+@import "@material/tab/variables";
+
+$mdc-tab-bar-height: $mdc-tab-height !default;
+$mdc-tab-bar-minimum-height: 30px !default;
+$mdc-tab-bar-maximum-height: $mdc-tab-bar-height !default;
+$mdc-tab-bar-density-scale: $mdc-density-default-scale !default;
+$mdc-tab-bar-density-config: (
+  height: (
+    default: $mdc-tab-bar-height,
+    maximum: $mdc-tab-bar-maximum-height,
+    minimum: $mdc-tab-bar-minimum-height,
+  ),
+) !default;
+$mdc-tab-bar-stacked-height: $mdc-tab-stacked-height !default;
+$mdc-tab-bar-stacked-minimum-height: 56px !default;
+$mdc-tab-bar-stacked-maximum-height: $mdc-tab-bar-stacked-height !default;
+$mdc-tab-bar-stacked-density-scale: $mdc-density-default-scale !default;
+$mdc-tab-bar-stacked-density-config: (
+  height: (
+    default: $mdc-tab-bar-stacked-height,
+    maximum: $mdc-tab-bar-stacked-maximum-height,
+    minimum: $mdc-tab-bar-stacked-minimum-height,
+  ),
+) !default;

packages/mdc-tab-bar/package.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@material/base": "^3.1.0",
+    "@material/density": "^0.0.0",
     "@material/elevation": "^3.1.0",
     "@material/feature-targeting": "^3.1.0",
     "@material/tab": "^3.2.0",

packages/mdc-tab/README.md

@@ -142,6 +142,7 @@ Mixin | Description
 `mdc-tab-parent-positioning` | Sets the positioning of the MDCTab's parent element so that `MDCTab.computeDimensions()` reports the same values in all browsers.
 `mdc-tab-fixed-width($width)` | Sets the fixed width of the tab. The tab will never be smaller than the given width.
 `mdc-tab-horizontal-padding($padding)` | Sets the horizontal padding of the tab.
+`mdc-tab-height($height)` | Sets custom height to tab bar.
 
 ## `MDCTab` Properties and Methods
 

packages/mdc-tab/_mixins.scss

@@ -191,6 +191,19 @@
   }
 }
 
+///
+/// Sets tab height
+///
+/// @param {Number} $height Height value in `px`.
+///
+@mixin mdc-tab-height($height, $query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-feature-targets($feat-structure) {
+    height: $height;
+  }
+}
+
 //
 // Private
 //
@@ -209,7 +222,6 @@
     flex: 1 0 auto;
     justify-content: center;
     box-sizing: border-box;
-    height: $mdc-tab-height;
     // Explicitly setting margin to 0 is to override safari default margin for button elements.
     margin: 0;
     padding-top: 0;
@@ -266,20 +278,15 @@
   $feat-structure: mdc-feature-create-target($query, structure);
 
   @include mdc-feature-targets($feat-structure) {
-    height: $mdc-tab-stacked-height;
-
     .mdc-tab__content {
       flex-direction: column;
       align-items: center;
-      justify-content: space-between;
-    }
-
-    .mdc-tab__icon {
-      padding-top: 12px;
+      justify-content: center;
     }
 
     .mdc-tab__text-label {
-      padding-bottom: 16px;
+      padding-top: 6px;
+      padding-bottom: 4px;
     }
   }
 }

packages/mdc-tab/_variables.scss

@@ -20,6 +20,8 @@
 // THE SOFTWARE.
 //
 
+@import "@material/theme/variables"; // for mdc-theme-prop-value()
+
 $mdc-tab-icon-size: 24px !default;
 $mdc-tab-height: 48px !default;
 $mdc-tab-stacked-height: 72px !default;

test/screenshot/golden.json

@@ -1264,11 +1264,19 @@
     }
   },
   "spec/mdc-tab-bar/classes/baseline.html": {
-    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/02/23_48_38_484/spec/mdc-tab-bar/classes/baseline.html?utm_source=golden_json",
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/11/22_26_22_973/spec/mdc-tab-bar/classes/baseline.html?utm_source=golden_json",
     "screenshots": {
       "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/02/23_48_38_484/spec/mdc-tab-bar/classes/baseline.html.windows_chrome_73.png",
       "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/02/23_48_38_484/spec/mdc-tab-bar/classes/baseline.html.windows_firefox_65.png",
-      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/05/02/23_48_38_484/spec/mdc-tab-bar/classes/baseline.html.windows_ie_11.png"
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2019/09/11/22_26_22_973/spec/mdc-tab-bar/classes/baseline.html.windows_ie_11.png"
+    }
+  },
+  "spec/mdc-tab-bar/mixins/density.html": {
+    "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/11/22_05_28_655/spec/mdc-tab-bar/mixins/density.html?utm_source=golden_json",
+    "screenshots": {
+      "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/11/22_05_28_655/spec/mdc-tab-bar/mixins/density.html.windows_chrome_76.png",
+      "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/11/22_05_28_655/spec/mdc-tab-bar/mixins/density.html.windows_firefox_69.png",
+      "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2019/09/11/22_05_28_655/spec/mdc-tab-bar/mixins/density.html.windows_ie_11.png"
     }
   },
   "spec/mdc-textfield/classes/baseline-character-counter.html": {

test/screenshot/spec/mdc-tab-bar/fixture.scss

@@ -27,3 +27,11 @@
 .test-cell--tab-bar {
   @include test-cell-size(400, 100);
 }
+
+.custom-tab-bar-density {
+  @include mdc-tab-bar-density(-4);
+}
+
+.custom-tab-bar-stacked-density {
+  @include mdc-tab-bar-stacked-density(-4);
+}