@atlaskit/form 14.2.4 → 14.2.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/form
 
+## 14.2.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 14.2.4
 
 ### Patch Changes
@@ -51,6 +57,40 @@
   not a function as children, the HTML `form` element will be implicitly rendered with props passed
   down from the ADS form component.
 
+#### New streamlined form
+
+The majority of uses of our form component look like the following:
+
+```tsx
+<Form onSubmit={(data) => console.log(data)}>
+	{({ formProps }) => (
+		<form {...formProps} name="form" id="form" data-attribute="abc">
+			{/* form contents */}
+		</form>
+	)}
+</Form>
+```
+
+We've provided a way to simplify these use cases. You can move the attributes on the HTML `<form>`
+element up to the form component. If they aren't a top-level prop, you can use the `formProps` prop
+on the form component. All of the contents will be wrapped within an HTML `<form>` element that
+includes all necessary props, including those provided on the form component.
+
+```tsx
+<Form
+	onSubmit={(data) => console.log(data)}
+	name="form"
+	id="form"
+	formProps={{
+		'data-attribute': 'abc',
+	}}
+>
+	{/* form contents */}
+</Form>
+```
+
+The original implementation still exists and works as it did previously.
+
 ### Patch Changes
 
 - Updated dependencies

package/codemods/__tests__/not-yet-migrate-to-simplified-form.test.tsx

@@ -200,24 +200,50 @@ const formElement = (
 import React from 'react';
 import Form from '@atlaskit/form';
 
+import { fg } from '@atlaskit/platform-feature-flags';
+
 const FormComponent1 = () => (
-  <Form onSubmit={() => {}}><input /></Form>
+  fg('platform-design_system_team-form_conversion') ? <Form onSubmit={() => {}}><input /></Form> : <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps}>
+        <input />
+      </form>
+    )}
+  </Form>
 );
 
 const FormComponent2 = () => (
   <>
-    <Form onSubmit={() => {}}><input /></Form>
+    {fg('platform-design_system_team-form_conversion') ? <Form onSubmit={() => {}}><input /></Form> : <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps}>
+          <input />
+        </form>
+      )}
+    </Form>}
   </>
 );
 
 class FormComponent3 extends React.Component {
   render() {
-    return (<Form onSubmit={() => {}}><input /></Form>);
+    return fg('platform-design_system_team-form_conversion') ? <Form onSubmit={() => {}}><input /></Form> : <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps}>
+          <input />
+        </form>
+      )}
+    </Form>;
   }
 }
 
 const formElement = (
-  <Form onSubmit={() => {}}><input /></Form>
+  fg('platform-design_system_team-form_conversion') ? <Form onSubmit={() => {}}><input /></Form> : <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps}>
+        <input />
+      </form>
+    )}
+  </Form>
 );
       `,
 		'should convert from function with no props on form',
@@ -280,24 +306,50 @@ const formElement = (
 import React from 'react';
 import Form from '@atlaskit/form';
 
+import { fg } from '@atlaskit/platform-feature-flags';
+
 const FormComponent1 = () => (
-  <Form onSubmit={() => {}}><input /></Form>
+  fg('platform-design_system_team-form_conversion') ? <Form onSubmit={() => {}}><input /></Form> : <Form onSubmit={() => {}}>
+    {({ formProps: renamed }) => (
+      <form {...renamed}>
+        <input />
+      </form>
+    )}
+  </Form>
 );
 
 const FormComponent2 = () => (
   <>
-    <Form onSubmit={() => {}}><input /></Form>
+    {fg('platform-design_system_team-form_conversion') ? <Form onSubmit={() => {}}><input /></Form> : <Form onSubmit={() => {}}>
+      {({ formProps: renamed }) => (
+        <form {...renamed}>
+          <input />
+        </form>
+      )}
+    </Form>}
   </>
 );
 
 class FormComponent3 extends React.Component {
   render() {
-    return (<Form onSubmit={() => {}}><input /></Form>);
+    return fg('platform-design_system_team-form_conversion') ? <Form onSubmit={() => {}}><input /></Form> : <Form onSubmit={() => {}}>
+      {({ formProps: renamed }) => (
+        <form {...renamed}>
+          <input />
+        </form>
+      )}
+    </Form>;
   }
 }
 
 const formElement = (
-  <Form onSubmit={() => {}}><input /></Form>
+  fg('platform-design_system_team-form_conversion') ? <Form onSubmit={() => {}}><input /></Form> : <Form onSubmit={() => {}}>
+    {({ formProps: renamed }) => (
+      <form {...renamed}>
+        <input />
+      </form>
+    )}
+  </Form>
 );
       `,
 		'should convert from function with no props on form',
