feat(item-divider): add recipe and tokens#31009
feat(item-divider): add recipe and tokens#31009thetaPC wants to merge 19 commits intoionic-modularfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| // Slotted Content | ||
| // -------------------------------------------------- | ||
|
|
||
| ::slotted(h1) { |
There was a problem hiding this comment.
My following comment applies to all the slotted headers:
I noticed that the margins are being overridden by a high level style for headers. I'm not sure when the margins declared in the item divider ever get applied. This is also being overridden in main. Can we just get rid of the slotted header styles?
There was a problem hiding this comment.
Noticed that color functions were never used.
| // TODO(FW-6862): separate width and height tokens for thumbnails | ||
| --size: var(--ion-item-divider-thumbnail-width); |
There was a problem hiding this comment.
To maximize customization, we should split the size into height and width.
| * @prop --size: Size of the thumbnail | ||
| */ | ||
| --size: 48px; | ||
| --size: 48px; // TODO(FW-6862): separate width and height tokens for thumbnails |
There was a problem hiding this comment.
To maximize customization, we should split the size into height and width.
| width: var(--size, 48px); | ||
| height: var(--size, 48px); |
There was a problem hiding this comment.
We're using --ion-item-divider-thumbnail-width to let dividers control thumbnail sizes. The problem is that if a theme doesn't provide this token, the CSS breaks instead of falling back. We can't use revert-layer because the 'original' size we want to return to is actually another variable, not a fixed value. The cleanest fix is to just bake the default 48px right into the variable's fallback.
|
|
||
| :host([slot="start"]) { | ||
| @include mixins.margin( | ||
| var(--ion-item-divider-leading-anchor-margin-top, revert-layer), |
There was a problem hiding this comment.
revert-layer is being used so that if we don't provide a modular CSS variable, we give the component permission to just keep doing whatever it was doing originally.
| leading?: { | ||
| // Targets `:host([slot="start"])` | ||
| anchor?: { | ||
| margin?: IonMargin; | ||
| }; | ||
|
|
||
| // Targets `::slotted([slot="start"])` | ||
| edge?: { | ||
| margin?: IonMargin; | ||
| }; | ||
| }; | ||
|
|
||
| trailing?: { | ||
| // Targets `::slotted([slot="end"])` | ||
| edge?: { | ||
| margin?: IonMargin; | ||
| }; | ||
| }; |
There was a problem hiding this comment.
💡 Naming Convention: Anchors & Edges
To maintain consistency with the Ionic Modular architecture established in ion-chip, this component adopts a shared spatial vocabulary. While chips use DOM order (:first-child), dividers use named slots (slot="start/end"). The following naming convention bridges that gap:
- Anchors (
:host): Refers to the component's own placement within a parent container.leading-anchor: Targets:host([slot="start"]).trailing-anchor: Targets:host([slot="end"]).
- Edges (
::slotted): Refers to content placed at the boundaries of the component itself.leading-edge: Targets::slotted([slot="start"]).trailing-edge: Targets::slotted([slot="end"]).
Why this matters:
This mirrors the leading (:first-child) and trailing (:last-child) pattern used in chips. By using leading/trailing instead of left/right or start/end, we create a less confusing structure that developers can use with ease.
| default?: { | ||
| color?: string; | ||
| }; | ||
|
|
||
| semantic?: { | ||
| default?: { | ||
| color?: string; | ||
| }; | ||
| }; |
There was a problem hiding this comment.
This follows the same structure established in chip when it came to default vs semantic colors.
There was a problem hiding this comment.
Added:
- Item divider with icons at the start and end slot
- Item divider with a thumbnail at the start
- Item divider with paragrahs
| import { colors as baseColors } from '../base/shared.tokens'; | ||
|
|
||
| export const components = { | ||
| item: { |
There was a problem hiding this comment.
Item divider depends on the values set on item. This file was created to keep track of those values and other components that need to be shared with each other.
thetaPC
requested review from
BenOsodrac and
ShaneK
and removed request for
BenOsodrac
1 participant
Issue number: internal
What is the current behavior?
Component styles for
ion-item-dividerare fragmented across multiple files (ios, md). Theionictheme uses themdstyles. Developers were restricted to those themes and how those themes structured the logic and styles.What is the new behavior?
item-divider.scssfile that consumes CSS variables, ensuring a single source of truth for component logic.item-divider.interfaces.tsDoes this introduce a breaking change?
This PR introduces a breaking change to how
IonItemDivideris styled. Existing manual CSS overrides targeting internal item divider 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-item-divider-background).--backgroundshould no longer be used. Setting the value,IonDivider.background, within the tokens file should be used to change the background.ion-divider.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.Preview