Skip to content

feat(badge): remove xxsmall, xsmall and xlarge sizes #30392

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
May 7, 2025
Merged

feat(badge): remove xxsmall, xsmall and xlarge sizes #30392

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
62f230c
remove badge sizes
OS-giulianasilva May 5, 2025
8f403b6
revert packageManager changes
OS-giulianasilva May 5, 2025
d222c26
lint
OS-giulianasilva May 5, 2025
7e9bd2c
chore(): add updated snapshots
Ionitron May 6, 2025
5815013
fix icon sizes inside badge
OS-giulianasilva May 6, 2025
d71b82b
fix icon inside badge
OS-giulianasilva May 6, 2025
d2b1a50
fix default padding for badge
OS-giulianasilva May 6, 2025
33546e0
lint
OS-giulianasilva May 6, 2025
319a9a7
remove tests of unavailable sizes for badge
OS-giulianasilva May 6, 2025
96400bd
fix tests for badge and remove screenshots
OS-giulianasilva May 6, 2025
1885088
chore(): add updated snapshots
Ionitron May 6, 2025
d62ddbd
address CR comments
OS-giulianasilva May 7, 2025
5916775
chore(): add updated snapshots
Ionitron May 7, 2025
6f31f16
chore(): add updated snapshots
Ionitron May 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
remove badge sizes
  • Loading branch information
@OS-giulianasilva
OS-giulianasilva committed May 5, 2025
commit 62f230c080be157eb71880d892c036686f665bb1
2 changes: 1 addition & 1 deletion core/api.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -317,7 +317,7 @@ ion-badge,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secon
ion-badge,prop,hue,"bold" | "subtle" | undefined,undefined,false,false
ion-badge,prop,mode,"ios" | "md",undefined,false,false
ion-badge,prop,shape,"round | rectangular" | "soft" | undefined,undefined,false,false
ion-badge,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall" | undefined,undefined,false,false
ion-badge,prop,size,"medium" | "small" | undefined,undefined,false,false
ion-badge,prop,theme,"ios" | "md" | "ionic",undefined,false,false
ion-badge,prop,vertical,"bottom" | "top" | undefined,undefined,false,false
ion-badge,css-prop,--background,ionic
Expand Down
8 changes: 4 additions & 4 deletions core/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -442,9 +442,9 @@ export namespace Components {
*/
"shape"?: 'soft' | 'round | rectangular';
/**
* 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.
* 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.
*/
"size"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
"size"?: 'small' | 'medium';
/**
* The theme determines the visual appearance of the component.
*/
Expand Down Expand Up @@ -5899,9 +5899,9 @@ declare namespace LocalJSX {
*/
"shape"?: 'soft' | 'round | rectangular';
/**
* 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.
* 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.
*/
"size"?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
"size"?: 'small' | 'medium';
/**
* The theme determines the visual appearance of the component.
*/
Expand Down
86 changes: 6 additions & 80 deletions core/src/components/badge/badge.ionic.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
// --------------------------------------------------

:host {
--padding-start: #{globals.$ion-space-200};
--padding-end: #{globals.$ion-space-200};
--padding-start: #{globals.$ion-space-100};
--padding-end: #{globals.$ion-space-100};
--padding-top: #{globals.$ion-space-0};
--padding-bottom: #{globals.$ion-space-0};

Expand Down Expand Up @@ -54,8 +54,6 @@
@include globals.border-radius(globals.$ion-border-radius-200);
}

:host(.badge-xxsmall.badge-soft),
:host(.badge-xsmall.badge-soft),
:host(.badge-small.badge-soft) {
@include globals.border-radius(globals.$ion-border-radius-100);
}
Expand All @@ -73,91 +71,22 @@
// Badge Sizes
// --------------------------------------------------

/* 2-Extra Small Badge */
:host(.badge-xxsmall) {
/* Small Badge */
:host(.badge-small) {
--padding-start: #{globals.$ion-space-050};
--padding-end: #{globals.$ion-space-050};

min-width: globals.$ion-scale-400;
height: globals.$ion-scale-400;

font-size: globals.$ion-font-size-300;

line-height: globals.$ion-font-line-height-400;
}

:host(.badge-xxsmall) ::slotted(ion-icon) {
width: globals.$ion-scale-300;
height: globals.$ion-scale-300;
}

/* Extra Small Badge */
:host(.badge-xsmall) {
--padding-start: #{globals.$ion-space-100};
--padding-end: #{globals.$ion-space-100};

min-width: globals.$ion-scale-600;
height: globals.$ion-scale-600;

font-size: globals.$ion-font-size-350;

line-height: globals.$ion-font-line-height-600;
}

:host(.badge-xsmall) ::slotted(ion-icon) {
width: globals.$ion-scale-400;
height: globals.$ion-scale-400;
}

/* Small Badge */
:host(.badge-small) {
--padding-start: #{globals.$ion-space-100};
--padding-end: #{globals.$ion-space-100};

min-width: globals.$ion-scale-800;
height: globals.$ion-scale-800;
}

:host(.badge-small) ::slotted(ion-icon) {
width: globals.$ion-scale-500;
height: globals.$ion-scale-500;
}

/* Medium Badge */
:host(.badge-medium) {
@include globals.typography(globals.$ion-body-md-medium);
min-width: globals.$ion-scale-1000;
height: globals.$ion-scale-1000;
}

:host(.badge-medium) ::slotted(ion-icon) {
width: globals.$ion-scale-600;
min-width: globals.$ion-scale-600;
height: globals.$ion-scale-600;
}

/* Large Badge */
:host(.badge-large) {
@include globals.typography(globals.$ion-body-lg-medium);
min-width: globals.$ion-scale-1200;
height: globals.$ion-scale-1200;
}

:host(.badge-large) ::slotted(ion-icon) {
width: globals.$ion-scale-800;
height: globals.$ion-scale-800;
}

/* Extra Large Badge */
:host(.badge-xlarge) {
@include globals.typography(globals.$ion-heading-h4-medium);
min-width: globals.$ion-scale-1400;
height: globals.$ion-scale-1400;
}

:host(.badge-xlarge) ::slotted(ion-icon) {
width: globals.$ion-scale-1000;
height: globals.$ion-scale-1000;
}

// Badge (hint)
// --------------------------------------------------
Expand Down Expand Up @@ -215,15 +144,12 @@
// Badge in Button
// --------------------------------------------------

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

:host([vertical]:not(.in-tab-button).in-button.badge-medium),
:host([vertical]:not(.in-tab-button).in-button.badge-large),
:host([vertical]:not(.in-tab-button).in-button.badge-xlarge) {
:host([vertical]:not(.in-tab-button).in-button.badge-large) {
@include globals.position(null, globals.$ion-space-050);
}

Expand Down
6 changes: 1 addition & 5 deletions core/src/components/badge/badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,16 +46,12 @@ export class Badge implements ComponentInterface {
@Prop() shape?: 'soft' | 'round | rectangular';

/**
* 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.
*/
@Prop() size?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
@Prop() size?: 'small' | 'medium';

/**
* Set to `"top"` to position the badge on top right absolute position of the parent element.
Expand Down
Loading