Merge remote-tracking branch 'origin/main' into sp/sync-feature-7-6-with-main

core/src/components/item/item.ios.vars.scss

@@ -36,9 +36,6 @@ $item-ios-avatar-height:                     $item-ios-avatar-width !default;
 /// @prop - Size of the thumbnail in the item
 $item-ios-thumbnail-size:                   56px !default;
 
-/// @prop - Color of the detail arrow icon
-$item-ios-detail-icon-color:                 $item-ios-border-color !default;
-
 /// @prop - Padding top for the item content
 $item-ios-padding-top:                       10px !default;
 
@@ -60,9 +57,6 @@ $item-ios-border-bottom-style:               solid !default;
 /// @prop - Border bottom color for the item when lines are displayed
 $item-ios-border-bottom-color:               $item-ios-border-color !default;
 
-/// @prop - Border bottom for the item
-$item-ios-border-bottom:                     $item-ios-border-bottom-width $item-ios-border-bottom-style $item-ios-border-bottom-color !default;
-
 /// @prop - Color of the item input highlight
 $item-ios-input-highlight-color:             ion-color(primary, base) !default;
 

core/src/components/item/item.md.vars.scss

@@ -21,9 +21,6 @@ $item-md-avatar-height:                     $item-md-avatar-width !default;
 /// @prop - Size of the thumbnail in the item
 $item-md-thumbnail-size:                   56px !default;
 
-/// @prop - Color of the detail arrow icon
-$item-md-detail-icon-color:                 $item-md-border-color !default;
-
 /// @prop - Padding top for the item content
 $item-md-padding-top:                       10px !default;
 
@@ -45,9 +42,6 @@ $item-md-border-bottom-style:               solid !default;
 /// @prop - Border bottom color for the item when lines are displayed
 $item-md-border-bottom-color:               $item-md-border-color !default;
 
-/// @prop - Border bottom for the item when lines are displayed
-$item-md-border-bottom:                     $item-md-border-bottom-width $item-md-border-bottom-style $item-md-border-color !default;
-
 // Item Input
 // --------------------------------------------------
 
@@ -75,9 +69,6 @@ $item-md-input-fill-border-color:           $background-color-step-500 !default;
 /// @prop - Color of the item border when `fill` is set and hovered
 $item-md-input-fill-border-color-hover:     $background-color-step-750 !default;
 
-/// @prop - Color of the item input counter
-$item-md-input-counter-color:               rgba(0, 0, 0, .6) !default;
-
 /// @prop - Letter spacing of the item input counter
 $item-md-input-counter-letter-spacing:      .0333333333em !default;
 

core/src/components/item/item.scss

@@ -203,14 +203,21 @@
 .item-native {
   @include border-radius(var(--border-radius));
   @include margin(0);
-  @include padding(
-    var(--padding-top),
-    var(--padding-end),
-    var(--padding-bottom),
-    calc(var(--padding-start) + var(--ion-safe-area-left, 0px))
-  );
+  @include padding(var(--padding-top), null, var(--padding-bottom));
   @include text-inherit();
 
+  /* stylelint-disable */
+  @include ltr() {
+    padding-right: var(--padding-end);
+    padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
+  }
+
+  @include rtl() {
+    padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
+    padding-left: var(--padding-end);
+  }
+  /* stylelint-enable */
+
   display: flex;
   position: relative;
 
@@ -272,12 +279,19 @@ button, a {
 
 .item-inner {
   @include margin(0);
-  @include padding(
-    var(--inner-padding-top),
-    calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end)),
-    var(--inner-padding-bottom),
-    var(--inner-padding-start)
-  );
+  @include padding(var(--inner-padding-top), null, var(--inner-padding-bottom));
+
+  /* stylelint-disable */
+  @include ltr() {
+    padding-right: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));
+    padding-left: var(--inner-padding-start);
+  }
+
+  @include rtl() {
+    padding-right: var(--inner-padding-start);
+    padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
+  }
+  /* stylelint-enable */
 
   display: flex;
 
@@ -328,12 +342,19 @@ button, a {
 
 .item-bottom {
   @include margin(0);
-  @include padding(
-    0,
-    var(--inner-padding-end),
-    0,
-    calc(var(--padding-start) + var(--ion-safe-area-left, 0px))
-  );
+  @include padding(0, null);
+
+  /* stylelint-disable */
+  @include ltr() {
+    padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
+    padding-right: calc(var(--inner-padding-end) + var(--ion-safe-area-right, 0px));
+  }
+
+  @include rtl() {
+    padding-left: calc(var(--inner-padding-end) + var(--ion-safe-area-left, 0px));
+    padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
+  }
+  /* stylelint-enable */
 
   display: flex;
 

core/src/components/item/test/basic/item.e2e.ts

@@ -10,5 +10,37 @@ configs().forEach(({ title, screenshot, config }) => {
 
       await expect(page).toHaveScreenshot(screenshot(`item-diff`));
     });
+
+    /**
+     * This behavior needs to be tested for all modes & directions
+     * Safe padding should stay on the same side when the direction changes
+     */
+    test('should have safe area padding', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          :root {
+            --ion-safe-area-left: 40px;
+            --ion-safe-area-right: 20px;
+          }
+        </style>
+        <ion-list>
+          <ion-item>
+            <ion-label>Item with helper</ion-label>
+            <div slot="helper">Helper</div>
+          </ion-item>
+
+          <ion-item>
+            <ion-label> Single line text that should have ellipses when it doesn't all fit in the item</ion-label>
+          </ion-item>
+        </ion-list>
+      `,
+        config
+      );
+
+      const list = page.locator('ion-list');
+
+      await expect(list).toHaveScreenshot(screenshot('item-safe-area'));
+    });
   });
 });