chore: rename decoupleFormElement to decoupleForm (#4341)

Fixes a missing commit for PR #4332
dnbexperience · Nov 25, 2024 · aa71556 · aa71556
1 parent ebad212
commit aa71556
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 24 deletions.
diff --git a/.../dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/info.mdx b/.../dnb-design-system-portal/src/docs/uilib/extensions/forms/Form/Handler/info.mdx
@@ -28,14 +28,14 @@ function MyForm() {
 
 ## Decoupling the form element
 
-For more flexibility, you can decouple the form element from the form context by using the `decoupleFormElement` property. It is recommended to use the `Form.Element` to wrap your rest of your form:
+For more flexibility, you can decouple the form element from the form context by using the `decoupleForm` property. It is recommended to use the `Form.Element` to wrap your rest of your form:
 
 ```jsx
 import { Form } from '@dnb/eufemia/extensions/forms'
 
 function MyApp() {
   return (
-    <Form.Handler decoupleFormElement>
+    <Form.Handler decoupleForm>
       <AppRelatedThings>
         <Form.Element>
           <Form.MainHeading>Heading</Form.MainHeading>

diff --git a/packages/dnb-eufemia/src/extensions/forms/DataContext/Context.ts b/packages/dnb-eufemia/src/extensions/forms/DataContext/Context.ts
@@ -182,7 +182,7 @@ export interface ContextState {
   required?: boolean
   submitState: Partial<EventStateObject>
   prerenderFieldProps?: boolean
-  decoupleFormElement?: boolean
+  decoupleForm?: boolean
   hasElementRef?: React.MutableRefObject<boolean>
   restHandlerProps?: Record<string, unknown>
   props: ProviderProps<unknown>

diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Handler/Handler.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Handler/Handler.tsx
@@ -16,11 +16,11 @@ export type Props = FormElementProps & {
   /**
    * Will decouple the form element from rendering
    */
-  decoupleFormElement?: boolean
+  decoupleForm?: boolean
 }
 
 type AllowedProviderContextProps = ProviderProps<unknown> &
-  Pick<Props, 'decoupleFormElement' | 'autoComplete' | 'disabled'> &
+  Pick<Props, 'decoupleForm' | 'autoComplete' | 'disabled'> &
   Pick<ContextState, 'restHandlerProps' | 'hasElementRef'>
 
 const allowedProviderContextProps: Array<
@@ -51,21 +51,21 @@ const allowedProviderContextProps: Array<
   'autoComplete',
   'disabled',
   'required',
-  'decoupleFormElement',
+  'decoupleForm',
   'restHandlerProps',
 ]
 
 export default function FormHandler<Data extends JsonObject>(
   props: ProviderProps<Data> & Omit<Props, keyof ProviderProps<Data>>
 ) {
-  const { decoupleFormElement, children } = props
+  const { decoupleForm, children } = props
 
   const hasElementRef = useRef(false)
   useEffect(() => {
-    if (decoupleFormElement && !hasElementRef.current) {
-      warn('Please include a Form.Element when using decoupleFormElement!')
+    if (decoupleForm && !hasElementRef.current) {
+      warn('Please include a Form.Element when using decoupleForm!')
     }
-  }, [decoupleFormElement])
+  }, [decoupleForm])
 
   const providerProps = {
     hasElementRef,
@@ -86,11 +86,7 @@ export default function FormHandler<Data extends JsonObject>(
 
   return (
     <DataContextProvider {...providerProps}>
-      {decoupleFormElement ? (
-        children
-      ) : (
-        <FormElement>{children}</FormElement>
-      )}
+      {decoupleForm ? children : <FormElement>{children}</FormElement>}
     </DataContextProvider>
   )
 }
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/Handler/__tests__/Handler.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Form/Handler/__tests__/Handler.test.tsx
@@ -1161,10 +1161,10 @@ describe('Form.Handler', () => {
     })
   })
 
-  describe('decoupleFormElement', () => {
-    it('should contain one form element', () => {
+  describe.only('decoupleForm', () => {
+    it.only('should contain one form element', () => {
       render(
-        <Form.Handler decoupleFormElement>
+        <Form.Handler>
           <Form.Element>content</Form.Element>
         </Form.Handler>
       )
@@ -1177,7 +1177,7 @@ describe('Form.Handler', () => {
       const onSubmit = jest.fn()
 
       render(
-        <Form.Handler decoupleFormElement onSubmit={onSubmit}>
+        <Form.Handler decoupleForm onSubmit={onSubmit}>
           <Form.Element>content</Form.Element>
         </Form.Handler>
       )
@@ -1189,7 +1189,7 @@ describe('Form.Handler', () => {
 
     it('should spread rest props to form element', () => {
       render(
-        <Form.Handler decoupleFormElement aria-label="Aria Label">
+        <Form.Handler decoupleForm aria-label="Aria Label">
           <Form.Element>content</Form.Element>
         </Form.Handler>
       )
@@ -1202,7 +1202,7 @@ describe('Form.Handler', () => {
 
     it('should overwrite rest props from handler', () => {
       render(
-        <Form.Handler decoupleFormElement aria-label="Aria Label">
+        <Form.Handler decoupleForm aria-label="Aria Label">
           <Form.Element aria-label="Overwrite">content</Form.Element>
         </Form.Handler>
       )
@@ -1215,7 +1215,7 @@ describe('Form.Handler', () => {
 
     it('should render form element inside wrapper', () => {
       render(
-        <Form.Handler decoupleFormElement>
+        <Form.Handler decoupleForm>
           <div className="wrapper">
             <Form.Element>content</Form.Element>
           </div>
@@ -1229,12 +1229,12 @@ describe('Form.Handler', () => {
     it('should warn when no form element is found', () => {
       const log = jest.spyOn(global.console, 'log').mockImplementation()
 
-      render(<Form.Handler decoupleFormElement>content</Form.Handler>)
+      render(<Form.Handler decoupleForm>content</Form.Handler>)
 
       expect(log).toHaveBeenCalledTimes(1)
       expect(log).toHaveBeenCalledWith(
         expect.any(String),
-        'Please include a Form.Element when using decoupleFormElement!'
+        'Please include a Form.Element when using decoupleForm!'
       )
 
       log.mockRestore()