Skip to content

Commit 45dc002

Browse files
abhiomkarabhiomkar
authored
feat(tab-bar): Add density mixin to tab-bar (material-components#5070)
1 parent 621b7b1 commit 45dc002

File tree

11 files changed

+348
-11
lines changed

11 files changed

+348
-11
lines changed

‎packages/mdc-tab-bar/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,9 @@ To customize the width of the tab bar, use the following mixin.
105105
Mixin | Description
106106
--- | ---
107107
`mdc-tab-bar-width($width)` | Customizes the width of the tab bar.
108+
`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`.
109+
`mdc-tab-bar-stacked-density($density-scale)` | Sets density scale to stacked tab bar variant. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.
110+
108111

109112
## `MDCTabBar` Properties and Methods
110113

‎packages/mdc-tab-bar/_mixins.scss

+41
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,20 @@
2020
// THE SOFTWARE.
2121
//
2222

23+
@import "@material/density/functions";
2324
@import "@material/feature-targeting/functions";
2425
@import "@material/feature-targeting/mixins";
26+
@import "@material/tab/mixins";
27+
@import "./variables";
2528

2629
@mixin mdc-tab-bar-core-styles($query: mdc-feature-all()) {
2730
// postcss-bem-linter: define tab-bar
2831
.mdc-tab-bar {
2932
@include mdc-tab-bar-width(100%, $query);
3033
}
34+
35+
@include mdc-tab-bar-density($mdc-tab-bar-density-scale, $query: $query);
36+
@include mdc-tab-bar-stacked-density($mdc-tab-bar-stacked-density-scale, $query: $query);
3137
// postcss-bem-linter: end
3238
}
3339

@@ -38,3 +44,38 @@
3844
width: $width;
3945
}
4046
}
47+
48+
///
49+
/// Sets density scale to default tab bar variant. Use `mdc-tab-bar-stacked-density()` mixin for stacked tab bar
50+
/// variant.
51+
///
52+
/// @param {Number} $density-scale Density scale value. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.
53+
///
54+
@mixin mdc-tab-bar-density($density-scale, $query: mdc-feature-all()) {
55+
$height: mdc-density-prop-value(
56+
$density-config: $mdc-tab-bar-density-config,
57+
$density-scale: $density-scale,
58+
$property-name: height,
59+
);
60+
61+
.mdc-tab {
62+
@include mdc-tab-height($height, $query: $query);
63+
}
64+
}
65+
66+
///
67+
/// Sets density scale to stacked tab bar variant.
68+
///
69+
/// @param {Number} $density-scale Density scale value. Supported density scales `-4`, `-3`, `-2`, `-1` and `0`.
70+
///
71+
@mixin mdc-tab-bar-stacked-density($density-scale, $query: mdc-feature-all()) {
72+
$height: mdc-density-prop-value(
73+
$density-config: $mdc-tab-bar-stacked-density-config,
74+
$density-scale: $density-scale,
75+
$property-name: height,
76+
);
77+
78+
.mdc-tab--stacked {
79+
@include mdc-tab-height($height, $query: $query);
80+
}
81+
}

‎packages/mdc-tab-bar/_variables.scss

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
//
2+
// Copyright 2019 Google Inc.
3+
//
4+
// Permission is hereby granted, free of charge, to any person obtaining a copy
5+
// of this software and associated documentation files (the "Software"), to deal
6+
// in the Software without restriction, including without limitation the rights
7+
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8+
// copies of the Software, and to permit persons to whom the Software is
9+
// furnished to do so, subject to the following conditions:
10+
//
11+
// The above copyright notice and this permission notice shall be included in
12+
// all copies or substantial portions of the Software.
13+
//
14+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15+
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16+
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17+
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18+
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19+
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
20+
// THE SOFTWARE.
21+
//
22+
23+
@import "@material/density/variables";
24+
@import "@material/tab/variables";
25+
26+
$mdc-tab-bar-height: $mdc-tab-height !default;
27+
$mdc-tab-bar-minimum-height: 30px !default;
28+
$mdc-tab-bar-maximum-height: $mdc-tab-bar-height !default;
29+
$mdc-tab-bar-density-scale: $mdc-density-default-scale !default;
30+
$mdc-tab-bar-density-config: (
31+
height: (
32+
default: $mdc-tab-bar-height,
33+
maximum: $mdc-tab-bar-maximum-height,
34+
minimum: $mdc-tab-bar-minimum-height,
35+
),
36+
) !default;
37+
$mdc-tab-bar-stacked-height: $mdc-tab-stacked-height !default;
38+
$mdc-tab-bar-stacked-minimum-height: 56px !default;
39+
$mdc-tab-bar-stacked-maximum-height: $mdc-tab-bar-stacked-height !default;
40+
$mdc-tab-bar-stacked-density-scale: $mdc-density-default-scale !default;
41+
$mdc-tab-bar-stacked-density-config: (
42+
height: (
43+
default: $mdc-tab-bar-stacked-height,
44+
maximum: $mdc-tab-bar-stacked-maximum-height,
45+
minimum: $mdc-tab-bar-stacked-minimum-height,
46+
),
47+
) !default;

