Skip to content

Commit 560a791

Browse files
fix(badge): update tokens usage on shapes (#30603)
Issue number: internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - improve tokens usage; ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> [shapes](https://ionic-framework-git-rou-12131-ionic1.vercel.app/src/components/badge/test/shape?ionic:theme=ionic)
1 parent feddbf9 commit 560a791

File tree

2 files changed

+38
-4
lines changed

2 files changed

+38
-4
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,21 +51,21 @@
5151

5252
/* Soft Badge */
5353
:host(.badge-soft) {
54-
@include globals.border-radius(globals.$ion-border-radius-200);
54+
@include globals.border-radius(globals.$ion-soft-xs);
5555
}
5656

5757
:host(.badge-small.badge-soft) {
58-
@include globals.border-radius(globals.$ion-border-radius-100);
58+
@include globals.border-radius(globals.$ion-soft-2xs);
5959
}
6060

6161
/* Round Badge */
6262
:host(.badge-round) {
63-
@include globals.border-radius(globals.$ion-border-radius-full);
63+
@include globals.border-radius(globals.$ion-round-sm);
6464
}
6565

6666
/* Rectangular Badge */
6767
:host(.badge-rectangular) {
68-
@include globals.border-radius(globals.$ion-border-radius-0);
68+
@include globals.border-radius(globals.$ion-rectangular-sm);
6969
}
7070

7171
// Badge Sizes

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,40 @@
5757
</ion-badge>
5858
</ion-item>
5959
</ion-list>
60+
<ion-list>
61+
<ion-item>
62+
<ion-label>Medium Default</ion-label>
63+
<ion-badge size="medium" slot="end">1</ion-badge>
64+
<ion-badge size="medium" slot="end">99+</ion-badge>
65+
<ion-badge size="medium" slot="end">
66+
<ion-icon name="logo-ionic"></ion-icon>
67+
</ion-badge>
68+
</ion-item>
69+
<ion-item>
70+
<ion-label>Medium Soft</ion-label>
71+
<ion-badge size="medium" slot="end" shape="soft">1</ion-badge>
72+
<ion-badge size="medium" slot="end" shape="soft">99+</ion-badge>
73+
<ion-badge size="medium" slot="end" shape="soft">
74+
<ion-icon name="logo-ionic"></ion-icon>
75+
</ion-badge>
76+
</ion-item>
77+
<ion-item>
78+
<ion-label>Medium Round</ion-label>
79+
<ion-badge size="medium" slot="end" shape="round">1</ion-badge>
80+
<ion-badge size="medium" slot="end" shape="round">99+</ion-badge>
81+
<ion-badge size="medium" slot="end" shape="round">
82+
<ion-icon name="logo-ionic"></ion-icon>
83+
</ion-badge>
84+
</ion-item>
85+
<ion-item>
86+
<ion-label>Medium Rectangular</ion-label>
87+
<ion-badge size="medium" slot="end" shape="rectangular">1</ion-badge>
88+
<ion-badge size="medium" slot="end" shape="rectangular">99+</ion-badge>
89+
<ion-badge size="medium" slot="end" shape="rectangular">
90+
<ion-icon name="logo-ionic"></ion-icon>
91+
</ion-badge>
92+
</ion-item>
93+
</ion-list>
6094
</ion-content>
6195
</ion-app>
6296
</body>

0 commit comments

Comments
 (0)