Skip to content

Commit 4a0b391

Browse files
joselriojoselrio
committed
feat(badge): Update when inside tab button based on feedback.
1 parent 4946f13 commit 4a0b391

File tree

6 files changed

+89
-55
lines changed

6 files changed

+89
-55
lines changed

‎core/src/components/badge/badge.ionic.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,10 +185,22 @@
185185
min-width: badge-ionic-vars.$badge-ionic-in-tab-button-min-width;
186186
}
187187

188+
// Badge Icon when Inside Tab Button
188189
:host([vertical].in-tab-button) ::slotted(ion-icon) {
189190
@include globals.position($top: 50%, $start: 50%);
190191

191192
position: absolute;
192193

193194
transform: translate(-50%, -50%);
194195
}
196+
197+
// Badge Icon sizes when inside Tab Button
198+
:host([vertical].in-tab-button.badge-xxsmall) ::slotted(ion-icon),
199+
:host([vertical].in-tab-button.badge-xsmall) ::slotted(ion-icon),
200+
:host([vertical].in-tab-button.badge-small) ::slotted(ion-icon),
201+
:host([vertical].in-tab-button.badge-medium) ::slotted(ion-icon),
202+
:host([vertical].in-tab-button.badge-large) ::slotted(ion-icon),
203+
:host([vertical].in-tab-button.badge-xlarge) ::slotted(ion-icon) {
204+
width: globals.$ion-scale-300;
205+
height: globals.$ion-scale-300;
206+
}

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@import "../../themes/mixins";
2-
31
:host {
42
/**
53
* @prop --background: Background of the tab button

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

Lines changed: 42 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@use "../../themes/ionic/ionic.globals.scss" as globals;
22
@use "./tab-button.common";
3-
@import "../../themes/mixins";
4-
@import "./tab-button.ionic.vars";
3+
@use "../../themes/mixins" as mixins;
4+
@use "./tab-button.ionic.vars" as ion-vars;
55

66
// Ionic Tab Button
77
// --------------------------------------------------------------
@@ -94,57 +94,71 @@
9494
// Tab Button: Badge
9595
// --------------------------------------------------
9696

97-
:host ::slotted(ion-badge[vertical]:empty) {
98-
@include padding(0, 0);
97+
:host ::slotted(ion-badge.badge-xxsmall),
98+
:host ::slotted(ion-badge.badge-xsmall),
99+
:host ::slotted(ion-badge.badge-small),
100+
:host ::slotted(ion-badge.badge-medium),
101+
:host ::slotted(ion-badge.badge-large),
102+
:host ::slotted(ion-badge.badge-xlarge) {
103+
min-width: ion-vars.$tab-ionic-button-badge-size;
104+
height: ion-vars.$tab-ionic-button-badge-size;
99105

100-
width: $tab-ionic-button-badge-size-emtpy;
101-
height: $tab-ionic-button-badge-size-emtpy;
106+
font-size: ion-vars.$tab-ionic-button-badge-font-size;
107+
108+
line-height: ion-vars.$tab-ionic-button-badge-line-height;
109+
}
110+
111+
:host ::slotted(ion-badge:empty) {
112+
@include mixins.padding(0, 0);
113+
114+
min-width: ion-vars.$tab-ionic-button-badge-size-emtpy;
115+
height: ion-vars.$tab-ionic-button-badge-size-emtpy;
102116
}
103117

104-
:host ::slotted(ion-badge[vertical]) {
105-
@include position($start: $tab-ionic-button-badge-start-position);
118+
:host ::slotted(ion-badge) {
119+
@include mixins.position($start: ion-vars.$tab-ionic-button-badge-start-position);
106120
}
107121

108-
:host ::slotted(ion-badge[vertical="top"]) {
109-
top: $tab-ionic-button-badge-top-position;
122+
:host ::slotted(ion-badge.badge-vertical-top) {
123+
@include mixins.position($top: ion-vars.$tab-ionic-button-badge-top-position);
110124
}
111125

112-
:host ::slotted(ion-badge[vertical="top"]:empty) {
113-
top: $tab-ionic-button-badge-top-position-empty;
126+
:host ::slotted(ion-badge.badge-vertical-top:empty) {
127+
@include mixins.position($top: ion-vars.$tab-ionic-button-badge-top-position-empty);
114128
}
115129

116-
:host ::slotted(ion-badge[vertical="bottom"]) {
117-
@include position($top: $tab-ionic-button-badge-bottom-position);
130+
:host ::slotted(ion-badge.badge-vertical-bottom) {
131+
@include mixins.position($top: ion-vars.$tab-ionic-button-badge-bottom-position);
118132
}
119133

120-
:host ::slotted(ion-badge[vertical="bottom"]:empty) {
121-
@include position($top: $tab-ionic-button-badge-bottom-position-empty);
134+
:host ::slotted(ion-badge.badge-vertical-bottom:empty) {
135+
@include mixins.position($top: ion-vars.$tab-ionic-button-badge-bottom-position-empty);
122136
}
123137

124138
:host ::slotted(ion-badge[vertical]:not(:empty)) {
125-
@include padding(
126-
$tab-ionic-button-badge-padding-top,
127-
$tab-ionic-button-badge-padding-end,
128-
$tab-ionic-button-badge-padding-bottom,
129-
$tab-ionic-button-badge-padding-start
139+
@include mixins.padding(
140+
ion-vars.$tab-ionic-button-badge-padding-top,
141+
ion-vars.$tab-ionic-button-badge-padding-end,
142+
ion-vars.$tab-ionic-button-badge-padding-bottom,
143+
ion-vars.$tab-ionic-button-badge-padding-start
130144
);
131145

132146
display: flex;
133147

134148
align-items: center;
135149
justify-content: center;
136150

137-
min-width: $tab-ionic-button-badge-size;
151+
min-width: ion-vars.$tab-ionic-button-badge-size;
138152
}
139153

140-
:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical="top"]) {
141-
@include position($top: $tab-ionic-button-icon-bottom-badge-top-position);
154+
:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-top) {
155+
@include mixins.position($top: ion-vars.$tab-ionic-button-icon-bottom-badge-top-position);
142156
}
143157

144-
:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical="bottom"]) {
145-
@include position($top: $tab-ionic-button-icon-bottom-badge-bottom-position);
158+
:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom) {
159+
@include mixins.position($top: ion-vars.$tab-ionic-button-icon-bottom-badge-bottom-position);
146160
}
147161

148-
:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical="bottom"]:empty) {
149-
@include position($top: $tab-ionic-button-icon-bottom-badge-bottom-position-empty);
162+
:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom:empty) {
163+
@include mixins.position($top: ion-vars.$tab-ionic-button-icon-bottom-badge-bottom-position-empty);
150164
}

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

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,61 @@
1+
@use "../../foundations/ionic.vars.scss" as token;
2+
13
// Tab Button: Ionic
24
// --------------------------------------------------
35

46
// Tab Button: Badge
57
// --------------------------------------------------
68

9+
/// @prop - Badge font size
10+
$tab-ionic-button-badge-font-size: var(--badge-font-size, token.$ion-font-size-300);
11+
12+
/// @prop - Badge line height
13+
$tab-ionic-button-badge-line-height: var(--badge-line-height, token.$ion-font-line-height-400);
14+
715
/// @prop - Badge size
8-
$tab-ionic-button-badge-size: var(--badge-size, 16px);
16+
$tab-ionic-button-badge-size: var(--badge-size, token.$ion-scale-400);
917

1018
/// @prop - Badge size when empty
11-
$tab-ionic-button-badge-size-emtpy: var(--badge-size-emtpy, 8px);
19+
$tab-ionic-button-badge-size-emtpy: var(--badge-size-emtpy, token.$ion-scale-200);
1220

1321
/// @prop - Badge top position
1422
$tab-ionic-button-badge-top-position: var(--badge-top-position, -2px);
1523

1624
/// @prop - Badge top position when empty
17-
$tab-ionic-button-badge-top-position-empty: var(--badge-top-position-empty, -4px);
25+
$tab-ionic-button-badge-top-position-empty: var(--badge-top-position-empty, calc(token.$ion-scale-100 * -1));
1826

1927
/// @prop - Badge bottom position
20-
$tab-ionic-button-badge-bottom-position: var(--badge-bottom-position, calc(50% - 8px));
28+
$tab-ionic-button-badge-bottom-position: var(--badge-bottom-position, calc(50% - token.$ion-scale-200));
2129

2230
/// @prop - Badge bottom position when empty
23-
$tab-ionic-button-badge-bottom-position-empty: var(--badge-bottom-position-empty, calc(50% - 4px));
31+
$tab-ionic-button-badge-bottom-position-empty: var(--badge-bottom-position-empty, calc(50% - token.$ion-scale-100));
2432

2533
/// @prop - Badge left position
26-
$tab-ionic-button-badge-start-position: var(--badge-left-position, calc(50% + 12px));
34+
$tab-ionic-button-badge-start-position: var(--badge-left-position, calc(50% + token.$ion-scale-300));
2735

2836
/// @prop - Badge padding top
29-
$tab-ionic-button-badge-padding-top: var(--badge-padding-top, 4px);
37+
$tab-ionic-button-badge-padding-top: var(--badge-padding-top, token.$ion-scale-100);
3038

3139
/// @prop - Badge padding end
32-
$tab-ionic-button-badge-padding-end: var(--badge-padding-right, 4px);
40+
$tab-ionic-button-badge-padding-end: var(--badge-padding-right, token.$ion-scale-100);
3341

3442
/// @prop - Badge padding bottom
35-
$tab-ionic-button-badge-padding-bottom: var(--badge-padding-bottom, 4px);
43+
$tab-ionic-button-badge-padding-bottom: var(--badge-padding-bottom, token.$ion-scale-100);
3644

3745
/// @prop - Badge padding start
38-
$tab-ionic-button-badge-padding-start: var(--badge-padding-left, 4px);
46+
$tab-ionic-button-badge-padding-start: var(--badge-padding-left, token.$ion-scale-100);
3947

4048
/// @prop - Badge bottom position when tab bottom has icon at Bottom
41-
$tab-ionic-button-icon-bottom-badge-top-position: var(--icon-bottom-badge-top-position, calc(50% - 4px));
49+
$tab-ionic-button-icon-bottom-badge-top-position: var(
50+
--icon-bottom-badge-top-position,
51+
calc(50% - token.$ion-scale-100)
52+
);
4253

4354
/// @prop - Badge bottom position when tab bottom has icon at bottom
44-
$tab-ionic-button-icon-bottom-badge-bottom-position: var(--icon-bottom-badge-bottom-position, calc(50% + 4px));
55+
$tab-ionic-button-icon-bottom-badge-bottom-position: var(
56+
--icon-bottom-badge-bottom-position,
57+
calc(50% + token.$ion-scale-100)
58+
);
4559

4660
/// @prop - Badge bottom position when empty and when tab bottom has icon at bottom
4761
$tab-ionic-button-icon-bottom-badge-bottom-position-empty: var(

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -37,19 +37,19 @@
3737
@include position($start: $tab-ios-button-badge-start-position);
3838
}
3939

40-
:host ::slotted(ion-badge[vertical="top"]) {
41-
top: $tab-ios-button-badge-top-position;
40+
:host ::slotted(ion-badge.badge-vertical-top) {
41+
@include position($top: $tab-ios-button-badge-top-position);
4242
}
4343

44-
:host ::slotted(ion-badge[vertical="top"]:empty) {
45-
top: $tab-ios-button-badge-top-position-empty;
44+
:host ::slotted(ion-badge.badge-vertical-top:empty) {
45+
@include position($top: $tab-ios-button-badge-top-position-empty);
4646
}
4747

48-
:host ::slotted(ion-badge[vertical="bottom"]) {
48+
:host ::slotted(ion-badge.badge-vertical-bottom) {
4949
@include position($top: $tab-ios-button-badge-bottom-position);
5050
}
5151

52-
:host ::slotted(ion-badge[vertical="bottom"]:empty) {
52+
:host ::slotted(ion-badge.badge-vertical-bottom:empty) {
5353
@include position($top: $tab-ios-button-badge-bottom-position-empty);
5454
}
5555

@@ -72,15 +72,15 @@
7272
font-size: $tab-ios-button-badge-font-size;
7373
}
7474

75-
:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical="top"]) {
75+
:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-top) {
7676
@include position($top: $tab-ios-button-icon-bottom-badge-top-position);
7777
}
7878

79-
:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical="bottom"]) {
79+
:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom) {
8080
@include position($top: $tab-ios-button-icon-bottom-badge-bottom-position);
8181
}
8282

83-
:host(.tab-layout-icon-bottom) ::slotted(ion-badge[vertical="bottom"]:empty) {
83+
:host(.tab-layout-icon-bottom) ::slotted(ion-badge.badge-vertical-bottom:empty) {
8484
@include position($top: $tab-ios-button-icon-bottom-badge-bottom-position-empty);
8585
}
8686

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,6 @@
7575
height: $tab-button-md-badge-size-empty;
7676
}
7777

78-
:host ::slotted(ion-badge[vertical]) {
79-
--badge-padding-top: 5px;
80-
}
81-
8278
:host ::slotted(ion-badge[vertical="bottom"]) {
8379
@include position($top: $tab-button-md-badge-bottom-position);
8480
}

0 commit comments

Comments
 (0)