Add loading variant for Snaps UI Button

Update manifest shasum Add loading variant to old button
MetaMask · Dec 9, 2024 · 496ea01 · 496ea01
1 parent d07227b
commit 496ea01
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 4 deletions.
diff --git 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": "d1js9Y4zJwk7n/e47V5fdMreo1FBtVKl4GtPhfckZrs=",
+    "shasum": "w8ZPchwG+LqlFzbmkqVQ5nDqt5GDFkZsU8dUm1b5NXo=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/snaps-sdk/src/jsx/components/form/Button.ts b/packages/snaps-sdk/src/jsx/components/form/Button.ts
@@ -22,7 +22,7 @@ export type ButtonProps = {
   children: SnapsChildren<StringElement | IconElement | ImageElement>;
   name?: string | undefined;
   type?: 'button' | 'submit' | undefined;
-  variant?: 'primary' | 'destructive' | undefined;
+  variant?: 'primary' | 'destructive' | 'loading' | undefined;
   disabled?: 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
@@ -163,6 +163,7 @@ describe('ButtonStruct', () => {
     <Button name="foo">bar</Button>,
     <Button type="submit">foo</Button>,
     <Button variant="destructive">foo</Button>,
+    <Button variant="loading">foo</Button>,
     <Button disabled={true}>foo</Button>,
     <Button key="button">foo</Button>,
     <Button>

diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
@@ -243,7 +243,9 @@ export const ButtonStruct: Describe<ButtonElement> = element('Button', {
   children: children([StringElementStruct, ImageStruct, IconStruct]),
   name: optional(string()),
   type: optional(nullUnion([literal('button'), literal('submit')])),
-  variant: optional(nullUnion([literal('primary'), literal('destructive')])),
+  variant: optional(
+    nullUnion([literal('primary'), literal('destructive'), literal('loading')]),
+  ),
   disabled: optional(boolean()),
   form: optional(string()),
 });

diff --git a/packages/snaps-sdk/src/ui/components/button.ts b/packages/snaps-sdk/src/ui/components/button.ts
@@ -15,6 +15,7 @@ import { LiteralStruct, NodeType } from '../nodes';
 export enum ButtonVariant {
   Primary = 'primary',
   Secondary = 'secondary',
+  Loading = 'loading',
 }
 
 export enum ButtonType {
@@ -31,6 +32,7 @@ export const ButtonStruct = assign(
       union([
         enumValue(ButtonVariant.Primary),
         enumValue(ButtonVariant.Secondary),
+        enumValue(ButtonVariant.Loading),
       ]),
     ),
     buttonType: optional(

diff --git a/packages/snaps-utils/src/ui.tsx b/packages/snaps-utils/src/ui.tsx
@@ -51,12 +51,16 @@ const ALLOWED_PROTOCOLS = ['https:', 'mailto:', 'metamask:'];
  * @param variant - The legacy button component variant.
  * @returns The button variant.
  */
-function getButtonVariant(variant?: 'primary' | 'secondary' | undefined) {
+function getButtonVariant(
+  variant?: 'primary' | 'secondary' | 'loading' | undefined,
+) {
   switch (variant) {
     case 'primary':
       return 'primary';
     case 'secondary':
       return 'destructive';
+    case 'loading':
+      return 'loading';
     default:
       return undefined;
   }