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
ionic-team · Aug 13, 2018 · 42ca99d · 42ca99d
1 parent 39104cb
commit 42ca99d
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 25 deletions.
diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
@@ -157,46 +157,48 @@ 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 {
 //   pointer-events: auto;
 // }
 
 
-// FROM SELECT
-:host(.item-multiple-inputs) ::slotted(ion-select) {
-  position: relative;
-}
+// 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;
+}
+
+
+// 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>