fix(item): remove empty padding space for item bottom (#24323)

* fix(item): remove empty padding space for item bottom * test(item): padding CSS variable screenshot test * fix(item): remove --bottom-padding-start CSS variable Resolves #23892
ionic-team · Dec 8, 2021 · 500985c · 500985c
1 parent 63066bc
commit 500985c
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 24 deletions.
diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss
@@ -225,13 +225,6 @@
   --padding-start: 0;
 }
 
-// Item Bottom
-// --------------------------------------------------
-
-:host(.item-has-start-slot) .item-bottom {
-  --bottom-padding-start: 48px;
-}
-
 // FROM TEXTAREA
 // iOS Stacked & Floating Textarea
 // --------------------------------------------------

diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
@@ -281,6 +281,26 @@ button, a {
   box-sizing: border-box;
 }
 
+
+// Item Bottom
+// --------------------------------------------------
+
+.item-bottom {
+  @include margin(0);
+  @include padding(
+    0,
+    var(--inner-padding-end),
+    0,
+    calc(var(--padding-start) + var(--ion-safe-area-left, 0px))
+  );
+
+  display: flex;
+
+  justify-content: space-between;
+
+}
+
+
 // Item Detail Icon
 // --------------------------------------------------
 
@@ -490,22 +510,6 @@ ion-ripple-effect {
   color: var(--ripple-color);
 }
 
-// Item Button Ripple effect
-// --------------------------------------------------
-
-.item-bottom {
-  @include margin(0);
-  @include padding(
-    var(--padding-top),
-    var(--inner-padding-end),
-    var(--padding-bottom),
-    calc(var(--padding-start) + var(--ion-safe-area-left, 0px) + var(--bottom-padding-start, 0px))
-  );
-  display: flex;
-
-  justify-content: space-between;
-}
-
 :host(.item-fill-solid) ::slotted([slot="start"]),
 :host(.item-fill-solid) ::slotted([slot="end"]),
 :host(.item-fill-outline) ::slotted([slot="start"]),

diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
@@ -326,7 +326,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
     // Only set onClick if the item is clickable to prevent screen
     // readers from reading all items as clickable
     const clickFn = clickable ? {
-      onClick: (ev: Event) => {openURL(href, ev, routerDirection, routerAnimation); }
+      onClick: (ev: Event) => { openURL(href, ev, routerDirection, routerAnimation); }
     } : {};
     const showDetail = detail !== undefined ? detail : mode === 'ios' && clickable;
     this.itemStyles.forEach(value => {

diff --git a/core/src/components/item/test/css-variables/e2e.ts b/core/src/components/item/test/css-variables/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('item: CSS variables', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/item/test/css-variables?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/item/test/css-variables/index.html b/core/src/components/item/test/css-variables/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Item - CSS Variables</title>
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+</head>
+
+<style>
+  ion-item {
+    --padding-top: 20px;
+    --background: #eee;
+  }
+</style>
+
+<body>
+  <ion-app>
+
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Item CSS variables</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content class="ion-padding-vertical">
+      <ion-list class="basic">
+        <ion-item>
+          <ion-label>Item 1</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Item 2</ion-label>
+        </ion-item>
+
+        <ion-item>
+          <ion-label>Item 3</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-app>
+
+</body>
+
+</html>