fix(882): textarea label space alignment and counter alignment

deven-org · Feb 12, 2024 · 72beede · 72beede
1 parent 62e696e
commit 72beede
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 58 deletions.
diff --git a/packages/ui-library/src/components/forms/textarea/index.css.ts b/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 {
@@ -62,8 +66,7 @@ export const styleCustom = typeSafeNestedCss`
   }
 `;
 
-export const { tokenizedLight: textAreaLight, tokenizedDark: textAreaDark } = renderThemedCssStrings((componentTokens, semanticTokens) => {
-  const { SM, MD, LG } = semanticTokens.Forms;
+export const { tokenizedLight: textAreaLight, tokenizedDark: textAreaDark } = renderThemedCssStrings((componentTokens) => {
   const { TextArea } = componentTokens.Forms;
 
   return typeSafeNestedCss`
@@ -101,25 +104,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};
-        }
-      }
     }
   `;
 });
diff --git a/packages/ui-library/src/components/forms/textarea/index.ts b/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,24 +194,17 @@ 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
+            ? BlrFormLabelRenderFunction({
+                labelText: this.label,
+                labelSize: this.size,
+                labelAppendix: this.labelAppendix,
+                forValue: this.textareaId,
+                theme: this.theme,
+                variant: this.hasError ? 'error' : 'label',
+              })
+            : nothing}
           <textarea
             class="blr-form-element textarea-input-control ${textareaClasses}"
             id="${this.textareaId || nothing}"
@@ -232,22 +228,18 @@ ${this.value}
           </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>
       `;