Refactor/rename input wrapper

packages/apps/graph-client/src/components/Common/Layout/Header/Header.tsx

@@ -1,6 +1,12 @@
 import routes from '@/constants/routes';
 import { Text } from '@components/text';
-import { Button, Grid, Input, InputWrapper, Select } from '@kadena/react-ui';
+import {
+  Button,
+  FormFieldWrapper,
+  Grid,
+  Input,
+  Select,
+} from '@kadena/react-ui';
 import { useRouter } from 'next/router';
 import type { FC } from 'react';
 import React, { useState } from 'react';
@@ -117,7 +123,7 @@ const Header: FC<IHeaderProps> = (props) => {
 
         <Grid.Root columns={searchType.startsWith('account') ? 4 : 3}>
           <Grid.Item>
-            <InputWrapper htmlFor="search-type" label="Search Type">
+            <FormFieldWrapper htmlFor="search-type" label="Search Type">
               <Select
                 ariaLabel="search-type"
                 id="search-type"
@@ -129,10 +135,10 @@ const Header: FC<IHeaderProps> = (props) => {
                 <option value="event">Event</option>
                 <option value="block">Block</option>
               </Select>
-            </InputWrapper>
+            </FormFieldWrapper>
           </Grid.Item>
           <Grid.Item>
-            <InputWrapper
+            <FormFieldWrapper
               htmlFor="search-field"
               label={searchTypeLabels[searchType]}
             >
@@ -143,18 +149,18 @@ const Header: FC<IHeaderProps> = (props) => {
                 onChange={handleSearchFieldChange}
                 onKeyDown={handleKeyPress}
               />
-            </InputWrapper>
+            </FormFieldWrapper>
           </Grid.Item>
           {searchType.startsWith('account') && (
             <Grid.Item>
-              <InputWrapper htmlFor="module" label="Module name">
+              <FormFieldWrapper htmlFor="module" label="Module name">
                 <Input
                   id="module"
                   value={moduleField}
                   placeholder="coin"
                   onChange={(event) => setModuleField(event.target.value)}
                 />
-              </InputWrapper>
+              </FormFieldWrapper>
             </Grid.Item>
           )}
           <Grid.Item>

packages/apps/tools/src/components/Global/AccountNameField/index.tsx

@@ -2,14 +2,14 @@ import { useWalletConnectClient } from '@/context/connect-wallet-context';
 import { useDidUpdateEffect } from '@/hooks';
 import { getAccounts } from '@/utils/wallet';
 import type {
+  IFormFieldWrapperProps,
   IInputProps,
-  IInputWrapperProps,
   ISelectProps,
 } from '@kadena/react-ui';
 import {
+  FormFieldWrapper,
   IconButton,
   Input,
-  InputWrapper,
   Select,
   maskValue,
 } from '@kadena/react-ui';
@@ -21,7 +21,7 @@ import * as z from 'zod';
 import { accountInputWrapperStyle } from './styles.css';
 
 interface IAccountNameFieldProps
-  extends Partial<Omit<IInputWrapperProps, 'children'>> {
+  extends Partial<Omit<IFormFieldWrapperProps, 'children'>> {
   inputProps: Partial<
     Pick<
       IInputProps,
@@ -98,15 +98,15 @@ export const AccountNameField: FC<IAccountNameFieldProps> = ({
 
   return (
     <div className={accountInputWrapperStyle}>
-      <InputWrapper
+      <FormFieldWrapper
         label={t('Account')}
         htmlFor={elementId}
         status={error ? 'negative' : status}
         helperText={error?.message ?? helperText}
         {...rest}
       >
         {lookup[mode]}
-      </InputWrapper>
+      </FormFieldWrapper>
       {accounts?.length && (
         <IconButton
           icon={mode === 'input' ? 'Close' : 'Edit'}

packages/apps/tools/src/components/Global/ChainSelect/index.tsx

@@ -1,7 +1,7 @@
 import type { ChainwebChainId } from '@kadena/chainweb-node-client';
 import { CHAINS } from '@kadena/chainweb-node-client';
 import type { ISelectProps } from '@kadena/react-ui';
-import { InputWrapper, Select } from '@kadena/react-ui';
+import { FormFieldWrapper, Select } from '@kadena/react-ui';
 import type { FC, FormEventHandler } from 'react';
 import React, { useCallback } from 'react';
 
@@ -32,7 +32,7 @@ const ChainSelect: FC<
   });
 
   return (
-    <InputWrapper label="Chain ID" htmlFor={ELEMENT_ID}>
+    <FormFieldWrapper label="Chain ID" htmlFor={ELEMENT_ID}>
       <Select
         {...rest}
         id={ELEMENT_ID}
@@ -43,7 +43,7 @@ const ChainSelect: FC<
       >
         {options}
       </Select>
-    </InputWrapper>
+    </FormFieldWrapper>
   );
 };
 

packages/apps/tools/src/components/Global/PredKeysSelect/index.tsx

@@ -1,5 +1,5 @@
 import type { ISelectProps } from '@kadena/react-ui';
-import { InputWrapper, Select } from '@kadena/react-ui';
+import { FormFieldWrapper, Select } from '@kadena/react-ui';
 
 import type { FC, FormEventHandler } from 'react';
 import React, { useCallback } from 'react';
@@ -34,7 +34,7 @@ const PredKeysSelect: FC<
   });
 
   return (
-    <InputWrapper label="Predicate" htmlFor={ELEMENT_ID}>
+    <FormFieldWrapper label="Predicate" htmlFor={ELEMENT_ID}>
       <Select
         {...rest}
         id={ELEMENT_ID}
@@ -44,7 +44,7 @@ const PredKeysSelect: FC<
       >
         {options}
       </Select>
-    </InputWrapper>
+    </FormFieldWrapper>
   );
 };
 

packages/apps/tools/src/components/Global/PublicKeyField/index.tsx

@@ -1,4 +1,4 @@
-import type { IInputProps, IInputWrapperProps } from '@kadena/react-ui';
+import type { IFormFieldWrapperProps, IInputProps } from '@kadena/react-ui';
 import { TextField } from '@kadena/react-ui';
 
 import useTranslation from 'next-translate/useTranslation';
@@ -8,7 +8,7 @@ import type { FieldError } from 'react-hook-form';
 import { publicKeyFieldStyles } from './styles.css';
 
 interface IPublicKeyFieldProps
-  extends Partial<Omit<IInputWrapperProps, 'children'>> {
+  extends Partial<Omit<IFormFieldWrapperProps, 'children'>> {
   inputProps: Partial<
     Pick<
       IInputProps,

packages/libs/react-ui/src/components/Form/InputWrapper/InputHeader/InputHeader.tsx → packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldHeader/FormFieldHeader.tsx

@@ -2,16 +2,16 @@ import { SystemIcon } from '@components/Icon';
 import { Label } from '@components/Typography';
 import type { FC } from 'react';
 import React from 'react';
-import { headerClass, infoClass, tagClass } from './InputHeader.css';
+import { headerClass, infoClass, tagClass } from './FormFieldHeader.css';
 
-export interface IInputHeaderProps {
+export interface IFormFieldHeaderProps {
   label: string;
   htmlFor: string;
   tag?: string;
   info?: string;
 }
 
-export const InputHeader: FC<IInputHeaderProps> = ({
+export const FormFieldHeader: FC<IFormFieldHeaderProps> = ({
   label,
   htmlFor,
   tag,

packages/libs/react-ui/src/components/Form/InputWrapper/InputHelper/InputHelper.tsx → packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldHelper/FormFieldHelper.tsx

@@ -1,13 +1,13 @@
 import { SystemIcon } from '@components/Icon';
 import type { FC } from 'react';
 import React from 'react';
-import { helperClass, helperIconClass } from './InputHelper.css';
+import { helperClass, helperIconClass } from './FormFieldHelper.css';
 
-interface IInputHelperProps {
+interface IFormFieldHelperProps {
   children: React.ReactNode;
 }
 
-export const InputHelper: FC<IInputHelperProps> = ({ children }) => {
+export const FormFieldHelper: FC<IFormFieldHelperProps> = ({ children }) => {
   return (
     <span className={helperClass}>
       <span className={helperIconClass}>

packages/libs/react-ui/src/components/Form/InputWrapper/InputWrapper.context.ts → packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.context.ts

@@ -5,12 +5,12 @@ import type { FormFieldStatus } from '../Form.css';
 
 export type OpenSections = string[];
 
-interface IInputWrapperContext {
+interface IFormFieldWrapperContext {
   status?: FormFieldStatus;
   leadingTextWidth?: keyof typeof vars.sizes;
 }
 
-export const InputWrapperContext = createContext<IInputWrapperContext>({
+export const FormFieldWrapperContext = createContext<IFormFieldWrapperContext>({
   status: undefined,
   leadingTextWidth: undefined,
 });

packages/libs/react-ui/src/components/Form/InputWrapper/InputWrapper.css.ts → packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.css.ts

@@ -1,12 +1,12 @@
 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 {
   helperIconColor,
   helperTextColor,
-} from './InputHelper/InputHelper.css';
+} from './FormFieldHelper/FormFieldHelper.css';
 
 const statusOptions: Record<FormFieldStatus, FormFieldStatus> = {
   disabled: 'disabled',

packages/libs/react-ui/src/components/Form/InputWrapper/InputWrapper.stories.tsx → packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.stories.tsx

@@ -1,25 +1,25 @@
-import type { IInputWrapperProps } from '@components/Form';
-import { Input, InputWrapper } from '@components/Form';
+import type { IFormFieldWrapperProps } from '@components/Form';
+import { FormFieldWrapper, Input } from '@components/Form';
 import type { SystemIcon } from '@components/Icon';
 import type { Meta, StoryObj } from '@storybook/react';
 import { vars } from '@theme/vars.css';
 import React from 'react';
-import { statusVariant } from './InputWrapper.css';
+import { statusVariant } from './FormFieldWrapper.css';
 
 type StoryProps = {
   helperText: string;
   leadingText: string;
   icon: keyof typeof SystemIcon;
   rightIcon: keyof typeof SystemIcon;
-} & IInputWrapperProps;
+} & IFormFieldWrapperProps;
 
 const meta: Meta<StoryProps> = {
-  title: 'Form/InputWrapper',
+  title: 'Form/FormFieldWrapper',
   parameters: {
     docs: {
       description: {
         component:
-          'The InputWrapper component is intended to be used to wrap one or more form input components to provide them with a shared and optional label, tag, info, helper text and status colors.',
+          'The FormFieldWrapper component is intended to be used to wrap one or more form input components to provide them with a shared and optional label, tag, info, helper text and status colors.',
       },
     },
   },
@@ -113,7 +113,7 @@ export const Group: Story = {
     leadingTextWidth,
   }) => {
     return (
-      <InputWrapper
+      <FormFieldWrapper
         tag={tag}
         info={info}
         label={label}
@@ -135,7 +135,7 @@ export const Group: Story = {
           disabled={disabled}
           leadingText="Leading 2"
         />
-      </InputWrapper>
+      </FormFieldWrapper>
     );
   },
 };

packages/libs/react-ui/src/components/Form/FormFieldWrapper/FormFieldWrapper.tsx

@@ -0,0 +1,57 @@
+import type { IInputProps } from '@components/Form';
+import type { FC, FunctionComponentElement } from 'react';
+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';
+import { FormFieldWrapperContext } from './FormFieldWrapper.context';
+import { statusVariant } from './FormFieldWrapper.css';
+
+export interface IFormFieldWrapperProps
+  extends Omit<IFormFieldHeaderProps, 'label'> {
+  children: // combine types for all input types
+  | FunctionComponentElement<IInputProps>
+    | FunctionComponentElement<IInputProps>[];
+  status?: FormFieldStatus;
+  disabled?: boolean;
+  helperText?: string;
+  label?: string;
+  leadingTextWidth?: keyof typeof vars.sizes;
+}
+
+export const FormFieldWrapper: FC<IFormFieldWrapperProps> = ({
+  status,
+  disabled,
+  children,
+  label,
+  leadingTextWidth = undefined,
+  htmlFor,
+  tag,
+  info,
+  helperText,
+}) => {
+  const statusVal = disabled === true ? 'disabled' : status;
+
+  return (
+    <FormFieldWrapperContext.Provider value={{ status, leadingTextWidth }}>
+      <div className={statusVal ? statusVariant[statusVal] : undefined}>
+        {label !== undefined && (
+          <FormFieldHeader
+            htmlFor={htmlFor}
+            label={label}
+            tag={tag}
+            info={info}
+          />
+        )}
+        <Stack gap="$2" direction="column">
+          {children}
+        </Stack>
+        {Boolean(helperText) && <FormFieldHelper>{helperText}</FormFieldHelper>}
+      </div>
+    </FormFieldWrapperContext.Provider>
+  );
+};

packages/libs/react-ui/src/components/Form/FormFieldWrapper/index.ts

@@ -0,0 +1,4 @@
+export {
+  FormFieldWrapper,
+  type IFormFieldWrapperProps,
+} from './FormFieldWrapper';

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
       },

packages/libs/react-ui/src/components/Form/Input/Input.tsx

@@ -4,7 +4,8 @@ import classNames from 'classnames';
 import type { FC, InputHTMLAttributes } from 'react';
 import React, { forwardRef, useContext } from 'react';
 import { baseContainerClass, baseOutlinedClass } from '../Form.css';
-import { InputWrapperContext } from '../InputWrapper/InputWrapper.context';
+import { FormFieldWrapperContext } from '../FormFieldWrapper/FormFieldWrapper.context';
+import { formFieldContainerClass } from '../FormFieldWrapper/FormFieldWrapper.css';
 import {
   disabledClass,
   inputClass,
@@ -43,8 +44,9 @@ export const Input: FC<IInputProps> = forwardRef<HTMLInputElement, IInputProps>(
     },
     ref,
   ) {
-    const { status, leadingTextWidth: wrapperLeadingTextWidth } =
-      useContext(InputWrapperContext);
+    const { status, leadingTextWidth: wrapperLeadingTextWidth } = useContext(
+      FormFieldWrapperContext,
+    );
 
     const leadingTextWidth = propLeadingTextWidth || wrapperLeadingTextWidth;
 
@@ -53,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,
         })}