fix(ui-library): harmonised property names

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,
                 })}
@@ -303,7 +303,7 @@ export class BlrCheckbox extends LitElement {
                 })}`
               : nothing}
             ${this.hasHint || this.hasError
-              ? BlrFormCaptionGroupRenderFunction({ size: this.size }, captionContent)
+              ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.size }, captionContent)
               : nothing}
           </div>
         </div>

packages/ui-library/src/components/form-caption-group/index.stories.ts

@@ -8,7 +8,7 @@ import '../../index';
 export default {
   title: 'Components/Form Caption Group',
   argTypes: {
-    size: {
+    sizeVariant: {
       options: FormSizes,
       control: { type: 'radio' },
       description:
@@ -31,7 +31,7 @@ export default {
         component: `<Markdown>
         The Form Caption Group is a combination of two Form Caption components, which allow to show both a hint and an error message or only one of each. 
 
-Technically both instances of the Form Caption are placed inside slots that are stacked above each other. The Form Caption Group only has one property named size to change the spacing in between the slots depending on the size of the component. For more information have a look at the internal [Form Caption](/docs/design-system-web-components-internal-components-form-caption--docs)  component
+Technically both instances of the Form Caption are placed inside slots that are stacked above each other. The Form Caption Group only has one property named size to change the spacing in between the slots depending on the size of the component. For more information have a look at the internal [Form Caption](?path=/docs/components-form-caption--docs)  component
 
 The Form Caption Group is intended to be used when creating new components. Currently, it is used like this in the following components:
 
