fix(ui-library): added error message class for simplified styling

deven-org · May 27, 2024 · ef5209b · ef5209b
1 parent 53b8715
commit ef5209b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/packages/ui-library/src/components/textarea/index.css.ts b/packages/ui-library/src/components/textarea/index.css.ts
@@ -40,6 +40,10 @@ export const staticStyles = typeSafeNestedCss/*css*/ `
     &.hint{
       justify-content: space-between;
     }
+    &.error-message
+    {
+      justify-content: space-between;
+    }
   }
 
   .textarea-input-control {

diff --git a/packages/ui-library/src/components/textarea/index.test.ts b/packages/ui-library/src/components/textarea/index.test.ts
@@ -292,12 +292,13 @@ describe('blr-textarea', () => {
     expect(hasCounter).to.be.equal(null);
   });
 
-  it('should align counter to the right when hasError, hasHint is disabled and hasCounter is enabled', async () => {
+  it('should align counter to the right when hasError, hasHint, errorMessage is disabled and hasCounter is enabled', async () => {
     const elementWithoutError = await fixture(
       BlrTextareaRenderFunction({
         ...sampleParams,
         hasError: false,
         hasHint: false,
+        errorMessage: '',
         hasCounter: true,
       })
     );
@@ -308,16 +309,18 @@ describe('blr-textarea', () => {
 
     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;
     const styleWithoutError = getComputedStyle(counterContainerWithoutError!);
     expect(styleWithoutError.justifyContent).to.equal('right');
   });
 
-  it('should align counter to the right when hasError, hasCounter is enabled and hasHint is disabled', async () => {
+  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: '',
         hasCounter: true,
       })
     );
@@ -328,11 +331,12 @@ describe('blr-textarea', () => {
 
     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;
     const styleWithError = getComputedStyle(counterContainerWithError!);
     expect(styleWithError.justifyContent).to.equal('right');
   });
 
-  it('should align counter to the right and justify hint message when hasError, hasCounter and hasHint is enabled', async () => {
+  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,

diff --git a/packages/ui-library/src/components/textarea/index.ts b/packages/ui-library/src/components/textarea/index.ts
@@ -172,6 +172,7 @@ export class BlrTextarea extends LitElementCustom {
         [this.theme]: this.theme,
         'hint': this.hasHint || false,
         'error': this.hasError || false,
+        'error-message': this.errorMessage || false,
         [this.sizeVariant]: this.sizeVariant,
       });