Skip to content

fix(button): update styling for badge #30414

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

Jump to bottom
Open
wants to merge 5 commits into
base: next
Choose a base branch
from
Open

fix(button): update styling for badge #30414

wants to merge 5 commits into from

Conversation

OS-pedrolourenco
Copy link
Contributor

Issue number: internal

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
  • No

Other information

@vercel Vercel
Copy link

vercel bot commented May 16, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
ionic-framework ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 27, 2025 9:49am

@github-actions github-actions bot added the package: core @ionic/core package label May 16, 2025
@OS-pedrolourenco OS-pedrolourenco changed the title Implement missing button badge styles feat(button): update styling for badge May 16, 2025
@OS-pedrolourenco OS-pedrolourenco requested a review from thetaPC May 16, 2025 15:08
@OS-pedrolourenco OS-pedrolourenco marked this pull request as ready for review May 16, 2025 15:08
@OS-pedrolourenco OS-pedrolourenco requested a review from a team as a code owner May 16, 2025 15:08
thetaPC
thetaPC requested changes May 19, 2025
View reviewed changes
Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please update the PR title to be a fix since the PR is aiming to change the outcome to reflect the true styles.

@OS-pedrolourenco OS-pedrolourenco changed the title feat(button): update styling for badge fix(button): update styling for badge May 20, 2025
@OS-pedrolourenco OS-pedrolourenco requested a review from thetaPC May 20, 2025 11:41
thetaPC
thetaPC requested changes May 23, 2025
View reviewed changes
Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just needs to have ios and md styles to match ionic when it comes to positioning. If the positions are the same, then we can move the styles to the common file.

@OS-pedrolourenco OS-pedrolourenco requested a review from thetaPC May 27, 2025 09:46
thetaPC
thetaPC approved these changes May 27, 2025
View reviewed changes
Copy link
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@thetaPC thetaPC thetaPC approved these changes

Assignees
No one assigned
Labels
package: core @ionic/core package
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@OS-pedrolourenco @thetaPC