diff --git a/packages/ui-library/src/components/checkbox/index.ts b/packages/ui-library/src/components/checkbox/index.ts index 81c0d4f64..5551e92c7 100644 --- a/packages/ui-library/src/components/checkbox/index.ts +++ b/packages/ui-library/src/components/checkbox/index.ts @@ -198,7 +198,7 @@ export class BlrCheckbox extends LitElement { ${BlrFormCaptionRenderFunction({ variant: 'hint', theme: this.theme, - size: this.size, + sizeVariant: this.size, message: this.hintMessage, icon: this.hintIcon, })} @@ -211,7 +211,7 @@ export class BlrCheckbox extends LitElement { ${BlrFormCaptionRenderFunction({ variant: 'error', theme: this.theme, - size: this.size, + sizeVariant: this.size, message: this.errorMessage, icon: this.errorIcon, })} diff --git a/packages/ui-library/src/components/form-caption/index.stories.ts b/packages/ui-library/src/components/form-caption/index.stories.ts index 097123ba8..27763e60f 100644 --- a/packages/ui-library/src/components/form-caption/index.stories.ts +++ b/packages/ui-library/src/components/form-caption/index.stories.ts @@ -18,7 +18,7 @@ const sharedStyles = html` export default { title: 'Components/Form Caption', argTypes: { - size: { + sizeVariant: { options: FormSizes, control: { type: 'radio' }, description: ' Choose size of the component.', @@ -101,7 +101,7 @@ const args: BlrFormCaptionType = { message: 'Message-text', icon: 'blr360', variant: 'hint', - size: 'sm', + sizeVariant: 'sm', }; BlrFormCaption.args = args; @@ -119,7 +119,7 @@ export const Variant = () => { ${BlrFormCaptionRenderFunction({ variant: 'hint', theme: 'Light', - size: 'sm', + sizeVariant: 'sm', message: 'Hint', icon: 'blr360', })} @@ -128,7 +128,7 @@ export const Variant = () => { ${BlrFormCaptionRenderFunction({ variant: 'error', theme: 'Light', - size: 'sm', + sizeVariant: 'sm', message: 'Error', icon: 'blrErrorFilled', })} @@ -149,7 +149,7 @@ export const SizeVariant = () => { ${BlrFormCaptionRenderFunction({ variant: 'hint', theme: 'Light', - size: 'sm', + sizeVariant: 'sm', message: 'Form Caption SM', icon: 'blr360', })} @@ -158,7 +158,7 @@ export const SizeVariant = () => { ${BlrFormCaptionRenderFunction({ variant: 'hint', theme: 'Light', - size: 'md', + sizeVariant: 'md', message: 'Form Caption MD', icon: 'blr360', })} @@ -168,7 +168,7 @@ export const SizeVariant = () => { ${BlrFormCaptionRenderFunction({ variant: 'hint', theme: 'Light', - size: 'lg', + sizeVariant: 'lg', message: 'Form Caption LG', icon: 'blr360', })} @@ -191,7 +191,7 @@ export const Icon = () => { ${BlrFormCaptionRenderFunction({ variant: 'hint', theme: 'Light', - size: 'sm', + sizeVariant: 'sm', message: 'With icon', icon: 'blr360', })} @@ -200,7 +200,7 @@ export const Icon = () => { ${BlrFormCaptionRenderFunction({ variant: 'hint', theme: 'Light', - size: 'sm', + sizeVariant: 'sm', message: 'Without icon', })} diff --git a/packages/ui-library/src/components/form-caption/index.test.ts b/packages/ui-library/src/components/form-caption/index.test.ts index 3597c9327..f7fac3f05 100644 --- a/packages/ui-library/src/components/form-caption/index.test.ts +++ b/packages/ui-library/src/components/form-caption/index.test.ts @@ -11,7 +11,7 @@ const sampleParams: BlrFormCaptionType = { message: 'hallo', icon: 'blr360', variant: 'hint', - size: 'sm', + sizeVariant: 'sm', }; describe('blr-form-caption', () => { diff --git a/packages/ui-library/src/components/form-caption/index.ts b/packages/ui-library/src/components/form-caption/index.ts index 4398abf94..389cf79b6 100644 --- a/packages/ui-library/src/components/form-caption/index.ts +++ b/packages/ui-library/src/components/form-caption/index.ts @@ -16,23 +16,23 @@ export class BlrFormCaption extends LitElement { @property() message?: string; @property() icon?: SizelessIconType; @property() variant: CaptionVariantType = 'hint'; - @property() size?: FormSizesType = 'md'; + @property() sizeVariant?: FormSizesType = 'md'; @property() childElement?: TemplateResult<1>; @property() theme: ThemeType = 'Light'; protected render() { - if (this.size) { + if (this.sizeVariant) { const dynamicStyles = this.theme === 'Light' ? [captionLight] : [captionDark]; const classes = classMap({ 'blr-form-caption': true, [`${this.variant}`]: this.variant, - [`${this.size}`]: this.size, + [`${this.sizeVariant}`]: this.sizeVariant, }); const iconClasses = classMap({ 'blr-icon': true, - [this.size]: this.size, + [this.sizeVariant]: this.sizeVariant, }); const iconSizeVariant = getComponentConfigToken([ @@ -40,7 +40,7 @@ export class BlrFormCaption extends LitElement { 'CaptionComponent', 'Icon', 'SizeVariant', - this.size.toUpperCase(), + this.sizeVariant.toUpperCase(), ]).toLowerCase() as SizesType; return html` 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 e34cdc794..c5569d80b 100644 --- a/packages/ui-library/src/components/input-field-number/index.ts +++ b/packages/ui-library/src/components/input-field-number/index.ts @@ -214,7 +214,7 @@ export class BlrInputFieldNumber extends LitElement { ${BlrFormCaptionRenderFunction({ variant: 'hint', theme: this.theme, - size: this.size, + sizeVariant: this.size, message: this.hintMessage, icon: this.hintIcon, })} @@ -227,7 +227,7 @@ export class BlrInputFieldNumber extends LitElement { ${BlrFormCaptionRenderFunction({ variant: 'error', theme: this.theme, - size: this.size, + sizeVariant: this.size, message: this.errorMessage, icon: this.errorIcon, })} 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 6b40fc57f..4f27b40c4 100644 --- a/packages/ui-library/src/components/input-field-text/index.ts +++ b/packages/ui-library/src/components/input-field-text/index.ts @@ -144,7 +144,7 @@ export class BlrInputFieldText extends LitElement { ? BlrFormCaptionRenderFunction({ variant: 'hint', theme: this.theme, - size: this.size, + sizeVariant: this.size, message: this.hintMessage, icon: this.hintIcon, }) @@ -153,7 +153,7 @@ export class BlrInputFieldText extends LitElement { ? BlrFormCaptionRenderFunction({ variant: 'error', theme: this.theme, - size: this.size, + sizeVariant: this.size, message: this.errorMessage, icon: this.errorIcon, }) diff --git a/packages/ui-library/src/components/radio-group/index.ts b/packages/ui-library/src/components/radio-group/index.ts index a0f060639..841c4b22d 100644 --- a/packages/ui-library/src/components/radio-group/index.ts +++ b/packages/ui-library/src/components/radio-group/index.ts @@ -71,7 +71,7 @@ export class BlrRadioGroup extends LitElement { ? BlrFormCaptionRenderFunction({ variant: 'hint', theme: this.theme, - size: this.size, + sizeVariant: this.size, message: this.groupHintMessage, icon: this.groupHintIcon, }) @@ -80,7 +80,7 @@ export class BlrRadioGroup extends LitElement { ? BlrFormCaptionRenderFunction({ variant: 'error', theme: this.theme, - size: this.size, + sizeVariant: this.size, message: this.groupErrorMessage, icon: this.groupErrorIcon, }) diff --git a/packages/ui-library/src/components/radio/index.ts b/packages/ui-library/src/components/radio/index.ts index 6ba01a276..7f96699ed 100644 --- a/packages/ui-library/src/components/radio/index.ts +++ b/packages/ui-library/src/components/radio/index.ts @@ -54,7 +54,7 @@ export class BlrRadio extends LitElement { ${BlrFormCaptionRenderFunction({ variant: 'hint', theme: this.theme, - size: this.size, + sizeVariant: this.size, message: this.hintMessage, icon: this.hintIcon, })} @@ -67,7 +67,7 @@ export class BlrRadio extends LitElement { ${BlrFormCaptionRenderFunction({ variant: 'error', theme: this.theme, - size: this.size, + sizeVariant: this.size, message: this.errorMessage, icon: this.errorIcon, })} diff --git a/packages/ui-library/src/components/select/index.ts b/packages/ui-library/src/components/select/index.ts index 07b40d9a4..1c9b4cee0 100644 --- a/packages/ui-library/src/components/select/index.ts +++ b/packages/ui-library/src/components/select/index.ts @@ -133,7 +133,7 @@ export class BlrSelect extends LitElement { ? BlrFormCaptionRenderFunction({ variant: 'hint', theme: this.theme, - size: this.sizeVariant, + sizeVariant: this.sizeVariant, message: this.hintMessage, icon: this.hintMessageIcon, }) @@ -142,7 +142,7 @@ export class BlrSelect extends LitElement { ? BlrFormCaptionRenderFunction({ variant: 'error', theme: this.theme, - size: this.sizeVariant, + sizeVariant: this.sizeVariant, message: this.errorMessage, icon: this.errorMessageIcon, }) diff --git a/packages/ui-library/src/components/textarea/index.ts b/packages/ui-library/src/components/textarea/index.ts index 09f9d0319..08b633da2 100644 --- a/packages/ui-library/src/components/textarea/index.ts +++ b/packages/ui-library/src/components/textarea/index.ts @@ -177,7 +177,7 @@ export class BlrTextarea extends LitElement { ? BlrFormCaptionRenderFunction({ variant: 'hint', theme: this.theme, - size: this.sizeVariant, + sizeVariant: this.sizeVariant, message: this.hintMessage, icon: this.hintMessageIcon, }) @@ -186,7 +186,7 @@ export class BlrTextarea extends LitElement { ? BlrFormCaptionRenderFunction({ variant: 'error', theme: this.theme, - size: this.sizeVariant, + sizeVariant: this.sizeVariant, message: this.errorMessage, icon: this.errorMessageIcon, }) diff --git a/packages/ui-library/src/components/toggle-switch/index.ts b/packages/ui-library/src/components/toggle-switch/index.ts index 2cde4d6b1..7052e26fe 100644 --- a/packages/ui-library/src/components/toggle-switch/index.ts +++ b/packages/ui-library/src/components/toggle-switch/index.ts @@ -164,7 +164,7 @@ export class BlrToggleSwitch extends LitElement { message: this.hintMessage, variant: 'hint', icon: this.hintIcon, - size: this.size || 'sm', + sizeVariant: this.size || 'sm', theme: this.theme, }) : nothing}