@@ -360,45 +412,193 @@ const formElement = (
 import React from 'react';
 import Form from '@atlaskit/form';
 
+import { fg } from '@atlaskit/platform-feature-flags';
+
 const FormComponent1 = () => (
-  <Form
+  fg('platform-design_system_team-form_conversion') ? <Form
     onSubmit={() => {}}
     formProps={{
       foo: "bar"
-    }}><input /></Form>
+    }}><input /></Form> : <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps} foo="bar">
+        <input />
+      </form>
+    )}
+  </Form>
 );
 
 const FormComponent2 = () => (
   <>
-    <Form
+    {fg('platform-design_system_team-form_conversion') ? <Form
       onSubmit={() => {}}
       formProps={{
         foo: "bar"
-      }}><input /></Form>
+      }}><input /></Form> : <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} foo="bar">
+          <input />
+        </form>
+      )}
+    </Form>}
   </>
 );
 
 class FormComponent3 extends React.Component {
   render() {
-    return (
-      <Form
+    return fg('platform-design_system_team-form_conversion') ? <Form
+      onSubmit={() => {}}
+      formProps={{
+        foo: "bar"
+      }}><input /></Form> : <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} foo="bar">
+          <input />
+        </form>
+      )}
+    </Form>;
+  }
+}
+
+const formElement = (
+  fg('platform-design_system_team-form_conversion') ? <Form
+    onSubmit={() => {}}
+    formProps={{
+      foo: "bar"
+    }}><input /></Form> : <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps} foo="bar">
+        <input />
+      </form>
+    )}
+  </Form>
+);
+      `,
+		'should convert from function with single prop on form',
+	);
+
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+import React from 'react';
+import Form from '@atlaskit/form';
+
+const FormComponent1 = () => shouldRender && (
+  <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps} foo="bar">
+        <input />
+      </form>
+    )}
+  </Form>
+);
+
+const FormComponent2 = () => shouldRender && (
+  <>
+    <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} foo="bar">
+          <input />
+        </form>
+      )}
+    </Form>
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return shouldRender && (
+      <Form onSubmit={() => {}}>
+        {({ formProps }) => (
+          <form {...formProps} foo="bar">
+            <input />
+          </form>
+        )}
+      </Form>
+    );
+  }
+}
+
+const formElement = shouldRender && (
+  <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps} foo="bar">
+        <input />
+      </form>
+    )}
+  </Form>
+);
+      `,
+		`
+import React from 'react';
+import Form from '@atlaskit/form';
+
+import { fg } from '@atlaskit/platform-feature-flags';
+
+const FormComponent1 = () => shouldRender && (
+  (fg('platform-design_system_team-form_conversion') ? <Form
+    onSubmit={() => {}}
+    formProps={{
+      foo: "bar"
+    }}><input /></Form> : <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps} foo="bar">
+        <input />
+      </form>
+    )}
+  </Form>)
+);
+
+const FormComponent2 = () => shouldRender && (
+  <>
+    {fg('platform-design_system_team-form_conversion') ? <Form
+      onSubmit={() => {}}
+      formProps={{
+        foo: "bar"
+      }}><input /></Form> : <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} foo="bar">
+          <input />
+        </form>
+      )}
+    </Form>}
+  </>
+);
+
+class FormComponent3 extends React.Component {
+  render() {
+    return shouldRender && (
+      (fg('platform-design_system_team-form_conversion') ? <Form
         onSubmit={() => {}}
         formProps={{
           foo: "bar"
-        }}><input /></Form>
+        }}><input /></Form> : <Form onSubmit={() => {}}>
+        {({ formProps }) => (
+          <form {...formProps} foo="bar">
+            <input />
+          </form>
+        )}
+      </Form>)
     );
   }
 }
 
-const formElement = (
-  <Form
+const formElement = shouldRender && (
+  (fg('platform-design_system_team-form_conversion') ? <Form
     onSubmit={() => {}}
     formProps={{
       foo: "bar"
-    }}><input /></Form>
+    }}><input /></Form> : <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps} foo="bar">
+        <input />
+      </form>
+    )}
+  </Form>)
 );
       `,
