From 70e5174e554eb285e4a83de1642dc9e8d353ef37 Mon Sep 17 00:00:00 2001 From: Frederik Bolding Date: Thu, 16 Jan 2025 11:42:49 +0100 Subject: [PATCH 1/3] feat: Add border radius to Image --- .../snaps-sdk/src/jsx/components/Image.test.tsx | 3 ++- packages/snaps-sdk/src/jsx/components/Image.ts | 2 ++ packages/snaps-sdk/src/jsx/validation.test.tsx | 15 +++++++++------ packages/snaps-sdk/src/jsx/validation.ts | 3 +++ 4 files changed, 16 insertions(+), 7 deletions(-) diff --git a/packages/snaps-sdk/src/jsx/components/Image.test.tsx b/packages/snaps-sdk/src/jsx/components/Image.test.tsx index 8bb466b286..4a6f116879 100644 --- a/packages/snaps-sdk/src/jsx/components/Image.test.tsx +++ b/packages/snaps-sdk/src/jsx/components/Image.test.tsx @@ -2,7 +2,7 @@ import { Image } from './Image'; describe('Image', () => { it('renders an image', () => { - const result = Foo; + const result = Foo; expect(result).toStrictEqual({ type: 'Image', @@ -10,6 +10,7 @@ describe('Image', () => { props: { src: '', alt: 'Foo', + borderRadius: 'rounded', }, }); }); diff --git a/packages/snaps-sdk/src/jsx/components/Image.ts b/packages/snaps-sdk/src/jsx/components/Image.ts index 7786dce45b..45ffa5800c 100644 --- a/packages/snaps-sdk/src/jsx/components/Image.ts +++ b/packages/snaps-sdk/src/jsx/components/Image.ts @@ -12,6 +12,7 @@ import { createSnapComponent } from '../component'; type ImageProps = { src: string; alt?: string | undefined; + borderRadius?: 'square' | 'rounded' | 'circular' | undefined; }; const TYPE = 'Image'; @@ -27,6 +28,7 @@ const TYPE = 'Image'; * You can use the `data:` URL scheme to embed images inside the SVG. * @param props.alt - The alternative text of the image, which describes the * image for users who cannot see it. + * @param props.borderRadius - The border radius applied to the image. * @returns An image element. * @example * An example image diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx index 0f2c3114c7..95c6cb1ab6 100644 --- a/packages/snaps-sdk/src/jsx/validation.test.tsx +++ b/packages/snaps-sdk/src/jsx/validation.test.tsx @@ -1075,12 +1075,13 @@ describe('HeadingStruct', () => { }); describe('ImageStruct', () => { - it.each([alt, ])( - 'validates an image element', - (value) => { - expect(is(value, ImageStruct)).toBe(true); - }, - ); + it.each([ + alt, + , + alt, + ])('validates an image element', (value) => { + expect(is(value, ImageStruct)).toBe(true); + }); it.each([ 'foo', @@ -1093,6 +1094,8 @@ describe('ImageStruct', () => { , // @ts-expect-error - Invalid props. {42}, + // @ts-expect-error - Invalid props. + , foo, foo diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts index c251ba91b5..33f1fa0f11 100644 --- a/packages/snaps-sdk/src/jsx/validation.ts +++ b/packages/snaps-sdk/src/jsx/validation.ts @@ -221,6 +221,9 @@ function elementWithSelectiveProps< export const ImageStruct: Describe = element('Image', { src: svg(), alt: optional(string()), + borderRadius: optional( + nullUnion([literal('square'), literal('rounded'), literal('circular')]), + ), }); const IconNameStruct: Struct<`${IconName}`, null> = nullUnion( From a77dae0f1e78dcdf90cb848f3ecd23be923c52fd Mon Sep 17 00:00:00 2001 From: Frederik Bolding Date: Thu, 16 Jan 2025 11:54:49 +0100 Subject: [PATCH 2/3] Tweak naming --- packages/snaps-sdk/src/jsx/components/Image.test.tsx | 4 ++-- packages/snaps-sdk/src/jsx/components/Image.ts | 2 +- packages/snaps-sdk/src/jsx/validation.test.tsx | 2 +- packages/snaps-sdk/src/jsx/validation.ts | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/snaps-sdk/src/jsx/components/Image.test.tsx b/packages/snaps-sdk/src/jsx/components/Image.test.tsx index 4a6f116879..7c998eb60d 100644 --- a/packages/snaps-sdk/src/jsx/components/Image.test.tsx +++ b/packages/snaps-sdk/src/jsx/components/Image.test.tsx @@ -2,7 +2,7 @@ import { Image } from './Image'; describe('Image', () => { it('renders an image', () => { - const result = Foo; + const result = Foo; expect(result).toStrictEqual({ type: 'Image', @@ -10,7 +10,7 @@ describe('Image', () => { props: { src: '', alt: 'Foo', - borderRadius: 'rounded', + borderRadius: 'medium', }, }); }); diff --git a/packages/snaps-sdk/src/jsx/components/Image.ts b/packages/snaps-sdk/src/jsx/components/Image.ts index 45ffa5800c..e81821f225 100644 --- a/packages/snaps-sdk/src/jsx/components/Image.ts +++ b/packages/snaps-sdk/src/jsx/components/Image.ts @@ -12,7 +12,7 @@ import { createSnapComponent } from '../component'; type ImageProps = { src: string; alt?: string | undefined; - borderRadius?: 'square' | 'rounded' | 'circular' | undefined; + borderRadius?: 'none' | 'medium' | 'full' | undefined; }; const TYPE = 'Image'; diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx index 95c6cb1ab6..c656ac598f 100644 --- a/packages/snaps-sdk/src/jsx/validation.test.tsx +++ b/packages/snaps-sdk/src/jsx/validation.test.tsx @@ -1078,7 +1078,7 @@ describe('ImageStruct', () => { it.each([ alt, , - alt, + alt, ])('validates an image element', (value) => { expect(is(value, ImageStruct)).toBe(true); }); diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts index 33f1fa0f11..5b6c03a5e1 100644 --- a/packages/snaps-sdk/src/jsx/validation.ts +++ b/packages/snaps-sdk/src/jsx/validation.ts @@ -222,7 +222,7 @@ export const ImageStruct: Describe = element('Image', { src: svg(), alt: optional(string()), borderRadius: optional( - nullUnion([literal('square'), literal('rounded'), literal('circular')]), + nullUnion([literal('none'), literal('medium'), literal('full')]), ), }); From 3e0d2a3a89b47eab1b9f98df739cb7c82d2dbab6 Mon Sep 17 00:00:00 2001 From: Frederik Bolding Date: Thu, 16 Jan 2025 11:57:42 +0100 Subject: [PATCH 3/3] Update manifests --- packages/examples/packages/browserify-plugin/snap.manifest.json | 2 +- packages/examples/packages/browserify/snap.manifest.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/examples/packages/browserify-plugin/snap.manifest.json b/packages/examples/packages/browserify-plugin/snap.manifest.json index 9f578fd779..0d829905dc 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": "jyM2N8Y8sIxLacv1mwtPh41wGSt9lWsBNbFo9CSx7mM=", + "shasum": "ssGPi4fxyZSvKOMXbVdOa/vnTx0qrq6WZWCUV91dLqo=", "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 0cc9ff36db..1376a8e7eb 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": "qHCkTRpYoHUFtt9Dd0nxQyw7Eblv0e5znQ39NszlJOo=", + "shasum": "+342Ghzfo9UpTxJgqIPOieHvqRTnf4h00s8r0DpbozY=", "location": { "npm": { "filePath": "dist/bundle.js",