feat(chip): add recipe and variables#30873
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
core/src/themes/md/default.tokens.ts
Outdated
| }, | ||
|
|
||
| avatar: { | ||
| size: `${24 / fontSizes.chipBase}em`, |
There was a problem hiding this comment.
These numbers seem made up - maybe we need to define these calculations better?
There was a problem hiding this comment.
The avatar size is based on the existing values from the original vars file.
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
| @include mixins.border-radius(var(--border-radius)); | ||
| @include mixins.margin(vars.$chip-margin); | ||
| @include mixins.padding(vars.$chip-padding-vertical, vars.$chip-padding-horizontal); | ||
| @include mixins.typography(vars.$chip-typography); |
There was a problem hiding this comment.
The font family for chip on ionic-modular and this branch do not match when it comes to the ionic theme. The ionic theme uses ion-body-sm-medium to set the typography for chip. This variable includes font family with the value of -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol". This is exactly what is being rendered on this branch. However, the ionic-modular renders it with a value of var(--ion-font-family, inherit). Based on my investigation, ionic-modular and next are not loading the correct font family. This branch fixes it.
core/src/components/chip/chip.tsx
Outdated
| if (this.outline) { | ||
| printIonWarning(`[ion-chip] - The "outline" prop is deprecated. Use fill="outline" instead.`, this.el); | ||
|
|
||
| return 'outline'; |
There was a problem hiding this comment.
This warning will fire every single render since this getter is bound to the UI. Maybe you should move this to componentWillLoud instead?
There was a problem hiding this comment.
😂 componentWillLoad* my bad haha
Co-authored-by: Shane <shane@shanessite.net>
thetaPC
requested review from
ShaneK and
brandyscarney
and removed request for
BenOsodrac
| * @prop --border-radius: Border radius of the chip | ||
| * @prop --color: Color of the chip | ||
| * @prop --focus-ring-color: Color of the focus ring | ||
| * @prop --focus-ring-style: Style of the focus ring | ||
| * @prop --focus-ring-width: Width of the focus ring | ||
| */ |
There was a problem hiding this comment.
@brandyscarney @ShaneK is there a need to keep these?
3 participants
Issue number: resolves internal
What is the current behavior?
Component styles for
ion-chipare fragmented across multiple files (ios,md,ionic). Developers were restricted to those themes and how those themes structured the logic and styles.What is the new behavior?
chip.base.scssfile that consumes CSS variables, ensuring a single source of truth for component logic.IonChiptype and tokens to prioritize a Property-First approach. Instead of flat or element-centric tokens, they are nested by element and then by property (e.g.,icon.firstChild.margin.end). This ensures:paddingandborder.chip.interfaces.tswith reusable utility types likeHueRefto standardize the "Bold vs. Subtle" logic used in variants and interaction states.mdandios.mdandios.Does this introduce a breaking change?
This PR introduces a breaking change to how
IonChipis styled. Existing manual CSS overrides targeting internal chip structures or old token names will no longer work due to the shift to a Property-First 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-chip-hue-bold-bg).--backgroundshould no longer be used. Setting the value withIonChip.hue.bold.bgandIonChip.hue.subtle.bgwithin the tokens file should be used to change the background based on the hue.If
mdorioswith no shape, then update the component to default tosoft.Other 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 complex states (like an activated outline chip) purely through token configuration.Preview: