feat: add modifierContent to <FormField /> (#16)

* feat: add modifierContent prop * fix: remove unused import --------- Co-authored-by: Luca Tagliabue <[email protected]>
radicalbit · Nov 15, 2024 · 5ca0fd0 · 5ca0fd0
1 parent 19e1dbe
commit 5ca0fd0
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git 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
@@ -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