fix(ui-library): remove margin in error state (#945)

deven-org · Mar 20, 2024 · 7791519 · 7791519
1 parent daebf49
commit 7791519
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 12 deletions.
diff --git a/packages/ui-library/src/components/input-field-number/index.test.ts b/packages/ui-library/src/components/input-field-number/index.test.ts
@@ -21,8 +21,10 @@ const sampleParams: BlrInputFieldNumberType = {
   inputFieldNumberId: 'egal',
   label: 'Hello',
   hasHint: false,
+  hintMessage: 'This is a sample hint',
   hintIcon: 'blr360',
   errorIcon: 'blrInfo',
+  errorMessage: "OMG it's an error",
   value: 4,
   unit: 'gr',
   decimals: 0,

diff --git a/packages/ui-library/src/components/input-field-number/index.ts b/packages/ui-library/src/components/input-field-number/index.ts
@@ -268,7 +268,7 @@ export class BlrInputFieldNumber extends LitElement {
         [this.stepperVariant || 'split']: this.stepperVariant || 'split',
       });
 
-      const captionContent = html`
+      const getCaptionContent = () => html`
         ${this.hasHint && (this.hintMessage || this.hintIcon)
           ? html`
               <div class="hint-wrapper">
@@ -341,8 +341,8 @@ export class BlrInputFieldNumber extends LitElement {
           </div>
         </div>
 
-        ${this.hasHint || this.hasError
-          ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.sizeVariant }, captionContent)
+        ${(this.hasHint && this.hintMessage) || (this.hasError && this.errorMessage)
+          ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.sizeVariant }, getCaptionContent())
           : nothing}
       `;
     }

diff --git a/packages/ui-library/src/components/input-field-text/index.stories.ts b/packages/ui-library/src/components/input-field-text/index.stories.ts
@@ -344,8 +344,7 @@ const defaultParams: BlrInputFieldTextType = {
   readonly: false,
   hasError: false,
   errorMessage: '',
-  errorIcon: 'blrInfo',
-
+  errorIcon: undefined,
   type: 'text',
   inputIcon: 'blr360',
   showInputIcon: true,

diff --git a/packages/ui-library/src/components/input-field-text/index.test.ts b/packages/ui-library/src/components/input-field-text/index.test.ts
@@ -26,7 +26,7 @@ const sampleParams: BlrInputFieldTextType = {
   readonly: false,
   required: false,
   hasError: false,
-  errorMessage: '',
+  errorMessage: "OMG it's an error",
   errorIcon: 'blrInfo',
   arialabel: 'InputFieldText',
   inputFieldTextId: 'Input Id',

diff --git a/packages/ui-library/src/components/input-field-text/index.ts b/packages/ui-library/src/components/input-field-text/index.ts
@@ -139,6 +139,27 @@ export class BlrInputFieldText extends LitElement {
         this.size,
       ]).toLowerCase() as SizesType;
 
+      const getCaptionContent = () => html`
+        ${this.hasHint && (this.hintMessage || this.hintIcon)
+          ? BlrFormCaptionRenderFunction({
+              variant: 'hint',
+              theme: this.theme,
+              sizeVariant: this.size,
+              message: this.hintMessage,
+              icon: this.hintIcon,
+            })
+          : nothing}
+        ${this.hasError && (this.errorMessage || this.errorIcon)
+          ? BlrFormCaptionRenderFunction({
+              variant: 'error',
+              theme: this.theme,
+              sizeVariant: this.size,
+              message: this.errorMessage,
+              icon: this.errorIcon,
+            })
+          : nothing}
+      `;
+
       const captionContent = html`
         ${this.hasHint && (this.hintMessage || this.hintIcon)
           ? BlrFormCaptionRenderFunction({
@@ -237,8 +258,8 @@ export class BlrInputFieldText extends LitElement {
                 )}`
               : nothing}
           </div>
-          ${this.hasHint || this.hasError
-            ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.size }, captionContent)
+          ${(this.hasHint && this.hintMessage) || (this.hasError && this.errorMessage)
+            ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.size }, getCaptionContent())
             : nothing}
         </div>
       `;

diff --git a/packages/ui-library/src/components/textarea/index.stories.ts b/packages/ui-library/src/components/textarea/index.stories.ts
@@ -47,7 +47,7 @@ const defaultParams: BlrTextareaType = {
   required: false,
   hasError: false,
   errorMessage: '',
-  errorMessageIcon: 'blr360',
+  errorMessageIcon: undefined,
   arialabel: 'Text Area',
   textAreaId: '#textAreaId',
   name: 'Text Area',

diff --git a/packages/ui-library/src/components/textarea/index.ts b/packages/ui-library/src/components/textarea/index.ts
@@ -172,7 +172,7 @@ export class BlrTextarea extends LitElement {
 
       const counterVariant = this.determinateCounterVariant();
 
-      const captionContent = html`
+      const getCaptionContent = () => html`
         ${this.hasHint && (this.hintMessage || this.hintMessageIcon)
           ? BlrFormCaptionRenderFunction({
               variant: 'hint',
@@ -231,8 +231,8 @@ export class BlrTextarea extends LitElement {
             @keyup=${this.updateCounter}
           ></textarea>
           <div class="${textareaInfoContainer}">
-            ${this.hasHint || this.hasError
-              ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.sizeVariant }, captionContent)
+            ${(this.hasHint && this.hintMessage) || (this.hasError && this.errorMessage)
+              ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.sizeVariant }, getCaptionContent())
               : nothing}
             ${this.hasCounter
               ? BlrCounterRenderFunction({