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", diff --git a/packages/snaps-sdk/src/jsx/components/Image.test.tsx b/packages/snaps-sdk/src/jsx/components/Image.test.tsx index 8bb466b286..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,6 +10,7 @@ describe('Image', () => { props: { src: '', alt: 'Foo', + borderRadius: 'medium', }, }); }); diff --git a/packages/snaps-sdk/src/jsx/components/Image.ts b/packages/snaps-sdk/src/jsx/components/Image.ts index 7786dce45b..e81821f225 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?: 'none' | 'medium' | 'full' | 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..c656ac598f 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..5b6c03a5e1 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('none'), literal('medium'), literal('full')]), + ), }); const IconNameStruct: Struct<`${IconName}`, null> = nullUnion(