Skip to content

Commit c74dd00

Browse files
OS-martacarlosOS-martacarlos
committed
Merge branch 'next' into ROU-11778
2 parents 16aa9b2 + 8855618 commit c74dd00

23 files changed

+276
-61
lines changed

‎core/package-lock.json‎

Lines changed: 4 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎core/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
"fs-extra": "^9.0.1",
6767
"jest": "^29.7.0",
6868
"jest-cli": "^29.7.0",
69-
"outsystems-design-tokens": "^1.2.1",
69+
"outsystems-design-tokens": "^1.2.2",
7070
"prettier": "^2.8.8",
7171
"rollup": "^2.26.4",
7272
"sass": "^1.33.0",

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

Lines changed: 59 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -153,23 +153,77 @@
153153
height: globals.$ion-scale-1000;
154154
}
155155

156-
// Avatar Empty Badge (hint)
156+
// Avatar Badge Empty (hint)
157157
// --------------------------------------------------
158158

159159
:host ::slotted(ion-badge.badge-vertical-top:empty) {
160-
transform: translate(globals.$ion-scale-050, calc(globals.$ion-scale-050 * -1));
160+
@include globals.transform(translate(globals.$ion-scale-050, calc(globals.$ion-scale-050 * -1)));
161161
}
162162

163163
:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:empty) {
164-
transform: translate(globals.$ion-scale-100, calc(globals.$ion-scale-100 * -1));
164+
@include globals.transform(translate(globals.$ion-scale-100, calc(globals.$ion-scale-100 * -1)));
165165
}
166166

167167
:host ::slotted(ion-badge.badge-vertical-bottom:empty) {
168-
transform: translate(0, globals.$ion-scale-100);
168+
@include globals.transform(translate(0, globals.$ion-scale-100));
169169
}
170170

171171
:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:empty) {
172-
transform: translate(globals.$ion-scale-100, calc(globals.$ion-scale-100));
172+
@include globals.transform(translate(globals.$ion-scale-100, globals.$ion-scale-100));
173+
}
174+
175+
// Avatar Badge Bottom (hint)
176+
// --------------------------------------------------
177+
178+
:host ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
179+
@include globals.transform(translate(50%, 50%));
180+
}
181+
182+
:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
183+
@include globals.position(null, globals.$ion-scale-100, globals.$ion-scale-100, null);
184+
@include globals.transform(translate(100%, 100%));
185+
}
186+
187+
:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
188+
@include globals.position(null, calc(globals.$ion-scale-050 * -1), calc(globals.$ion-scale-050 * -1), null);
189+
}
190+
191+
:host(.avatar-small) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),
192+
:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),
193+
:host(.avatar-large) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
194+
@include globals.position(null, globals.$ion-scale-050, globals.$ion-scale-050, null);
195+
}
196+
197+
:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
198+
@include globals.position(null, globals.$ion-scale-150, globals.$ion-scale-150, null);
199+
}
200+
201+
// Avatar Badge Top (hint)
202+
// --------------------------------------------------
203+
204+
:host ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
205+
@include globals.transform(translate(50%, -50%));
206+
}
207+
208+
:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
209+
@include globals.position(globals.$ion-scale-050, 0, null, null);
210+
}
211+
212+
:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
213+
@include globals.position(globals.$ion-scale-100, calc(globals.$ion-scale-050 * -1), null, null);
214+
}
215+
216+
:host(.avatar-small) ::slotted(ion-badge.badge-vertical-top:not(:empty)),
217+
:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
218+
@include globals.position(globals.$ion-scale-150, 0, null, null);
219+
}
220+
221+
:host(.avatar-large) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
222+
@include globals.position(globals.$ion-scale-150, globals.$ion-scale-050, null, null);
223+
}
224+
225+
:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
226+
@include globals.position(globals.$ion-scale-150, globals.$ion-scale-150, null, null);
173227
}
174228

