chore: added stack onto children

kadena-community · Nov 8, 2023 · ccdc069 · ccdc069
1 parent b5a9cac
commit ccdc069
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 17 deletions.
diff --git a/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.css.ts b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.css.ts
@@ -1,6 +1,6 @@
 import { sprinkles } from '@theme/sprinkles.css';
 import { vars } from '@theme/vars.css';
-import { styleVariants } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 import type { FormFieldStatus } from '../Form.css';
 import { statusColor, statusOutlineColor } from '../Form.css';
 import {

diff --git a/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx b/packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import type { vars } from 'src/styles';
 import type { FormFieldStatus } from '../Form.css';
 
+import { Stack } from '@components/Layout';
 import type { IFormFieldHeaderProps } from './FormFieldHeader/FormFieldHeader';
 import { FormFieldHeader } from './FormFieldHeader/FormFieldHeader';
 import { FormFieldHelper } from './FormFieldHelper/FormFieldHelper';
@@ -12,8 +13,8 @@ import { statusVariant } from './FormFieldWrapper.css';
 
 export interface IFormFieldWrapperProps
   extends Omit<IFormFieldHeaderProps, 'label'> {
-  children:
-    | FunctionComponentElement<IInputProps>
+  children: // combine types for all input types
+  | FunctionComponentElement<IInputProps>
     | FunctionComponentElement<IInputProps>[];
   status?: FormFieldStatus;
   disabled?: boolean;
@@ -46,7 +47,9 @@ export const FormFieldWrapper: FC<IFormFieldWrapperProps> = ({
             info={info}
           />
         )}
-        <div className="inputGroup">{children}</div>
+        <Stack gap="$2" direction="column">
+          {children}
+        </Stack>
         {Boolean(helperText) && <FormFieldHelper>{helperText}</FormFieldHelper>}
       </div>
     </FormFieldWrapperContext.Provider>

diff --git a/packages/libs/react-ui/src/components/Form/Input/Input.css.ts b/packages/libs/react-ui/src/components/Form/Input/Input.css.ts
@@ -11,11 +11,7 @@ export const disabledClass = style([
     },
   }),
   {
-    opacity: 0.4,
     selectors: {
-      '.inputGroup &': {
-        opacity: 1,
-      },
       [`${darkThemeClass} &`]: {
         backgroundColor: vars.colors.$gray60, // NOTE: this is to override the normal bg color
       },

diff --git a/packages/libs/react-ui/src/components/Form/Input/Input.tsx b/packages/libs/react-ui/src/components/Form/Input/Input.tsx
@@ -5,6 +5,7 @@ import type { FC, InputHTMLAttributes } from 'react';
 import React, { forwardRef, useContext } from 'react';
 import { baseContainerClass, baseOutlinedClass } from '../Form.css';
 import { FormFieldWrapperContext } from '../FormFieldWrapper/FormFieldWrapper.context';
+import { formFieldContainerClass } from '../FormFieldWrapper/FormFieldWrapper.css';
 import {
   disabledClass,
   inputClass,
@@ -54,7 +55,7 @@ export const Input: FC<IInputProps> = forwardRef<HTMLInputElement, IInputProps>(
 
     return (
       <div
-        className={classNames(baseContainerClass, {
+        className={classNames(baseContainerClass, formFieldContainerClass, {
           [baseOutlinedClass]: outlined || status,
           [disabledClass]: disabled,
         })}

diff --git a/packages/libs/react-ui/src/components/Form/Select/Select.css.ts b/packages/libs/react-ui/src/components/Form/Select/Select.css.ts
@@ -29,11 +29,7 @@ export const containerClassDisabled = style([
     },
   }),
   {
-    opacity: 0.4,
     selectors: {
-      '.inputGroup &': {
-        opacity: 1,
-      },
       [`${darkThemeClass} &`]: {
         backgroundColor: vars.colors.$gray60, // NOTE: this is to override the normal bg color
       },

diff --git a/packages/libs/react-ui/src/components/Form/Textarea/Textarea.css.ts b/packages/libs/react-ui/src/components/Form/Textarea/Textarea.css.ts
@@ -11,11 +11,7 @@ export const disabledClass = style([
     },
   }),
   {
-    opacity: 0.4,
     selectors: {
-      '.inputGroup &': {
-        opacity: 1,
-      },
       [`${darkThemeClass} &`]: {
         backgroundColor: vars.colors.$gray60,
       },