-		'should convert from function with single prop on form',
+		'should convert from function with single prop on form after conditional',
 	);
 
 	describe('Migrate existing props', () => {
@@ -459,24 +659,50 @@ const formElement = (
   import React from 'react';
   import Form from '@atlaskit/form';
 
+  import { fg } from '@atlaskit/platform-feature-flags';
+
   const FormComponent1 = () => (
-    <Form onSubmit={() => {}} noValidate name="bar" id="foo" autocomplete="off"><input /></Form>
+    fg('platform-design_system_team-form_conversion') ? <Form onSubmit={() => {}} autocomplete="off" id="foo" name="bar" noValidate><input /></Form> : <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} autocomplete="off" id="foo" name="bar" noValidate>
+          <input />
+        </form>
+      )}
+    </Form>
   );
 
   const FormComponent2 = () => (
     <>
-      <Form onSubmit={() => {}} noValidate name="bar" id="foo" autocomplete="off"><input /></Form>
+      {fg('platform-design_system_team-form_conversion') ? <Form onSubmit={() => {}} autocomplete="off" id="foo" name="bar" noValidate><input /></Form> : <Form onSubmit={() => {}}>
+        {({ formProps }) => (
+          <form {...formProps} autocomplete="off" id="foo" name="bar" noValidate>
+            <input />
+          </form>
+        )}
+      </Form>}
     </>
   );
 
   class FormComponent3 extends React.Component {
     render() {
-      return (<Form onSubmit={() => {}} noValidate name="bar" id="foo" autocomplete="off"><input /></Form>);
+      return fg('platform-design_system_team-form_conversion') ? <Form onSubmit={() => {}} autocomplete="off" id="foo" name="bar" noValidate><input /></Form> : <Form onSubmit={() => {}}>
+        {({ formProps }) => (
+          <form {...formProps} autocomplete="off" id="foo" name="bar" noValidate>
+            <input />
+          </form>
+        )}
+      </Form>;
     }
   }
 
   const formElement = (
-    <Form onSubmit={() => {}} noValidate name="bar" id="foo" autocomplete="off"><input /></Form>
+    fg('platform-design_system_team-form_conversion') ? <Form onSubmit={() => {}} autocomplete="off" id="foo" name="bar" noValidate><input /></Form> : <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} autocomplete="off" id="foo" name="bar" noValidate>
+          <input />
+        </form>
+      )}
+    </Form>
   );
 `,
 			'should migrate existing props on `form` into their respective props on `Form`',
@@ -539,24 +765,50 @@ const formElement = (
   import React from 'react';
   import Form from '@atlaskit/form';
 
+  import { fg } from '@atlaskit/platform-feature-flags';
+
   const FormComponent1 = () => (
-    <Form onSubmit={() => {}} labelId="bar" label="foo"><input /></Form>
+    fg('platform-design_system_team-form_conversion') ? <Form onSubmit={() => {}} label="foo" labelId="bar"><input /></Form> : <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} aria-label="foo" aria-labelledby="bar">
+          <input />
+        </form>
+      )}
+    </Form>
   );
 
   const FormComponent2 = () => (
     <>
-      <Form onSubmit={() => {}} labelId="bar" label="foo"><input /></Form>
+      {fg('platform-design_system_team-form_conversion') ? <Form onSubmit={() => {}} label="foo" labelId="bar"><input /></Form> : <Form onSubmit={() => {}}>
+        {({ formProps }) => (
+          <form {...formProps} aria-label="foo" aria-labelledby="bar">
+            <input />
+          </form>
+        )}
+      </Form>}
     </>
   );
 
   class FormComponent3 extends React.Component {
     render() {
-      return (<Form onSubmit={() => {}} labelId="bar" label="foo"><input /></Form>);
+      return fg('platform-design_system_team-form_conversion') ? <Form onSubmit={() => {}} label="foo" labelId="bar"><input /></Form> : <Form onSubmit={() => {}}>
+        {({ formProps }) => (
+          <form {...formProps} aria-label="foo" aria-labelledby="bar">
+            <input />
+          </form>
+        )}
+      </Form>;
     }
   }
 
   const formElement = (
-    <Form onSubmit={() => {}} labelId="bar" label="foo"><input /></Form>
+    fg('platform-design_system_team-form_conversion') ? <Form onSubmit={() => {}} label="foo" labelId="bar"><input /></Form> : <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} aria-label="foo" aria-labelledby="bar">
+          <input />
+        </form>
+      )}
+    </Form>
   );
         `,
 			'should migrate existing props on `form` into different names',
