feat: Add border radius to Image (#3023)

Add a border radius prop to `Image`.

Progresses MetaMask/metamask-extension#29668

Author: FrederikBolding

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",

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",

packages/snaps-sdk/src/jsx/components/Image.test.tsx

@@ -2,14 +2,15 @@ import { Image } from './Image';
 
 describe('Image', () => {
   it('renders an image', () => {
-    const result = <Image src="<svg />" alt="Foo" />;
+    const result = <Image src="<svg />" alt="Foo" borderRadius="medium" />;
 
     expect(result).toStrictEqual({
       type: 'Image',
       key: null,
       props: {
         src: '<svg />',
         alt: 'Foo',
+        borderRadius: 'medium',
       },
     });
   });

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
  * <Image src="<svg>...</svg>" alt="An example image" />

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

@@ -1075,12 +1075,13 @@ describe('HeadingStruct', () => {
 });
 
 describe('ImageStruct', () => {
-  it.each([<Image src="<svg />" alt="alt" />, <Image src="<svg />" />])(
-    'validates an image element',
-    (value) => {
-      expect(is(value, ImageStruct)).toBe(true);
-    },
-  );
+  it.each([
+    <Image src="<svg />" alt="alt" />,
+    <Image src="<svg />" />,
+    <Image src="<svg />" alt="alt" borderRadius="medium" />,
+  ])('validates an image element', (value) => {
+    expect(is(value, ImageStruct)).toBe(true);
+  });
 
   it.each([
     'foo',
@@ -1093,6 +1094,8 @@ describe('ImageStruct', () => {
     <Image />,
     // @ts-expect-error - Invalid props.
     <Image src="<svg />" alt={42} />,
+    // @ts-expect-error - Invalid props.
+    <Image src="<svg />" borderRadius="52px" />,
     <Text>foo</Text>,
     <Box>
       <Text>foo</Text>

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

@@ -221,6 +221,9 @@ function elementWithSelectiveProps<
 export const ImageStruct: Describe<ImageElement> = element('Image', {
   src: svg(),
   alt: optional(string()),
+  borderRadius: optional(
+    nullUnion([literal('none'), literal('medium'), literal('full')]),
+  ),
 });
 
 const IconNameStruct: Struct<`${IconName}`, null> = nullUnion(