Skip to content

Commit 1252527

Browse files
joselriojoselrio
committed
fix(badge): Remove added styling under the context of tab button from md theme
1 parent 1608e3e commit 1252527

17 files changed

+303
-179
lines changed

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

Lines changed: 3 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -51,38 +51,15 @@
5151
// Badge Empty (hint)
5252
// --------------------------------------------------
5353

54-
:host([vertical]) {
54+
:host([vertical]:not(.in-tab-button)) {
5555
@include position(null, 0, null, null);
5656
position: absolute;
5757
}
5858

59-
:host(:empty.badge-vertical-top) {
59+
:host(:not(.in-tab-button):empty.badge-vertical-top) {
6060
top: 0;
6161
}
6262

63-
:host(:empty.badge-vertical-bottom) {
63+
:host(:not(.in-tab-button):empty.badge-vertical-bottom) {
6464
bottom: 0;
6565
}
66-
67-
// Badge Inside Tab Button
68-
// --------------------------------------------------
69-
70-
:host([vertical].in-tab-button) {
71-
// TODO(ROU-10747/ROU-11666): Consider removing this property, by removing '@include position(null, 0, null, null);' from the badge-vertical-top and badge-vertical-bottom
72-
inset-inline-end: unset;
73-
74-
position: relative;
75-
76-
min-width: $badge-in-tab-button-min-width;
77-
}
78-
79-
:host([vertical].in-tab-button) ::slotted(ion-icon) {
80-
@include position($top: 50%, $start: 50%);
81-
82-
position: absolute;
83-
84-
width: $badge-in-tab-button-icon-size;
85-
height: $badge-in-tab-button-icon-size;
86-
87-
transform: translate(-50%, -50%);
88-
}

‎core/src/components/badge/badge.common.vars.scss‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,3 @@ $badge-font-size: dynamic-font($badge-baseline-font-size);
2727
/// @prop - Font weight of the badge
2828
$badge-font-weight: bold;
2929

30-
// Badge inside a Tab Button
31-
// --------------------------------------------------
32-
33-
/// @prop - Minimum width of the badge inside a Tab Button
34-
$badge-in-tab-button-min-width: 8px;
35-
36-
/// @prop - Height of the badge inside a Tab Button
37-
$badge-in-tab-button-height: 8px;
38-
39-
/// @prop - Badge icon size inside a Tab Button
40-
$badge-in-tab-button-icon-size: 12px;

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

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

45
// Ionic Badge
56
// --------------------------------------------------
@@ -174,3 +175,28 @@
174175
min-width: globals.$ion-scale-400;
175176
height: globals.$ion-scale-400;
176177
}
178+
179+
// Badge Inside Tab Button
180+
// --------------------------------------------------
181+
182+
:host([vertical].in-tab-button) {
183+
// TODO(ROU-10747/ROU-11666): Consider removing this property, by removing '@include position(null, 0, null, null);' from the badge-vertical-top and badge-vertical-bottom
184+
inset-inline-end: unset;
185+
186+
position: relative;
187+
188+
min-width: $badge-ionic-in-tab-button-min-width;
189+
}
190+
191+
:host([vertical].in-tab-button) ::slotted(ion-icon) {
192+
@include globals.position(50%, 50%);
193+
194+
position: absolute;
195+
196+
left: 50%;
197+
198+
width: $badge-ionic-in-tab-button-icon-size;
199+
height: $badge-ionic-in-tab-button-icon-size;
200+
201+
transform: translate(-50%, -50%);
202+
}

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// Badge inside a Tab Button
2+
// --------------------------------------------------
3+
4+
/// @prop - Minimum width of the badge inside a Tab Button
5+
$badge-ionic-in-tab-button-min-width: 8px;
6+
7+
/// @prop - Height of the badge inside a Tab Button
8+
$badge-ionic-in-tab-button-height: 8px;
9+
10+
/// @prop - Badge icon size inside a Tab Button
11+
$badge-ionic-in-tab-button-icon-size: 12px;

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,28 @@
1616
*/
1717
font-size: dynamic-font-min(1, $badge-baseline-font-size);
1818
}
19+
20+
// Badge Inside Tab Button
21+
// --------------------------------------------------
22+
23+
:host([vertical].in-tab-button) {
24+
// TODO(ROU-10747/ROU-11666): Consider removing this property, by removing '@include position(null, 0, null, null);' from the badge-vertical-top and badge-vertical-bottom
25+
inset-inline-end: unset;
26+
27+
position: relative;
28+
29+
min-width: $badge-ios-in-tab-button-min-width;
30+
}
31+
32+
:host([vertical].in-tab-button) ::slotted(ion-icon) {
33+
@include position($top: 50%, $start: 50%);
34+
35+
position: absolute;
36+
37+
left: 50%;
38+
39+
width: $badge-ios-in-tab-button-icon-size;
40+
height: $badge-ios-in-tab-button-icon-size;
41+
42+
transform: translate(-50%, -50%);
43+
}

‎core/src/components/badge/badge.ios.vars.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,16 @@
55

66
/// @prop - Border radius of the badge
77
$badge-ios-border-radius: 10px;
8+
9+
10+
// Badge inside a Tab Button
11+
// --------------------------------------------------
12+
13+
/// @prop - Minimum width of the badge inside a Tab Button
14+
$badge-ios-in-tab-button-min-width: 8px;
15+
16+
/// @prop - Height of the badge inside a Tab Button
17+
$badge-ios-in-tab-button-height: 8px;
18+
19+
/// @prop - Badge icon size inside a Tab Button
20+
$badge-ios-in-tab-button-icon-size: 12px;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,4 @@
1111
--padding-start: 4px;
1212

1313
@include border-radius($badge-md-border-radius);
14-
}
14+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@
44
// --------------------------------------------------
55

