fix(input, textarea, select): use consistent sizes

core/src/components/input/input.ios.scss

@@ -28,24 +28,6 @@
   height: 18px;
 }
 
-// Input Wrapper
-// ----------------------------------------------------------------
-
-:host(:not(.legacy-input)) {
-  min-height: 44px;
-}
-
-/**
- * Since the label sits on top of the element,
- * the component needs to be taller otherwise the
- * label will appear too close to the input text.
- */
-:host(.input-label-placement-floating),
-:host(.input-label-placement-stacked) {
-  min-height: 56px;
-}
-
-
 // Input - Disabled
 // ----------------------------------------------------------------
 // The input, label, helper text, char counter and placeholder

core/src/components/input/input.md.outline.scss

@@ -8,6 +8,8 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
+
+  min-height: 56px;
 }
 
 :host(.input-fill-outline.input-shape-round) {

core/src/components/input/input.md.scss

@@ -60,13 +60,6 @@
   letter-spacing: .0333333333em;
 }
 
-// Input Wrapper
-// ----------------------------------------------------------------
-
-:host(:not(.legacy-input)) {
-  min-height: 56px;
-}
-
 // Input Label
 // ----------------------------------------------------------------
 

core/src/components/input/input.md.solid.scss

@@ -9,6 +9,8 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
+
+  min-height: 56px;
 }
 
 /**

core/src/components/input/input.scss

@@ -101,6 +101,23 @@
   --highlight-color-focused: #{current-color(base)};
 }
 
+// Input Wrapper
+// ----------------------------------------------------------------
+
+:host(:not(.legacy-input)) {
+  min-height: 44px;
+}
+
+/**
+ * Since the label sits on top of the element,
+ * the component needs to be taller otherwise the
+ * label will appear too close to the input text.
+ */
+:host(.input-label-placement-floating),
+:host(.input-label-placement-stacked) {
+  min-height: 56px;
+}
+
 // Native Text Input
 // --------------------------------------------------
 

core/src/components/select/select.ios.scss

@@ -12,21 +12,6 @@
   --padding-start: #{$select-ios-padding-start};
 }
 
-// TODO FW-3194 - Move this to host
-:host(:not(.legacy-select)) {
-  min-height: 44px;
-}
-
-/**
- * Since the label sits on top of the element,
- * the component needs to be taller otherwise the
- * label will appear too close to the select text.
- */
-:host(.select-label-placement-floating),
-:host(.select-label-placement-stacked) {
-  min-height: 56px;
-}
-
 .select-icon {
   width: $select-ios-icon-size;
   height: $select-ios-icon-size;

core/src/components/select/select.md.outline.scss

@@ -8,6 +8,8 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
+
+  min-height: 56px;
 }
 
 :host(.select-fill-outline.select-shape-round) {

core/src/components/select/select.md.scss

@@ -19,11 +19,6 @@
   --padding-start: #{$select-md-padding-start};
 }
 
-// TODO FW-3194 - Move this to host
-:host(:not(.legacy-select)) {
-  min-height: 56px;
-}
-
 .select-icon {
   width: $select-md-icon-size;
 

core/src/components/select/select.md.solid.scss

@@ -9,6 +9,8 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
+
+  min-height: 56px;
 }
 
 /**

core/src/components/select/select.scss

@@ -59,6 +59,17 @@
 // TODO FW-3194 - Move this to host
 :host(:not(.legacy-select)) {
   width: 100%;
+  min-height: 44px;
+}
+
+/**
+ * Since the label sits on top of the element,
+ * the component needs to be taller otherwise the
+ * label will appear too close to the select text.
+ */
+:host(.select-label-placement-floating),
+:host(.select-label-placement-stacked) {
+  min-height: 56px;
 }
 
 :host(.ion-color) {

core/src/components/textarea/textarea.ios.scss

@@ -40,26 +40,3 @@
 :host(.textarea-disabled) {
   opacity: #{$textarea-ios-disabled-opacity};
 }
-
-// Textarea Wrapper
-// ----------------------------------------------------------------
-
-// TODO: FW-2876 - Make this style a :host style, remove :not selector
-:host(:not(.legacy-textarea)) {
-  min-height: 44px;
-}
-
-/**
- * Since the label sits on top of the element,
- * the component needs to be taller otherwise the
- * label will appear too close to the textarea text.
- * Also, floating and stacked labels should not
- * push the label down since it it
- * sits on top of the textarea.
- */
-:host(.textarea-label-placement-floating),
-:host(.textarea-label-placement-stacked) {
-  --padding-top: 0px;
-
-  min-height: 56px;
-}

core/src/components/textarea/textarea.md.outline.scss

@@ -8,6 +8,8 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
+
+  min-height: 56px;
 }
 
 :host(.textarea-fill-outline.textarea-shape-round) {

core/src/components/textarea/textarea.md.scss

@@ -42,24 +42,6 @@
   letter-spacing: 0.0333333333em;
 }
 
-// Textarea Wrapper
-// ----------------------------------------------------------------
-
-// TODO: FW-2876 - Make this a style on :host, remove :not selector
-:host(:not(.legacy-textarea)) {
-  min-height: 56px;
-}
-
-/**
- * Floating and stacked labels should not
- * push the label down since it it
- * sits on top of the textarea.
- */
-:host(.textarea-label-placement-floating),
-:host(.textarea-label-placement-stacked) {
-  --padding-top: 0px;
-}
-
 // Textarea Label
 // ----------------------------------------------------------------
 

core/src/components/textarea/textarea.md.solid.scss

@@ -9,6 +9,8 @@
   --border-radius: 4px;
   --padding-start: 16px;
   --padding-end: 16px;
+
+  min-height: 56px;
 }
 
 /**

core/src/components/textarea/textarea.scss

@@ -67,6 +67,29 @@
   box-sizing: border-box;
 }
 
+// Textarea Wrapper
+// ----------------------------------------------------------------
+
+// TODO: FW-2876 - Make this style a :host style, remove :not selector
+:host(:not(.legacy-textarea)) {
+  min-height: 44px;
+}
+
+/**
+ * Since the label sits on top of the element,
+ * the component needs to be taller otherwise the
+ * label will appear too close to the textarea text.
+ * Also, floating and stacked labels should not
+ * push the label down since it it
+ * sits on top of the textarea.
+ */
+:host(.textarea-label-placement-floating),
+:host(.textarea-label-placement-stacked) {
+  --padding-top: 0px;
+
+  min-height: 56px;
+}
+
 /**
  * When the cols property is set we should
  * respect that width instead of defaulting