Skip to content

Conversation

@BenOsodrac
Copy link
Contributor

@BenOsodrac BenOsodrac commented Mar 26, 2025

Issue number: internal


What is the current behavior?

Currently the vertical prop only works for empty badges.

What is the new behavior?

  • Added styles for badge with numbers or icons to be used as hint (vertical prop)
  • Added new tests for these scenarios and updated snapshots.
  • Added best effort styles for ios/md to look decent (not on the scope of this task and no UI from figma).

Does this introduce a breaking change?

  • Yes
  • No

Other information

Badge Ionic Hint

@vercel
Copy link

vercel bot commented Mar 26, 2025

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 Mar 28, 2025 5:04pm

@BenOsodrac BenOsodrac added type: feature request a new feature, enhancement, or improvement package: core @ionic/core package labels Mar 26, 2025
@BenOsodrac BenOsodrac marked this pull request as ready for review March 26, 2025 15:15
@BenOsodrac BenOsodrac requested a review from a team as a code owner March 26, 2025 15:15
@BenOsodrac BenOsodrac requested review from gnbm and joselrio March 26, 2025 15:15
Comment on lines 30 to 34
/// @prop - Font size of the badge hint
$badge-hint-baseline-font-size: 8px;

/// @prop - Font size of the badge hint
$badge-hint-font-size: dynamic-font($badge-hint-baseline-font-size);
Copy link
Contributor

Choose a reason for hiding this comment

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

Since these are for native usage only, create a badge.native.vars.scss file and move those tokens there. That way ionic isn't importing extra weight.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed!

BenOsodrac and others added 3 commits March 28, 2025 15:50
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?
<!-- Please describe the current behavior that you are modifying. -->

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Update tokens dependency to 1.2.2.
- Update generated tokens.

## 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. -->
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

@BenOsodrac BenOsodrac merged commit 8855618 into next Mar 28, 2025
48 checks passed
@BenOsodrac BenOsodrac deleted the ROU-11750 branch March 28, 2025 17:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package type: feature request a new feature, enhancement, or improvement

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants