javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(button): update styling for badge (#30414)

Browse Source 
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 current behavior?
Some stylings for the ion-badge when slotted in an ion-button were
missing.

## What is the new behavior?
Updated the styling for the ion-badge when slotted in an ion-button
according to the designs:
- Adjusted badge padding;
- Abandoned the `:has` pseudo-selector for a simple 'button-had-badge'
class;
- Adjusted font-size for icons inside the button;
- Adjusted badge positioning according to button size and badge length.

## 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. -->
This commit is contained in:
Pedro Lourenço
2025-05-29 16:49:55 +01:00
committed by GitHub
parent 8b5215ff03
commit a0d5ad7b8d
49 changed files with 118 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
core/src/components/button/button.ionic.scss
View File

@ -131,15 +131,14 @@
::slotted(ion-icon[slot="start"]),
::slotted(ion-icon[slot="end"]),
::slotted(ion-icon[slot="icon-only"]) {
font-size: globals.$ion-font-size-400;
font-size: globals.$ion-font-size-500;
}
:host(.button-small),
:host(.button-large) {
::slotted(ion-icon[slot="start"]),
::slotted(ion-icon[slot="end"]),
::slotted(ion-icon[slot="icon-only"]) {
font-size: inherit;
font-size: globals.$ion-font-size-600;
}
}
@ -264,8 +263,46 @@
@include globals.margin-horizontal(globals.$ion-space-300, null);
}
// Button Badge
// Button with Badge
// --------------------------------------------------
:host ::slotted(ion-badge[vertical]:not(:empty)) {
@include globals.padding(globals.$ion-space-050);
:host(.button-has-badge) {
--padding-top: #{globals.$ion-space-0};
--padding-bottom: #{globals.$ion-space-0};
}
:host(.button-small) ::slotted(ion-badge) {
@include globals.position(null, calc(-1 * globals.$ion-space-050), null, null);
}
:host(.button-medium) {
::slotted(ion-badge.long-badge.badge-vertical-top) {
@include globals.position($top: globals.$ion-space-100);
}
::slotted(ion-badge.long-badge.badge-vertical-bottom) {
@include globals.position($bottom: globals.$ion-space-100);
}
::slotted(ion-badge:not(.long-badge).badge-vertical-top) {
@include globals.position(globals.$ion-space-100, globals.$ion-space-150, null, null);
}
::slotted(ion-badge:not(.long-badge).badge-vertical-bottom) {
@include globals.position(null, globals.$ion-space-150, globals.$ion-space-100, null);
}
}
:host(.button-large) {
::slotted(ion-badge.long-badge.badge-vertical-top) {
@include globals.position($top: globals.$ion-space-200);
}
::slotted(ion-badge.long-badge.badge-vertical-bottom) {
@include globals.position($bottom: globals.$ion-space-200);
}
::slotted(ion-badge:not(.long-badge).badge-vertical-top) {
@include globals.position(globals.$ion-space-200, globals.$ion-space-200, null, null);
}
::slotted(ion-badge:not(.long-badge).badge-vertical-bottom) {
@include globals.position(null, globals.$ion-space-200, globals.$ion-space-200, null);
}
}