Skip to content

Commit 575c5eb

Browse files
brandyscarneybrandyscarney
authored
fix(tabs): get the tabbar layout working with shadow DOM (#15113)
- gets the `tabbarLayout` property working - update badge position based on tabs layout - fix the transforms for icon/text and icon size fixes #14611
1 parent 85ffe01 commit 575c5eb

File tree

10 files changed

+143
-155
lines changed

10 files changed

+143
-155
lines changed

‎core/src/components/tab-button/tab-button.ios.scss

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -39,27 +39,3 @@
3939
.tab-button-icon::before {
4040
vertical-align: top;
4141
}
42-
43-
.layout-icon-end .tab-button-ios .tab-button-text,
44-
.layout-icon-start .tab-button-ios .tab-button-text,
45-
.layout-icon-hide .tab-button-ios .tab-button-text {
46-
@include margin(2px, 0);
47-
48-
font-size: 14px;
49-
50-
line-height: 1.1;
51-
}
52-
53-
.layout-icon-end .tab-button-ios ion-icon,
54-
.layout-icon-start .tab-button-ios ion-icon {
55-
@include margin(2px, null, 1px, null);
56-
57-
min-width: 24px;
58-
height: 26px;
59-
60-
font-size: 24px;
61-
}
62-
63-
.layout-label-hide .tab-button-ios ion-icon {
64-
@include margin(0);
65-
}

‎core/src/components/tab-button/tab-button.md.scss

Lines changed: 6 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
--color: #{$tab-button-md-text-color};
99
--color-selected: #{$tabbar-md-text-color-active};
1010
--background-focused: #{$tabbar-md-background-color-focused};
11+
--icon-transform-selected: #{$tab-button-md-icon-transform-active};
1112

1213
max-width: 168px;
1314

@@ -27,6 +28,8 @@
2728
@include margin($tab-button-md-text-margin-top, $tab-button-md-text-margin-end, $tab-button-md-text-margin-bottom, $tab-button-md-text-margin-start);
2829
@include transform-origin(center, bottom);
2930

31+
transform: var(--label-transform);
32+
3033
transition: $tab-button-md-text-transition;
3134

3235
font-size: $tab-button-md-font-size;
@@ -35,7 +38,7 @@
3538
}
3639

3740
:host(.tab-selected) .tab-button-text {
38-
transform: $tab-button-md-text-transform-active;
41+
--label-transform: #{$tab-button-md-text-transform-active};
3942

4043
transition: $tab-button-md-text-transition;
4144
}
@@ -49,45 +52,10 @@
4952
width: $tab-button-md-icon-size;
5053
height: $tab-button-md-icon-size;
5154

55+
transform: var(--icon-transform);
56+
5257
transition: $tab-button-md-icon-transition;
5358

5459
font-size: $tab-button-md-icon-size;
5560
}
5661

57-
// Tab layout: icon-top, icon-only, label-only
58-
:host(.tab-selected) .tab-button-icon {
59-
@include transform(translate3d($tab-button-md-icon-transform-x-active, $tab-button-md-icon-transform-y-active, $tab-button-md-icon-transform-z-active));
60-
}
61-
62-
63-
// Material Design Tab with Icon or Title only
64-
// --------------------------------------------------
65-
66-
// Tab layout: icon-end
67-
.layout-icon-end .tab-button-md.tab-selected .tab-button-icon {
68-
@include transform(translate3d($tab-button-md-icon-right-transform-x-active, $tab-button-md-icon-right-transform-y-active, $tab-button-md-icon-right-transform-z-active));
69-
}
70-
71-
// Tab layout: icon-bottom
72-
.layout-icon-bottom .tab-button-md.tab-selected .tab-button-icon {
73-
@include transform(translate3d($tab-button-md-icon-bottom-transform-x-active, $tab-button-md-icon-bottom-transform-y-active, $tab-button-md-icon-bottom-transform-z-active));
74-
}
75-
76-
// Tab layout: icon-start
77-
.layout-icon-start .tab-button-md.tab-selected .tab-button-icon {
78-
@include transform(translate3d($tab-button-md-icon-left-transform-x-active, $tab-button-md-icon-left-transform-y-active, $tab-button-md-icon-left-transform-z-active));
79-
}
80-
81-
.layout-icon-top .tab-button-md .has-icon .tab-button-text {
82-
@include margin(null, null, -2px, null);
83-
}
84-
85-
.layout-icon-bottom .tab-button-md .tab-button-text {
86-
@include transform-origin(center, top);
87-
@include margin(-2px, null, null, null);
88-
}
89-
90-
.layout-icon-hide .tab-button-md,
91-
.layout-label-hide .tab-button-md {
92-
justify-content: center;
93-
}

‎core/src/components/tab-button/tab-button.md.vars.scss

Lines changed: 11 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -55,49 +55,25 @@ $tab-button-md-text-capitalization: none !default;
5555
$tab-button-md-text-transform-active: scale3d($tab-button-md-font-size-active / $tab-button-md-font-size, $tab-button-md-font-size-active / $tab-button-md-font-size, 1) !default;
5656

