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')])),
});
/**