Merge pull request #514 from devtron-labs/feat/main--rjsf-root-separators

feat: add separators between root level entries in RJSF form

Author: Elessar1802

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.4.0-patch-2",
+    "version": "1.4.0-patch-3",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -134,7 +134,7 @@ export const ObjectFieldTemplate = (props: ObjectFieldTemplateProps<any, RJSFFor
                     schema.properties && !hasAdditionalProperties && idSchema.$id !== 'root'
                         ? 'dc__border-left pl-12'
                         : ''
-                } flexbox-col dc__gap-8`}
+                } ${idSchema.$id === 'root' ? 'dc__separated-flexbox dc__separated-flexbox--vertical' : 'flexbox-col dc__gap-8'}`}
             >
                 <Field {...props} />
             </div>

src/Common/RJSF/templates/ObjectFieldTemplate.tsx

@@ -23,7 +23,7 @@ export const TitleField = ({
     required,
     description,
 }: TitleFieldProps & Partial<Record<'description', string>>) => (
-    <legend className="fs-13 fw-6 cn-9 lh-20 dc__no-border py-9 mb-0" id={id}>
+    <legend className="fs-13 fw-6 cn-9 lh-20 dc__no-border pb-9 mb-0" id={id}>
         <Tooltip alwaysShowTippyOnHover={!!description} content={description}>
             <span className={`${description ? 'text-underline-dashed-300' : ''}`}>{title}</span>
         </Tooltip>