@@ -619,58 +871,82 @@ const formElement = (
   import React from 'react';
   import Form from '@atlaskit/form';
 
+  import { fg } from '@atlaskit/platform-feature-flags';
+
   const FormComponent1 = () => (
-    <Form
+    fg('platform-design_system_team-form_conversion') ? <Form
       onSubmit={() => {}}
-      noValidate
-      name="bar"
-      id="foo"
-      autocomplete="off"
       formProps={{
         quu: "qux"
-      }}><input /></Form>
+      }}
+      autocomplete="off"
+      id="foo"
+      name="bar"
+      noValidate><input /></Form> : <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} autocomplete="off" id="foo" name="bar" noValidate quu="qux">
+          <input />
+        </form>
+      )}
+    </Form>
   );
 
   const FormComponent2 = () => (
     <>
-      <Form
+      {fg('platform-design_system_team-form_conversion') ? <Form
         onSubmit={() => {}}
-        noValidate
-        name="bar"
-        id="foo"
-        autocomplete="off"
         formProps={{
           quu: "qux"
-        }}><input /></Form>
+        }}
+        autocomplete="off"
+        id="foo"
+        name="bar"
+        noValidate><input /></Form> : <Form onSubmit={() => {}}>
+        {({ formProps }) => (
+          <form {...formProps} autocomplete="off" id="foo" name="bar" noValidate quu="qux">
+            <input />
+          </form>
+        )}
+      </Form>}
     </>
   );
 
   class FormComponent3 extends React.Component {
     render() {
-      return (
-        <Form
-          onSubmit={() => {}}
-          noValidate
-          name="bar"
-          id="foo"
-          autocomplete="off"
-          formProps={{
-            quu: "qux"
-          }}><input /></Form>
-      );
+      return fg('platform-design_system_team-form_conversion') ? <Form
+        onSubmit={() => {}}
+        formProps={{
+          quu: "qux"
+        }}
+        autocomplete="off"
+        id="foo"
+        name="bar"
+        noValidate><input /></Form> : <Form onSubmit={() => {}}>
+        {({ formProps }) => (
+          <form {...formProps} autocomplete="off" id="foo" name="bar" noValidate quu="qux">
+            <input />
+          </form>
+        )}
+      </Form>;
     }
   }
 
   const formElement = (
-    <Form
+    fg('platform-design_system_team-form_conversion') ? <Form
       onSubmit={() => {}}
-      noValidate
-      name="bar"
-      id="foo"
-      autocomplete="off"
       formProps={{
         quu: "qux"
-      }}><input /></Form>
+      }}
+      autocomplete="off"
+      id="foo"
+      name="bar"
+      noValidate><input /></Form> : <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} autocomplete="off" id="foo" name="bar" noValidate quu="qux">
+          <input />
+        </form>
+      )}
+    </Form>
   );
         `,
 			'should migrate existing props on `form` into their respective props on `Form` and also use `formProps` if needed',
@@ -734,46 +1010,70 @@ const formElement = (
 import React from 'react';
 import Form from '@atlaskit/form';
 
+import { fg } from '@atlaskit/platform-feature-flags';
+
 const FormComponent1 = () => (
-  <Form
+  fg('platform-design_system_team-form_conversion') ? <Form
     onSubmit={() => {}}
     formProps={{
       foo: "bar",
       baz: "qux"
-    }}><input /></Form>
+    }}><input /></Form> : <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps} foo="bar" baz="qux">
+        <input />
+      </form>
+    )}
+  </Form>
 );
 
 const FormComponent2 = () => (
   <>
-    <Form
+    {fg('platform-design_system_team-form_conversion') ? <Form
       onSubmit={() => {}}
       formProps={{
         foo: "bar",
         baz: "qux"
-      }}><input /></Form>
+      }}><input /></Form> : <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} foo="bar" baz="qux">
+          <input />
+        </form>
+      )}
+    </Form>}
   </>
 );
 
 class FormComponent3 extends React.Component {
   render() {
-    return (
-      <Form
-        onSubmit={() => {}}
-        formProps={{
-          foo: "bar",
-          baz: "qux"
-        }}><input /></Form>
-    );
+    return fg('platform-design_system_team-form_conversion') ? <Form
+      onSubmit={() => {}}
+      formProps={{
+        foo: "bar",
+        baz: "qux"
+      }}><input /></Form> : <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} foo="bar" baz="qux">
+          <input />
+        </form>
+      )}
+    </Form>;
   }
 }
 
 const formElement = (
-  <Form
+  fg('platform-design_system_team-form_conversion') ? <Form
     onSubmit={() => {}}
     formProps={{
       foo: "bar",
       baz: "qux"
-    }}><input /></Form>
+    }}><input /></Form> : <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps} foo="bar" baz="qux">
+        <input />
+      </form>
+    )}
+  </Form>
 );
       `,
 		'should convert from function with multiple props on form',