175229
// Avatar Disabled

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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use "../../themes/native/native.globals.md" as globals;
12
@import "./avatar.common";
23
@import "./avatar.md.vars";
34

@@ -15,9 +16,17 @@
1516
// --------------------------------------------------
1617

1718
::slotted(ion-badge.badge-vertical-top:empty) {
18-
transform: translate(-50%, 50%);
19+
@include globals.transform(translate(-50%, 50%));
1920
}
2021

2122
::slotted(ion-badge.badge-vertical-bottom:empty) {
22-
transform: translateX(-100%);
23+
@include globals.transform(translateX(-100%));
24+
}
25+
26+
:host ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
27+
@include globals.transform(translate(0, 100%));
28+
}
29+
30+
:host ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
31+
@include globals.transform(translate(0, -100%));
2332
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,18 +48,18 @@
4848
color: #{color.current-color(contrast)};
4949
}
5050

51-
// Badge Empty (hint)
51+
// Badge (hint)
5252
// --------------------------------------------------
5353

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

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

63-
:host(:not(.in-tab-button):empty.badge-vertical-bottom) {
63+
:host(:not(.in-tab-button)[vertical].badge-vertical-bottom) {
6464
bottom: 0;
6565
}

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

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -146,15 +146,22 @@
146146
height: globals.$ion-scale-1000;
147147
}
148148

149-
// Badge Empty
149+
// Badge (hint)
150150
// --------------------------------------------------
151151

152152
:host(:empty) {
153153
--padding-start: 0;
154154
--padding-end: 0;
155155
}
156156

157-
// Badge Sizes Empty
157+
:host([vertical]:not(:empty)) {
158+
--padding-start: #{globals.$ion-scale-100};
159+
--padding-end: #{globals.$ion-scale-100};
160+
--padding-top: #{globals.$ion-scale-100};
161+
--padding-bottom: #{globals.$ion-scale-100};
162+
}
163+
164+
// Badge (hint) Sizes
158165
// --------------------------------------------------
159166

160167
/* sm */
@@ -182,8 +189,9 @@
182189
position: relative;
183190
}
184191

185-
// Badge Icon when Inside Tab Button
186-
:host([vertical].in-tab-button) ::slotted(ion-icon) {
192+
// Icon Inside Badge Hint
193+
// --------------------------------------------------
194+
:host([vertical]) ::slotted(ion-icon) {
187195
@include globals.position(50%, null, null, 50%);
188196

189197
position: absolute;

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import "../../themes/native/native.globals.md";
22
@import "./badge.common";
3-
@import "./badge.common.vars";
3+
@import "./badge.native.vars";
44

55
// Badge
66
// --------------------------------------------------
@@ -13,6 +13,7 @@
1313
}
1414

1515
// TODO(ROU-10747): Review size styles when sizes are defined for native themes.
16+
:host([vertical]:not(.in-tab-button)),
1617
:host(:empty) {
1718
--padding-start: 0;
1819
--padding-end: 0;
@@ -23,4 +24,8 @@
2324

2425
width: $badge-min-width;
2526
height: $badge-min-width;
27+
28+
font-size: $badge-hint-font-size;
29+
30+
line-height: 10px;
2631
}

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@import "../../themes/functions.font";
2+
3+
// Badge
4+
// --------------------------------------------------
5+
6+
/// @prop - Font size of the badge hint
7+
$badge-hint-baseline-font-size: 8px;
8+
9+
/// @prop - Font size of the badge hint
10+
$badge-hint-font-size: dynamic-font($badge-hint-baseline-font-size);

‎core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Chrome-linux.png‎

24.9 KB
Loading

‎core/src/components/badge/test/hint/badge.e2e.ts-snapshots/badge-hint-avatar-ionic-md-ltr-light-Mobile-Firefox-linux.png‎

27.2 KB
Loading

0 commit comments

Comments
 (0)