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.
| }, | ||
|
|
||
| // Sizes | ||
| size: { |
There was a problem hiding this comment.
| }, | ||
|
|
||
| // Sizes | ||
| size: { |
There was a problem hiding this comment.
Avatar sizes have yet to be implemented.
There was a problem hiding this comment.
The default is now small so the snapshot was updated.
There was a problem hiding this comment.
I renamed the folder from hint to vertical.
There was a problem hiding this comment.
Moved this test to badge-size-rectangular since there was no need to split them into smaller tests. The same reason goes for the other shape snapshots that were "deleted".
There was a problem hiding this comment.
Moved this test to badge-size-large since there was no need to split them into smaller tests. The same reason goes for the other size snapshots that were "deleted".
| /** | ||
| * "-apple-system-body" on iOS never goes smaller than | ||
| * 14px according to https://developer.apple.com/design/human-interface-guidelines/typography#Specifications. | ||
| * However, we still keep the max() usage here for consistency | ||
| * with other components and in case "-apple-system-body" does | ||
| * go smaller than 14px in the future. | ||
| */ |
There was a problem hiding this comment.
This comment lived in the ios theme file, I moved it over to keep record of it.
There was a problem hiding this comment.
Not sure why this keeps being persistent. I tried reverting it so it wouldn't bog down the PR but it's still here. I was able to revert the other browsers but not Firefox.
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.