diff --git a/packages/examples/packages/browserify-plugin/snap.manifest.json b/packages/examples/packages/browserify-plugin/snap.manifest.json index b62beafa40..7a5a1390b8 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": "IdAFrQlUYgQaMo/lbXgEJOMKTFbB9RYylXwPvUFT6As=", + "shasum": "ecGX3duI1nyJ8BOjkIPLze204JXMQKL8Eq1ir8Mm/dg=", "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 9e281be454..c66561183e 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": "bzhrHkJoo2dRz2utZ10KRNL2X2mgRxkur3DrGXHbNOc=", + "shasum": "KSkMBlnuET6wdxlrTCFlg6h1GDiCK8ShQoTbKPse0Ek=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/snaps-sdk/src/jsx/components/Text.test.tsx b/packages/snaps-sdk/src/jsx/components/Text.test.tsx index c3a665b9ba..0cf2df8e14 100644 --- a/packages/snaps-sdk/src/jsx/components/Text.test.tsx +++ b/packages/snaps-sdk/src/jsx/components/Text.test.tsx @@ -51,4 +51,17 @@ describe('Text', () => { }, }); }); + + it('renders text with props', () => { + const result = Hello world!; + + expect(result).toStrictEqual({ + type: 'Text', + key: null, + props: { + children: 'Hello world!', + size: 'sm', + }, + }); + }); }); diff --git a/packages/snaps-sdk/src/jsx/components/Text.ts b/packages/snaps-sdk/src/jsx/components/Text.ts index e3eb8144f7..7fb99e4ba3 100644 --- a/packages/snaps-sdk/src/jsx/components/Text.ts +++ b/packages/snaps-sdk/src/jsx/components/Text.ts @@ -28,11 +28,13 @@ export type TextColors = * @property children - The text to display. * @property alignment - The alignment of the text. * @property color - The color of the text. + * @property size - The size of the text. Defaults to `md`. */ export type TextProps = { children: TextChildren; alignment?: 'start' | 'center' | 'end' | undefined; color?: TextColors | undefined; + size?: 'sm' | 'md' | undefined; }; const TYPE = 'Text'; @@ -44,6 +46,7 @@ const TYPE = 'Text'; * @param props.alignment - The alignment of the text. * @param props.color - The color of the text. * @param props.children - The text to display. + * @param props.size - The size of the text. Defaults to `md`. * @returns A text element. * @example * @@ -53,6 +56,10 @@ const TYPE = 'Text'; * * Hello world! * + * @example + * + * Hello world! + * */ export const Text = createSnapComponent(TYPE); diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx index 3982ff2319..234c6f6b64 100644 --- a/packages/snaps-sdk/src/jsx/validation.test.tsx +++ b/packages/snaps-sdk/src/jsx/validation.test.tsx @@ -1177,6 +1177,7 @@ describe('TextStruct', () => { Hello, world , + foo, ])('validates a text element', (value) => { expect(is(value, TextStruct)).toBe(true); }); diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts index adbc39b1db..3891bc6aeb 100644 --- a/packages/snaps-sdk/src/jsx/validation.ts +++ b/packages/snaps-sdk/src/jsx/validation.ts @@ -713,6 +713,7 @@ export const TextStruct: Describe = element('Text', { literal('warning'), ]), ), + size: optional(nullUnion([literal('sm'), literal('md')])), }); /**