Changing the values of the min-height

core/src/components/textarea/textarea.common.scss

@@ -533,6 +533,17 @@
   opacity: 1;
 }
 
+/**
+ * When the rows attribute is set, the textarea should not force a min-height,
+ * but rather respect the natural height of the textarea. Specially when
+ * rows is set to 1.
+ */
+:host(.textarea-fill-outline.sc-ion-textarea-md-h[rows]),
+:host(.textarea-label-placement-stacked[rows]),
+:host(.textarea-label-placement-floating[rows]) {
+  min-height: auto;
+}
+
 // Start / End Slots
 // ----------------------------------------------------------------
 

core/src/components/textarea/textarea.ionic.scss

@@ -38,8 +38,6 @@
   --padding-end: #{globals.$ion-space-300};
   --padding-bottom: #{globals.$ion-space-200};
   --padding-start: #{globals.$ion-space-300};
-
-  min-height: globals.$ion-scale-2800;
 }
 
 :host(.textarea-size-medium) .textarea-wrapper-inner {
@@ -47,8 +45,6 @@
   --padding-end: #{globals.$ion-space-400};
   --padding-bottom: #{globals.$ion-space-300};
   --padding-start: #{globals.$ion-space-400};
-
-  min-height: globals.$ion-scale-3400;
 }
 
 :host(.textarea-size-large) .textarea-wrapper-inner {
@@ -56,8 +52,6 @@
   --padding-end: #{globals.$ion-space-500};
   --padding-bottom: #{globals.$ion-space-400};
   --padding-start: #{globals.$ion-space-500};
-
-  min-height: globals.$ion-scale-3600;
 }
 
 // Ionic Textarea Shapes
@@ -90,17 +84,26 @@
 // ----------------------------------------------------------------
 
 // The height should be auto only when auto-grow is enabled.
-:host([auto-grow]) .textarea-wrapper-inner {
+:host([auto-grow=true]) .textarea-wrapper-inner {
   height: auto;
 }
 
 // The min and max height should be inherited if auto-grow is enabled.
 // This allows the textarea to grow and shrink as needed.
-:host([auto-grow]) .native-wrapper {
+:host([auto-grow=true]) .native-wrapper {
   min-height: inherit;
   max-height: inherit;
 }
 
+:host([rows]) {
+  --rows-number: attr(rows number);
+}
+
+:host([rows]) .textarea-wrapper-inner {
+  height: auto;
+  min-height: calc(var(--rows-number) * 1em + 0.5em);
+}
+
 // Textarea Label
 // ----------------------------------------------------------------