fix: pr comments

Author: Elessar1802

src/Common/RJSF/Form.tsx

@@ -33,8 +33,8 @@ export const RJSFForm = (props: FormProps) => (
         noHtml5Validate
         showErrorList={false}
         autoComplete="off"
-        className={`rjsf-root-css ${props.className}`}
         {...props}
+        className={`rjsf-form-template__container ${props.className || ''}`}
         validator={validator}
         templates={{
             ...templates,

src/Common/RJSF/constants.ts

@@ -24,3 +24,8 @@ export const DEFAULT_FIELD_TITLE = 'Key not available'
 
 // Using symbol to ensure uniqueness across the fields
 export const DO_NOT_SHOW_LABEL = Symbol('Do not show label')
+
+export const ADD_BUTTON_WIDTH = {
+    MAX_WIDTH_VALUE: 250,
+    MAX_WIDTH_CLASSNAME: 'dc__mxw-250',
+}

src/Common/RJSF/rjsfForm.scss

@@ -1,13 +1,13 @@
-.rjsf-root-css #root {
-    margin-right: 28px;
-    padding: 20px;
+.rjsf-form-template {
+    &__container {
+        margin-right: 28px;
+        padding: 20px;
 
-    input.form__input {
-        padding: 6px 8px;
+        input.form__input {
+            padding: 6px 8px;
+        }
     }
-}
 
-.rjsf-form-template {
     &__field {
         grid-template-columns: 250px 1fr;
     }
@@ -26,11 +26,11 @@
             margin: 0;
         }
 
-        &:has(> .remove-btn-container:hover)::after {
+        &:has(> .remove-btn__container:hover)::after {
             background: var(--R50);
         }
 
-        &:has(> .remove-btn-container)::after {
+        &:has(> .remove-btn__container)::after {
             border-radius: 4px;
             transform: translate(-50%, -50%);
             top: 50%; 
@@ -44,18 +44,14 @@
             transition: all 100ms ease-out;
         }
 
-        & > .remove-btn-container:hover {
+        & > .remove-btn__container:hover {
             stroke: var(--R500);
             path {
                 stroke: var(--R500);
             }
         }
 
-        & > .remove-btn-container {
-            stroke: var(--R500);
-            path {
-                stroke: var(--R500);
-            }
+        & > .remove-btn__container {
             transition: all 100ms ease-out;
         }
     }

src/Common/RJSF/templates/ArrayFieldItemTemplate.tsx

@@ -34,7 +34,7 @@ export const ArrayFieldItemTemplate = ({
     return (
         <div className="dc__position-rel display-grid rjsf-form-template__array-field-item flex-align-center mb-12">
             {children}
-            <div className="dc__position-abs remove-btn-container" style={{ right: "-28px", top: "9px" }}>
+            <div className="dc__position-abs remove-btn__container" style={{ right: "-28px", top: "9px" }}>
                 {hasToolbar && hasRemove && (
                     <RemoveButton
                         disabled={disabled || readonly}

src/Common/RJSF/templates/ButtonTemplates/AddButton.tsx

@@ -19,6 +19,7 @@ import { IconButtonProps } from '@rjsf/utils'
 
 import { ConditionalWrap } from '../../../Helper'
 import { getTippyWrapperWithContent } from '../../utils'
+import { ADD_BUTTON_WIDTH } from '../../constants'
 import { ReactComponent as PlusIcon } from '../../../../Assets/Icon/ic-add.svg'
 
 export const AddButton = ({
@@ -33,7 +34,7 @@ export const AddButton = ({
     const buttonRef = useRef<HTMLButtonElement>(null)
     const content = `Add ${label}`
 
-    useEffect(() => setShowTippy(buttonRef.current?.offsetWidth >= 250), [buttonRef.current])
+    useEffect(() => setShowTippy(buttonRef.current?.offsetWidth >= ADD_BUTTON_WIDTH.MAX_WIDTH_VALUE), [buttonRef.current])
 
     return (
         <div className="flexbox flex-justify-start">
@@ -42,7 +43,7 @@ export const AddButton = ({
                     ref={buttonRef}
                     {...props}
                     type="button"
-                    className="dc__outline-none-imp p-0 dc__transparent flex dc__gap-4 cursor dc__mxw-250"
+                    className={`dc__outline-none-imp p-0 dc__transparent flex dc__gap-4 cursor ${ADD_BUTTON_WIDTH.MAX_WIDTH_CLASSNAME}`}
                     title="Add"
                 >
                     <PlusIcon className="icon-dim-16 fcb-5" />

src/Common/RJSF/templates/ButtonTemplates/RemoveButton.tsx

@@ -20,7 +20,7 @@ import { IconButtonProps } from '@rjsf/utils'
 import { ReactComponent as CrossIcon } from '../../../../Assets/Icon/ic-cross.svg'
 
 export const RemoveButton = ({ icon, iconType, registry, uiSchema, ...props }: IconButtonProps) => (
-    <button {...props} type="button" className="dc__outline-none-imp p-0 dc__transparent scn-6 flex cursor" title="Remove">
-        <CrossIcon className="icon-dim-16 fcr-5" />
+    <button {...props} type="button" className="dc__outline-none-imp p-0 dc__transparent flex cursor" title="Remove">
+        <CrossIcon className="icon-dim-16 scn-6" />
     </button>
 )

src/Common/RJSF/templates/FieldErrorTemplate.tsx

@@ -28,13 +28,13 @@ export const FieldErrorTemplate = ({ errors = [], idSchema }: FieldErrorProps) =
                 {errors
                     .filter((elem) => !!elem)
                     .map((error, index: number) => (
-                        <>
+                        <React.Fragment key={index}>
                             <span />
-                            <span className="form__error" key={index}>
+                            <span className="form__error">
                                 <Error className="form__icon form__icon--error" />
                                 {error}
                             </span>
-                        </>
+                        </React.Fragment>
                     ))}
             </span>
         )