66
/// @prop - Border radius of the badge
7-
$badge-md-border-radius: 4px;
7+
$badge-md-border-radius: 4px;

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

Lines changed: 49 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -104,58 +104,63 @@
104104
<ion-label> Inside Tab Button </ion-label>
105105
</ion-list-header>
106106
<div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
107-
<ion-tab-button href="" tab="tab-one">
108-
<ion-label>Tab One</ion-label>
109-
<ion-icon name="star"></ion-icon>
110-
<ion-badge vertical="top" color="danger">9</ion-badge>
111-
</ion-tab-button>
112-
113-
<ion-tab-button tab="schedule" class="e2eTabTwoButton">
114-
<ion-label>Tab Two</ion-label>
115-
<ion-icon name="globe"></ion-icon>
116-
<ion-badge vertical="top" color="primary">
107+
<ion-tab-bar style="width: 100%;">
108+
<ion-tab-button href="" tab="tab-one">
109+
<ion-label>Tab One</ion-label>
117110
<ion-icon name="star"></ion-icon>
118-
</ion-badge>
119-
</ion-tab-button>
111+
<ion-badge vertical="top" color="danger">9</ion-badge>
112+
</ion-tab-button>
113+
114+
<ion-tab-button tab="schedule" class="e2eTabTwoButton">
115+
<ion-label>Tab Two</ion-label>
116+
<ion-icon name="globe"></ion-icon>
117+
<ion-badge vertical="top" color="primary">
118+
<ion-icon name="star"></ion-icon>
119+
</ion-badge>
120+
</ion-tab-button>
120121

121-
<ion-tab-button tab="tab-three">
122-
<ion-label>Tab Three</ion-label>
123-
<ion-icon name="logo-facebook"></ion-icon>
124-
<ion-badge vertical="top" color="warning">999</ion-badge>
125-
</ion-tab-button>
122+
<ion-tab-button tab="tab-three">
123+
<ion-label>Tab Three</ion-label>
124+
<ion-icon name="logo-facebook"></ion-icon>
125+
<ion-badge vertical="top" color="warning">999</ion-badge>
126+
</ion-tab-button>
126127

127-
<ion-tab-button tab="tab-four" class="e2eTabFourButton">
128-
<ion-label>Tab Four</ion-label>
129-
<ion-icon name="chatbox"></ion-icon>
130-
<ion-badge vertical="top" color="success"></ion-badge>
131-
</ion-tab-button>
128+
<ion-tab-button tab="tab-four" class="e2eTabFourButton">
129+
<ion-label>Tab Four</ion-label>
130+
<ion-icon name="chatbox"></ion-icon>
131+
<ion-badge vertical="top" color="success"></ion-badge>
132+
</ion-tab-button>
133+
</ion-tab-bar>
132134
</div>
133-
<div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
134-
<ion-tab-button href="" tab="tab-one">
135-
<ion-label>Tab One</ion-label>
136-
<ion-icon name="star"></ion-icon>
137-
<ion-badge vertical="bottom" color="danger">9</ion-badge>
138-
</ion-tab-button>
139135

