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

deven-org · Jan 13, 2025 · 573282a · 573282a
1 parent 5d8faed
commit 573282a
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 18 deletions.
diff --git a/packages/ui-library/src/components/checkbox/index.ts b/packages/ui-library/src/components/checkbox/index.ts
@@ -192,7 +192,7 @@ export class BlrCheckbox extends LitElementCustom {
         this.size.toUpperCase(),
       ]).toLowerCase() as FormSizesType;
 
-      const captionContent = html`
+      const getCaptionContent = () => html`
         ${this.hasHint && (this.hintMessage || this.hintIcon)
           ? html`
               <div class="hint-wrapper">
@@ -303,8 +303,8 @@ export class BlrCheckbox extends LitElementCustom {
                   labelSize: this.size,
                 })}`
               : nothing}
-            ${this.hasHint || this.hasError
-              ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.size }, captionContent)
+            ${(this.hasHint && this.hintMessage) || (this.hasError && this.errorMessage)
+              ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.size }, getCaptionContent())
               : nothing}
           </div>
         </div>

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',
   hintMessageIcon: 'blr360',
   errorMessageIcon: '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
@@ -269,7 +269,7 @@ export class BlrInputFieldNumber extends LitElementCustom {
         [this.stepperVariant || 'split']: this.stepperVariant || 'split',
       });
 
-      const captionContent = html`
+      const getCaptionContent = () => html`
         ${this.hasHint && (this.hintMessage || this.hintMessageIcon)
           ? html`
               <div class="hint-wrapper">
@@ -344,8 +344,8 @@ export class BlrInputFieldNumber extends LitElementCustom {
           </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
@@ -333,7 +333,7 @@ const defaultParams: BlrInputFieldTextType = {
   required: false,
   hasError: false,
   errorMessage: '',
-  errorMessageIcon: 'blrInfo',
+  errorMessageIcon: undefined,
   arialabel: 'InputFieldText',
   name: 'InputFieldText',
   inputFieldTextId: 'Input Id',

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",
   errorMessageIcon: '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
@@ -140,7 +140,7 @@ export class BlrInputFieldText extends LitElementCustom {
         this.sizeVariant,
       ]).toLowerCase() as SizesType;
 
-      const captionContent = html`
+      const getCaptionContent = () => html`
         ${this.hasHint && (this.hintMessage || this.hintMessageIcon)
           ? BlrFormCaptionRenderFunction({
               variant: 'hint',
@@ -238,8 +238,8 @@ export class BlrInputFieldText extends LitElementCustom {
                 )}`
               : nothing}
           </div>
-          ${this.hasHint || this.hasError
-            ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.sizeVariant }, captionContent)
+          ${(this.hasHint && this.hintMessage) || (this.hasError && this.errorMessage)
+            ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.sizeVariant }, getCaptionContent())
             : nothing}
         </div>
       `;

diff --git a/packages/ui-library/src/components/select/index.ts b/packages/ui-library/src/components/select/index.ts
@@ -147,7 +147,7 @@ export class BlrSelect extends LitElementCustom {
         'blr-input-icon': true,
         [this.sizeVariant]: this.sizeVariant,
       });
-      const captionContent = html`
+      const getCaptionContent = () => html`
         ${this.hasHint && (this.hintMessage || this.hintMessageIcon)
           ? BlrFormCaptionRenderFunction({
               variant: 'hint',
@@ -219,8 +219,8 @@ export class BlrSelect extends LitElementCustom {
             </div>
             ${this.renderIcon(iconClasses)}
           </div>
-          ${this.hasHint || this.hasError
-            ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.sizeVariant }, captionContent)
+          ${(this.hasHint && this.hintMessage) || (this.hasError && this.errorMessage)
+            ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.sizeVariant }, 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
@@ -173,7 +173,7 @@ export class BlrTextarea extends LitElementCustom {
 
       const counterVariant = this.determinateCounterVariant();
 
-      const captionContent = html`
+      const getCaptionContent = () => html`
         ${this.hasHint && (this.hintMessage || this.hintMessageIcon)
           ? BlrFormCaptionRenderFunction({
               variant: 'hint',
@@ -232,8 +232,8 @@ export class BlrTextarea extends LitElementCustom {
             @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({