From b0036f54bf491d559525a1c51991a2aa435e18a0 Mon Sep 17 00:00:00 2001
From: Frederik Bolding <frederik.bolding@gmail.com>
Date: Thu, 12 Dec 2024 15:00:28 +0100
Subject: [PATCH] feat: Add `size` prop to Button (#2953)

Add `size` prop to buttons, letting devs size them similarly to `Text`.

Progresses https://github.com/MetaMask/snaps/issues/2947
---
 .../packages/browserify-plugin/snap.manifest.json   |  2 +-
 .../examples/packages/browserify/snap.manifest.json |  2 +-
 .../src/jsx/components/form/Button.test.tsx         | 13 +++++++++++++
 .../snaps-sdk/src/jsx/components/form/Button.ts     |  2 ++
 packages/snaps-sdk/src/jsx/validation.test.tsx      |  1 +
 packages/snaps-sdk/src/jsx/validation.ts            |  1 +
 6 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/examples/packages/browserify-plugin/snap.manifest.json b/packages/examples/packages/browserify-plugin/snap.manifest.json
index f7331080fd..e9c820531b 100644
--- a/packages/examples/packages/browserify-plugin/snap.manifest.json
+++ b/packages/examples/packages/browserify-plugin/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "SquG9JvLanG/gJwBw5H1AZBlsthmv21Ci4Vn+sMemjM=",
+    "shasum": "eug1Oxfxo/X97epSDNuF3elpxJUBNGgPgfvvmVxShxo=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
diff --git a/packages/examples/packages/browserify/snap.manifest.json b/packages/examples/packages/browserify/snap.manifest.json
index db40ba24e3..ef628744cf 100644
--- a/packages/examples/packages/browserify/snap.manifest.json
+++ b/packages/examples/packages/browserify/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "pCp96i558WHqHIUZyZGUFcxAfOQ0afBHJ59nJB5ma78=",
+    "shasum": "Jh7Kcnzc5flRZM4SL8yQnMBj99YrmU91iLLaIxH2o/k=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
diff --git a/packages/snaps-sdk/src/jsx/components/form/Button.test.tsx b/packages/snaps-sdk/src/jsx/components/form/Button.test.tsx
index ea2238ee08..7967618a53 100644
--- a/packages/snaps-sdk/src/jsx/components/form/Button.test.tsx
+++ b/packages/snaps-sdk/src/jsx/components/form/Button.test.tsx
@@ -82,4 +82,17 @@ describe('Button', () => {
       key: null,
     });
   });
+
+  it('returns a button element with a size', () => {
+    const result = <Button size="sm">bar</Button>;
+
+    expect(result).toStrictEqual({
+      type: 'Button',
+      props: {
+        children: 'bar',
+        size: 'sm',
+      },
+      key: null,
+    });
+  });
 });
diff --git a/packages/snaps-sdk/src/jsx/components/form/Button.ts b/packages/snaps-sdk/src/jsx/components/form/Button.ts
index d5bf47dbab..f165bb30db 100644
--- a/packages/snaps-sdk/src/jsx/components/form/Button.ts
+++ b/packages/snaps-sdk/src/jsx/components/form/Button.ts
@@ -15,6 +15,7 @@ import type { ImageElement } from '../Image';
  * Defaults to `'button'`.
  * @property variant - The variant of the button, i.e., `'primary'` or
  * `'destructive'`. Defaults to `'primary'`.
+ * @property size - The size of the button. Defaults to `md`.
  * @property disabled - Whether the button is disabled. Defaults to `false`.
  * @property loading - Whether the button is loading. Defaults to `false`.
  * @property form - The name of the form component to associate the button with.
@@ -24,6 +25,7 @@ export type ButtonProps = {
   name?: string | undefined;
   type?: 'button' | 'submit' | undefined;
   variant?: 'primary' | 'destructive' | undefined;
+  size?: 'sm' | 'md' | undefined;
   disabled?: boolean | undefined;
   loading?: boolean | undefined;
   form?: string | undefined;
diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx
index 60466eadbf..f755a75d70 100644
--- a/packages/snaps-sdk/src/jsx/validation.test.tsx
+++ b/packages/snaps-sdk/src/jsx/validation.test.tsx
@@ -175,6 +175,7 @@ describe('ButtonStruct', () => {
       <Image src="<svg></svg>" />
     </Button>,
     <Button form="foo">bar</Button>,
+    <Button size="sm">bar</Button>,
   ])('validates a button element', (value) => {
     expect(is(value, ButtonStruct)).toBe(true);
   });
diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
index a2905fc08b..be3702912b 100644
--- a/packages/snaps-sdk/src/jsx/validation.ts
+++ b/packages/snaps-sdk/src/jsx/validation.ts
@@ -244,6 +244,7 @@ export const ButtonStruct: Describe<ButtonElement> = element('Button', {
   name: optional(string()),
   type: optional(nullUnion([literal('button'), literal('submit')])),
   variant: optional(nullUnion([literal('primary'), literal('destructive')])),
+  size: optional(nullUnion([literal('sm'), literal('md')])),
   disabled: optional(boolean()),
   loading: optional(boolean()),
   form: optional(string()),