‎packages/mdc-tab-bar/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
},
2121
"dependencies": {
2222
"@material/base": "^3.1.0",
23+
"@material/density": "^0.0.0",
2324
"@material/elevation": "^3.1.0",
2425
"@material/feature-targeting": "^3.1.0",
2526
"@material/tab": "^3.2.0",

‎packages/mdc-tab/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,7 @@ Mixin | Description
142142
`mdc-tab-parent-positioning` | Sets the positioning of the MDCTab's parent element so that `MDCTab.computeDimensions()` reports the same values in all browsers.
143143
`mdc-tab-fixed-width($width)` | Sets the fixed width of the tab. The tab will never be smaller than the given width.
144144
`mdc-tab-horizontal-padding($padding)` | Sets the horizontal padding of the tab.
145+
`mdc-tab-height($height)` | Sets custom height to tab bar.
145146

146147
## `MDCTab` Properties and Methods
147148

‎packages/mdc-tab/_mixins.scss

+16-9
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,19 @@
191191
}
192192
}
193193

194+
///
195+
/// Sets tab height
196+
///
197+
/// @param {Number} $height Height value in `px`.
198+
///
199+
@mixin mdc-tab-height($height, $query: mdc-feature-all()) {
200+
$feat-structure: mdc-feature-create-target($query, structure);
201+
202+
@include mdc-feature-targets($feat-structure) {
203+
height: $height;
204+
}
205+
}
206+
194207
//
195208
// Private
196209
//
@@ -209,7 +222,6 @@
209222
flex: 1 0 auto;
210223
justify-content: center;
211224
box-sizing: border-box;
212-
height: $mdc-tab-height;
213225
// Explicitly setting margin to 0 is to override safari default margin for button elements.
214226
margin: 0;
215227
padding-top: 0;
@@ -266,20 +278,15 @@
266278
$feat-structure: mdc-feature-create-target($query, structure);
267279

268280
@include mdc-feature-targets($feat-structure) {
269-
height: $mdc-tab-stacked-height;
270-
271281
.mdc-tab__content {
272282
flex-direction: column;
273283
align-items: center;
274-
justify-content: space-between;
275-
}
276-
277-
.mdc-tab__icon {
278-
padding-top: 12px;
284+
justify-content: center;
279285
}
280286

281287
.mdc-tab__text-label {
282-
padding-bottom: 16px;
288+
padding-top: 6px;
289+
padding-bottom: 4px;
283290
}
284291
}
285292
}

‎packages/mdc-tab/_variables.scss

+2
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@
2020
// THE SOFTWARE.
2121
//
2222

23+
@import "@material/theme/variables"; // for mdc-theme-prop-value()
24+
2325
$mdc-tab-icon-size: 24px !default;
2426
$mdc-tab-height: 48px !default;
2527
$mdc-tab-stacked-height: 72px !default;

‎test/screenshot/golden.json

+10-2
Original file line numberDiff line numberDiff line change
@@ -1264,11 +1264,19 @@
12641264
}
12651265
},
12661266
"spec/mdc-tab-bar/classes/baseline.html": {
1267-
"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",
1267+
"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",
12681268
"screenshots": {
12691269
"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",
12701270
"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",
1271-
"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"
1271+
"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"
1272+
}
1273+
},
1274+
"spec/mdc-tab-bar/mixins/density.html": {
1275+
"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",
1276+
"screenshots": {
1277+
"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",
1278+
"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",
1279+
"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"
12721280
}
12731281
},
12741282
"spec/mdc-textfield/classes/baseline-character-counter.html": {

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

+8
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,11 @@
2727
.test-cell--tab-bar {
2828
@include test-cell-size(400, 100);
2929
}
30+
31+
.custom-tab-bar-density {
32+
@include mdc-tab-bar-density(-4);
33+
}
34+
35+
.custom-tab-bar-stacked-density {
36+
@include mdc-tab-bar-stacked-density(-4);
37+
}

0 commit comments

Comments
 (0)