5757
/// @prop - Text transition for the tab button text
58-
$tab-button-md-text-transition: transform .3s ease-in-out !default;
58+
$tab-button-md-text-transition: transform .1s ease-in-out !default;
5959

60-
/// @prop - Transform x for the active tab button icon when the layout is icon-top, icon-only, or label-only
61-
$tab-button-md-icon-transform-x-active: 0 !default;
60+
/// @prop - Transform for the active tab button icon when the layout is icon-top, icon-only, or label-only
61+
$tab-button-md-icon-transform-active: translate3d(0, -2px, 0) !default;
6262

63-
/// @prop - Transform y for the active tab button icon when the layout is icon-top, icon-only, or label-only
64-
$tab-button-md-icon-transform-y-active: -2px !default;
63+
/// @prop - Transform for the active tab button icon when the layout is icon-right
64+
$tab-button-md-icon-right-transform-active: translate3d(6px, 0, 0) !default;
6565

66-
/// @prop - Transform z for the active tab button icon when the layout is icon-top, icon-only, or label-only
67-
$tab-button-md-icon-transform-z-active: 0 !default;
66+
/// @prop - Transform for the active tab button icon when the layout is icon-bottom
67+
$tab-button-md-icon-bottom-transform-active: translate3d(0, 2px, 0) !default;
6868

69-
/// @prop - Transform x for the active tab button icon when the layout is icon-right
70-
$tab-button-md-icon-right-transform-x-active: 2px !default;
71-
72-
/// @prop - Transform y for the active tab button icon when the layout is icon-right
73-
$tab-button-md-icon-right-transform-y-active: 0 !default;
74-
75-
/// @prop - Transform z for the active tab button icon when the layout is icon-right
76-
$tab-button-md-icon-right-transform-z-active: 0 !default;
77-
78-
/// @prop - Transform x for the active tab button icon when the layout is icon-bottom
79-
$tab-button-md-icon-bottom-transform-x-active: 0 !default;
80-
81-
/// @prop - Transform y for the active tab button icon when the layout is icon-bottom
82-
$tab-button-md-icon-bottom-transform-y-active: 2px !default;
83-
84-
/// @prop - Transform z for the active tab button icon when the layout is icon-bottom
85-
$tab-button-md-icon-bottom-transform-z-active: 0 !default;
86-
87-
/// @prop - Transform x for the active tab button icon when the layout is icon-left
88-
$tab-button-md-icon-left-transform-x-active: -2px !default;
89-
90-
/// @prop - Transform y for the active tab button icon when the layout is icon-left
91-
$tab-button-md-icon-left-transform-y-active: 0 !default;
92-
93-
/// @prop - Transform z for the active tab button icon when the layout is icon-left
94-
$tab-button-md-icon-left-transform-z-active: 0 !default;
69+
/// @prop - Transform for the active tab button icon when the layout is icon-left
70+
$tab-button-md-icon-left-transform-active: translate3d(-6px, 0, 0) !default;
9571

9672
/// @prop - Text transition for the tab button icon
97-
$tab-button-md-icon-transition: transform .3s ease-in-out !default;
73+
$tab-button-md-icon-transition: transform .1s ease-in-out !default;
9874

9975
/// @prop - Size of the tab button icon
100-
$tab-button-md-icon-size: 24px !default;
76+
$tab-button-md-icon-size: 22px !default;
10177

10278
/// @prop - Opacity of the inactive tab button
10379
$tab-button-md-opacity: .7 !default;

‎core/src/components/tab-button/tab-button.scss