@@ -835,46 +1135,70 @@ const formElement = (
 import React from 'react';
 import Form from '@atlaskit/form';
 
+import { fg } from '@atlaskit/platform-feature-flags';
+
 const FormComponent1 = () => (
-  <Form
+  fg('platform-design_system_team-form_conversion') ? <Form
     onSubmit={() => {}}
     formProps={{
       foo: 'bar',
       baz: { qux: 'qux' }
-    }}><input /></Form>
+    }}><input /></Form> : <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps} foo={'bar'} baz={{ qux: 'qux' }}>
+        <input />
+      </form>
+    )}
+  </Form>
 );
 
 const FormComponent2 = () => (
   <>
-    <Form
+    {fg('platform-design_system_team-form_conversion') ? <Form
       onSubmit={() => {}}
       formProps={{
         foo: 'bar',
         baz: { qux: 'qux' }
-      }}><input /></Form>
+      }}><input /></Form> : <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} foo={'bar'} baz={{ qux: 'qux' }}>
+          <input />
+        </form>
+      )}
+    </Form>}
   </>
 );
 
 class FormComponent3 extends React.Component {
   render() {
-    return (
-      <Form
-        onSubmit={() => {}}
-        formProps={{
-          foo: 'bar',
-          baz: { qux: 'qux' }
-        }}><input /></Form>
-    );
+    return fg('platform-design_system_team-form_conversion') ? <Form
+      onSubmit={() => {}}
+      formProps={{
+        foo: 'bar',
+        baz: { qux: 'qux' }
+      }}><input /></Form> : <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} foo={'bar'} baz={{ qux: 'qux' }}>
+          <input />
+        </form>
+      )}
+    </Form>;
   }
 }
 
 const formElement = (
-  <Form
+  fg('platform-design_system_team-form_conversion') ? <Form
     onSubmit={() => {}}
     formProps={{
       foo: 'bar',
       baz: { qux: 'qux' }
-    }}><input /></Form>
+    }}><input /></Form> : <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps} foo={'bar'} baz={{ qux: 'qux' }}>
+        <input />
+      </form>
+    )}
+  </Form>
 );
       `,
 		'should convert from function with multiple expression container props on form',
@@ -936,42 +1260,66 @@ const formElement = (
 import React from 'react';
 import Form from '@atlaskit/form';
 
+import { fg } from '@atlaskit/platform-feature-flags';
+
 const FormComponent1 = () => (
-  <Form
+  fg('platform-design_system_team-form_conversion') ? <Form
     onSubmit={() => {}}
     formProps={{
       foo: true
-    }}><input /></Form>
+    }}><input /></Form> : <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps} foo>
+        <input />
+      </form>
+    )}
+  </Form>
 );
 
 const FormComponent2 = () => (
   <>
-    <Form
+    {fg('platform-design_system_team-form_conversion') ? <Form
       onSubmit={() => {}}
       formProps={{
         foo: true
-      }}><input /></Form>
+      }}><input /></Form> : <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} foo>
+          <input />
+        </form>
+      )}
+    </Form>}
   </>
 );
 
 class FormComponent3 extends React.Component {
   render() {
-    return (
-      <Form
-        onSubmit={() => {}}
-        formProps={{
-          foo: true
-        }}><input /></Form>
-    );
+    return fg('platform-design_system_team-form_conversion') ? <Form
+      onSubmit={() => {}}
+      formProps={{
+        foo: true
+      }}><input /></Form> : <Form onSubmit={() => {}}>
+      {({ formProps }) => (
+        <form {...formProps} foo>
+          <input />
+        </form>
+      )}
+    </Form>;
   }
 }
 
 const formElement = (
-  <Form
+  fg('platform-design_system_team-form_conversion') ? <Form
     onSubmit={() => {}}
     formProps={{
       foo: true
-    }}><input /></Form>
+    }}><input /></Form> : <Form onSubmit={() => {}}>
+    {({ formProps }) => (
+      <form {...formProps} foo>
+        <input />
+      </form>
+    )}
+  </Form>
 );
       `,
 		'should convert from function with boolean props on form',

