From f9124a309b5b6cf03c18b2c7c2731da83f550d89 Mon Sep 17 00:00:00 2001 From: angsherpa456 Date: Tue, 19 Mar 2024 18:28:43 +0100 Subject: [PATCH] fix(ui-library): remove margin in error state (#945) --- .../src/components/input-field-number/index.test.ts | 2 ++ .../ui-library/src/components/input-field-number/index.ts | 6 +++--- .../src/components/input-field-text/index.stories.ts | 2 +- .../src/components/input-field-text/index.test.ts | 2 +- .../ui-library/src/components/input-field-text/index.ts | 6 +++--- .../ui-library/src/components/textarea/index.stories.ts | 2 +- packages/ui-library/src/components/textarea/index.ts | 6 +++--- 7 files changed, 14 insertions(+), 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 index 191a9013d..f2811e379 100644 --- 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 index 7ca9aafdd..527fc5308 100644 --- 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.hintIcon) ? html`
@@ -342,8 +342,8 @@ export class BlrInputFieldNumber extends LitElementCustom {
- ${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 index 6c322dda9..9eb9c79d5 100644 --- 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 index d59c5346c..10f105fb6 100644 --- 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 index fe29f2f57..3508cda42 100644 --- 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} - ${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/textarea/index.stories.ts b/packages/ui-library/src/components/textarea/index.stories.ts index 5734f8b10..c93d33a5d 100644 --- 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 index 23e400e7e..6ba4040dd 100644 --- 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} >
- ${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({