Button component now also allows Images and Icons (#2641)

fixes #2639

This PR introduces ability for Button JSX Snap component to have an
image or an icon as a pressable element.

packages/examples/packages/bip32/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "4zgPgkn2ZLn4uD4GHZ1QSIC5Pdgh0WwI+FAVtiExJPg=",
+    "shasum": "MbHxjakCrWiyX0tsCZoQRcFcgrCczQFEK5/wNQDdnVQ=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/bip44/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "Pv3qQ6of+cBw8JeVZcO58YWHqY5FnzU87H1H+gEE+kc=",
+    "shasum": "15V07QO9rPDxPn3vM4QskfsKQGGmzjGflj8AD7gCgnc=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "sC/3Z2MXiF336XZ/bFRfS7eE+nX/7teuW9PhA3deCPo=",
+    "shasum": "6Yw5uiOs0N8thZeEJf+tKmJ8GqRxQsoXlDJWF3Ft35k=",
     "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": "4nvcNAdMjH7MT0jAQHBI6X2LTEBXRImuCBCIF/Oh/9Y=",
+    "shasum": "uwos2jlig0JLSfBnuF2gj9bjhPlKv/zq5Ik3uTUJs3E=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/client-status/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "gHYWcYRMvSbB2Q+bk1JyWgQbg26+9WFa9nc1vj2eTUU=",
+    "shasum": "w5mkryEZrWmUSvZh9WJfKewEkSboNJqxIKMnzLjs5Tc=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/cronjobs/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "w5/SzBe4VbTbid7bHZeCZdxKeOCeSf5w9kNEL5uwVbY=",
+    "shasum": "h1O3m93jIDMy1cP6UKW6RpBLHhTYspOPtk0MKzjM1a4=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/dialogs/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "RCg+DDDUyY5KdMIEqBeI7D2pwLEsJIZuyjGjTnTZiYs=",
+    "shasum": "kLSj4y8r3qnWPzULPiLa9SLqUyg+/FzAPwe4PYVgENc=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/ethereum-provider/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "Cj9dHXqaNSmUSFpJ+TW/VOVTl1Gf993Cv0kgQ48xrW8=",
+    "shasum": "pAw1i97eZQAkVu1vghgoOKBdA5EImKc8HuC3rQyLo7k=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/ethers-js/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "Ze39WMAzwt/l29hfMFZHtg3R76ElyKvZprsMPXyS3Ls=",
+    "shasum": "Qzn8peIrwXUfXNesYS9XrxOPiEy8rcuGp8srLV+BWcE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/file-upload/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "gkz2lclCxtHr4KKR6+hx7jaW6ZVUTnW9u1wiDLTPn94=",
+    "shasum": "+HIIeV9viXaz8FnZVqkw9Nkuh2Sx9H5pUKhwuLa3KME=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/get-entropy/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "K7iRS0dQTJSbvpDI8YADlMSTWlbk0kOBu3ysYNJFd30=",
+    "shasum": "KJq1GMNeYwapzQnIPrIvxxDcBWjWxJ4VX0XhOh3MnxE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/get-file/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "ydgtHOH564F5/4XR1KgP86xIx02n11ZKexzVbA0ps5Q=",
+    "shasum": "5r5oP5gpDJTFwyl/ENQqBwXI5UOUm7qbVSPfmwcIvCQ=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/home-page/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "Es5I4QVvhmqRbzDDoarvdcSG9KUKXfWchFDw5WKG4i0=",
+    "shasum": "8t+J0F/sTqNNnqUCz162R6hPctEnc07oW0z8o7Dko4E=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/images/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "3y0kkz6IcK830KAogudokwqCx4qlDAzlpQ1Hek3o3Nw=",
+    "shasum": "FXwUfZ5XutKqwGSvsu6gzkVeMl/S2hQkLAZxoec+vEI=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/interactive-ui/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "4rE0OtUTBu/rh1SQB71ZO3Rvq0xVIToTV2JSckxrs2Y=",
+    "shasum": "Ti3lOIvzy79CF4lIb28GfwWljhHOaXgRc64saz4Xw4M=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/invoke-snap/packages/consumer-signer/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "94YpRvpZXv1STY9O8FHbKKT0s2E5wmyoNZrgTBQooyo=",
+    "shasum": "9SkOP5UJx3DPOQjfBS1nqHKbZ53iZSLA0ZU8IWB3rvI=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/invoke-snap/packages/core-signer/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "334bZoNjf8+WEDVs6iVOHfZwY0/dCVhl3k14MvD/OPM=",
+    "shasum": "m+48XkzG/QoB1xCFb7nScz35JBF2YQ/1TErbk686A1M=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/json-rpc/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "2Ylq4JT1L3Zy8EFW+ZNhoj1R/PDBbFo/hMetjw02UBo=",
+    "shasum": "+0li4JLmwPIiG4z076VHqxkJGR9NN5sg4lKZwYeCsEU=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/jsx/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "zP+4QCvzFeywzussgNC1XBDvgnkOMF/Fo68TBuqyFlI=",
+    "shasum": "k9Fr3RnjZx7YPAVlGbrBH3UYUsG7GdAPzflruPIrv68=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/lifecycle-hooks/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "jLIZFbivIBXqN7bUS1XPXkxFMQ+2Bq0WmnEx+dGoj7E=",
+    "shasum": "Z87KmxfrWTMYEMbWKMXvYhtgRVSijrh06cb27sHYkqM=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/localization/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "vWnPIKH4gz8N4AW27G74mUJlmkbqzNLbJjiZyy/xMlE=",
+    "shasum": "POX0xo+6nKE7IhUiUkviTG/mHybamAIm2t0LUnbLd1M=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/manage-state/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "OuMpcZu/d0s3ULofM93+3jgjRWPd5vFADAlIMZ9sENM=",
+    "shasum": "Y8KVZuDM3e1U50xMXTYSXLb70dg/y4+rLV85D2n9XI0=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/network-access/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "N8sNz2AAOI5l4jkzXpS8ciATfmqUrH2dBhFeNk1U7x0=",
+    "shasum": "mCWOnK1aznB5S9fAlPfc6pvmjVvzlqGaA4JwmZjXih0=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/notifications/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "ZT2B0c7xFGz4w9WnVLs+gNANdyTzB7dABrYSQ2TNycE=",
+    "shasum": "0f/5PGd4YO2rmUpjl7vGEKSP62rkQU/hj7E6fK2qGCE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "h6zM4xieBFVcuBrJmRvJ53Rg6PYCeCyyse6I1ZSqwUA=",
+    "shasum": "WkcGZ3jJbpsex4ZJG1XWMqPoovy0dYLck4wUXw0S5h0=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/signature-insights/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "DpFlgyKIAD6NDEKKWC5Om3vPw1lV7erEO4QV3np2sk0=",
+    "shasum": "/Wqo8YM1Pp9qP4dPUgCWnOnUUE18oQM1DwGDBF46zws=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/transaction-insights/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "/0U0RvqomIeWSQn0sPHtSb2MY7bA09nG3+ECYTPL1QM=",
+    "shasum": "JMWUcD0TWYI1zTaZZZtafIXtCaSuFp2h+AE8QMPAesM=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/wasm/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "MdYw3PCl4SDlm+bnz8RdrJm0VjSR+GdFhaRYMhLWmR4=",
+    "shasum": "C/UhBYE7tgtN6vABq2tIkuy6CF6szdd0z1wRteq50/U=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "iPfVADXhKq0tMKLttqygu4NdODzRTdhZSkS3NOHWbvQ=",
+    "shasum": "7AR5lG7nZB7CutWzHZUoyJp3NKS4VtWzxStcXhgIQWk=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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

@@ -1,5 +1,7 @@
-import type { StringElement } from '../../component';
+import type { SnapsChildren, StringElement } from '../../component';
 import { createSnapComponent } from '../../component';
+import type { IconElement } from '../Icon';
+import type { ImageElement } from '../Image';
 
 // TODO: Add the `onClick` prop to the `ButtonProps` type.
 
@@ -16,7 +18,7 @@ import { createSnapComponent } from '../../component';
  * @property disabled - Whether the button is disabled. Defaults to `false`.
  */
 export type ButtonProps = {
-  children: StringElement;
+  children: SnapsChildren<StringElement | IconElement | ImageElement>;
   name?: string | undefined;
   type?: 'button' | 'submit' | undefined;
   variant?: 'primary' | 'destructive' | undefined;

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

@@ -158,6 +158,12 @@ describe('ButtonStruct', () => {
     <Button variant="destructive">foo</Button>,
     <Button disabled={true}>foo</Button>,
     <Button key="button">foo</Button>,
+    <Button>
+      <Icon name="wifi" />
+    </Button>,
+    <Button>
+      <Image src="<svg></svg>" />
+    </Button>,
   ])('validates a button element', (value) => {
     expect(is(value, ButtonStruct)).toBe(true);
   });

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

@@ -143,11 +143,34 @@ function element<Name extends string, Props extends ObjectSchema = EmptyObject>(
   });
 }
 
