From 42ca99d11140a6e0c0b3bb4ebf3b1d0397d47e1d Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Mon, 13 Aug 2018 12:30:40 -0400
Subject: [PATCH] fix(select): apply proper styles for stacked/floating selects

adds padding attributes to select to style the correct padding with a
stacked/floating label

fixes #15140 references #14850
---
 core/src/components/item/item.scss            | 44 ++++++++++---------
 core/src/components/select/select.ios.scss    |  5 ++-
 core/src/components/select/select.md.scss     |  5 ++-
 core/src/components/select/select.scss        |  2 +
 core/src/components/select/select.tsx         |  2 +-
 .../components/select/test/basic/index.html   | 11 ++++-
 6 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
index 43ddc68dbb..5e707931a3 100644
--- a/core/src/components/item/item.scss
+++ b/core/src/components/item/item.scss
@@ -157,29 +157,15 @@ button, a {
 }
 
 
-// FROM LABEL
+// Item Input
+// -----------------------------------------
+
 :host(.item-label-stacked) .input-wrapper,
 :host(.item-label-floating) .input-wrapper {
   flex: 1;
   flex-direction: column;
 }
 
-:host(.item-label-stacked)::slotted(ion-select),
-:host(.item-label-floating)::slotted(ion-select) {
-  align-self: stretch;
-
-  max-width: 100%;
-}
-
-
-
-
-// TODO: FROM textarea
-
-:host(.item-textarea) {
-  align-items: stretch;
-}
-
 // :host(.item-input-has-focus) a,
 // :host(.item-input-has-focus) button,
 // :host(.item-input-has-focus) textarea {
@@ -187,16 +173,32 @@ button, a {
 // }
 
 
-// FROM SELECT
+// Item Select
+// -----------------------------------------
+
+:host(.item-label-stacked) ::slotted(ion-select),
+:host(.item-label-floating) ::slotted(ion-select) {
+  align-self: stretch;
+
+  max-width: 100%;
+  width: 100%;
+
+  --padding-start: 0;
+}
+
 :host(.item-multiple-inputs) ::slotted(ion-select) {
   position: relative;
 }
 
-:host(.item-label-stacked) ::slotted(ion-select),
-:host(.item-label-floating) ::slotted(ion-select) {
-  max-width: 100%;
+
+// Item Textarea
+// -----------------------------------------
+
+:host(.item-textarea) {
+  align-items: stretch;
 }
 
+
 // Item Reorder
 // --------------------------------------------------
 
diff --git a/core/src/components/select/select.ios.scss b/core/src/components/select/select.ios.scss
index 3065de705f..17a6180eac 100644
--- a/core/src/components/select/select.ios.scss
+++ b/core/src/components/select/select.ios.scss
@@ -5,7 +5,10 @@
 // --------------------------------------------------
 
 :host {
-  @include padding($select-ios-padding-top, $select-ios-padding-end, $select-ios-padding-bottom, $select-ios-padding-start);
+  --padding-top: #{$select-ios-padding-top};
+  --padding-end: #{$select-ios-padding-end};
+  --padding-bottom: #{$select-ios-padding-bottom};
+  --padding-start: #{$select-ios-padding-start};
 
   color: $select-ios-text-color;
 
diff --git a/core/src/components/select/select.md.scss b/core/src/components/select/select.md.scss
index ef876672e9..19a0b5dd2e 100644
--- a/core/src/components/select/select.md.scss
+++ b/core/src/components/select/select.md.scss
@@ -5,7 +5,10 @@
 // --------------------------------------------------
 
 :host {
-  @include padding($select-md-padding-top, $select-md-padding-end, $select-md-padding-bottom, $select-md-padding-start);
+  --padding-top: #{$select-md-padding-top};
+  --padding-end: #{$select-md-padding-end};
+  --padding-bottom: #{$select-md-padding-bottom};
+  --padding-start: #{$select-md-padding-start};
 
   color: $select-md-text-color;
 
diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss
index c29108a4c6..031975deeb 100644
--- a/core/src/components/select/select.scss
+++ b/core/src/components/select/select.scss
@@ -4,6 +4,8 @@
 // --------------------------------------------------
 
 :host {
+  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+
   display: flex;
 
   overflow: hidden;
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index 84ba09e264..9298882962 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -443,7 +443,7 @@ export class Select {
     this.ionStyle.emit({
       'interactive': true,
       'select': true,
-      'input-has-value': this.hasValue(),
+      'has-value': this.hasValue(),
       'interactive-disabled': this.disabled,
       'select-disabled': this.disabled
     });
diff --git a/core/src/components/select/test/basic/index.html b/core/src/components/select/test/basic/index.html
index 9bc7763f94..cfdb1e40fe 100644
--- a/core/src/components/select/test/basic/index.html
+++ b/core/src/components/select/test/basic/index.html
@@ -223,6 +223,15 @@
           </ion-select>
         </ion-item>
 
+        <ion-item>
+          <ion-label position="stacked">Stacked: selected</ion-label>
+          <ion-select>
+            <ion-select-option>Default</ion-select-option>
+            <ion-select-option selected>Other</ion-select-option>
+            <ion-select-option>N/A</ion-select-option>
+          </ion-select>
+        </ion-item>
+
         <ion-item>
           <ion-label position="floating">Floating</ion-label>
           <ion-select>
@@ -233,7 +242,7 @@
         </ion-item>
 
         <ion-item>
-          <ion-label position="floating">Floating</ion-label>
+          <ion-label position="floating">Floating: selected</ion-label>
           <ion-select>
             <ion-select-option selected="true">Default</ion-select-option>
             <ion-select-option>Other</ion-select-option>