fix(ui-library): align counter to right for text area with or without error

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

@@ -34,8 +34,18 @@ export const staticStyles = typeSafeNestedCss/*css*/ `
   .blr-textarea-info-container {
     display: flex;
     justify-content: right;
-
-    &.hint, &.error {
+    &.error{
+      justify-content: right;
+    }
+    &.hint{
+      justify-content: right;
+    }
+    &.error-message
+    {
+      justify-content: space-between;
+    }
+    &.hint-message
+    {
       justify-content: space-between;
     }
   }

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

@@ -291,4 +291,72 @@ describe('blr-textarea', () => {
     // in html disabled will become an empty string when it's true
     expect(hasCounter).to.be.equal(null);
   });
+
+  it('should align counter to the right when hasError, hasHint, hintMessage, errorMessage is disabled and hasCounter is enabled', async () => {
+    const elementWithoutError = await fixture(
+      BlrTextareaRenderFunction({
+        ...sampleParams,
+        hasError: false,
+        hasHint: false,
+        errorMessage: '',
+        hintMessage: '',
+        hasCounter: true,
+      })
+    );
+    const counterContainerWithoutError = querySelectorDeep(
+      '.blr-textarea-info-container',
+      elementWithoutError.getRootNode() as HTMLElement
+    );
+
+    expect(counterContainerWithoutError?.classList.contains('error')).to.be.false;
+    expect(counterContainerWithoutError?.classList.contains('hint')).to.be.false;
+    expect(counterContainerWithoutError?.classList.contains('error-message')).to.be.false;
+    expect(counterContainerWithoutError?.classList.contains('hint-message')).to.be.false;
+    const styleWithoutError = getComputedStyle(counterContainerWithoutError!);
+    expect(styleWithoutError.justifyContent).to.equal('right');
+  });
+
+  it('should align counter to the right when hasError, hasCounter is enabled and hasHint, errormessage is disabled', async () => {
+    const elementWithError = await fixture(
+      BlrTextareaRenderFunction({
+        ...sampleParams,
+        hasError: true,
+        hasHint: false,
+        errorMessage: '',
+        hintMessage: '',
+        hasCounter: true,
+      })
+    );
+    const counterContainerWithError = querySelectorDeep(
+      '.blr-textarea-info-container',
+      elementWithError.getRootNode() as HTMLElement
+    );
+
+    expect(counterContainerWithError?.classList.contains('error')).to.be.true;
+    expect(counterContainerWithError?.classList.contains('hint')).to.be.false;
+    expect(counterContainerWithError?.classList.contains('error-message')).to.be.false;
+    expect(counterContainerWithError?.classList.contains('hint-message')).to.be.false;
+    const styleWithError = getComputedStyle(counterContainerWithError!);
+    expect(styleWithError.justifyContent).to.equal('right');
+  });
+
+  it('should align counter to the right and adds a space between hint message and error message when hasError, hasCounter and hasHint is enabled', async () => {
+    const elementWithErrorAndHint = await fixture(
+      BlrTextareaRenderFunction({
+        ...sampleParams,
+        hasError: true,
+        hasHint: true,
+        hasCounter: true,
+      })
+    );
+    const counterContainerWithErrorAndHint = querySelectorDeep(
+      '.blr-textarea-info-container',
+      elementWithErrorAndHint.getRootNode() as HTMLElement
+    );
+
+    expect(counterContainerWithErrorAndHint?.classList.contains('error')).to.be.true;
+    expect(counterContainerWithErrorAndHint?.classList.contains('hint')).to.be.true;
+    const styleWithErrorAndHint = getComputedStyle(counterContainerWithErrorAndHint!);
+    expect(styleWithErrorAndHint.justifyContent).to.equal('space-between');
+  });
 });

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

@@ -172,6 +172,8 @@ export class BlrTextarea extends LitElementCustom {
         [this.theme]: this.theme,
         'hint': this.hasHint || false,
         'error': this.hasError || false,
+        'error-message': this.errorMessage || false,
+        'hint-message': this.hintMessage || false,
         [this.sizeVariant]: this.sizeVariant,
       });