+/**
+ * A struct for the {@link ImageElement} type.
+ */
+export const ImageStruct: Describe<ImageElement> = element('Image', {
+  src: svg(),
+  alt: optional(string()),
+});
+
+const IconNameStruct: Struct<`${IconName}`, null> = nullUnion(
+  Object.values(IconName).map((name) => literal(name)) as any,
+);
+
+/**
+ * A struct for the {@link IconElement} type.
+ */
+export const IconStruct: Describe<IconElement> = element('Icon', {
+  name: IconNameStruct,
+  color: optional(
+    nullUnion([literal('default'), literal('primary'), literal('muted')]),
+  ),
+  size: optional(nullUnion([literal('md'), literal('inherit')])),
+});
+
 /**
  * A struct for the {@link ButtonElement} type.
  */
 export const ButtonStruct: Describe<ButtonElement> = element('Button', {
-  children: StringElementStruct,
+  children: children([StringElementStruct, ImageStruct, IconStruct]),
   name: optional(string()),
   type: optional(nullUnion([literal('button'), literal('submit')])),
   variant: optional(nullUnion([literal('primary'), literal('destructive')])),
@@ -426,14 +449,6 @@ export const HeadingStruct: Describe<HeadingElement> = element('Heading', {
   children: StringElementStruct,
 });
 
-/**
- * A struct for the {@link ImageElement} type.
- */
-export const ImageStruct: Describe<ImageElement> = element('Image', {
-  src: svg(),
-  alt: optional(string()),
-});
-
 /**
  * A struct for the {@link LinkElement} type.
  */
@@ -442,21 +457,6 @@ export const LinkStruct: Describe<LinkElement> = element('Link', {
   children: children([FormattingStruct, string()]),
 });
 
-const IconNameStruct: Struct<`${IconName}`, null> = nullUnion(
-  Object.values(IconName).map((name) => literal(name)) as any,
-);
-
-/**
- * A struct for the {@link IconElement} type.
- */
-export const IconStruct: Describe<IconElement> = element('Icon', {
-  name: IconNameStruct,
-  color: optional(
-    nullUnion([literal('default'), literal('primary'), literal('muted')]),
-  ),
-  size: optional(nullUnion([literal('md'), literal('inherit')])),
-});
-
 /**
  * A struct for the {@link TextElement} type.
  */