From 5ca0fd07c7756516a70490693a566d88ed4086f8 Mon Sep 17 00:00:00 2001
From: Luca Tagliabue <32895300+lucataglia@users.noreply.github.com>
Date: Fri, 15 Nov 2024 17:03:57 +0100
Subject: [PATCH] feat: add modifierContent to <FormField /> (#16)

* feat: add modifierContent prop

* fix: remove unused import

---------

Co-authored-by: Luca Tagliabue <luca.tagliabue@radicalbit.io>
---
 src/lib/components/drawer-list/index.tsx | 3 +--
 src/lib/components/form-field/index.tsx  | 8 ++++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/drawer-list/index.tsx b/src/lib/components/drawer-list/index.tsx
index 8125a3c..54e47ba 100644
--- a/src/lib/components/drawer-list/index.tsx
+++ b/src/lib/components/drawer-list/index.tsx
@@ -1,6 +1,5 @@
 import { DataTable } from '@Components/data-table';
 import Drawer from '@Components/drawer';
-import Spin from '@Components/spin';
 import classNames from 'classnames';
 import { memo } from 'react';
 
@@ -46,7 +45,7 @@ const DrawerList = <T extends Record<string, unknown>, >({
       modifier={`c-drawer-list__wrapper ${
         !mask ? 'c-drawer--transparent-mask' : ''
       } ${modifier} ${mode} ${css}`}
-      title={<Spin spinning={loading}>{header}</Spin>}
+      title={header}
       open={open}
       onClose={onClose}
       closable={false}
diff --git a/src/lib/components/form-field/index.tsx b/src/lib/components/form-field/index.tsx
index 21b7536..7ee5058 100644
--- a/src/lib/components/form-field/index.tsx
+++ b/src/lib/components/form-field/index.tsx
@@ -8,23 +8,27 @@ import classNames from 'classnames';
 import React, { memo } from 'react';
 
 type Props = {
+  className?: string,
   children?: React.ReactNode;
   description?: string;
   flexColumn?: boolean;
   label?: string | React.ReactNode;
   message?: string | React.ReactNode;
   modifier?: string;
+  modifierContent?: string;
   required?: boolean;
   messageColor?: 'warning' | 'success' | 'error';
 };
 
 const FormField = ({
   children,
+  className = '',
   flexColumn,
   description,
   label,
   message,
   modifier = '',
+  modifierContent = '',
   required,
   messageColor = 'error',
 }: Props) => {
@@ -33,7 +37,7 @@ const FormField = ({
   });
 
   return (
-    <div className={`c-form-field ${modifier}`}>
+    <div className={`c-form-field ${className} ${modifier}`}>
       {label && (
         <div className="c-form-field__label">
           <label>
@@ -49,7 +53,7 @@ const FormField = ({
         </div>
       )}
 
-      <div className={`c-form-field__content ${cssContent}`}>{children}</div>
+      <div className={`c-form-field__content ${modifierContent} ${cssContent}`}>{children}</div>
 
       {message && (
         <span