feat(form-field): add readonly prop

adevinta · Jul 27, 2023 · 8bdbdfb · 8bdbdfb
1 parent 084fb76
commit 8bdbdfb
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 7 deletions.
diff --git a/packages/components/form-field/src/FormField.tsx b/packages/components/form-field/src/FormField.tsx
@@ -14,11 +14,21 @@ export interface FormFieldProps
    */
   asChild?: boolean
   disabled?: boolean
+  readOnly?: boolean
 }
 
 export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
   (
-    { className, disabled = false, name, state, isRequired = false, asChild = false, ...others },
+    {
+      className,
+      disabled = false,
+      readOnly = false,
+      name,
+      state,
+      isRequired = false,
+      asChild = false,
+      ...others
+    },
     ref
   ) => {
     const id = useId()
@@ -30,6 +40,7 @@ export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
         name={name}
         isRequired={isRequired}
         disabled={disabled}
+        readOnly={readOnly}
         state={state}
       >
         <Component

diff --git a/packages/components/form-field/src/FormFieldContext.tsx b/packages/components/form-field/src/FormFieldContext.tsx
@@ -21,6 +21,10 @@ export interface FormFieldContextState {
    * Disables the field and its associated input
    */
   disabled?: boolean
+  /**
+   * Marks the field and its associated input as read only
+   */
+  readOnly?: boolean
   /**
    * The validation state of the input.
    */

diff --git a/packages/components/form-field/src/FormFieldControl.tsx b/packages/components/form-field/src/FormFieldControl.tsx
@@ -5,7 +5,15 @@ import { FormFieldContext, FormFieldContextState } from './FormFieldContext'
 type State = Partial<
   Pick<
     FormFieldContextState,
-    'id' | 'name' | 'description' | 'labelId' | 'disabled' | 'state' | 'isInvalid' | 'isRequired'
+    | 'id'
+    | 'name'
+    | 'description'
+    | 'labelId'
+    | 'disabled'
+    | 'readOnly'
+    | 'state'
+    | 'isInvalid'
+    | 'isRequired'
   >
 >
 
@@ -14,10 +22,20 @@ export interface FormFieldControlProps {
 }
 
 export const useFormFieldControl = () => {
-  const { id, name, description, disabled, state, labelId, isInvalid, isRequired } =
+  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } =
     useContext(FormFieldContext) || {}
 
-  return { id, name, description, disabled, state, labelId, isInvalid, isRequired } as State
+  return {
+    id,
+    name,
+    description,
+    disabled,
+    readOnly,
+    state,
+    labelId,
+    isInvalid,
+    isRequired,
+  } as State
 }
 
 export const FormFieldControl = ({ children }: FormFieldControlProps) => {

diff --git a/packages/components/form-field/src/FormFieldLabel.tsx b/packages/components/form-field/src/FormFieldLabel.tsx
@@ -27,7 +27,8 @@ export const FormFieldLabel = forwardRef<HTMLLabelElement, FormFieldLabelProps>(
   ) => {
     const control = useFormField()
 
-    const { disabled, labelId, isRequired } = control
+    const { disabled, readOnly, labelId, isRequired } = control
+    const isInactive = disabled || readOnly
     const htmlFor = asChild ? undefined : htmlForProp || control.id
 
     return (
@@ -39,7 +40,7 @@ export const FormFieldLabel = forwardRef<HTMLLabelElement, FormFieldLabelProps>(
         className={cx(
           className,
           'flex items-center gap-sm',
-          disabled ? 'text-on-surface/dim-3 pointer-events-none' : undefined
+          isInactive ? 'text-on-surface/dim-3 pointer-events-none' : undefined
         )}
         asChild={asChild}
         {...others}

diff --git a/packages/components/form-field/src/FormFieldProvider.tsx b/packages/components/form-field/src/FormFieldProvider.tsx
@@ -4,14 +4,18 @@ import { ReactNode, useCallback, useMemo, useState } from 'react'
 import { FormFieldContext, FormFieldContextState } from './FormFieldContext'
 
 export interface FormFieldProviderProps
-  extends Pick<FormFieldContextState, 'id' | 'name' | 'disabled' | 'state' | 'isRequired'> {
+  extends Pick<
+    FormFieldContextState,
+    'id' | 'name' | 'disabled' | 'readOnly' | 'state' | 'isRequired'
+  > {
   children: ReactNode
 }
 
 export const FormFieldProvider = ({
   id,
   name,
   disabled = false,
+  readOnly = false,
   state,
   isRequired,
   children,
@@ -36,6 +40,7 @@ export const FormFieldProvider = ({
       labelId,
       name,
       disabled,
+      readOnly,
       state,
       isRequired,
       isInvalid,
@@ -48,6 +53,7 @@ export const FormFieldProvider = ({
     labelId,
     name,
     disabled,
+    readOnly,
     description,
     state,
     isRequired,