refactor(item): add a wrapper for inputs in order to work with item right vertically

closes #5731

ionic/components/input/test/floating-labels/main.html

@@ -3,17 +3,15 @@
 
 
 <ion-content>
-  <ion-row>
+  <ion-list>
-    <ion-col>
-      <ion-item>
-        <ion-label floating>Params</ion-label>
-        <ion-input [(ngModel)]="myParam" type="text"></ion-input>
-        {{ myParam }}
-      </ion-item>
-    </ion-col>
-  </ion-row>
 
-  <ion-list inset>
+    <ion-item>
+      <ion-label floating>Params: {{ myParam }}</ion-label>
+      <ion-input [(ngModel)]="myParam" type="text"></ion-input>
+      <button clear item-right>
+        <ion-icon name="settings"></ion-icon>
+      </button>
+    </ion-item>
 
     <ion-item>
       <ion-label floating>Floating Label 1: {{ myValues.value1 }}</ion-label>
@@ -33,6 +31,9 @@
     <ion-item>
       <ion-label floating primary>Floating Label 4: {{ myValues.value2 }}</ion-label>
       <ion-textarea [(ngModel)]='myValues.value2'></ion-textarea>
+      <button outline item-right>
+        View
+      </button>
     </ion-item>
 
     <ion-item>
@@ -43,11 +44,17 @@
     <ion-item>
       <ion-label floating danger>Floating Label 6</ion-label>
       <ion-input type="email"></ion-input>
+      <ion-avatar item-right>
+        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+      </ion-avatar>
     </ion-item>
 
     <ion-item>
       <ion-label floating>Floating Label 7</ion-label>
       <ion-textarea></ion-textarea>
+      <ion-thumbnail item-right>
+        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+      </ion-thumbnail>
     </ion-item>
 
     <ion-item>
@@ -68,3 +75,9 @@
   </ion-list>
 
 </ion-content>
+
+<style>
+  img {
+    height: 100px;
+  }
+</style>

ionic/components/item/item.scss

@@ -38,6 +38,16 @@
   align-self: stretch;
 }
 
+.input-wrapper {
+  display: flex;
+  flex: 1;
+  flex-direction: inherit;
+  align-items: inherit;
+  align-self: stretch;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
 .item[no-lines],
 .item[no-lines] .item-inner {
   border: none;

ionic/components/item/item.ts

@@ -44,11 +44,14 @@ import {Label} from '../label/label';
   template:
     '<ng-content select="[item-left],ion-checkbox"></ng-content>' +
     '<div class="item-inner">' +
+      '<div class="input-wrapper">' +
         '<ng-content select="ion-label"></ng-content>' +
         '<ion-label *ngIf="_viewLabel">' +
           '<ng-content></ng-content>'+
         '</ion-label>' +
-      '<ng-content select="[item-right],ion-radio,ion-toggle,ion-select,ion-input,ion-textarea"></ng-content>' +
+        '<ng-content select="ion-select,ion-input,ion-textarea"></ng-content>' +
+      '</div>' +
+      '<ng-content select="[item-right],ion-radio,ion-toggle"></ng-content>' +
     '</div>' +
     '<ion-button-effect></ion-button-effect>',
   host: {

ionic/components/label/label.ios.scss

@@ -50,6 +50,11 @@ ion-label[floating] {
   transform: translate3d(0, 0, 0) scale(0.8);
 }
 
+.item-label-stacked [item-right],
+.item-label-floating [item-right] {
+  margin-top: $item-ios-padding-media-top + 2;
+}
+
 
 // Generate iOS Label colors
 // --------------------------------------------------

ionic/components/label/label.md.scss

@@ -58,6 +58,11 @@ ion-label[floating] {
   transform: translate3d(0, 0, 0) scale(0.8);
 }
 
+.item-label-stacked [item-right],
+.item-label-floating [item-right] {
+  margin-top: $item-md-padding-media-top + 2;
+}
+
 
 // Generate Material Design Label colors
 // --------------------------------------------------

ionic/components/label/label.scss

@@ -28,33 +28,23 @@ ion-label {
 // --------------------------------------------------
 
 ion-label[fixed] {
-  flex: 0 0 30%;
+  flex: 0 0 100px;
-  width: 30%;
+  width: 100px;
   min-width: 100px;
   max-width: 200px;
 }
 
-.item-label-stacked .item-inner,
-.item-label-floating .item-inner {
-  flex-wrap: wrap;
-}
-
-.item-label-stacked [item-right],
-.item-label-floating [item-right] {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
 ion-label[stacked],
 ion-label[floating] {
   align-self: stretch;
   margin-bottom: 0;
   max-width: 100%;
   flex-basis: 100%;
-}
-
-ion-label[stacked],
-ion-label[floating] {
-  align-self: stretch;
   width: auto;
 }
+
+.item-label-stacked .input-wrapper,
+.item-label-floating .input-wrapper {
+  flex: 1;
+  flex-direction: column;
+}

ionic/components/label/label.wp.scss

@@ -52,6 +52,11 @@ ion-label[floating] {
   transform: translate3d(0, 0, 0) scale(0.8);
 }
 
+.item-label-stacked [item-right],
+.item-label-floating [item-right] {
+  margin-top: $item-wp-padding-media-top + 2;
+}
+
 
 // Generate Windows Label colors
 // --------------------------------------------------