From 16530b3da44837c3314190675c43f92fbb454152 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 4 Oct 2023 10:52:04 +0200
Subject: [PATCH 1/4] font size

---
 packages/uui-textarea/lib/uui-textarea.element.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/uui-textarea/lib/uui-textarea.element.ts b/packages/uui-textarea/lib/uui-textarea.element.ts
index edec89d35..5c042fac3 100644
--- a/packages/uui-textarea/lib/uui-textarea.element.ts
+++ b/packages/uui-textarea/lib/uui-textarea.element.ts
@@ -13,6 +13,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
  * @cssprop --uui-textarea-min-height - Sets the minimum height of the textarea
  * @cssprop --uui-textarea-max-height - Sets the maximum height of the textarea
  * @cssprop {color} --uui-textarea-background-color - Sets the background color of the textarea
+ * @cssprop --uui-textarea-font-size - Overwrites the default font size
  */
 @defineElement('uui-textarea')
 export class UUITextareaElement extends FormControlMixin(LitElement) {
@@ -26,6 +27,7 @@ export class UUITextareaElement extends FormControlMixin(LitElement) {
     css`
       :host {
         position: relative;
+        --textarea-font-size: var(--uui-size-5);
       }
       :host([error]) textarea {
         border: 1px solid var(--uui-color-danger) !important;
@@ -71,7 +73,7 @@ export class UUITextareaElement extends FormControlMixin(LitElement) {
         box-sizing: border-box;
         min-width: 100%;
         max-width: 100%;
-        font-size: var(--uui-size-5);
+        font-size: var(--textarea-font-size);
         padding: var(--uui-size-2);
         border: 1px solid
           var(--uui-textarea-border-color, var(--uui-color-border));
@@ -319,8 +321,8 @@ export class UUITextareaElement extends FormControlMixin(LitElement) {
     return html`
       <textarea
         id="textarea"
-        .rows=${this.rows}
-        .cols=${this.cols}
+        rows=${ifDefined(this.rows)}
+        cols=${ifDefined(this.cols)}
         .value=${this.value as string}
         .name=${this.name}
         wrap=${ifDefined(this.wrap)}

From 647467b0e2cd4444f669d83389744d05d71ef35a Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Wed, 4 Oct 2023 15:27:48 +0200
Subject: [PATCH 2/4] auto-height

---
 .../uui-textarea/lib/uui-textarea.element.ts  | 188 +++++++++---------
 1 file changed, 98 insertions(+), 90 deletions(-)

diff --git a/packages/uui-textarea/lib/uui-textarea.element.ts b/packages/uui-textarea/lib/uui-textarea.element.ts
index 5c042fac3..c12ae9dfe 100644
--- a/packages/uui-textarea/lib/uui-textarea.element.ts
+++ b/packages/uui-textarea/lib/uui-textarea.element.ts
@@ -15,6 +15,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
  * @cssprop {color} --uui-textarea-background-color - Sets the background color of the textarea
  * @cssprop --uui-textarea-font-size - Overwrites the default font size
  */
+
 @defineElement('uui-textarea')
 export class UUITextareaElement extends FormControlMixin(LitElement) {
   /**
@@ -23,94 +24,6 @@ export class UUITextareaElement extends FormControlMixin(LitElement) {
    */
   static readonly formAssociated = true;
 
-  static styles = [
-    css`
-      :host {
-        position: relative;
-        --textarea-font-size: var(--uui-size-5);
-      }
-      :host([error]) textarea {
-        border: 1px solid var(--uui-color-danger) !important;
-      }
-      :host([error]) textarea[disabled] {
-        border: 1px solid var(--uui-color-danger) !important;
-      }
-      :host([auto-height]) textarea {
-        resize: none;
-      }
-      .label {
-        display: inline-block;
-        margin-bottom: var(--uui-size-1);
-        font-weight: bold;
-      }
-
-      textarea[readonly] {
-        border-color: var(
-          --uui-textarea-border-color-readonly,
-          var(--uui-color-disabled-standalone)
-        );
-        background-color: var(
-          --uui-textarea-background-color-readonly,
-          var(--uui-color-disabled)
-        );
-      }
-      textarea[disabled] {
-        cursor: not-allowed;
-        background-color: var(
-          --uui-textarea-background-color-disabled,
-          var(--uui-color-disabled)
-        );
-        border-color: var(
-          --uui-textarea-border-color-disabled,
-          var(--uui-color-disabled)
-        );
-
-        color: var(--uui-color-disabled-contrast);
-      }
-
-      textarea {
-        font-family: inherit;
-        box-sizing: border-box;
-        min-width: 100%;
-        max-width: 100%;
-        font-size: var(--textarea-font-size);
-        padding: var(--uui-size-2);
-        border: 1px solid
-          var(--uui-textarea-border-color, var(--uui-color-border));
-        border-radius: 0;
-        outline: none;
-        min-height: var(--uui-textarea-min-height);
-        max-height: var(--uui-textarea-max-height);
-        background-color: var(
-          --uui-textarea-background-color,
-          var(--uui-color-surface)
-        );
-      }
-      :host(:hover)
-        textarea:not([readonly]):not([disabled])
-        :host(:focus-within)
-        textarea,
-      :host(:focus) textarea {
-        border-color: var(
-          --uui-textarea-border-color,
-          var(--uui-color-border-emphasis)
-        );
-      }
-
-      textarea::placeholder {
-        transition: opacity 120ms;
-      }
-      :host(:not([readonly])) textarea:focus::placeholder {
-        opacity: 0;
-      }
-
-      textarea:focus {
-        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
-          var(--uui-color-focus);
-      }
-    `,
-  ];
-
   /**
    * Defines the textarea placeholder.
    * @type {string}
@@ -264,6 +177,12 @@ export class UUITextareaElement extends FormControlMixin(LitElement) {
     if (!this.label) {
       console.warn(this.tagName + ' needs a `label`', this);
     }
+
+    if (this.autoHeight) {
+      requestAnimationFrame(() => {
+        this.autoUpdateHeight();
+      });
+    }
   }
 
   /**
@@ -307,8 +226,9 @@ export class UUITextareaElement extends FormControlMixin(LitElement) {
 
     input.style.height = 'auto';
 
-    if (input.scrollHeight > input.clientHeight) {
-      input.style.height = input.scrollHeight + 'px';
+    // Note: Add + 2 because of the border top+bottom 1px each
+    if (input.scrollHeight + 2 > input.clientHeight) {
+      input.style.height = input.scrollHeight + 2 + 'px';
     }
 
     // Reset host styles and scroll to where we were
@@ -335,6 +255,94 @@ export class UUITextareaElement extends FormControlMixin(LitElement) {
       </textarea>
     `;
   }
+
+  static styles = [
+    css`
+      :host {
+        position: relative;
+        --textarea-font-size: var(--uui-size-5);
+      }
+      :host([error]) textarea {
+        border: 1px solid var(--uui-color-danger) !important;
+      }
+      :host([error]) textarea[disabled] {
+        border: 1px solid var(--uui-color-danger) !important;
+      }
+      :host([auto-height]) textarea {
+        resize: none;
+      }
+      .label {
+        display: inline-block;
+        margin-bottom: var(--uui-size-1);
+        font-weight: bold;
+      }
+
+      textarea[readonly] {
+        border-color: var(
+          --uui-textarea-border-color-readonly,
+          var(--uui-color-disabled-standalone)
+        );
+        background-color: var(
+          --uui-textarea-background-color-readonly,
+          var(--uui-color-disabled)
+        );
+      }
+      textarea[disabled] {
+        cursor: not-allowed;
+        background-color: var(
+          --uui-textarea-background-color-disabled,
+          var(--uui-color-disabled)
+        );
+        border-color: var(
+          --uui-textarea-border-color-disabled,
+          var(--uui-color-disabled)
+        );
+
+        color: var(--uui-color-disabled-contrast);
+      }
+
+      textarea {
+        font-family: inherit;
+        box-sizing: border-box;
+        min-width: 100%;
+        max-width: 100%;
+        font-size: var(--textarea-font-size);
+        padding: var(--uui-size-2);
+        border: 1px solid
+          var(--uui-textarea-border-color, var(--uui-color-border));
+        border-radius: 0;
+        outline: none;
+        min-height: var(--uui-textarea-min-height);
+        max-height: var(--uui-textarea-max-height);
+        background-color: var(
+          --uui-textarea-background-color,
+          var(--uui-color-surface)
+        );
+      }
+      :host(:hover)
+        textarea:not([readonly]):not([disabled])
+        :host(:focus-within)
+        textarea,
+      :host(:focus) textarea {
+        border-color: var(
+          --uui-textarea-border-color,
+          var(--uui-color-border-emphasis)
+        );
+      }
+
+      textarea::placeholder {
+        transition: opacity 120ms;
+      }
+      :host(:not([readonly])) textarea:focus::placeholder {
+        opacity: 0;
+      }
+
+      textarea:focus {
+        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
+          var(--uui-color-focus);
+      }
+    `,
+  ];
 }
 
 declare global {

From 31a883f2400841412c6e91acda7494a041bd243e Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Tue, 10 Oct 2023 09:39:05 +0200
Subject: [PATCH 3/4] styles moved back to top. font-size is inherit instead

---
 .../uui-textarea/lib/uui-textarea.element.ts  | 175 +++++++++---------
 1 file changed, 87 insertions(+), 88 deletions(-)

diff --git a/packages/uui-textarea/lib/uui-textarea.element.ts b/packages/uui-textarea/lib/uui-textarea.element.ts
index c12ae9dfe..e61e0912e 100644
--- a/packages/uui-textarea/lib/uui-textarea.element.ts
+++ b/packages/uui-textarea/lib/uui-textarea.element.ts
@@ -24,6 +24,93 @@ export class UUITextareaElement extends FormControlMixin(LitElement) {
    */
   static readonly formAssociated = true;
 
+  static styles = [
+    css`
+      :host {
+        position: relative;
+      }
+      :host([error]) textarea {
+        border: 1px solid var(--uui-color-danger) !important;
+      }
+      :host([error]) textarea[disabled] {
+        border: 1px solid var(--uui-color-danger) !important;
+      }
+      :host([auto-height]) textarea {
+        resize: none;
+      }
+      .label {
+        display: inline-block;
+        margin-bottom: var(--uui-size-1);
+        font-weight: bold;
+      }
+
+      textarea[readonly] {
+        border-color: var(
+          --uui-textarea-border-color-readonly,
+          var(--uui-color-disabled-standalone)
+        );
+        background-color: var(
+          --uui-textarea-background-color-readonly,
+          var(--uui-color-disabled)
+        );
+      }
+      textarea[disabled] {
+        cursor: not-allowed;
+        background-color: var(
+          --uui-textarea-background-color-disabled,
+          var(--uui-color-disabled)
+        );
+        border-color: var(
+          --uui-textarea-border-color-disabled,
+          var(--uui-color-disabled)
+        );
+
+        color: var(--uui-color-disabled-contrast);
+      }
+
+      textarea {
+        font-family: inherit;
+        box-sizing: border-box;
+        min-width: 100%;
+        max-width: 100%;
+        font-size: inherit;
+        padding: var(--uui-size-2);
+        border: 1px solid
+          var(--uui-textarea-border-color, var(--uui-color-border)); /** Note: Specified border size is needed and hardcoded in autoUpdateHeight() */
+        border-radius: 0;
+        outline: none;
+        min-height: var(--uui-textarea-min-height);
+        max-height: var(--uui-textarea-max-height);
+        background-color: var(
+          --uui-textarea-background-color,
+          var(--uui-color-surface)
+        );
+      }
+      :host(:hover)
+        textarea:not([readonly]):not([disabled])
+        :host(:focus-within)
+        textarea,
+      :host(:focus) textarea {
+        border-color: var(
+          --uui-textarea-border-color,
+          var(--uui-color-border-emphasis)
+        );
+      }
+
+      textarea::placeholder {
+        transition: opacity 120ms;
+      }
+      :host(:not([readonly])) textarea:focus::placeholder {
+        opacity: 0;
+      }
+
+      textarea:focus {
+        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
+          var(--uui-color-focus);
+      }
+    `,
+  ];
+
   /**
    * Defines the textarea placeholder.
    * @type {string}
@@ -255,94 +342,6 @@ export class UUITextareaElement extends FormControlMixin(LitElement) {
       </textarea>
     `;
   }
-
-  static styles = [
-    css`
-      :host {
-        position: relative;
-        --textarea-font-size: var(--uui-size-5);
-      }
-      :host([error]) textarea {
-        border: 1px solid var(--uui-color-danger) !important;
-      }
-      :host([error]) textarea[disabled] {
-        border: 1px solid var(--uui-color-danger) !important;
-      }
-      :host([auto-height]) textarea {
-        resize: none;
-      }
-      .label {
-        display: inline-block;
-        margin-bottom: var(--uui-size-1);
-        font-weight: bold;
-      }
-
-      textarea[readonly] {
-        border-color: var(
-          --uui-textarea-border-color-readonly,
-          var(--uui-color-disabled-standalone)
-        );
-        background-color: var(
-          --uui-textarea-background-color-readonly,
-          var(--uui-color-disabled)
-        );
-      }
-      textarea[disabled] {
-        cursor: not-allowed;
-        background-color: var(
-          --uui-textarea-background-color-disabled,
-          var(--uui-color-disabled)
-        );
-        border-color: var(
-          --uui-textarea-border-color-disabled,
-          var(--uui-color-disabled)
-        );
-
-        color: var(--uui-color-disabled-contrast);
-      }
-
-      textarea {
-        font-family: inherit;
-        box-sizing: border-box;
-        min-width: 100%;
-        max-width: 100%;
-        font-size: var(--textarea-font-size);
-        padding: var(--uui-size-2);
-        border: 1px solid
-          var(--uui-textarea-border-color, var(--uui-color-border));
-        border-radius: 0;
-        outline: none;
-        min-height: var(--uui-textarea-min-height);
-        max-height: var(--uui-textarea-max-height);
-        background-color: var(
-          --uui-textarea-background-color,
-          var(--uui-color-surface)
-        );
-      }
-      :host(:hover)
-        textarea:not([readonly]):not([disabled])
-        :host(:focus-within)
-        textarea,
-      :host(:focus) textarea {
-        border-color: var(
-          --uui-textarea-border-color,
-          var(--uui-color-border-emphasis)
-        );
-      }
-
-      textarea::placeholder {
-        transition: opacity 120ms;
-      }
-      :host(:not([readonly])) textarea:focus::placeholder {
-        opacity: 0;
-      }
-
-      textarea:focus {
-        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
-          var(--uui-color-focus);
-      }
-    `,
-  ];
 }
 
 declare global {

From 735dc12c28b0362d1822010f8c3ba1cff070b2fa Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Tue, 10 Oct 2023 09:48:41 +0200
Subject: [PATCH 4/4] height

---
 packages/uui-textarea/lib/uui-textarea.element.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/uui-textarea/lib/uui-textarea.element.ts b/packages/uui-textarea/lib/uui-textarea.element.ts
index e61e0912e..932c5f59a 100644
--- a/packages/uui-textarea/lib/uui-textarea.element.ts
+++ b/packages/uui-textarea/lib/uui-textarea.element.ts
@@ -316,6 +316,8 @@ export class UUITextareaElement extends FormControlMixin(LitElement) {
     // Note: Add + 2 because of the border top+bottom 1px each
     if (input.scrollHeight + 2 > input.clientHeight) {
       input.style.height = input.scrollHeight + 2 + 'px';
+    } else if (input.scrollHeight + 2 < input.clientHeight) {
+      input.style.removeProperty('height');
     }
 
     // Reset host styles and scroll to where we were