package/codemods/not-yet-migrate-to-simplified-form.tsx

@@ -1,3 +1,6 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
 import {
 	type API,
 	type Collection,
@@ -56,19 +59,42 @@ function hasImportDeclaration(
 	return getImportDeclarationCollection(j, collection, importPath).length > 0;
 }
 
-function addJSXAttributeToJSXElement(
-	j: JSCodeshift,
-	jsxElementPath: any,
-	attribute: JSXAttribute,
-	position: number = 0,
-): void {
-	if (!jsxElementPath.node.openingElement.attributes) {
-		jsxElementPath.node.openingElement.attributes = [];
+// Currently unused but saving for field conversion
+const generateFeatureFlag = (filePath: string): string => {
+	if (!filePath) {
+		return 'platform-design_system_team-form--unknown';
 	}
-	jsxElementPath.node.openingElement.attributes.splice(position, 0, attribute);
-}
 
-const convertToSimpleForm = (j: JSCodeshift, collection: Collection<any>) => {
+	let currentDir = path.dirname(filePath);
+
+	while (currentDir !== path.dirname(currentDir)) {
+		const packageJsonPath = path.join(currentDir, 'package.json');
+		if (fs.existsSync(packageJsonPath)) {
+			try {
+				const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+				const teamName = packageJson.atlassian?.team;
+				if (teamName) {
+					// Fit switcheroo requirements
+					const suffix = teamName
+						.toLowerCase()
+						.replace(/\s+/g, '-')
+						.replace(/[^a-z0-9-]/g, '');
+
+					const flag = `platform-design_system_team-form--${suffix}`;
+					return flag.length > 50 ? flag.substring(0, 50) : flag;
+				}
+			} catch (e) {
+				// Continue searching if JSON parsing fails
+			}
+		}
+		currentDir = path.dirname(currentDir);
+	}
+
+	// Fallback if no team found
+	return 'platform-design_system_team-form--unknown';
+};
+
+const convertToSimpleForm = (j: JSCodeshift, collection: Collection<any>, featureFlag: string) => {
 	const importDeclarationCollection = getImportDeclarationCollection(j, collection, importPath);
 	const defaultImport = getImportDefaultSpecifierCollection(j, importDeclarationCollection);
 	const defaultImportName = getImportDefaultSpecifierName(defaultImport);
@@ -78,6 +104,8 @@ const convertToSimpleForm = (j: JSCodeshift, collection: Collection<any>) => {
 		return;
 	}
 
+	let transformationsMade = false;
+
 	collection.findJSXElements(defaultImportName).forEach((jsxElementPath) => {
 		const node = jsxElementPath.node;
 		// If no children, exit early
@@ -85,7 +113,7 @@ const convertToSimpleForm = (j: JSCodeshift, collection: Collection<any>) => {
 			return;
 		}
 
-		// if component but child is not a function, exit early
+		// if component but child is not an expression, exit early
 		const children = node.children.filter((child) => child.type === 'JSXExpressionContainer');
 		if (children.length === 0 || children.length > 1) {
 			return;
@@ -101,8 +129,10 @@ const convertToSimpleForm = (j: JSCodeshift, collection: Collection<any>) => {
 		}
 
 		// if function child but more than just `formProps`, exit early
-		const args = childFunction.expression.params
-			.filter((arg) => arg.type === 'ObjectPattern' && 'properties' in arg)
+		const objectPatternArgs = childFunction.expression.params.filter(
+			(arg) => arg.type === 'ObjectPattern' && 'properties' in arg,
+		);
+		const args = objectPatternArgs
 			.flatMap((arg) => arg.properties)
 			.filter((property) => property.type === 'ObjectProperty');
 		if (
@@ -197,36 +227,81 @@ const convertToSimpleForm = (j: JSCodeshift, collection: Collection<any>) => {
 			return;
 		}
 
+		// Clone the original Form element for the fallback
+		const originalForm = j.jsxElement(
+			j.jsxOpeningElement(j.jsxIdentifier(defaultImportName), [
+				...(node.openingElement.attributes || []),
+			]),
+			j.jsxClosingElement(j.jsxIdentifier(defaultImportName)),
+			[...node.children],
+		);
+
+		// Create the simplified Form element
+		const simplifiedForm = j.jsxElement(
+			j.jsxOpeningElement(j.jsxIdentifier(defaultImportName), [
+				...(node.openingElement.attributes || []),
+			]),
+			j.jsxClosingElement(j.jsxIdentifier(defaultImportName)),
+			[],
+		);
+
+		// Add formProps attribute if needed
 		if (nonFormPropsAttributes.length !== 0) {
-			// make new attribute for parent `Form` default import called `formProps` and set new attribute to new object
 			const formPropsAttr = j.jsxAttribute(
 				j.jsxIdentifier('formProps'),
 				j.jsxExpressionContainer(j.objectExpression(nonFormPropsAttributes.filter(Boolean))),
 			);
-			addJSXAttributeToJSXElement(j, jsxElementPath, formPropsAttr, 1);
+			simplifiedForm.openingElement.attributes = simplifiedForm.openingElement.attributes || [];
+			simplifiedForm.openingElement.attributes.push(formPropsAttr);
 		}
+
+		// Add existing form attributes to simplified form
 		existingFormPropsAttributes.forEach((attr) => {
-			// add existing props to new `Form`
 			const fromName = attr.name.name;
 			if (typeof fromName !== 'string') {
 				return;
 			}
 			const toName = EXISTING_FORM_ATTRIBUTES[fromName];
-			attr.name.name = toName;
-			addJSXAttributeToJSXElement(j, jsxElementPath, attr, 1);
+			const newAttr = j.jsxAttribute(j.jsxIdentifier(toName), attr.value);
+			simplifiedForm.openingElement.attributes = simplifiedForm.openingElement.attributes || [];
+			simplifiedForm.openingElement.attributes.push(newAttr);
 		});
 
-		// replace functional child with inner (all children of HTML `form`)
+		// Add the children from the HTML form to simplified form
 		const htmlFormChildren = htmlForm.children?.filter((child) => child.type !== 'JSXText');
-		if (!htmlFormChildren) {
-			return;
+		if (htmlFormChildren) {
+			simplifiedForm.children = [...htmlFormChildren];
 		}
 
-		node.children.splice(0);
-		node.children.splice(0, 0, ...htmlFormChildren);
+		// Create the ternary expression: fg('flag') ? simplifiedForm : originalForm
+		const ternaryExpression = j.conditionalExpression(
+			j.callExpression(j.identifier('fg'), [j.literal(featureFlag)]),
+			simplifiedForm,
+			originalForm,
+		);
+
+		const isInsideJSXContext = (path: any): boolean => {
+			const parent = path.parent;
+			if (!parent) {
+				return false;
+			}
+
+			const parentType = parent.node?.type;
+			return parentType === 'JSXElement' || parentType === 'JSXFragment';
+		};
+
+		// Replace the original Form with the ternary expression
+		if (isInsideJSXContext(jsxElementPath)) {
+			// Inside JSX - wrap in JSX expression container
+			j(jsxElementPath).replaceWith(j.jsxExpressionContainer(ternaryExpression));
+		} else {
+			j(jsxElementPath).replaceWith(ternaryExpression);
+		}
+
+		transformationsMade = true;
 	});
 
-	return;
+	return transformationsMade;
 };
 
 export default function transformer(fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) {
@@ -244,8 +319,34 @@ export default function transformer(fileInfo: FileInfo, { jscodeshift: j }: API,
 		return source;
 	}
 
+	// Leaving this here so that we don't get "unused" error, because I want to
+	// port this logic to the field codemod later
+	generateFeatureFlag(path);
+	const featureFlag = 'platform-design_system_team-form_conversion';
+
 	// Convert form if possible
-	convertToSimpleForm(j, collection);
+	const transformationsMade = convertToSimpleForm(j, collection, featureFlag);
+
+	// Only add import if transformations were made
+	if (transformationsMade) {
+		// Add import for fg function if not already present
+		const fgImportPath = '@atlaskit/platform-feature-flags';
+		if (!hasImportDeclaration(j, collection, fgImportPath)) {
+			const fgImport = j.importDeclaration(
+				[j.importSpecifier(j.identifier('fg'))],
+				j.literal(fgImportPath),
+			);
+
+			// Find the last import declaration and insert after it
+			const imports = collection.find(j.ImportDeclaration);
+			if (imports.length > 0) {
+				imports.at(-1).insertAfter(fgImport);
+			} else {
+				// If no imports, add at the beginning
+				collection.find(j.Program).get('body', 0).insertBefore(fgImport);
+			}
+		}
+	}
 
 	return collection.toSource(options.printOptions || { quote: 'single' });
 }

package/dist/types/form.d.ts

@@ -55,8 +55,10 @@ export interface FormProps<FormValues> {
      */
     autocomplete?: 'off' | 'on';
     /**
-     *  The contents rendered inside of the form. This is a function where the props will be passed from the form. The function props you can access are `dirty`, `submitting` and `disabled`.
-     *  You can read more about these props in [react-final form documentation](https://final-form.org/docs/final-form/types/FormState).
+     * The contents rendered inside of the form. This is a function where the props will be passed from the form. The function props you can access are `dirty`, `submitting` and `disabled`.
+     * You can read more about these props in [react-final form documentation](https://final-form.org/docs/final-form/types/FormState).
+     *
+     * If you are only spreading `formProps` onto the HTML `<form>` element and not using any of the other props (like `submitting`, etc.), `children` can be plain JSX. All of the children will be wrapped within an HTML `<form>` element that includes all necessary props, including those provided on the form component.
      */
     children: ((args: FormChildrenArgs<FormValues>) => ReactNode) | (() => void) | ReactNode;
     /**

package/dist/types-ts4.5/form.d.ts

@@ -55,8 +55,10 @@ export interface FormProps<FormValues> {
      */
     autocomplete?: 'off' | 'on';
     /**
-     *  The contents rendered inside of the form. This is a function where the props will be passed from the form. The function props you can access are `dirty`, `submitting` and `disabled`.
-     *  You can read more about these props in [react-final form documentation](https://final-form.org/docs/final-form/types/FormState).
+     * The contents rendered inside of the form. This is a function where the props will be passed from the form. The function props you can access are `dirty`, `submitting` and `disabled`.
+     * You can read more about these props in [react-final form documentation](https://final-form.org/docs/final-form/types/FormState).
+     *
+     * If you are only spreading `formProps` onto the HTML `<form>` element and not using any of the other props (like `submitting`, etc.), `children` can be plain JSX. All of the children will be wrapped within an HTML `<form>` element that includes all necessary props, including those provided on the form component.
      */
     children: ((args: FormChildrenArgs<FormValues>) => ReactNode) | (() => void) | ReactNode;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/form",
-	"version": "14.2.4",
+	"version": "14.2.5",
 	"description": "A form allows users to input information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -26,12 +26,12 @@
 	},
 	"dependencies": {
 		"@atlaskit/css": "^0.15.0",
-		"@atlaskit/ds-lib": "^5.1.0",
+		"@atlaskit/ds-lib": "^5.2.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^16.0.0",
-		"@atlaskit/tokens": "^7.0.0",
+		"@atlaskit/primitives": "^16.1.0",
+		"@atlaskit/tokens": "^8.0.0",
 		"@babel/runtime": "^7.0.0",
 		"final-form": "^4.20.3",
 		"final-form-focus": "^1.1.2",
@@ -45,23 +45,23 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/banner": "^14.0.0",
-		"@atlaskit/button": "^23.5.0",
+		"@atlaskit/button": "^23.6.0",
 		"@atlaskit/checkbox": "^17.1.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/datetime-picker": "^17.1.0",
 		"@atlaskit/docs": "^11.2.0",
 		"@atlaskit/link": "^3.2.0",
-		"@atlaskit/lozenge": "^13.0.0",
-		"@atlaskit/modal-dialog": "^14.5.0",
+		"@atlaskit/lozenge": "^13.1.0",
+		"@atlaskit/modal-dialog": "^14.6.0",
 		"@atlaskit/radio": "^8.3.0",
 		"@atlaskit/range": "^9.2.0",
-		"@atlaskit/section-message": "^8.7.0",
+		"@atlaskit/section-message": "^8.9.0",
 		"@atlaskit/select": "^21.3.0",
 		"@atlaskit/textarea": "^8.0.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/toggle": "^15.1.0",
-		"@atlassian/feature-flags-test-utils": "^0.3.0",
-		"@atlassian/ssr-tests": "^0.3.0",
+		"@atlassian/feature-flags-test-utils": "^1.0.0",
+		"@atlassian/ssr-tests": "workspace:^",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/react-hooks": "^8.0.1",
 		"@testing-library/user-event": "^14.4.3",