Added form property to Button JSX component (MetaMask#2712)

This will allow `Button` in the `Footer` be linked to a specific form so
that it also can submit the form.

```tsx
<Container>
  <Form name="foo">
    <Input />
  </Form>
  <Footer>
    <Button type="submit" form="foo" />
  </Footer>
</Container>
```

---------

Co-authored-by: Maarten Zuidhoorn <[email protected]>

packages/examples/packages/browserify-plugin/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "A3JhkncC8nBdzAEjqVa3RtSFRAGpaO+T0ABpCA0CKpM=",
+    "shasum": "/Q9cCxwaArV8k2VM4puQEsbni/bpNbcPEUi1s+XOL/U=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/browserify/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "I4QX3z8+PVtiPoI5o9VcKsb4rSI2kDC6DiS+ybY/ycA=",
+    "shasum": "+fLeOqcKGPU0z+W2NcYDN9RwCl1ft1avMUe5fG1SUX0=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snaps-sdk/src/jsx/components/form/Button.test.tsx

@@ -50,4 +50,17 @@ describe('Button', () => {
       key: null,
     });
   });
+
+  it('returns a button element with a form', () => {
+    const result = <Button form="foo">bar</Button>;
+
+    expect(result).toStrictEqual({
+      type: 'Button',
+      props: {
+        children: 'bar',
+        form: 'foo',
+      },
+      key: null,
+    });
+  });
 });

packages/snaps-sdk/src/jsx/components/form/Button.ts

@@ -16,13 +16,15 @@ import type { ImageElement } from '../Image';
  * @property variant - The variant of the button, i.e., `'primary'` or
  * `'destructive'`. Defaults to `'primary'`.
  * @property disabled - Whether the button is disabled. Defaults to `false`.
+ * @property form - The name of the form component to associate the button with.
  */
 export type ButtonProps = {
   children: SnapsChildren<StringElement | IconElement | ImageElement>;
   name?: string | undefined;
   type?: 'button' | 'submit' | undefined;
   variant?: 'primary' | 'destructive' | undefined;
   disabled?: boolean | undefined;
+  form?: string | undefined;
 };
 
 const TYPE = 'Button';

packages/snaps-sdk/src/jsx/validation.test.tsx

@@ -169,6 +169,7 @@ describe('ButtonStruct', () => {
     <Button>
       <Image src="<svg></svg>" />
     </Button>,
+    <Button form="foo">bar</Button>,
   ])('validates a button element', (value) => {
     expect(is(value, ButtonStruct)).toBe(true);
   });

packages/snaps-sdk/src/jsx/validation.ts

@@ -203,6 +203,7 @@ export const ButtonStruct: Describe<ButtonElement> = element('Button', {
   type: optional(nullUnion([literal('button'), literal('submit')])),
   variant: optional(nullUnion([literal('primary'), literal('destructive')])),
   disabled: optional(boolean()),
+  form: optional(string()),
 });
 
 /**