Lines changed: 32 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,9 @@ a {
5050

5151
display: flex;
5252

53-
flex-direction: column;
53+
flex-direction: var(--flex-direction, column);
5454
align-items: center;
55-
justify-content: flex-start;
55+
justify-content: var(--justify-content, flex-start);
5656

5757
width: 100%;
5858
height: 100%;
@@ -79,10 +79,29 @@ a {
7979
opacity: .4;
8080
}
8181

82-
.tab-button-text,
82+
.tab-button-text {
83+
@include margin(var(--label-margin-top), null, var(--label-margin-bottom), null);
84+
85+
display: var(--label-display, block);
86+
87+
font-size: var(--label-font-size);
88+
89+
line-height: var(--label-line-height);
90+
}
91+
8392
.tab-button-icon {
84-
display: none;
93+
@include margin(var(--icon-margin-top), null, var(--icon-margin-bottom), null);
94+
95+
display: var(--icon-display, block);
96+
97+
min-width: var(--icon-min-width);
98+
height: var(--icon-height, 1em);
8599

100+
font-size: var(--icon-font-size);
101+
}
102+
103+
.tab-button-text,
104+
.tab-button-icon {
86105
align-self: center;
87106

88107
min-width: 26px;
@@ -96,18 +115,13 @@ a {
96115
box-sizing: border-box;
97116
}
98117

99-
:host(.has-icon) .tab-button-icon,
100-
:host(.has-label) .tab-button-text {
101-
display: block;
102-
}
103-
104118
:host(.has-label-only) .tab-button-text {
105119
white-space: normal;
106120
}
107121

108122
:host(.has-icon-only) .tab-button-native,
109123
:host(.has-label-only) .tab-button-native {
110-
justify-content: center;
124+
--justify-content: center;
111125
}
112126

113127

@@ -116,7 +130,7 @@ a {
116130

117131
.tab-badge {
118132
@include position(6%, 4%, null, null); // 4% fallback
119-
@include position(null, calc(50% - 50px), null, null);
133+
@include position(null, var(--badge-end, calc(50% - 30px)), null, null);
120134
@include padding(1px, 6px);
121135

122136
box-sizing: border-box;
@@ -130,42 +144,14 @@ a {
130144
line-height: 16px;
131145
}
132146

133-
:host(.has-icon) .tab-badge {
134-
@include position(null, calc(50% - 30px), null, null);
147+
:host(.has-label-only) .tab-badge {
148+
--badge-end: #{calc(50% - 50px)};
135149
}
136150

137-
138-
139-
// Tab Badges
140-
// --------------------------------------------------
141-
142-
.layout-icon-start .tab-button {
143-
flex-direction: row;
144-
}
145-
146-
.layout-icon-end .tab-button {
147-
flex-direction: row-reverse;
151+
:host(.has-icon-only) .tab-badge {
152+
--badge-end: #{calc(50% - 30px)};
148153
}
149154

150-
.layout-icon-bottom .tab-button {
151-
flex-direction: column-reverse;
152-
}
153-
154-
.layout-icon-start .tab-button,
155-
.layout-icon-end .tab-button,
156-
.layout-icon-hide .tab-button,
157-
.layout-label-hide .tab-button {
158-
justify-content: center;
159-
}
160-
161-
.layout-icon-hide .tab-button-icon,
162-
.layout-label-hide .tab-button-text {
163-
display: none;
164-
}
165-
166-
167-
.layout-icon-bottom .tab-badge,
168-
.layout-icon-start .tab-badge,
169-
.layout-icon-end .tab-badge {
170-
@include position(null, calc(50% - 50px), null, null);
171-
}
155+
:host(.tab-selected) .tab-button-icon {
156+
transform: var(--icon-transform-selected);
157+
}

‎core/src/components/tab-button/tab-button.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export class TabButton {
7575
{ icon && <ion-icon class="tab-button-icon" icon={icon} lazy={false}></ion-icon> }
7676
{ label && <span class="tab-button-text">{label}</span> }
7777
{ badge && <ion-badge class="tab-badge" color={badgeColor}>{badge}</ion-badge> }
78-
{ mode === 'md' && <ion-ripple-effect tapClick={true}/> }
78+
{ mode === 'md' && <ion-ripple-effect tapClick={true}></ion-ripple-effect> }
7979
</a>
8080
];
8181
}

‎core/src/components/tabbar/tabbar.ios.scss

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,28 @@
3232
backdrop-filter: $tabbar-ios-translucent-filter;
3333
}
3434

35+
36+
// iOS Tabbar Layout
37+
// --------------------------------------------------
38+
39+
:host(.layout-icon-end) ion-tab-button,
40+
:host(.layout-icon-start) ion-tab-button,
41+
:host(.layout-icon-hide) ion-tab-button {
42+
--label-margin-top: 2px;
43+
--label-margin-bottom: 2px;
44+
--label-font-size: 14px;
45+
--label-line-height: 1.1;
46+
}
47+
48+
:host(.layout-icon-end) ion-tab-button,
49+
:host(.layout-icon-start) ion-tab-button {
50+
--icon-margin-top: 2px;
51+
--icon-margin-bottom: 1px;
52+
--icon-min-width: 24px;
53+
--icon-height: 26px;
54+
--icon-font-size: 24px;
55+
}
56+
57+
:host(.layout-label-hide) ion-tab-button {
58+
--icon-margin: 0;
59+
}

‎core/src/components/tabbar/tabbar.md.scss

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,23 @@
1313
contain: strict;
1414
}
1515

16+
// Material Design Tabbar Layout
17+
// --------------------------------------------------
1618

17-
// TODO: REVIEW
18-
:host(.placement-top) .tab-button.tab-selected .tab-button-icon,
19-
:host(.placement-top) .tab-button.tab-selected .tab-button-text {
20-
transform: inherit;
19+
:host(.layout-icon-top) ion-tab-button {
20+
--label-margin-bottom: -2px;
21+
}
22+
23+
:host(.layout-icon-end) ion-tab-button {
24+
--icon-transform-selected: #{$tab-button-md-icon-right-transform-active};
25+
}
26+
27+
:host(.layout-icon-bottom) ion-tab-button {
28+
--label-margin-top: -2px;
29+
--label-transform: transform-origin(center, top);
30+
--icon-transform-selected: #{$tab-button-md-icon-bottom-transform-active};
31+
}
32+
33+
:host(.layout-icon-start) ion-tab-button {
34+
--icon-transform-selected: #{$tab-button-md-icon-left-transform-active};
2135
}

‎core/src/components/tabbar/tabbar.md.vars.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import "../../themes/ionic.globals.md";
2+
@import "../tab-button/tab-button.md.vars";
23

34
// Material Design Tabs
45
// --------------------------------------------------

0 commit comments

Comments
 (0)