From f42c688f4630e3dc5d10b947e7f2bee9d5967d8c Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Thu, 1 Oct 2020 18:54:19 -0400
Subject: [PATCH] fix(item): properly align datetime and select without labels
 and with fixed labels (#22221)

fixes #18773 fixes #18761 fixes #18779
---
 core/src/components/item/item.ios.scss        |   9 ++
 core/src/components/item/item.md.scss         |  10 +-
 core/src/components/item/item.scss            |  14 +-
 .../src/components/item/test/alignment/e2e.ts |  19 +++
 .../components/item/test/alignment/index.html | 135 ++++++++++++++++++
 core/src/components/label/label.md.scss       |   4 -
 core/src/components/select/select.md.scss     |   4 +
 7 files changed, 189 insertions(+), 6 deletions(-)
 create mode 100644 core/src/components/item/test/alignment/e2e.ts
 create mode 100644 core/src/components/item/test/alignment/index.html

diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss
index 87235cbddf..30f2c00062 100644
--- a/core/src/components/item/item.ios.scss
+++ b/core/src/components/item/item.ios.scss
@@ -204,6 +204,15 @@
 }
 
 
+// iOS Fixed Labels
+// --------------------------------------------------
+
+:host(.item-label-fixed) ::slotted(ion-select),
+:host(.item-label-fixed) ::slotted(ion-datetime) {
+  --padding-start: 0;
+}
+
+
 // FROM TEXTAREA
 // iOS Stacked & Floating Textarea
 // --------------------------------------------------
diff --git a/core/src/components/item/item.md.scss b/core/src/components/item/item.md.scss
index 643001a9bb..cfe05fdb7b 100644
--- a/core/src/components/item/item.md.scss
+++ b/core/src/components/item/item.md.scss
@@ -212,7 +212,6 @@
 }
 
 
-
 // Material Design Floating/Stacked Label
 // --------------------------------------------------
 
@@ -222,6 +221,15 @@
 }
 
 
+// Material Design Fixed Labels
+// --------------------------------------------------
+
+:host(.item-label-fixed) ::slotted(ion-select),
+:host(.item-label-fixed) ::slotted(ion-datetime) {
+  --padding-start: 8px;
+}
+
+
 // Material Design Toggle/Radio Item
 // --------------------------------------------------
 
diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
index ecbfcae447..882cce3023 100644
--- a/core/src/components/item/item.scss
+++ b/core/src/components/item/item.scss
@@ -407,8 +407,16 @@ button, a {
 // Item Select
 // --------------------------------------------------
 
+:host(:not(.item-label)) ::slotted(ion-select) {
+  --padding-start: 0;
+
+  max-width: none;
+}
+
 :host(.item-label-stacked) ::slotted(ion-select),
 :host(.item-label-floating) ::slotted(ion-select) {
+  --padding-top: 8px;
+  --padding-bottom: 8px;
   --padding-start: 0;
 
   align-self: stretch;
@@ -422,6 +430,10 @@ button, a {
 // Item Datetime
 // --------------------------------------------------
 
+:host(:not(.item-label)) ::slotted(ion-datetime) {
+  --padding-start: 0;
+}
+
 :host(.item-label-stacked) ::slotted(ion-datetime),
 :host(.item-label-floating) ::slotted(ion-datetime) {
   --padding-start: 0;
@@ -463,4 +475,4 @@ button, a {
 
 ion-ripple-effect {
   color: var(--ripple-color);
-}
\ No newline at end of file
+}
diff --git a/core/src/components/item/test/alignment/e2e.ts b/core/src/components/item/test/alignment/e2e.ts
new file mode 100644
index 0000000000..2b3633538d
--- /dev/null
+++ b/core/src/components/item/test/alignment/e2e.ts
@@ -0,0 +1,19 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('item: alignment', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/item/test/alignment?ionic:_testing=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
+
+test('item: alignment-rtl', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/item/test/alignment?ionic:_testing=true&rtl=true'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/item/test/alignment/index.html b/core/src/components/item/test/alignment/index.html
new file mode 100644
index 0000000000..0fe63d492e
--- /dev/null
+++ b/core/src/components/item/test/alignment/index.html
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Item - Alignment</title>
+  <meta name="viewport"
+    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <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>
+
+<body>
+  <ion-app>
+
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Item - Alignment</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-list>
+        <ion-list-header>Leading Icons</ion-list-header>
+        <ion-item>
+          <ion-icon slot="start" name="time"></ion-icon>
+          <ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a" value="2019-10-01T15:43:40.394Z"></ion-datetime>
+        </ion-item>
+        <ion-item>
+          <ion-icon slot="start" name="radio-button-off"></ion-icon>
+          <ion-input placeholder="Choose Starting Point"></ion-input>
+        </ion-item>
+        <ion-item>
+          <ion-icon slot="start" name="pin"></ion-icon>
+          <ion-select placeholder="Choose Really Really Long Destination Here">
+            <ion-select-option>Madison, WI</ion-select-option>
+            <ion-select-option>Atlanta, GA</ion-select-option>
+          </ion-select>
+        </ion-item>
+      </ion-list>
+
+      <ion-list>
+        <ion-list-header>Default Labels</ion-list-header>
+        <ion-item>
+          <ion-label>Time</ion-label>
+          <ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a" value="2019-10-01T15:43:40.394Z"></ion-datetime>
+        </ion-item>
+        <ion-item>
+          <ion-label>From</ion-label>
+          <ion-input placeholder="Choose Starting Point"></ion-input>
+        </ion-item>
+        <ion-item>
+          <ion-label>Destination</ion-label>
+          <ion-select placeholder="Choose Really Really Long Destination Here">
+            <ion-select-option>Madison, WI</ion-select-option>
+            <ion-select-option>Atlanta, GA</ion-select-option>
+          </ion-select>
+        </ion-item>
+      </ion-list>
+
+      <ion-list>
+        <ion-list-header>Fixed Labels</ion-list-header>
+        <ion-item>
+          <ion-label position="fixed">Time</ion-label>
+          <ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a" value="2019-10-01T15:43:40.394Z"></ion-datetime>
+        </ion-item>
+        <ion-item>
+          <ion-label position="fixed">From</ion-label>
+          <ion-input placeholder="Choose Starting Point"></ion-input>
+        </ion-item>
+        <ion-item>
+          <ion-label position="fixed">Destination</ion-label>
+          <ion-select placeholder="Choose Really Really Long Destination Here">
+            <ion-select-option>Madison, WI</ion-select-option>
+            <ion-select-option>Atlanta, GA</ion-select-option>
+          </ion-select>
+        </ion-item>
+      </ion-list>
+
+      <ion-list>
+        <ion-list-header>Floating Labels</ion-list-header>
+        <ion-item>
+          <ion-label position="floating">Time</ion-label>
+          <ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a"></ion-datetime>
+        </ion-item>
+        <ion-item>
+          <ion-label position="floating">From</ion-label>
+          <ion-input></ion-input>
+        </ion-item>
+        <ion-item>
+          <ion-label position="floating">Destination</ion-label>
+          <ion-select>
+            <ion-select-option>Madison, WI</ion-select-option>
+            <ion-select-option>Atlanta, GA</ion-select-option>
+          </ion-select>
+        </ion-item>
+      </ion-list>
+
+      <ion-list>
+        <ion-list-header>Stacked Labels</ion-list-header>
+        <ion-item>
+          <ion-label position="stacked">Time</ion-label>
+          <ion-datetime display-format="DDDD MMMM D YYYY hh:mm:ss a" value="2019-10-01T15:43:40.394Z"></ion-datetime>
+        </ion-item>
+        <ion-item>
+          <ion-label position="stacked">From</ion-label>
+          <ion-input placeholder="Choose Starting Point"></ion-input>
+        </ion-item>
+        <ion-item>
+          <ion-label position="stacked">Destination</ion-label>
+          <ion-select placeholder="Choose Really Really Long Destination Here">
+            <ion-select-option>Madison, WI</ion-select-option>
+            <ion-select-option>Atlanta, GA</ion-select-option>
+          </ion-select>
+        </ion-item>
+      </ion-list>
+
+    </ion-content>
+  </ion-app>
+
+  <style>
+    ion-item {
+      --border-width: 0;
+      --inner-border-width: 0;
+      --background: #ddd;
+      border-radius: 4px;
+      margin-bottom: 10px;
+    }
+  </style>
+</body>
+
+</html>
diff --git a/core/src/components/label/label.md.scss b/core/src/components/label/label.md.scss
index d1739c80f4..4bdb56c259 100644
--- a/core/src/components/label/label.md.scss
+++ b/core/src/components/label/label.md.scss
@@ -38,10 +38,6 @@
   @include margin(0, 0, 0, 0);
 }
 
-:host-context(.item-select).label-floating {
-  @include transform(translate3d(0, 130%, 0));
-}
-
 :host-context(.item-has-focus).label-floating,
 :host-context(.item-has-placeholder).label-floating,
 :host-context(.item-has-value).label-floating {
diff --git a/core/src/components/select/select.md.scss b/core/src/components/select/select.md.scss
index 5f087e47aa..cd12859302 100644
--- a/core/src/components/select/select.md.scss
+++ b/core/src/components/select/select.md.scss
@@ -15,3 +15,7 @@
   width: 19px;
   height: 19px;
 }
+
+:host-context(.item-label-floating) .select-icon {
+  @include transform(translate3d(0, -9px, 0));
+}