Skip to content

Commit b9c7961

Browse files
thetaPCthetaPC
committed
feat(chip, item-divider): clarify leading, trailing
1 parent 1c72a1e commit b9c7961

6 files changed

Lines changed: 64 additions & 64 deletions

File tree

‎core/src/components/chip/chip.interfaces.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -93,13 +93,13 @@ type IonChipShapeDefinition = {
9393
};
9494

9595
type IonChipMediaDefinition = {
96-
// Styles for the media component only if it is the first element in the slot
97-
leading?: {
96+
// Targets `:first-child`
97+
first?: {
9898
margin?: IonMargin;
9999
};
100100

101-
// Styles for the media component only if it is the last element in the slot
102-
trailing?: {
101+
// Targets `:last-child`
102+
last?: {
103103
margin?: IonMargin;
104104
};
105105
};

‎core/src/components/chip/chip.scss‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -375,19 +375,19 @@
375375

376376
::slotted(ion-icon:first-child) {
377377
@include mixins.margin(
378-
var(--ion-chip-icon-leading-margin-top),
379-
var(--ion-chip-icon-leading-margin-end),
380-
var(--ion-chip-icon-leading-margin-bottom),
381-
var(--ion-chip-icon-leading-margin-start)
378+
var(--ion-chip-icon-first-margin-top),
379+
var(--ion-chip-icon-first-margin-end),
380+
var(--ion-chip-icon-first-margin-bottom),
381+
var(--ion-chip-icon-first-margin-start)
382382
);
383383
}
384384

385385
::slotted(ion-icon:last-child) {
386386
@include mixins.margin(
387-
var(--ion-chip-icon-trailing-margin-top),
388-
var(--ion-chip-icon-trailing-margin-end),
389-
var(--ion-chip-icon-trailing-margin-bottom),
390-
var(--ion-chip-icon-trailing-margin-start)
387+
var(--ion-chip-icon-last-margin-top),
388+
var(--ion-chip-icon-last-margin-end),
389+
var(--ion-chip-icon-last-margin-bottom),
390+
var(--ion-chip-icon-last-margin-start)
391391
);
392392
}
393393

@@ -401,18 +401,18 @@
401401

402402
::slotted(ion-avatar:first-child) {
403403
@include mixins.margin(
404-
var(--ion-chip-avatar-leading-margin-top),
405-
var(--ion-chip-avatar-leading-margin-end),
406-
var(--ion-chip-avatar-leading-margin-bottom),
407-
var(--ion-chip-avatar-leading-margin-start)
404+
var(--ion-chip-avatar-first-margin-top),
405+
var(--ion-chip-avatar-first-margin-end),
406+
var(--ion-chip-avatar-first-margin-bottom),
407+
var(--ion-chip-avatar-first-margin-start)
408408
);
409409
}
410410

411411
::slotted(ion-avatar:last-child) {
412412
@include mixins.margin(
413-
var(--ion-chip-avatar-trailing-margin-top),
414-
var(--ion-chip-avatar-trailing-margin-end),
415-
var(--ion-chip-avatar-trailing-margin-bottom),
416-
var(--ion-chip-avatar-trailing-margin-start)
413+
var(--ion-chip-avatar-last-margin-top),
414+
var(--ion-chip-avatar-last-margin-end),
415+
var(--ion-chip-avatar-last-margin-bottom),
416+
var(--ion-chip-avatar-last-margin-start)
417417
);
418418
}

‎core/src/components/item-divider/item-divider.interfaces.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ export type IonItemDividerRecipe = {
138138
margin?: IonMargin;
139139

140140
// Targets `:last-child`
141-
trailing?: {
141+
last?: {
142142
margin?: IonMargin;
143143
};
144144
};
@@ -147,7 +147,7 @@ export type IonItemDividerRecipe = {
147147
margin?: IonMargin;
148148

149149
// Targets `:last-child`
150-
trailing?: {
150+
last?: {
151151
margin?: IonMargin;
152152
};
153153
};
@@ -156,7 +156,7 @@ export type IonItemDividerRecipe = {
156156
margin?: IonMargin;
157157

158158
// Targets `:last-child`
159-
trailing?: {
159+
last?: {
160160
margin?: IonMargin;
161161
};
162162
};
@@ -165,7 +165,7 @@ export type IonItemDividerRecipe = {
165165
margin?: IonMargin;
166166

167167
// Targets `:last-child`
168-
trailing?: {
168+
last?: {
169169
margin?: IonMargin;
170170
};
171171
};
@@ -174,7 +174,7 @@ export type IonItemDividerRecipe = {
174174
margin?: IonMargin;
175175

176176
// Targets `:last-child`
177-
trailing?: {
177+
last?: {
178178
margin?: IonMargin;
179179
};
180180
};
@@ -194,7 +194,7 @@ export type IonItemDividerRecipe = {
194194
};
195195

196196
// Targets `:last-child`
197-
trailing?: {
197+
last?: {
198198
margin?: IonMargin;
199199
};
200200
};

‎core/src/components/item-divider/item-divider.scss‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -294,10 +294,10 @@
294294

295295
::slotted(h2:last-child) {
296296
@include mixins.margin(
297-
var(--ion-item-divider-header2-trailing-margin-top),
298-
var(--ion-item-divider-header2-trailing-margin-end),
299-
var(--ion-item-divider-header2-trailing-margin-bottom),
300-
var(--ion-item-divider-header2-trailing-margin-start)
297+
var(--ion-item-divider-header2-last-margin-top),
298+
var(--ion-item-divider-header2-last-margin-end),
299+
var(--ion-item-divider-header2-last-margin-bottom),
300+
var(--ion-item-divider-header2-last-margin-start)
301301
);
302302
}
303303

@@ -312,10 +312,10 @@
312312

313313
::slotted(h3:last-child) {
314314
@include mixins.margin(
315-
var(--ion-item-divider-header3-trailing-margin-top),
316-
var(--ion-item-divider-header3-trailing-margin-end),
317-
var(--ion-item-divider-header3-trailing-margin-bottom),
318-
var(--ion-item-divider-header3-trailing-margin-start)
315+
var(--ion-item-divider-header3-last-margin-top),
316+
var(--ion-item-divider-header3-last-margin-end),
317+
var(--ion-item-divider-header3-last-margin-bottom),
318+
var(--ion-item-divider-header3-last-margin-start)
319319
);
320320
}
321321

@@ -330,10 +330,10 @@
330330

331331
::slotted(h4:last-child) {
332332
@include mixins.margin(
333-
var(--ion-item-divider-header4-trailing-margin-top),
334-
var(--ion-item-divider-header4-trailing-margin-end),
335-
var(--ion-item-divider-header4-trailing-margin-bottom),
336-
var(--ion-item-divider-header4-trailing-margin-start)
333+
var(--ion-item-divider-header4-last-margin-top),
334+
var(--ion-item-divider-header4-last-margin-end),
335+
var(--ion-item-divider-header4-last-margin-bottom),
336+
var(--ion-item-divider-header4-last-margin-start)
337337
);
338338
}
339339

@@ -348,10 +348,10 @@
348348

349349
::slotted(h5:last-child) {
350350
@include mixins.margin(
351-
var(--ion-item-divider-header5-trailing-margin-top),
352-
var(--ion-item-divider-header5-trailing-margin-end),
353-
var(--ion-item-divider-header5-trailing-margin-bottom),
354-
var(--ion-item-divider-header5-trailing-margin-start)
351+
var(--ion-item-divider-header5-last-margin-top),
352+
var(--ion-item-divider-header5-last-margin-end),
353+
var(--ion-item-divider-header5-last-margin-bottom),
354+
var(--ion-item-divider-header5-last-margin-start)
355355
);
356356
}
357357

@@ -366,10 +366,10 @@
366366

367367
::slotted(h6:last-child) {
368368
@include mixins.margin(
369-
var(--ion-item-divider-header6-trailing-margin-top),
370-
var(--ion-item-divider-header6-trailing-margin-end),
371-
var(--ion-item-divider-header6-trailing-margin-bottom),
372-
var(--ion-item-divider-header6-trailing-margin-start)
369+
var(--ion-item-divider-header6-last-margin-top),
370+
var(--ion-item-divider-header6-last-margin-end),
371+
var(--ion-item-divider-header6-last-margin-bottom),
372+
var(--ion-item-divider-header6-last-margin-start)
373373
);
374374
}
375375

@@ -395,9 +395,9 @@
395395

396396
::slotted(p:last-child) {
397397
@include mixins.margin(
398-
var(--ion-item-divider-paragraph-trailing-margin-top),
399-
var(--ion-item-divider-paragraph-trailing-margin-end),
400-
var(--ion-item-divider-paragraph-trailing-margin-bottom, 0),
401-
var(--ion-item-divider-paragraph-trailing-margin-start)
398+
var(--ion-item-divider-paragraph-last-margin-top),
399+
var(--ion-item-divider-paragraph-last-margin-end),
400+
var(--ion-item-divider-paragraph-last-margin-bottom, 0),
401+
var(--ion-item-divider-paragraph-last-margin-start)
402402
);
403403
}

‎core/src/themes/ios/default.tokens.ts‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -356,7 +356,7 @@ export const defaultTheme: DefaultTheme = {
356356
},
357357

358358
// Targets `:first-child`
359-
leading: {
359+
first: {
360360
margin: {
361361
top: '-4px',
362362
end: 'var(--ion-spacing-sm)',
@@ -366,7 +366,7 @@ export const defaultTheme: DefaultTheme = {
366366
},
367367

368368
// Targets `:last-child`
369-
trailing: {
369+
last: {
370370
margin: {
371371
top: '-4px',
372372
end: '-4px',
@@ -381,7 +381,7 @@ export const defaultTheme: DefaultTheme = {
381381
width: `${(24 / components.chip.font.size).toFixed(2)}em`,
382382

383383
// Targets `:first-child`
384-
leading: {
384+
first: {
385385
margin: {
386386
top: '-4px',
387387
end: 'var(--ion-spacing-sm)',
@@ -391,7 +391,7 @@ export const defaultTheme: DefaultTheme = {
391391
},
392392

393393
// Targets `:last-child`
394-
trailing: {
394+
last: {
395395
margin: {
396396
top: '-4px',
397397
end: '-8px',
@@ -476,7 +476,7 @@ export const defaultTheme: DefaultTheme = {
476476
start: 'var(--ion-spacing-0)',
477477
},
478478

479-
trailing: {
479+
last: {
480480
margin: {
481481
bottom: 'var(--ion-spacing-0)',
482482
},
@@ -491,7 +491,7 @@ export const defaultTheme: DefaultTheme = {
491491
start: 'var(--ion-spacing-0)',
492492
},
493493

494-
trailing: {
494+
last: {
495495
margin: {
496496
bottom: 'var(--ion-spacing-0)',
497497
},
@@ -506,7 +506,7 @@ export const defaultTheme: DefaultTheme = {
506506
start: 'var(--ion-spacing-0)',
507507
},
508508

509-
trailing: {
509+
last: {
510510
margin: {
511511
bottom: 'var(--ion-spacing-0)',
512512
},
@@ -521,7 +521,7 @@ export const defaultTheme: DefaultTheme = {
521521
start: 'var(--ion-spacing-0)',
522522
},
523523

524-
trailing: {
524+
last: {
525525
margin: {
526526
bottom: 'var(--ion-spacing-0)',
527527
},
@@ -536,7 +536,7 @@ export const defaultTheme: DefaultTheme = {
536536
start: 'var(--ion-spacing-0)',
537537
},
538538

539-
trailing: {
539+
last: {
540540
margin: {
541541
bottom: 'var(--ion-spacing-0)',
542542
},
@@ -562,7 +562,7 @@ export const defaultTheme: DefaultTheme = {
562562
overflow: 'inherit',
563563
},
564564

565-
trailing: {
565+
last: {
566566
margin: {
567567
bottom: 'var(--ion-spacing-0)',
568568
},

‎core/src/themes/md/default.tokens.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -353,7 +353,7 @@ export const defaultTheme: DefaultTheme = {
353353
size: `${(20 / components.chip.font.size).toFixed(2)}em`,
354354
},
355355

356-
leading: {
356+
first: {
357357
margin: {
358358
top: '-4px',
359359
end: 'var(--ion-spacing-sm)',
@@ -362,7 +362,7 @@ export const defaultTheme: DefaultTheme = {
362362
},
363363
},
364364

365-
trailing: {
365+
last: {
366366
margin: {
367367
top: '-4px',
368368
end: '-4px',
@@ -377,7 +377,7 @@ export const defaultTheme: DefaultTheme = {
377377
height: `${(24 / components.chip.font.size).toFixed(2)}em`,
378378
width: `${(24 / components.chip.font.size).toFixed(2)}em`,
379379

380-
leading: {
380+
first: {
381381
margin: {
382382
top: '-4px',
383383
end: 'var(--ion-spacing-sm)',
@@ -386,7 +386,7 @@ export const defaultTheme: DefaultTheme = {
386386
},
387387
},
388388

389-
trailing: {
389+
last: {
390390
margin: {
391391
top: '-4px',
392392
end: '-8px',

0 commit comments

Comments
 (0)