Added: input event, label styling, textarea styling, minLength

Author: JesmoDev

packages/uui-textarea/lib/UUITextareaEvent.ts

@@ -3,4 +3,5 @@ import { UUITextareaElement } from './uui-textarea.element';
 
 export class UUITextareaEvent extends UUIEvent<{}, UUITextareaElement> {
   public static readonly CHANGE: string = 'change';
+  public static readonly INPUT: string = 'input';
 }

packages/uui-textarea/lib/uui-textarea.element.ts

@@ -17,12 +17,8 @@ export class UUITextareaElement extends LabelMixin(
 ) {
   static styles = [
     css`
-      :host {
-        display: flex;
-        flex-direction: column;
-      }
       :host([disabled]) .label,
-      :host([disabled]) #char-count {
+      :host([disabled]) #max-length-counter {
         color: var(--uui-interface-contrast-disabled);
       }
       :host([error]) textarea {
@@ -34,6 +30,11 @@ export class UUITextareaElement extends LabelMixin(
       :host([auto-height]) textarea {
         resize: none;
       }
+      .label {
+        display: inline-block;
+        margin-bottom: var(--uui-size-1);
+        font-weight: bold;
+      }
       textarea[disabled] {
         cursor: not-allowed;
         background-color: var(
@@ -48,19 +49,30 @@ export class UUITextareaElement extends LabelMixin(
 
         color: var(--uui-interface-contrast-disabled);
       }
-
-      #textarea {
+      textarea {
+        font-family: inherit;
+        box-sizing: border-box;
         min-width: 100%;
         max-width: 100%;
+        font-size: var(--uui-size-5);
+        padding: var(--uui-size-2);
         border: 1px solid
           var(--uui-textarea-border-color, var(--uui-interface-border));
         border-radius: 0;
+        outline: none;
       }
-      #char-count {
+      #lengths-container {
+        display: flex;
+      }
+      #min-length-counter {
+        color: var(--uui-look-danger-surface);
+        margin-right: 1em;
+      }
+      #max-length-counter {
         display: inline-block;
         width: min-content;
       }
-      #char-count.maxed {
+      #max-length-counter.maxed {
         animation-name: maxed;
         animation-duration: 0.1s;
         animation-direction: alternate;
@@ -163,6 +175,15 @@ export class UUITextareaElement extends LabelMixin(
   @query('#textarea')
   protected _textarea!: HTMLInputElement;
 
+  /**
+   * Defines the min length of the textarea.
+   * @type {number}
+   * @attr
+   * @default undefined
+   */
+  @property({ type: Number })
+  minLength = 0;
+
   /**
    * Defines the max length of the textarea.
    * @type {number}
@@ -201,6 +222,9 @@ export class UUITextareaElement extends LabelMixin(
 
   private onInput(e: Event) {
     this.value = (e.target as HTMLInputElement).value;
+    this.dispatchEvent(
+      new UUITextareaEvent(UUITextareaEvent.INPUT, { bubbles: true })
+    );
 
     if (this.autoHeight) {
       this.autoUpdateHeight();
@@ -238,17 +262,26 @@ export class UUITextareaElement extends LabelMixin(
 
   renderMaxLength() {
     return html`<span
-      id="char-count"
+      id="max-length-counter"
       class=${this.value.length >= this.maxLength! ? 'maxed' : ''}
       >${this.value ? this.value.length : 0}/${this.maxLength}</span
     >`;
   }
+  renderMinLength() {
+    const shouldRender = this.minLength - this.value.length > 0;
+    return shouldRender
+      ? html`<span id="min-length-counter">
+          ${this.minLength - this.value.length}
+        </span>`
+      : '';
+  }
 
   render() {
     return html`
       ${this.hideLabel === false ? this.renderLabel() : ''}
       <textarea
         maxlength=${ifDefined(this.maxLength > 0 ? this.maxLength : undefined)}
+        minlength=${this.minLength}
         style="min-height: ${this.minHeight}; max-height: ${this.maxHeight}"
         id="textarea"
         .value=${this.value}
@@ -259,7 +292,10 @@ export class UUITextareaElement extends LabelMixin(
         @input=${this.onInput}
         @change=${this.onChange}>
       </textarea>
-      ${this.maxLength > 0 ? this.renderMaxLength() : ''}
+      <div id="lengths-container">
+        ${this.minLength > 0 ? this.renderMinLength() : ''}
+        ${this.maxLength > 0 ? this.renderMaxLength() : ''}
+      </div>
     `;
   }
 }

packages/uui-textarea/lib/uui-textarea.story.ts

@@ -15,6 +15,7 @@ export const AAAOverview: Story = props =>
   html`<uui-textarea
     .label=${props.label}
     ?auto-height=${props.autoHeight}
+    .minLength=${props.minLength}
     .maxLength=${props.maxLength}
     .minHeight=${props.minHeight}
     .maxHeight=${props.maxHeight}