fix(ui-library): props alignment form caption

deven-org · Mar 20, 2024 · 62fd41b · 62fd41b
1 parent daebf49
commit 62fd41b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 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',
@@ -44,12 +45,20 @@ export default {
       },
     },
 
+    showIcon: {
+      description: 'Choose if component has an icon.',
+      defaultValue: true,
+      control: { type: 'boolean' },
+      table: { category: 'Content / Settings' },
+    },
+
     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: {
@@ -72,15 +81,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)
         

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(