feat(item-divider): add recipe and tokens #31009
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,199 @@ | ||
| import type { IonPadding, IonMargin } from '../../themes/themes.interfaces'; | ||
|
|
||
| export type IonItemDividerRecipe = { | ||
| background?: string; | ||
| color?: string; | ||
| minHeight?: string; | ||
|
|
||
| padding?: IonPadding; | ||
|
|
||
| inner?: { | ||
| padding?: IonPadding; | ||
| }; | ||
|
|
||
| border?: { | ||
| bottom?: string; | ||
| }; | ||
|
|
||
| font?: { | ||
| size?: string; | ||
| weight?: string; | ||
| }; | ||
|
|
||
| leading?: { | ||
| // Targets `:host([slot="start"])` | ||
| anchor?: { | ||
| margin?: IonMargin; | ||
| }; | ||
|
|
||
| // Targets `::slotted([slot="start"])` | ||
| edge?: { | ||
| margin?: IonMargin; | ||
| }; | ||
| }; | ||
|
|
||
| trailing?: { | ||
| // Targets `::slotted([slot="end"])` | ||
| edge?: { | ||
| margin?: IonMargin; | ||
| }; | ||
| }; | ||
|
Contributor
Author
There was a problem hiding this comment. 💡 Naming Convention: Anchors & EdgesTo maintain consistency with the Ionic Modular architecture established in
Why this matters:
Member
There was a problem hiding this comment. The change between
Contributor
Author
There was a problem hiding this comment. The naming for this was a difficult process as I tried to distinguish terms based on function and position. I'm open to any suggestions! The sooner we clarify this the sooner we can set up the structure for the other components.
Member
There was a problem hiding this comment. I'm kind of confused why this rule exists: // Item Divider Slots
// --------------------------------------------------
:host([slot="start"]) {
@include mixins.margin(
var(--ion-item-divider-leading-anchor-margin-top, revert-layer),
var(--ion-item-divider-leading-anchor-margin-end, revert-layer),
var(--ion-item-divider-leading-anchor-margin-bottom, revert-layer),
var(--ion-item-divider-leading-anchor-margin-start, revert-layer)
);
}This is only applied when the item-divider itself is in the <ion-item>
<ion-item-divider slot="start">
Item Divider in Start slot
</ion-item-divider>
<ion-label>Item</ion-label>
</ion-item>I searched and did not see any examples of this. Besides that, I was mostly just thinking In the cases of slots, I think we need to rethink these names. The naming should probably apply more to what it is actually being applied to. Like this: start?: {
// Targets `:host([slot="start"])`
host?: {
margin?: IonMargin;
};
// Targets `::slotted([slot="start"])`
slotted?: {
margin?: IonMargin;
};
};
end?: {
// Targets `:host([slot="end"])`
host?: {
margin?: IonMargin;
};
// Targets `::slotted([slot="end"])`
slotted?: {
margin?: IonMargin;
};
};which becomes: // Item Divider Slots
// --------------------------------------------------
:host([slot="start"]) {
@include mixins.margin(
var(--ion-item-divider-start-host-margin-top, revert-layer),
var(--ion-item-divider-start-host-margin-end, revert-layer),
var(--ion-item-divider-start-host-margin-bottom, revert-layer),
var(--ion-item-divider-start-host-margin-start, revert-layer)
);
}
// Item Divider Slotted Elements
// ---------------------------------------------
// Slotted Start
::slotted([slot="start"]) {
@include mixins.margin-horizontal(
var(--ion-item-divider-start-slotted-margin-start, revert-layer),
var(--ion-item-divider-start-slotted-margin-end, revert-layer)
);
}
// Slotted End
::slotted([slot="end"]) {
@include mixins.margin-horizontal(
var(--ion-item-divider-end-slotted-margin-start, revert-layer),
var(--ion-item-divider-end-slotted-margin-end, revert-layer)
);
}Updating start?: {
// Targets `:host([slot="start"])`
host?: {
margin?: IonMargin;
};
// Targets `::slotted([slot="start"])`
slotted?: {
margin?: IonMargin;
};
};
end?: {
// Targets `::slotted([slot="end"])`
slotted?: {
margin?: IonMargin;
};
};
icon?: {
font?: {
size?: string;
};
start?: {
// Targets `::slotted([slot="start"])`
slotted?: {
margin?: IonMargin;
};
};
end?: {
// Targets `::slotted([slot="end"])`
slotted?: {
margin?: IonMargin;
};
};Or we could use
Contributor
Author
|
||
|
|
||
| label?: { | ||
| margin?: IonMargin; | ||
| }; | ||
|
|
||
| icon?: { | ||
| font?: { | ||
| size?: string; | ||
| }; | ||
|
|
||
| leading?: { | ||
| // Targets `::slotted([slot="start"])` | ||
| edge?: { | ||
| margin?: IonMargin; | ||
| }; | ||
| }; | ||
|
|
||
| trailing?: { | ||
| // Targets `::slotted([slot="end"])` | ||
| edge?: { | ||
| margin?: IonMargin; | ||
| }; | ||
| }; | ||
|
|
||
| default?: { | ||
| color?: string; | ||
| }; | ||
|
|
||
| semantic?: { | ||
| default?: { | ||
| color?: string; | ||
| }; | ||
| }; | ||
|
Comment on lines
+67
to
+76
Contributor
Author
There was a problem hiding this comment. This follows the same structure established in chip when it came to default vs semantic colors. |
||
| }; | ||
|
|
||
| note?: { | ||
| align?: { | ||
| self?: string; | ||
| }; | ||
|
|
||
| font?: { | ||
| size?: string; | ||
| }; | ||
|
|
||
| margin?: IonMargin; | ||
| padding?: IonPadding; | ||
| }; | ||
|
|
||
| avatar?: { | ||
| height?: string; | ||
| width?: string; | ||
|
|
||
| margin?: IonMargin; | ||
|
|
||
| leading?: { | ||
| // Targets `::slotted([slot="start"])` | ||
| edge?: { | ||
| margin?: IonMargin; | ||
| }; | ||
| }; | ||
|
|
||
| trailing?: { | ||
| // Targets `::slotted([slot="end"])` | ||
| edge?: { | ||
| margin?: IonMargin; | ||
| }; | ||
| }; | ||
| }; | ||
|
|
||
| thumbnail?: { | ||
| height?: string; | ||
| width?: string; | ||
|
|
||
| margin?: IonMargin; | ||
|
|
||
| leading?: { | ||
| // Targets `::slotted([slot="start"])` | ||
| edge?: { | ||
| margin?: IonMargin; | ||
| }; | ||
| }; | ||
|
|
||
| trailing?: { | ||
| // Targets `::slotted([slot="end"])` | ||
| edge?: { | ||
| margin?: IonMargin; | ||
| }; | ||
| }; | ||
| }; | ||
|
|
||
| header1?: { | ||
| margin?: IonMargin; | ||
| }; | ||
|
|
||
| header2?: { | ||
| margin?: IonMargin; | ||
|
|
||
| // Targets `:last-child` | ||
| trailing?: { | ||
| margin?: IonMargin; | ||
| }; | ||
| }; | ||
|
|
||
| header3?: { | ||
| margin?: IonMargin; | ||
|
|
||
| // Targets `:last-child` | ||
| trailing?: { | ||
| margin?: IonMargin; | ||
| }; | ||
| }; | ||
|
|
||
| header4?: { | ||
| margin?: IonMargin; | ||
|
|
||
| // Targets `:last-child` | ||
| trailing?: { | ||
| margin?: IonMargin; | ||
| }; | ||
| }; | ||
|
|
||
| header5?: { | ||
| margin?: IonMargin; | ||
|
|
||
| // Targets `:last-child` | ||
| trailing?: { | ||
| margin?: IonMargin; | ||
| }; | ||
| }; | ||
|
|
||
| header6?: { | ||
| margin?: IonMargin; | ||
|
|
||
| // Targets `:last-child` | ||
| trailing?: { | ||
| margin?: IonMargin; | ||
| }; | ||
| }; | ||
|
|
||
| paragraph?: { | ||
| color?: string; | ||
| overflow?: string; | ||
|
|
||
| margin?: IonMargin; | ||
|
|
||
| font?: { | ||
| size?: string; | ||
| }; | ||
|
|
||
| text?: { | ||
| overflow?: string; | ||
| }; | ||
|
|
||
| // Targets `:last-child` | ||
| trailing?: { | ||
| margin?: IonMargin; | ||
| }; | ||
| }; | ||
| }; | ||
Uh oh!
There was an error while loading. Please reload this page.