Et 683 extend modal and input components (#163)

* extent input type * extent modal * v0.12.19
awell-health · Dec 19, 2024 · d5eb92c · d5eb92c
1 parent 61c7b31
commit d5eb92c
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@awell-health/design-system",
-  "version": "0.12.18",
+  "version": "0.12.19",
   "type": "module",
   "files": [
     "dist"

diff --git a/src/components/ui/form/input/input.tsx b/src/components/ui/form/input/input.tsx
@@ -11,6 +11,7 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   onChange?: React.ChangeEventHandler<HTMLInputElement>;
   className?: string;
   type?: string;
+  labelClassName?: string;
 }
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   (
@@ -23,6 +24,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       hasError,
       onChange,
       type = 'text',
+      labelClassName,
       ...props
     },
     ref
@@ -47,7 +49,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <div className=''>
         {label && (
-          <div className='label'>
+          <div className={cn('label', labelClassName)}>
             <span className=' label-text text-slate-600 text-sm font-medium'>{label}</span>
           </div>
         )}

diff --git a/src/components/ui/form/select/__snapshots__/select.spec.tsx.snap b/src/components/ui/form/select/__snapshots__/select.spec.tsx.snap
@@ -9,7 +9,7 @@ exports[`Select > match multi snapshot 1`] = `
       class="relative"
     >
       <div
-        class=" css-b62m3t-container"
+        class="css-b62m3t-container"
       >
         <span
           class="css-1f43avz-a11yText-A11yText"
@@ -26,10 +26,10 @@ exports[`Select > match multi snapshot 1`] = `
           class="!rounded-lg !shadow border !border-slate-300 text-slate-500 text-sm font-normal css-13cymwt-control"
         >
           <div
-            class=" css-hlgwow"
+            class="css-hlgwow"
           >
             <div
-              class=" css-1jqq78o-placeholder"
+              class="css-1jqq78o-placeholder"
               id="react-select-3-placeholder"
             >
               Select...
@@ -41,7 +41,7 @@ exports[`Select > match multi snapshot 1`] = `
               aria-expanded="false"
               aria-haspopup="true"
               aria-readonly="true"
-              class="css-mohuvp-dummyInput-DummyInput"
+              class="css-1s80ejz-dummyInput-DummyInput"
               id="react-select-3-input"
               inputmode="none"
               role="combobox"
@@ -50,14 +50,14 @@ exports[`Select > match multi snapshot 1`] = `
             />
           </div>
           <div
-            class=" css-1wy0on6"
+            class="css-1wy0on6"
           >
             <span
-              class=" css-1u9des2-indicatorSeparator"
+              class="css-1u9des2-indicatorSeparator"
             />
             <div
               aria-hidden="true"
-              class=" css-1xc3v61-indicatorContainer"
+              class="css-1xc3v61-indicatorContainer"
             >
               <svg
                 aria-hidden="true"
@@ -89,7 +89,7 @@ exports[`Select > match snapshot 1`] = `
       class="relative"
     >
       <div
-        class=" css-b62m3t-container"
+        class="css-b62m3t-container"
       >
         <span
           class="css-1f43avz-a11yText-A11yText"
@@ -106,10 +106,10 @@ exports[`Select > match snapshot 1`] = `
           class="!rounded-lg !shadow border !border-slate-300 text-slate-500 text-sm font-normal css-13cymwt-control"
         >
           <div
-            class=" css-hlgwow"
+            class="css-hlgwow"
           >
             <div
-              class=" css-1jqq78o-placeholder"
+              class="css-1jqq78o-placeholder"
               id="react-select-2-placeholder"
             >
               Select...
@@ -121,7 +121,7 @@ exports[`Select > match snapshot 1`] = `
               aria-expanded="false"
               aria-haspopup="true"
               aria-readonly="true"
-              class="css-mohuvp-dummyInput-DummyInput"
+              class="css-1s80ejz-dummyInput-DummyInput"
               id="react-select-2-input"
               inputmode="none"
               role="combobox"
@@ -130,14 +130,14 @@ exports[`Select > match snapshot 1`] = `
             />
           </div>
           <div
-            class=" css-1wy0on6"
+            class="css-1wy0on6"
           >
             <span
-              class=" css-1u9des2-indicatorSeparator"
+              class="css-1u9des2-indicatorSeparator"
             />
             <div
               aria-hidden="true"
-              class=" css-1xc3v61-indicatorContainer"
+              class="css-1xc3v61-indicatorContainer"
             >
               <svg
                 aria-hidden="true"

diff --git a/src/components/ui/modal/Modal.tsx b/src/components/ui/modal/Modal.tsx
@@ -8,10 +8,18 @@ interface Props {
   closeOnEscape?: boolean;
   children: JSX.Element | ReactNode | string;
   className?: string;
+  marginTop?: string;
 }
 
 const Modal: FC<Props> = (props) => {
-  const { children, onClose, clickOutside = false, closeOnEscape = false, className = '' } = props;
+  const {
+    children,
+    onClose,
+    clickOutside = false,
+    closeOnEscape = false,
+    className = '',
+    marginTop = 'mt-[100px]'
+  } = props;
   const modalRef: RefObject<HTMLDivElement> = React.useRef<HTMLDivElement>(null);
 
   if (clickOutside) {
@@ -31,7 +39,7 @@ const Modal: FC<Props> = (props) => {
     >
       <div className='fixed inset-0 bg-slate-700 bg-opacity-30 transition-opacity z-[9999]'></div>
       <div className='fixed inset-0 z-[9999] w-screen overflow-y-auto'>
-        <div className='flex mt-[100px] justify-center p-4'>
+        <div className={cn('flex justify-center p-4', marginTop)}>
           <div className='relative transform overflow-hidden transition-all bg-white rounded-lg shadow border border-slate-200'>
             <div ref={modalRef} className={cn('w-[1024px] h-[500px]', className)}>
               {children}

diff --git a/src/components/ui/modal/__snapshots__/Modal.spec.tsx.snap b/src/components/ui/modal/__snapshots__/Modal.spec.tsx.snap
@@ -15,7 +15,7 @@ exports[`Modal > match snapshot 1`] = `
       class="fixed inset-0 z-[9999] w-screen overflow-y-auto"
     >
       <div
-        class="flex mt-[100px] justify-center p-4"
+        class="flex justify-center p-4 mt-[100px]"
       >
         <div
           class="relative transform overflow-hidden transition-all bg-white rounded-lg shadow border border-slate-200"