diff --git a/packages/mdc-tab-bar/README.md b/packages/mdc-tab-bar/README.md index 02beb1bb007..f108bd75de7 100644 --- a/packages/mdc-tab-bar/README.md +++ b/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 diff --git a/packages/mdc-tab-bar/_mixins.scss b/packages/mdc-tab-bar/_mixins.scss index 8f7bd787fc2..9b3d0beb5fc 100644 --- a/packages/mdc-tab-bar/_mixins.scss +++ b/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); + } +} diff --git a/packages/mdc-tab-bar/_variables.scss b/packages/mdc-tab-bar/_variables.scss new file mode 100644 index 00000000000..9eeff9e11e2 --- /dev/null +++ b/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; diff --git a/packages/mdc-tab-bar/package.json b/packages/mdc-tab-bar/package.json index 06b48c39dfb..c3d90124c48 100644 --- a/packages/mdc-tab-bar/package.json +++ b/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", diff --git a/packages/mdc-tab/README.md b/packages/mdc-tab/README.md index 863d098d382..6cd09ee5e07 100644 --- a/packages/mdc-tab/README.md +++ b/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 diff --git a/packages/mdc-tab/_mixins.scss b/packages/mdc-tab/_mixins.scss index e78ec0bc8de..e3aa6743645 100644 --- a/packages/mdc-tab/_mixins.scss +++ b/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; } } } diff --git a/packages/mdc-tab/_variables.scss b/packages/mdc-tab/_variables.scss index 47281f16050..f2c33cf28fe 100644 --- a/packages/mdc-tab/_variables.scss +++ b/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; diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json index 5c199c93ac0..e0961785a7c 100644 --- a/test/screenshot/golden.json +++ b/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": { diff --git a/test/screenshot/spec/mdc-tab-bar/fixture.scss b/test/screenshot/spec/mdc-tab-bar/fixture.scss index f9c9cdebb5c..f159cb0a7f7 100644 --- a/test/screenshot/spec/mdc-tab-bar/fixture.scss +++ b/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); +} diff --git a/test/screenshot/spec/mdc-tab-bar/mixins/density.html b/test/screenshot/spec/mdc-tab-bar/mixins/density.html new file mode 100644 index 00000000000..b18e054e22d --- /dev/null +++ b/test/screenshot/spec/mdc-tab-bar/mixins/density.html @@ -0,0 +1,216 @@ + + + + + + Tab Bar Density Mixin - MDC Web Screenshot Test + + + + + + + + + + + + + + +
+
+
+
+
+
+
+ + + +
+
+
+
+
+ +
+
+
+
+
+ + + +
+
+
+
+
+ +
+
+
+
+
+ + + +
+
+
+
+
+ +
+
+
+
+
+ + + +
+
+
+
+
+
+
+ + + + + + + + + + diff --git a/test/scss/_feature-targeting-test.scss b/test/scss/_feature-targeting-test.scss index aec1cb57fbe..daf8fe03afb 100644 --- a/test/scss/_feature-targeting-test.scss +++ b/test/scss/_feature-targeting-test.scss @@ -286,6 +286,9 @@ @include mdc-tab-core-styles($query: $query); @include mdc-tab-without-ripple($query: $query); @include mdc-tab-ripple($query: $query); + @include mdc-tab-height(0, $query: $query); + @include mdc-tab-bar-density(0, $query: $query); + @include mdc-tab-bar-stacked-density(0, $query: $query); // Theme @include mdc-theme-core-styles($query: $query);