feat(item-divider): cleanup

Author: thetaPC

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

@@ -4,7 +4,6 @@ export type IonItemDividerRecipe = {
   background?: string;
   color?: string;
   minHeight?: string;
-  zIndex?: number;
 
   padding?: IonPadding;
 
@@ -22,16 +21,19 @@ export type IonItemDividerRecipe = {
   };
 
   leading?: {
+    // Targets `:host([slot="start"])`
     anchor?: {
       margin?: IonMargin;
     };
 
+    // Targets `::slotted([slot="start"])`
     edge?: {
       margin?: IonMargin;
     };
   };
 
   trailing?: {
+    // Targets `::slotted([slot="end"])`
     edge?: {
       margin?: IonMargin;
     };
@@ -47,12 +49,14 @@ export type IonItemDividerRecipe = {
     };
 
     leading?: {
+      // Targets `::slotted([slot="start"])`
       edge?: {
         margin?: IonMargin;
       };
     };
 
     trailing?: {
+      // Targets `::slotted([slot="end"])`
       edge?: {
         margin?: IonMargin;
       };
@@ -89,12 +93,14 @@ export type IonItemDividerRecipe = {
     margin?: IonMargin;
 
     leading?: {
+      // Targets `::slotted([slot="start"])`
       edge?: {
         margin?: IonMargin;
       };
     };
 
     trailing?: {
+      // Targets `::slotted([slot="end"])`
       edge?: {
         margin?: IonMargin;
       };
@@ -108,12 +114,14 @@ export type IonItemDividerRecipe = {
     margin?: IonMargin;
 
     leading?: {
+      // Targets `::slotted([slot="start"])`
       edge?: {
         margin?: IonMargin;
       };
     };
 
     trailing?: {
+      // Targets `::slotted([slot="end"])`
       edge?: {
         margin?: IonMargin;
       };
@@ -127,6 +135,7 @@ export type IonItemDividerRecipe = {
   header2?: {
     margin?: IonMargin;
 
+    // Targets `:last-child`
     trailing?: {
       margin?: IonMargin;
     };
@@ -135,6 +144,7 @@ export type IonItemDividerRecipe = {
   header3?: {
     margin?: IonMargin;
 
+    // Targets `:last-child`
     trailing?: {
       margin?: IonMargin;
     };
@@ -143,6 +153,7 @@ export type IonItemDividerRecipe = {
   header4?: {
     margin?: IonMargin;
 
+    // Targets `:last-child`
     trailing?: {
       margin?: IonMargin;
     };
@@ -151,6 +162,7 @@ export type IonItemDividerRecipe = {
   header5?: {
     margin?: IonMargin;
 
+    // Targets `:last-child`
     trailing?: {
       margin?: IonMargin;
     };
@@ -159,6 +171,7 @@ export type IonItemDividerRecipe = {
   header6?: {
     margin?: IonMargin;
 
+    // Targets `:last-child`
     trailing?: {
       margin?: IonMargin;
     };
@@ -178,6 +191,7 @@ export type IonItemDividerRecipe = {
       overflow?: string;
     };
 
+    // Targets `:last-child`
     trailing?: {
       margin?: IonMargin;
     };

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

@@ -69,7 +69,8 @@
 
   overflow: hidden;
 
-  z-index: var(--ion-item-divider-z-index, auto);
+  //
+  z-index: 100;
   box-sizing: border-box;
 }
 

core/src/themes/ionic/default.tokens.ts

@@ -268,7 +268,6 @@ export const defaultTheme: DefaultTheme = {
       background: baseColors.backgroundColor,
       color: `var(--ion-text-color-step-600, ${mix(baseColors.white, baseColors.black, '40%')})`,
       minHeight: 'var(--ion-scaling-750)',
-      zIndex: 100,
 
       padding: {
         top: 'var(--ion-spacing-0)',

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

@@ -408,12 +408,18 @@ export const defaultTheme: DefaultTheme = {
       minHeight: 'var(--ion-scaling-sm)',
 
       padding: {
+        top: 'var(--ion-spacing-0)',
+        end: 'var(--ion-spacing-0)',
+        bottom: 'var(--ion-spacing-0)',
         start: components.item.padding.start,
       },
 
       inner: {
         padding: {
+          top: 'var(--ion-spacing-0)',
           end: `calc(${components.item.padding.end} * 0.5)`,
+          bottom: 'var(--ion-spacing-0)',
+          start: 'var(--ion-spacing-0)',
         },
       },
 

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

@@ -401,7 +401,6 @@ export const defaultTheme: DefaultTheme = {
       background: baseColors.backgroundColor,
       color: `var(--ion-text-color-step-600, ${mix(baseColors.white, baseColors.black, '40%')})`,
       minHeight: 'var(--ion-scaling-750)',
-      zIndex: 100,
 
       padding: {
         top: 'var(--ion-spacing-0)',

core/src/themes/native/native.globals.scss

@@ -63,6 +63,5 @@ $z-index-overlay-wrapper: 10;
 
 $z-index-item-options: 1;
 $z-index-item-input: 2;
-$z-index-item-divider: 100;
 
 $z-index-reorder-selected: 100;