Skip to content

Commit 85bfa52

Browse files
committed
fix(badge): improvements made based on feedback.
1 parent def8fb9 commit 85bfa52

File tree

4 files changed

+11
-20
lines changed

4 files changed

+11
-20
lines changed

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@use "../../themes/ionic/ionic.globals.scss" as globals;
22
@use "./badge.common";
3-
@import "./badge.ionic.vars";
3+
@use "./badge.ionic.vars" as badge-ionic-vars;
44

55
// Ionic Badge
66
// --------------------------------------------------
@@ -182,16 +182,13 @@
182182
:host([vertical].in-tab-button) {
183183
position: relative;
184184

185-
min-width: $badge-ionic-in-tab-button-min-width;
185+
min-width: badge-ionic-vars.$badge-ionic-in-tab-button-min-width;
186186
}
187187

188188
:host([vertical].in-tab-button) ::slotted(ion-icon) {
189189
@include globals.position($top: 50%, $start: 50%);
190190

191191
position: absolute;
192192

193-
width: $badge-ionic-in-tab-button-icon-size;
194-
height: $badge-ionic-in-tab-button-icon-size;
195-
196193
transform: translate(-50%, -50%);
197194
}

core/src/components/badge/test/hint/index.html

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en" dir="ltr">
2+
<html lang="en" dir="ltr" theme="ionic">
33
<head>
44
<meta charset="UTF-8" />
55
<title>Badge - Hint</title>
@@ -108,27 +108,27 @@
108108
<ion-tab-button href="" tab="tab-one">
109109
<ion-label>Tab One</ion-label>
110110
<ion-icon name="star"></ion-icon>
111-
<ion-badge vertical="top" color="danger">9</ion-badge>
111+
<ion-badge size="xxsmall" vertical="top" color="danger">9</ion-badge>
112112
</ion-tab-button>
113113

114114
<ion-tab-button tab="schedule" class="e2eTabTwoButton">
115115
<ion-label>Tab Two</ion-label>
116116
<ion-icon name="globe"></ion-icon>
117-
<ion-badge vertical="top" color="primary">
117+
<ion-badge size="xxsmall" vertical="top" color="primary">
118118
<ion-icon name="star"></ion-icon>
119119
</ion-badge>
120120
</ion-tab-button>
121121

122122
<ion-tab-button tab="tab-three">
123123
<ion-label>Tab Three</ion-label>
124124
<ion-icon name="logo-facebook"></ion-icon>
125-
<ion-badge vertical="top" color="warning">999</ion-badge>
125+
<ion-badge size="xxsmall" vertical="top" color="warning">999</ion-badge>
126126
</ion-tab-button>
127127

128128
<ion-tab-button tab="tab-four" class="e2eTabFourButton">
129129
<ion-label>Tab Four</ion-label>
130130
<ion-icon name="chatbox"></ion-icon>
131-
<ion-badge vertical="top" color="success"></ion-badge>
131+
<ion-badge size="xxsmall" vertical="top" color="success"></ion-badge>
132132
</ion-tab-button>
133133
</ion-tab-bar>
134134
</div>
@@ -138,27 +138,27 @@
138138
<ion-tab-button href="" tab="tab-one">
139139
<ion-label>Tab One</ion-label>
140140
<ion-icon name="star"></ion-icon>
141-
<ion-badge vertical="bottom" color="danger">9</ion-badge>
141+
<ion-badge size="xxsmall" vertical="bottom" color="danger">9</ion-badge>
142142
</ion-tab-button>
143143

144144
<ion-tab-button tab="schedule" class="e2eTabTwoButton">
145145
<ion-label>Tab Two</ion-label>
146146
<ion-icon name="globe"></ion-icon>
147-
<ion-badge vertical="bottom" color="primary">
147+
<ion-badge size="xxsmall" vertical="bottom" color="primary">
148148
<ion-icon name="star"></ion-icon>
149149
</ion-badge>
150150
</ion-tab-button>
151151

152152
<ion-tab-button tab="tab-three">
153153
<ion-label>Tab Three</ion-label>
154154
<ion-icon name="logo-facebook"></ion-icon>
155-
<ion-badge vertical="bottom" color="warning">999</ion-badge>
155+
<ion-badge size="xxsmall" vertical="bottom" color="warning">999</ion-badge>
156156
</ion-tab-button>
157157

158158
<ion-tab-button tab="tab-four" class="e2eTabFourButton">
159159
<ion-label>Tab Four</ion-label>
160160
<ion-icon name="chatbox"></ion-icon>
161-
<ion-badge vertical="bottom" color="success"></ion-badge>
161+
<ion-badge size="xxsmall" vertical="bottom" color="success"></ion-badge>
162162
</ion-tab-button>
163163
</ion-tab-bar>
164164
</div>

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,4 @@
135135
justify-content: center;
136136

137137
min-width: $tab-ionic-button-badge-size;
138-
height: $tab-ionic-button-badge-size;
139-
140-
font-size: $tab-ionic-button-badge-font-size;
141138
}

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,3 @@ $tab-ionic-button-badge-padding-bottom: var(--badge-padding-bottom, 4px);
3636

3737
/// @prop - Badge padding start
3838
$tab-ionic-button-badge-padding-start: var(--badge-padding-left, 4px);
39-
40-
/// @prop - Badge font size
41-
$tab-ionic-button-badge-font-size: var(--badge-font-size, 12px);

0 commit comments

Comments
 (0)