fix(ui-library): textarea label space alignment and counter alignment

packages/ui-library/src/components/forms/text-input/index.stories.ts

@@ -344,6 +344,7 @@ const defaultParams: BlrTextInputType = {
   hasError: false,
   errorMessage: '',
   errorIcon: 'blrInfo',
+
   type: 'text',
   inputIcon: 'blr360',
   showInputIcon: true,

packages/ui-library/src/components/forms/textarea/index.css.ts

@@ -40,7 +40,11 @@ export const styleCustom = typeSafeNestedCss`
 
   .blr-textarea-info-container {
     display: flex;
-    justify-content: space-between;
+    justify-content: right;
+
+    &.hint, &.error{
+      justify-content: space-between;
+    }
 
     &.sm {
       > blr-counter {
@@ -63,16 +67,16 @@ export const styleCustom = typeSafeNestedCss`
 `;
 
 export const { tokenizedLight: textAreaLight, tokenizedDark: textAreaDark } = renderThemedCssStrings((componentTokens, semanticTokens) => {
-  const { SM, MD, LG } = semanticTokens.Forms;
   const { TextArea } = componentTokens.Forms;
-
+  const { SurfaceFill } = semanticTokens.Forms;
   return typeSafeNestedCss`
     .textarea-input-control {
       resize: none;
       display: block;
       max-width: 100%;
       word-break: break-all;
       width: 100%;
+      background-color: ${SurfaceFill.Default.Rest};
 
       &.both {
         resize: both;
@@ -101,25 +105,6 @@ export const { tokenizedLight: textAreaLight, tokenizedDark: textAreaDark } = re
       &.lg {
         min-height: ${TextArea.InputField.MinHeight.LG};
       }
-
-      .flex-container {
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-        flex-wrap: wrap;
-
-        &.sm {
-          margin: ${SM.CaptionSlot.Margin};
-        }
-
-        &.md {
-          margin: ${MD.CaptionSlot.Margin};
-        }
-
-        &.lg {
-          margin: ${LG.CaptionSlot.Margin};
-        }
-      }
     }
   `;
 });

packages/ui-library/src/components/forms/textarea/index.stories.ts

@@ -50,7 +50,7 @@ const defaultParams: BlrTextareaType = {
   readonly: false,
   hasError: false,
   errorMessage: '',
-  errorIcon: 'blr360',
+  errorIcon: '',
 };
 
 //Main Showcase Storybook Textarea, main argType Table
@@ -453,7 +453,6 @@ const argTypesToDisable = [
 const generateDisabledArgTypes = (argTypes: string[]) => {
   const disabledArgTypes = {};
   argTypes.forEach((argType: string) => {
-    // @ts-expect-error todo
     disabledArgTypes[argType] = {
       table: {
         disable: true,

packages/ui-library/src/components/forms/textarea/index.test.ts

@@ -1,7 +1,7 @@
 import '@boiler/ui-library/dist/';
 
 import { BlrTextareaRenderFunction } from './renderFunction';
-import type { BlrTextareaType } from '@boiler/ui-library/dist/';
+import { BlrTextareaType } from './index';
 
 import { fixture, expect } from '@open-wc/testing';
 import { querySelectorAllDeep, querySelectorDeep } from 'query-selector-shadow-dom';

packages/ui-library/src/components/forms/textarea/index.ts

@@ -37,7 +37,7 @@ export class BlrTextarea extends LitElement {
   @property() pattern?: string;
   @property() hasError?: boolean;
   @property() errorMessage?: string;
-  @property() errorIcon?: SizelessIconType;
+  @property() errorIcon?: SizelessIconType = undefined;
   @property() hint?: string;
   @property() hasHint = true;
   @property() hintMessage?: string;
@@ -148,8 +148,9 @@ export class BlrTextarea extends LitElement {
       const dynamicStyles = this.theme === 'Light' ? [formLight, textAreaLight] : [formDark, textAreaDark];
 
       const classes = classMap({
+        'blr-textarea': true,
+        'error': this.hasError || false,
         [`${this.size}`]: this.size,
-        error: this.hasError || false,
       });
 
       const textareaClasses = classMap({
@@ -161,6 +162,8 @@ export class BlrTextarea extends LitElement {
 
       const textareaInfoContainer = classMap({
         'blr-textarea-info-container': true,
+        'hint': this.hasHint || false,
+        'error': this.hasError || false,
         [`${this.size}`]: this.size,
       });
 
@@ -191,25 +194,21 @@ export class BlrTextarea extends LitElement {
         <style>
           ${dynamicStyles}
         </style>
-        <div class="${classes} blr-textarea">
-        ${
-          this.hasLabel
-            ? html`
-                <div class="label-wrapper">
-                  ${BlrFormLabelRenderFunction({
-                    labelText: this.label,
-                    labelSize: this.size,
-                    labelAppendix: this.labelAppendix,
-                    forValue: this.textareaId,
-                    theme: this.theme,
-                    variant: this.hasError ? 'error' : 'label',
-                  })}
-                </div>
-              `
-            : nothing
-        }
-        </div>
+        <div class="${classes}">
+          ${this.hasLabel
+            ? html`<div class="label-wrapper">
+                ${BlrFormLabelRenderFunction({
+                  labelText: this.label,
+                  labelSize: this.size,
+                  labelAppendix: this.labelAppendix,
+                  forValue: this.textareaId,
+                  theme: this.theme,
+                  variant: this.hasError ? 'error' : 'label',
+                })}
+              </div>`
+            : nothing}
           <textarea
+            .value=${this.value}
             class="blr-form-element textarea-input-control ${textareaClasses}"
             id="${this.textareaId || nothing}"
             name="${this.name || nothing}"
@@ -227,27 +226,20 @@ export class BlrTextarea extends LitElement {
             @blur=${this.handleBlur}
             @select=${this.handleSelect}
             @keyup=${this.updateCounter}
-          >
-${this.value}
-          </textarea
-          >
+          ></textarea>
           <div class="${textareaInfoContainer}">
-            ${
-              this.hasHint || this.hasError
-                ? BlrFormCaptionGroupRenderFunction({ size: this.size }, captionContent)
-                : nothing
-            }
-            ${
-              this.showCounter
-                ? BlrCounterRenderFunction({
-                    variant: counterVariant,
-                    current: this.count,
-                    max: this.maxLength || 0,
-                    size: this.size,
-                    theme: this.theme,
-                  })
-                : nothing
-            }
+            ${this.hasHint || this.hasError
+              ? BlrFormCaptionGroupRenderFunction({ size: this.size }, captionContent)
+              : nothing}
+            ${this.showCounter
+              ? BlrCounterRenderFunction({
+                  variant: counterVariant,
+                  current: this.count,
+                  max: this.maxLength || 0,
+                  size: this.size,
+                  theme: this.theme,
+                })
+              : nothing}
           </div>
         </div>
       `;