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] 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) { `; } + + 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 {