From 454a9db7503234718f0ca990e29eabd95c3930a9 Mon Sep 17 00:00:00 2001 From: RubirajAccenture Date: Thu, 22 Feb 2024 11:40:29 +0100 Subject: [PATCH] fix(ui-library): props alignment form label --- .../src/components/form-label/index.stories.ts | 16 ++++++---------- .../src/components/form-label/index.test.ts | 2 +- .../src/components/form-label/index.ts | 2 +- .../src/components/number-input/index.ts | 2 +- .../ui-library/src/components/select/index.ts | 2 +- .../src/components/text-input/index.ts | 2 +- .../ui-library/src/components/textarea/index.ts | 2 +- 7 files changed, 12 insertions(+), 16 deletions(-) diff --git a/packages/ui-library/src/components/form-label/index.stories.ts b/packages/ui-library/src/components/form-label/index.stories.ts index f26eceab2..bf1b97758 100644 --- a/packages/ui-library/src/components/form-label/index.stories.ts +++ b/packages/ui-library/src/components/form-label/index.stories.ts @@ -1,6 +1,6 @@ /* eslint-disable no-console */ import { Themes } from '../../foundation/_tokens-generated/index.themes'; -import { FormSizes, LabelVariants } from '../../globals/constants'; +import { FormSizes } from '../../globals/constants'; import { BlrFormLabelType } from './index'; import { BlrFormLabelRenderFunction } from './renderFunction'; import { html } from 'lit-html'; @@ -54,11 +54,9 @@ export default { category: 'Content / Settings', }, }, - hasError: { description: 'Choose if component has an error.', - options: LabelVariants, - control: { type: 'select' }, + defaultValue: false, table: { category: 'Validation', }, @@ -86,10 +84,8 @@ export default { - [**Appearance**](#appearance) - [**Size Variant**](#size-variant) - - [**Content / Settings**](#content--settings) - [**Label Appendix**](#label-appendix) - - [**Validation**](#validation) - [**Has Error**](#has-error) @@ -139,7 +135,7 @@ BlrFormLabel.args = defaultParams; /** * ## Appearance - * ### Size Variant + * ### Size Variant * The Form Label component comes in 3 sizes: SM, MD and LG. */ export const SizeVariant = () => { @@ -180,19 +176,19 @@ export const LabelAppendix = () => { return html` ${WrappedBlrFormLabelRenderFunction({ ...defaultParams, - sizeVariant: 'lg', + sizeVariant: 'md', label: 'Form label', labelAppendix: '(required)', })} ${WrappedBlrFormLabelRenderFunction({ ...defaultParams, - sizeVariant: 'lg', + sizeVariant: 'md', label: 'Form label', labelAppendix: '(optional)', })} ${WrappedBlrFormLabelRenderFunction({ ...defaultParams, - sizeVariant: 'lg', + sizeVariant: 'md', label: 'Form label', labelAppendix: ' ', })} diff --git a/packages/ui-library/src/components/form-label/index.test.ts b/packages/ui-library/src/components/form-label/index.test.ts index b020d001e..1f4490b6b 100644 --- a/packages/ui-library/src/components/form-label/index.test.ts +++ b/packages/ui-library/src/components/form-label/index.test.ts @@ -107,7 +107,7 @@ describe('blr-form-label', () => { ); const blrLabel = querySelectorDeep('label.blr-form-label', element.getRootNode() as HTMLElement); const errorLabel = blrLabel?.getAttribute('class'); - expect(errorLabel).to.contain('true'); + expect(errorLabel).to.contain('error'); }); it('has a size md by default', async () => { diff --git a/packages/ui-library/src/components/form-label/index.ts b/packages/ui-library/src/components/form-label/index.ts index 6c10ad8e4..2da49f01c 100644 --- a/packages/ui-library/src/components/form-label/index.ts +++ b/packages/ui-library/src/components/form-label/index.ts @@ -48,7 +48,7 @@ export class BlrFormLabel extends LitElement { const labelClasses = classMap({ 'blr-form-label': true, [`${this.sizeVariant}`]: this.sizeVariant, - [`${this.hasError}`]: this.hasError, + 'error': this.hasError, }); const spanClasses = classMap({ diff --git a/packages/ui-library/src/components/number-input/index.ts b/packages/ui-library/src/components/number-input/index.ts index fe896628b..269ac6401 100644 --- a/packages/ui-library/src/components/number-input/index.ts +++ b/packages/ui-library/src/components/number-input/index.ts @@ -249,7 +249,7 @@ export class BlrNumberInput extends LitElement { labelAppendix: this.labelAppendix, forValue: this.numberInputId, theme: this.theme, - hasError: Boolean(this.label), + hasError: Boolean(this.hasError), })} ` diff --git a/packages/ui-library/src/components/select/index.ts b/packages/ui-library/src/components/select/index.ts index 7a598b245..ec0a59dad 100644 --- a/packages/ui-library/src/components/select/index.ts +++ b/packages/ui-library/src/components/select/index.ts @@ -164,7 +164,7 @@ export class BlrSelect extends LitElement { sizeVariant: this.size, forValue: this.selectId, theme: this.theme, - hasError: Boolean(this.label), + hasError: Boolean(this.hasError), })} ` diff --git a/packages/ui-library/src/components/text-input/index.ts b/packages/ui-library/src/components/text-input/index.ts index 516cb5e2a..aeb2f67a7 100644 --- a/packages/ui-library/src/components/text-input/index.ts +++ b/packages/ui-library/src/components/text-input/index.ts @@ -174,7 +174,7 @@ export class BlrTextInput extends LitElement { labelAppendix: this.labelAppendix, forValue: this.textInputId, theme: this.theme, - hasError: Boolean(this.label), + hasError: Boolean(this.hasError), })} ` diff --git a/packages/ui-library/src/components/textarea/index.ts b/packages/ui-library/src/components/textarea/index.ts index 7605d734b..d836a2498 100644 --- a/packages/ui-library/src/components/textarea/index.ts +++ b/packages/ui-library/src/components/textarea/index.ts @@ -205,7 +205,7 @@ export class BlrTextarea extends LitElement { labelAppendix: this.labelAppendix, forValue: this.textareaId, theme: this.theme, - hasError: Boolean(this.label), + hasError: Boolean(this.hasError), })} ` : nothing}