@@ -52,14 +52,14 @@ It is not intended to use the Form Caption Group directly when creating new appl
 };
 
 const hintCaption = BlrFormCaptionRenderFunction({
-  message: 'hint',
+  message: 'Hint-Message-Text',
   variant: 'hint',
   icon: 'blrInfo',
   theme: 'Light',
 });
 
 const errorCaption = BlrFormCaptionRenderFunction({
-  message: 'error',
+  message: 'Error-Message-Text',
   variant: 'error',
   icon: 'blrErrorFilled',
   theme: 'Light',
@@ -73,7 +73,7 @@ export const BlrFormCaptionGroup = (params: BlrFormCaptionGroupType) =>
 BlrFormCaptionGroup.storyName = 'Form Caption Group';
 
 const args: BlrFormCaptionGroupType = {
-  size: 'sm',
+  sizeVariant: 'sm',
 };
 
 BlrFormCaptionGroup.args = args;

packages/ui-library/src/components/form-caption-group/index.test.ts

@@ -9,7 +9,7 @@ import { BlrFormCaptionRenderFunction } from '../form-caption/renderFunction';
 import { html } from 'lit-html';
 
 const sampleParams: BlrFormCaptionGroupType = {
-  size: 'md',
+  sizeVariant: 'md',
 };
 
 const hintCaption = BlrFormCaptionRenderFunction({

packages/ui-library/src/components/form-caption-group/index.ts

@@ -10,12 +10,12 @@ import { TAG_NAME } from './renderFunction';
 export class BlrFormCaptionGroup extends LitElement {
   static styles = [formCaptionGroupStyle];
 
-  @property() size: FormSizesType = 'md';
+  @property() sizeVariant: FormSizesType = 'md';
 
   protected render() {
     const classes = classMap({
       'blr-form-caption-group': true,
-      [this.size]: this.size,
+      [this.sizeVariant]: this.sizeVariant,
     });
 
     return html`

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',
       })}
     </div>

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', () => {

packages/ui-library/src/components/form-caption/index.ts

@@ -16,31 +16,31 @@ 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([
         'cmp',
         'CaptionComponent',
         'Icon',
         'SizeVariant',
-        this.size.toUpperCase(),
+        this.sizeVariant.toUpperCase(),
       ]).toLowerCase() as SizesType;
 
       return html`

packages/ui-library/src/components/input-field-number/index.ts

@@ -275,7 +275,7 @@ export class BlrInputFieldNumber extends LitElement {
                 ${BlrFormCaptionRenderFunction({
                   variant: 'hint',
                   theme: this.theme,
-                  size: this.sizeVariant,
+                  sizeVariant: this.sizeVariant,
                   message: this.hintMessage,
                   icon: this.hintIcon,
                 })}
@@ -288,7 +288,7 @@ export class BlrInputFieldNumber extends LitElement {
                 ${BlrFormCaptionRenderFunction({
                   variant: 'error',
                   theme: this.theme,
-                  size: this.sizeVariant,
+                  sizeVariant: this.sizeVariant,
                   message: this.errorMessage,
                   icon: this.errorIcon,
                 })}
@@ -342,7 +342,7 @@ export class BlrInputFieldNumber extends LitElement {
         </div>
 
         ${this.hasHint || this.hasError
-          ? BlrFormCaptionGroupRenderFunction({ size: this.sizeVariant }, captionContent)
+          ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.sizeVariant }, captionContent)
           : nothing}
       `;
     }

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,
             })
@@ -238,7 +238,7 @@ export class BlrInputFieldText extends LitElement {
               : nothing}
           </div>
           ${this.hasHint || this.hasError
-            ? BlrFormCaptionGroupRenderFunction({ size: this.size }, captionContent)
+            ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.size }, captionContent)
             : nothing}
         </div>
       `;

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,
           })
@@ -132,7 +132,7 @@ export class BlrRadioGroup extends LitElement {
 
       ${this.hasHint || this.hasError
         ? html` <div class="caption-group ${classes}">
-            ${BlrFormCaptionGroupRenderFunction({ size: this.size }, captionContent)}
+            ${BlrFormCaptionGroupRenderFunction({ sizeVariant: this.size }, captionContent)}
           </div>`
         : nothing} `;
   }

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,
                 })}
@@ -102,7 +102,7 @@ export class BlrRadio extends LitElement {
               labelSize: this.size,
             })}
             ${this.hasHint || this.hasError
-              ? BlrFormCaptionGroupRenderFunction({ size: this.size }, captionContent)
+              ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.size }, captionContent)
               : nothing}
           </div>
         </div>

packages/ui-library/src/components/select/index.ts

@@ -150,7 +150,7 @@ export class BlrSelect extends LitElement {
           ? BlrFormCaptionRenderFunction({
               variant: 'hint',
               theme: this.theme,
-              size: this.sizeVariant,
+              sizeVariant: this.sizeVariant,
               message: this.hintMessage,
               icon: this.hintMessageIcon,
             })
@@ -159,7 +159,7 @@ export class BlrSelect extends LitElement {
           ? BlrFormCaptionRenderFunction({
               variant: 'error',
               theme: this.theme,
-              size: this.sizeVariant,
+              sizeVariant: this.sizeVariant,
               message: this.errorMessage,
               icon: this.errorMessageIcon,
             })
@@ -218,7 +218,7 @@ export class BlrSelect extends LitElement {
             ${this.renderIcon(iconClasses)}
           </div>
           ${this.hasHint || this.hasError
-            ? BlrFormCaptionGroupRenderFunction({ size: this.sizeVariant }, captionContent)
+            ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.sizeVariant }, captionContent)
             : nothing}
         </div>
       `;

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,
             })
@@ -232,7 +232,7 @@ export class BlrTextarea extends LitElement {
           ></textarea>
           <div class="${textareaInfoContainer}">
             ${this.hasHint || this.hasError
-              ? BlrFormCaptionGroupRenderFunction({ size: this.sizeVariant }, captionContent)
+              ? BlrFormCaptionGroupRenderFunction({ sizeVariant: this.sizeVariant }, captionContent)
               : nothing}
             ${this.hasCounter
               ? BlrCounterRenderFunction({

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}