fix(ui-library): props alignment form caption (#1023)

Co-authored-by: Thorben Hartmann <122102805+thrbnhrtmnn@users.noreply.github.com>
deven-org · Mar 26, 2024 · 155009f · 155009f
1 parent dc8a3d9
commit 155009f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 15 deletions.
diff --git a/packages/ui-library/src/components/form-caption-group/index.test.ts b/packages/ui-library/src/components/form-caption-group/index.test.ts
@@ -16,15 +16,15 @@ const hintCaption = BlrFormCaptionRenderFunction({
   message: 'This is a hint',
   variant: 'hint',
   icon: 'blrInfo',
-  size: 'md',
+  sizeVariant: 'md',
   theme: 'Light',
 });
 
 const errorCaption = BlrFormCaptionRenderFunction({
   message: 'This is an error',
   variant: 'error',
   icon: 'blrInfo',
-  size: 'md',
+  sizeVariant: 'md',
   theme: 'Light',
 });
 

diff --git a/packages/ui-library/src/components/form-caption/index.stories.ts b/packages/ui-library/src/components/form-caption/index.stories.ts
@@ -21,6 +21,7 @@ export default {
     sizeVariant: {
       options: FormSizes,
       control: { type: 'radio' },
+      defaultValue: 'sm',
       description: ' Choose size of the component.',
       table: {
         category: 'Appearance',
@@ -43,20 +44,20 @@ export default {
         category: 'Appearance',
       },
     },
-
     icon: {
       options: [undefined, ...PureIconKeys],
       control: { type: 'select' },
+      defaultValue: 'blr360',
       description: 'Select an icon which is displayed inside of the input.',
       table: {
-        category: 'Content / Setting',
+        category: 'Content / Settings',
       },
     },
     message: {
       options: [undefined, ...PureIconKeys],
       description: 'Enter the message the component should have.',
       table: {
-        category: 'Content / Setting',
+        category: 'Content / Settings',
       },
     },
   },
@@ -72,15 +73,12 @@ export default {
       description: {
         component: `<Markdown>
         Form Caption provides either a brief hint or error message to a related form element such as Input Field Text or Select. It is typically displayed below the form element, and it can be used to provide additional information about the type of information a user has to provide, like an example of the correct data format.
-
         - [**Appearance**](#appearance)
           - [**Variant**](#variant)
           - [**Size Variant**](#size-variant)
         - [**Dependencies**](#dependencies)
           - [**Icon**](#icon)
-        
         The Form Caption is intended to be used when creating new components. Currently, it is used like this in the following components:
-        
         - [**Form Caption Group**](?path=/docs/components-form-caption-group--docs)
         - [**Toggle Switch**](?path=/docs/components-toggle-switch--docs)
         
@@ -99,7 +97,7 @@ BlrFormCaption.storyName = 'Form Caption';
 const args: BlrFormCaptionType = {
   theme: 'Light',
   message: 'Message-text',
-  icon: 'blr360',
+  icon: 'blrInfo',
   variant: 'hint',
   sizeVariant: 'sm',
 };
@@ -121,7 +119,7 @@ export const Variant = () => {
         theme: 'Light',
         sizeVariant: 'sm',
         message: 'Hint',
-        icon: 'blr360',
+        icon: 'blrInfo',
       })}
     </div>
     <div class="wrapper">
@@ -151,7 +149,7 @@ export const SizeVariant = () => {
         theme: 'Light',
         sizeVariant: 'sm',
         message: 'Form Caption SM',
-        icon: 'blr360',
+        icon: 'blrInfo',
       })}
     </div>
     <div class="wrapper">
@@ -160,7 +158,7 @@ export const SizeVariant = () => {
         theme: 'Light',
         sizeVariant: 'md',
         message: 'Form Caption MD',
-        icon: 'blr360',
+        icon: 'blrInfo',
       })}
     </div>
 
@@ -170,7 +168,7 @@ export const SizeVariant = () => {
         theme: 'Light',
         sizeVariant: 'lg',
         message: 'Form Caption LG',
-        icon: 'blr360',
+        icon: 'blrInfo',
       })}
     </div>
   `;
@@ -193,7 +191,7 @@ export const Icon = () => {
         theme: 'Light',
         sizeVariant: 'sm',
         message: 'With icon',
-        icon: 'blr360',
+        icon: 'blrInfo',
       })}
     </div>
     <div class="wrapper">

diff --git a/packages/ui-library/src/components/form-caption/index.ts b/packages/ui-library/src/components/form-caption/index.ts
@@ -48,7 +48,7 @@ export class BlrFormCaption extends LitElement {
           ${dynamicStyles}
         </style>
         <div class=${classes}>
-          ${this.icon
+          ${Boolean(this.icon)
             ? BlrIconRenderFunction(
                 {
                   icon: calculateIconName(