140-
<ion-tab-button tab="schedule" class="e2eTabTwoButton">
141-
<ion-label>Tab Two</ion-label>
142-
<ion-icon name="globe"></ion-icon>
143-
<ion-badge vertical="bottom" color="primary">
136+
<div class="ion-display-flex ion-align-items-center ion-justify-content-around ion-margin">
137+
<ion-tab-bar style="width: 100%;">
138+
<ion-tab-button href="" tab="tab-one">
139+
<ion-label>Tab One</ion-label>
144140
<ion-icon name="star"></ion-icon>
145-
</ion-badge>
146-
</ion-tab-button>
141+
<ion-badge vertical="bottom" color="danger">9</ion-badge>
142+
</ion-tab-button>
143+
144+
<ion-tab-button tab="schedule" class="e2eTabTwoButton">
145+
<ion-label>Tab Two</ion-label>
146+
<ion-icon name="globe"></ion-icon>
147+
<ion-badge vertical="bottom" color="primary">
148+
<ion-icon name="star"></ion-icon>
149+
</ion-badge>
150+
</ion-tab-button>
147151

148-
<ion-tab-button tab="tab-three">
149-
<ion-label>Tab Three</ion-label>
150-
<ion-icon name="logo-facebook"></ion-icon>
151-
<ion-badge vertical="bottom" color="warning">999</ion-badge>
152-
</ion-tab-button>
152+
<ion-tab-button tab="tab-three">
153+
<ion-label>Tab Three</ion-label>
154+
<ion-icon name="logo-facebook"></ion-icon>
155+
<ion-badge vertical="bottom" color="warning">999</ion-badge>
156+
</ion-tab-button>
153157

154-
<ion-tab-button tab="tab-four" class="e2eTabFourButton">
155-
<ion-label>Tab Four</ion-label>
156-
<ion-icon name="chatbox"></ion-icon>
157-
<ion-badge vertical="bottom" color="success"></ion-badge>
158-
</ion-tab-button>
158+
<ion-tab-button tab="tab-four" class="e2eTabFourButton">
159+
<ion-label>Tab Four</ion-label>
160+
<ion-icon name="chatbox"></ion-icon>
161+
<ion-badge vertical="bottom" color="success"></ion-badge>
162+
</ion-tab-button>
163+
</ion-tab-bar>
159164
</div>
160165
</ion-list>
161166
</ion-content>

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

Lines changed: 0 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
@import "../../themes/mixins";
2-
@import "./tab-button.common.vars";
32

43
:host {
54
/**
@@ -155,52 +154,6 @@
155154
z-index: 1;
156155
}
157156

158-
:host ::slotted(ion-badge[vertical]:empty) {
159-
@include padding(0, 0);
160-
161-
width: $tab-button-badge-size-emtpy;
162-
height: $tab-button-badge-size-emtpy;
163-
}
164-
165-
:host ::slotted(ion-badge[vertical]) {
166-
@include position($start: $tab-button-badge-start-position);
167-
}
168-
169-
:host ::slotted(ion-badge[vertical="top"]) {
170-
top: $tab-button-badge-top-position;
171-
}
172-
173-
:host ::slotted(ion-badge[vertical="top"]:empty) {
174-
top: $tab-button-badge-top-position-empty;
175-
}
176-
177-
:host ::slotted(ion-badge[vertical="bottom"]) {
178-
@include position($top: $tab-button-badge-bottom-position);
179-
}
180-
181-
:host ::slotted(ion-badge[vertical="bottom"]:empty) {
182-
@include position($top: $tab-button-badge-bottom-position-empty);
183-
}
184-
185-
:host ::slotted(ion-badge[vertical]:not(:empty)) {
186-
@include padding(
187-
$tab-button-badge-padding-top,
188-
$tab-button-badge-padding-end,
189-
$tab-button-badge-padding-bottom,
190-
$tab-button-badge-padding-start
191-
);
192-
193-
display: flex;
194-
195-
align-items: center;
196-
justify-content: center;
197-
198-
min-width: $tab-button-badge-size;
199-
height: $tab-button-badge-size;
200-
201-
font-size: $tab-button-badge-font-size;
202-
}
203-
204157
// Tab Button: Layout
205158
// --------------------------------------------------
206159

0 commit comments

Comments
 (0)