feat(badge): add recipe and tokens#31043
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| :host ::slotted(ion-badge[vertical]:not(:empty)) { | ||
| @include globals.padding(2px); | ||
| } |
There was a problem hiding this comment.
Removed this completely because based on MD3, the padding should always be consistent regardless of the host component.
|
|
||
| /** | ||
| * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component. | ||
| * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component. |
There was a problem hiding this comment.
Forgot to remove this in the first iteration of review.
brandyscarney
left a comment
brandyscarney
left a comment
There was a problem hiding this comment.
Most of my feedback is related to styles and tests. 👍
There was a problem hiding this comment.
Can this be fixed so that the badge isn't cut off at the end of row 3?
There was a problem hiding this comment.
Can this be fixed so that the badge isn't cut off at the end of row 3?
There was a problem hiding this comment.
I was thinking that the grid for this would always display the same number of avatars before wrapping. This looks different than the Safari screenshot for this same test.
There was a problem hiding this comment.
Why are the medium and large badges the same size except for the hints?
There was a problem hiding this comment.
Medium and large buttons have the same exact styling for ionic. While I was grabbing the link, I decided to check the designs in case something changed since then. That's when I noticed that large is not provided for content badges. That would explain why it was styled to match medium. So I decided to make my best judgement on what large would look like and added the styles. 9a199bd
There was a problem hiding this comment.
Shouldn't the badge always be a circle at minimum (when it contains only a 1)?
There was a problem hiding this comment.
I was trying to keep it as close to the original styling in main but that lead to the inconsistent styles that you see now. I've updated it based on the MD3 specs since they seem similar to MD2. f3b59c2
I left the icon sizes alone so they're still using the sizes from main. Let me now if you prefer them to also be completely round. The reason that I left them alone is because native MD does not support icon badges.
There was a problem hiding this comment.
Sounds good. Can we add this to the button ticket?
There was a problem hiding this comment.
We should either split the test into two screenshots based on badge position (top vs bottom) or add some kind of heading / separation to the test like this:
Top:
Bottom:
Prefer 4 columns over 5 though for easier scanning.
There was a problem hiding this comment.
I also switched to 3 columns to match button.
There was a problem hiding this comment.
Here is how it looks in a native Swift app in iOS 18:
and iOS 26:
It does look like the small size matches better but the font weight is off for both and the padding is off when it contains 999+:
I think the lack of padding on 999+ (in this image 123) is what makes it look off.
There was a problem hiding this comment.
It does look better but there is still wrapping like in core/src/components/button/test/badge/badge.e2e.ts-snapshots/button-large-badge-md-ltr-Mobile-Firefox-linux.png. You may want to adjust the size of the view so it uses a larger width to capture them all on one line.
There was a problem hiding this comment.
I don't think we need a lot of these, in particular:
The icon-only examples - we should just have 1 example for this (combine top, bottom, start, end, label-hide and do not include icon-hide)
The label-only examples - we should just have 1 example for this (combine top, bottom, start, end, icon-hide and do not include label-hide)
Unless you think the positioning really needs the visual tests here, these all render the same and we don’t really support showing just a badge so we don’t need to verify it. This feedback applies to both badge positions.
3 participants
Issue number: internal
What is the current behavior?
Component styles for
ion-badgeare fragmented across multiple files (ios, md). Developers were restricted to those themes and how those themes structured the logic and styles.What is the new behavior?
badge.scssfile that consumes CSS variables, ensuring a single source of truth for component logic.badge.interfaces.tsDoes this introduce a breaking change?
This PR introduces a breaking change to how
IonBadgeis styled. Existing manual CSS overrides targeting internal badge structures or old token names will no longer work due to the shift to thew new token hierarchy and a unified base SCSS file.Migration Path:
Token Updates: Update any custom theme configurations to match the new nested structure.
CSS Overrides: Ensure selectors align with the new slotted element logic and variable names (e.g.,
--ion-badge-hue-bold-default-background).--backgroundshould no longer be used. Setting the value,Badge.hue.bold.background, within the tokens file should be used to change the background for the bold hue. Setting the value,Badge.hue.subtle.background, within the tokens file should be used to change the background for the subtle hue.badge.mdOther information
This PR significantly improves the developer experience for theming. By moving logic into
default.tokens.tsand away from hardcoded SCSS functions, designers and developers can now override styles (like the size on a slotted avatar) purely through token configuration.