Skip to content

Commit 62f230c

Browse files
OS-giulianasilvaOS-giulianasilva
committed
remove badge sizes
1 parent 3b643a7 commit 62f230c

File tree

35 files changed

+50
-323
lines changed

35 files changed

+50
-323
lines changed

‎core/api.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -317,7 +317,7 @@ ion-badge,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secon
317317
ion-badge,prop,hue,"bold" | "subtle" | undefined,undefined,false,false
318318
ion-badge,prop,mode,"ios" | "md",undefined,false,false
319319
ion-badge,prop,shape,"round | rectangular" | "soft" | undefined,undefined,false,false
320-
ion-badge,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall" | undefined,undefined,false,false
320+
ion-badge,prop,size,"medium" | "small" | undefined,undefined,false,false
321321
ion-badge,prop,theme,"ios" | "md" | "ionic",undefined,false,false
322322
ion-badge,prop,vertical,"bottom" | "top" | undefined,undefined,false,false
323323
ion-badge,css-prop,--background,ionic

‎core/src/components.d.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -442,9 +442,9 @@ export namespace Components {
442442
*/
443443
"shape"?: 'soft' | 'round | rectangular';
444444
/**
445-
* Set to `"xxsmall"` for the smallest badge. Set to "xsmall" for a very small badge. Set to `"small"` for a small badge. Set to "medium" for a medium badge. Set to "large" for a large badge. Set to `"xlarge"` for the largest badge. Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
445+
* Set to `"small"` for a small badge. Set to "medium" for a medium badge. Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
446446
*/
447-
"size"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
447+
"size"?: 'small' | 'medium';
448448
/**
449449
* The theme determines the visual appearance of the component.
450450
*/
@@ -5899,9 +5899,9 @@ declare namespace LocalJSX {
58995899
*/
59005900
"shape"?: 'soft' | 'round | rectangular';
59015901
/**
5902-
* Set to `"xxsmall"` for the smallest badge. Set to "xsmall" for a very small badge. Set to `"small"` for a small badge. Set to "medium" for a medium badge. Set to "large" for a large badge. Set to `"xlarge"` for the largest badge. Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
5902+
* Set to `"small"` for a small badge. Set to "medium" for a medium badge. Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
59035903
*/
5904-
"size"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
5904+
"size"?: 'small' | 'medium';
59055905
/**
59065906
* The theme determines the visual appearance of the component.
59075907
*/

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

Lines changed: 6 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
// --------------------------------------------------
66

77
:host {
8-
--padding-start: #{globals.$ion-space-200};
9-
--padding-end: #{globals.$ion-space-200};
8+
--padding-start: #{globals.$ion-space-100};
9+
--padding-end: #{globals.$ion-space-100};
1010
--padding-top: #{globals.$ion-space-0};
1111
--padding-bottom: #{globals.$ion-space-0};
1212

@@ -54,8 +54,6 @@
5454
@include globals.border-radius(globals.$ion-border-radius-200);
5555
}
5656

57-
:host(.badge-xxsmall.badge-soft),
58-
:host(.badge-xsmall.badge-soft),
5957
:host(.badge-small.badge-soft) {
6058
@include globals.border-radius(globals.$ion-border-radius-100);
6159
}
@@ -73,91 +71,22 @@
7371
// Badge Sizes
7472
// --------------------------------------------------
7573

76-
/* 2-Extra Small Badge */
77-
:host(.badge-xxsmall) {
74+
/* Small Badge */
75+
:host(.badge-small) {
7876
--padding-start: #{globals.$ion-space-050};
7977
--padding-end: #{globals.$ion-space-050};
8078

8179
min-width: globals.$ion-scale-400;
8280
height: globals.$ion-scale-400;
83-
84-
font-size: globals.$ion-font-size-300;
85-
86-
line-height: globals.$ion-font-line-height-400;
87-
}
88-
89-
:host(.badge-xxsmall) ::slotted(ion-icon) {
90-
width: globals.$ion-scale-300;
91-
height: globals.$ion-scale-300;
92-
}
93-
94-
/* Extra Small Badge */
95-
:host(.badge-xsmall) {
96-
--padding-start: #{globals.$ion-space-100};
97-
--padding-end: #{globals.$ion-space-100};
98-
99-
min-width: globals.$ion-scale-600;
100-
height: globals.$ion-scale-600;
101-
102-
font-size: globals.$ion-font-size-350;
103-
104-
line-height: globals.$ion-font-line-height-600;
105-
}
106-
107-
:host(.badge-xsmall) ::slotted(ion-icon) {
108-
width: globals.$ion-scale-400;
109-
height: globals.$ion-scale-400;
110-
}
111-
112-
/* Small Badge */
113-
:host(.badge-small) {
114-
--padding-start: #{globals.$ion-space-100};
115-
--padding-end: #{globals.$ion-space-100};
116-
117-
min-width: globals.$ion-scale-800;
118-
height: globals.$ion-scale-800;
119-
}
120-
121-
:host(.badge-small) ::slotted(ion-icon) {
122-
width: globals.$ion-scale-500;
123-
height: globals.$ion-scale-500;
12481
}
12582

12683
/* Medium Badge */
12784
:host(.badge-medium) {
12885
@include globals.typography(globals.$ion-body-md-medium);
129-
min-width: globals.$ion-scale-1000;
130-
height: globals.$ion-scale-1000;
131-
}
132-
133-
:host(.badge-medium) ::slotted(ion-icon) {
134-
width: globals.$ion-scale-600;
86+
min-width: globals.$ion-scale-600;
13587
height: globals.$ion-scale-600;
13688
}
13789

138-
/* Large Badge */
139-
:host(.badge-large) {
140-
@include globals.typography(globals.$ion-body-lg-medium);
141-
min-width: globals.$ion-scale-1200;
142-
height: globals.$ion-scale-1200;
143-
}
144-
145-
:host(.badge-large) ::slotted(ion-icon) {
146-
width: globals.$ion-scale-800;
147-
height: globals.$ion-scale-800;
148-
}
149-
150-
/* Extra Large Badge */
151-
:host(.badge-xlarge) {
152-
@include globals.typography(globals.$ion-heading-h4-medium);
153-
min-width: globals.$ion-scale-1400;
154-
height: globals.$ion-scale-1400;
155-
}
156-
157-
:host(.badge-xlarge) ::slotted(ion-icon) {
158-
width: globals.$ion-scale-1000;
159-
height: globals.$ion-scale-1000;
160-
}
16190

16291
// Badge (hint)
16392
// --------------------------------------------------
@@ -215,15 +144,12 @@
215144
// Badge in Button
216145
// --------------------------------------------------
217146

218-
:host([vertical]:not(.in-tab-button).in-button.badge-xxsmall),
219-
:host([vertical]:not(.in-tab-button).in-button.badge-xsmall),
220147
:host([vertical]:not(.in-tab-button).in-button.badge-small) {
221148
@include globals.position(null, calc(-1 * var(globals.$ion-space-050)));
222149
}
223150

224151
:host([vertical]:not(.in-tab-button).in-button.badge-medium),
225-
:host([vertical]:not(.in-tab-button).in-button.badge-large),
226-
:host([vertical]:not(.in-tab-button).in-button.badge-xlarge) {
152+
:host([vertical]:not(.in-tab-button).in-button.badge-large) {
227153
@include globals.position(null, globals.$ion-space-050);
228154
}
229155

‎core/src/components/badge/badge.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,16 +46,12 @@ export class Badge implements ComponentInterface {
4646
@Prop() shape?: 'soft' | 'round | rectangular';
4747

4848
/**
49-
* Set to `"xxsmall"` for the smallest badge.
50-
* Set to "xsmall" for a very small badge.
5149
* Set to `"small"` for a small badge.
5250
* Set to "medium" for a medium badge.
53-
* Set to "large" for a large badge.
54-
* Set to `"xlarge"` for the largest badge.
5551
*
5652
* Defaults to `"small"` for the `ionic` theme, undefined for all other themes.
5753
*/
58-
@Prop() size?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
54+
@Prop() size?: 'small' | 'medium';
5955

6056
/**
6157
* Set to `"top"` to position the badge on top right absolute position of the parent element.

0 commit comments

Comments
 (0)