From 464f53473ca945a0094b87ee2d96cc218ae8dcb4 Mon Sep 17 00:00:00 2001 From: Christian Montoya Date: Fri, 24 Jan 2025 00:13:53 -0500 Subject: [PATCH 01/17] Add more components to Snaps Custom UI This PR was made with Cursor AI. I have attempted to the best of my ability to make sure these edits are accurate. --- snaps/features/custom-ui/index.md | 192 ++++++++++++++++++++++++++++++ 1 file changed, 192 insertions(+) diff --git a/snaps/features/custom-ui/index.md b/snaps/features/custom-ui/index.md index 232bdf2f234..b64851e00e3 100644 --- a/snaps/features/custom-ui/index.md +++ b/snaps/features/custom-ui/index.md @@ -182,6 +182,55 @@ await snap.request({ }); ``` +### `Banner` + +Outputs a banner alert component that can be used to display important messages with different severity levels. + +#### Props + +- `title`: `string` - Title of the banner. +- `severity`: `"danger" | "info" | "success" | "warning"` - Severity level of the banner. +- `children`: The content to display in the banner. Can include: + - Text components + - Formatting components + - Links + - Icons + - Buttons + - Skeleton loaders + +#### Example + +```javascript title="index.jsx" +import { Box, Banner, Text, Link } from "@metamask/snaps-sdk/jsx"; + +await snap.request({ + method: "snap_dialog", + params: { + type: "alert", + content: ( + + + A new version is available! + Learn more + + + + Please review transaction details carefully. + + + + Transaction completed successfully. + + + + Unable to process transaction. + + + ), + }, +}); +``` + ### `Box` Outputs a box, which can be used as a container for other components. @@ -369,6 +418,55 @@ const interfaceId = await snap.request({ Checkbox UI example

+### `Container` + +Outputs a container component that can hold a box of content and an optional footer. This is useful for creating structured layouts with action buttons at the bottom in [custom dialogs](dialogs.md#display-a-custom-dialog). + +#### Props + +- `backgroundColor`: `"default" | "alternative"` - (optional) The background color of the container. Defaults to `"default"`. +- `children`: Can be either: + - A single Box element, or + - An array containing a Box element and a Footer element + +#### Example + +```javascript title="index.jsx" +import { Container, Box, Footer, Text, Button } from "@metamask/snaps-sdk/jsx"; + +await snap.request({ + method: "snap_dialog", + params: { + content: ( + + + Are you sure you want to proceed with this transaction? + Gas fees: 0.005 ETH + +
+ + +
+ + ), + }, +}); + +// Example without footer +await snap.request({ + method: "snap_dialog", + params: { + content: ( + + + Simple container without footer + + + ), + }, +}); +``` + ### `Copyable` Outputs a read-only text field with a copy-to-clipboard shortcut. @@ -576,6 +674,55 @@ export const onUserInput = async ({ id, event }) => { File input UI example

+### `Footer` + +Outputs a footer component that can contain one or two buttons. This component is typically used within a [`Container`](#container) to create action buttons at the bottom of a dialog or panel. + +#### Props + +- `children`: Can be either one or two [`Button`](#button) components. + +#### Example + +```javascript title="index.jsx" +import { Container, Box, Footer, Text, Button } from "@metamask/snaps-sdk/jsx"; + +// Example with two buttons +await snap.request({ + method: "snap_dialog", + params: { + content: ( + + + Delete this item? + +
+ + +
+ + ), + }, +}); + +// Example with single button +await snap.request({ + method: "snap_dialog", + params: { + content: ( + + + Operation completed successfully. + +
+ +
+ + ), + }, +}); +``` + ### `Form` Outputs a form for use in [interactive UI](interactive-ui.md). @@ -1126,6 +1273,51 @@ await snap.request({ Tooltip UI example

+### `Value` + +Outputs a component that displays two text values side by side. This component can only be used as a child of the [`Row`](#row) component. + +#### Props + +- `value`: `string | TextElement` - The value shown on the right side. +- `extra`: `string | TextElement` - The extra text shown on the left side. + +#### Example + +```javascript title="index.jsx" +import { Box, Row, Text, Value } from "@metamask/snaps-sdk/jsx"; + +await snap.request({ + method: "snap_dialog", + params: { + type: "alert", + content: ( + + + + + + {/* Example with styled text */} + + 0.003 ETH} + extra={$12} + /> + + + {/* Example with different text colors */} + + 1.25 ETH} + extra={$2,500} + /> + + + ), + }, +}); +``` + ## Emojis Text-based components (such as [`Heading`](#heading) and [`Text`](#text)) accept emojis. From b9b9fe8292a00116f42fd8c605616f94424e4b5b Mon Sep 17 00:00:00 2001 From: Christian Montoya Date: Fri, 24 Jan 2025 00:16:57 -0500 Subject: [PATCH 02/17] Update whats-new.md --- docs/whats-new.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/docs/whats-new.md b/docs/whats-new.md index a79f4eec3f5..3bfd52acb77 100644 --- a/docs/whats-new.md +++ b/docs/whats-new.md @@ -9,6 +9,11 @@ The latest major MetaMask documentation updates are listed by the month they wer For a comprehensive list of recent product changes, visit the "Release Notes" section at the bottom of the [MetaMask developer page](https://metamask.io/developer/). +## January 2025 + +- Documented Snaps `Banner`, `Container`, `Footer`, and `Value` components in [Snaps Custom UI](/snaps/features/custom-ui/). + ([#1835](https://github.com/MetaMask/metamask-docs/pull/1835)) + ## December 2024 - Documented [Swellchain](/services/reference/swellchain) support. ([#1776](https://github.com/MetaMask/metamask-docs/pull/1776)) From de50322cfeb9c7effe411e283423f8086b0bb78c Mon Sep 17 00:00:00 2001 From: Christian Montoya Date: Fri, 24 Jan 2025 16:09:33 -0500 Subject: [PATCH 03/17] Separate links per component in what's new Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> --- docs/whats-new.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/whats-new.md b/docs/whats-new.md index 3bfd52acb77..67d8721ac92 100644 --- a/docs/whats-new.md +++ b/docs/whats-new.md @@ -11,7 +11,7 @@ of the [MetaMask developer page](https://metamask.io/developer/). ## January 2025 -- Documented Snaps `Banner`, `Container`, `Footer`, and `Value` components in [Snaps Custom UI](/snaps/features/custom-ui/). +- Documented Snaps [`Banner`](/snaps/features/custom-ui/#banner), [`Container`](/snaps/features/custom-ui/#container), [`Footer`](/snaps/features/custom-ui/#footer), and [`Value`](/snaps/features/custom-ui/#value) UI components. ([#1835](https://github.com/MetaMask/metamask-docs/pull/1835)) ## December 2024 From 0ef7a188b3d7f3f392cd389e4e84278f901c5849 Mon Sep 17 00:00:00 2001 From: Christian Montoya Date: Fri, 24 Jan 2025 16:09:58 -0500 Subject: [PATCH 04/17] Update Banner description text Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> --- snaps/features/custom-ui/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snaps/features/custom-ui/index.md b/snaps/features/custom-ui/index.md index b64851e00e3..1e9b648b82f 100644 --- a/snaps/features/custom-ui/index.md +++ b/snaps/features/custom-ui/index.md @@ -184,7 +184,7 @@ await snap.request({ ### `Banner` -Outputs a banner alert component that can be used to display important messages with different severity levels. +Outputs a banner that can be used to display important messages with different severity levels. #### Props From f23520db23f1ba5b811a5e6881bf4511a954c1cc Mon Sep 17 00:00:00 2001 From: Christian Montoya Date: Fri, 24 Jan 2025 16:11:21 -0500 Subject: [PATCH 05/17] Update props for container Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> --- snaps/features/custom-ui/index.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/snaps/features/custom-ui/index.md b/snaps/features/custom-ui/index.md index 1e9b648b82f..43b8c456106 100644 --- a/snaps/features/custom-ui/index.md +++ b/snaps/features/custom-ui/index.md @@ -424,10 +424,11 @@ Outputs a container component that can hold a box of content and an optional foo #### Props -- `backgroundColor`: `"default" | "alternative"` - (optional) The background color of the container. Defaults to `"default"`. -- `children`: Can be either: - - A single Box element, or - - An array containing a Box element and a Footer element +- `backgroundColor` - (Optional) The background color of the container. + Possible values are `"default"` and `"alternative"`. + The default is `"default"`. +- `children`: The contents of the container. + This can be a single [`Box`](#box) component, or an array containing a [`Box`](#box) component and a [`Footer`](#footer) component. #### Example From f6cc29f3560053152e316c4eb0a3d80de92b033c Mon Sep 17 00:00:00 2001 From: Christian Montoya Date: Fri, 24 Jan 2025 16:11:35 -0500 Subject: [PATCH 06/17] Update footer description Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> --- snaps/features/custom-ui/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snaps/features/custom-ui/index.md b/snaps/features/custom-ui/index.md index 43b8c456106..c4aa7aacad1 100644 --- a/snaps/features/custom-ui/index.md +++ b/snaps/features/custom-ui/index.md @@ -677,7 +677,7 @@ export const onUserInput = async ({ id, event }) => { ### `Footer` -Outputs a footer component that can contain one or two buttons. This component is typically used within a [`Container`](#container) to create action buttons at the bottom of a dialog or panel. +Outputs a footer that can contain one or two buttons. This component is typically used within a [`Container`](#container) to create action buttons at the bottom of a dialog or panel. #### Props From 685e711c7e3440c13db7bb3485ee182f21b1c92a Mon Sep 17 00:00:00 2001 From: Christian Montoya Date: Fri, 24 Jan 2025 16:11:48 -0500 Subject: [PATCH 07/17] Update footer props Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> --- snaps/features/custom-ui/index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/snaps/features/custom-ui/index.md b/snaps/features/custom-ui/index.md index c4aa7aacad1..82fcfe148ec 100644 --- a/snaps/features/custom-ui/index.md +++ b/snaps/features/custom-ui/index.md @@ -681,7 +681,8 @@ Outputs a footer that can contain one or two buttons. This component is typicall #### Props -- `children`: Can be either one or two [`Button`](#button) components. +- `children` - The contents of the footer. + This can be one or two [`Button`](#button) components. #### Example From 61cfd068104bcb0a9e697b1fc357fe60e770add5 Mon Sep 17 00:00:00 2001 From: Christian Montoya Date: Fri, 24 Jan 2025 16:12:11 -0500 Subject: [PATCH 08/17] Update Value props Co-authored-by: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> --- snaps/features/custom-ui/index.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/snaps/features/custom-ui/index.md b/snaps/features/custom-ui/index.md index 82fcfe148ec..ed1a8826ba7 100644 --- a/snaps/features/custom-ui/index.md +++ b/snaps/features/custom-ui/index.md @@ -1281,8 +1281,10 @@ Outputs a component that displays two text values side by side. This component c #### Props -- `value`: `string | TextElement` - The value shown on the right side. -- `extra`: `string | TextElement` - The extra text shown on the left side. +- `value` - The value shown on the right side. + This can be a string or a [`Text`](#text) component. +- `extra` - The extra text shown on the left side. + This can be a string or a [`Text`](#text) component. #### Example From 6aa14925490f93f9712fbbf6272b73110f0079d8 Mon Sep 17 00:00:00 2001 From: Christian Montoya Date: Sat, 25 Jan 2025 10:43:13 -0500 Subject: [PATCH 09/17] Move Banner above Bold --- snaps/features/custom-ui/index.md | 50 +++++++++++++++---------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/snaps/features/custom-ui/index.md b/snaps/features/custom-ui/index.md index ed1a8826ba7..05572c4984a 100644 --- a/snaps/features/custom-ui/index.md +++ b/snaps/features/custom-ui/index.md @@ -157,31 +157,6 @@ export const onHomePage: OnHomePageHandler = async () => { }; ``` -### `Bold` - -Outputs bold text. - -#### Example - -```javascript title="index.jsx" -import { Box, Heading, Text, Bold } from "@metamask/snaps-sdk/jsx"; - -await snap.request({ - method: "snap_dialog", - params: { - type: "alert", - content: ( - - Hello world! - - This is bold. - - - ), - }, -}); -``` - ### `Banner` Outputs a banner that can be used to display important messages with different severity levels. @@ -231,6 +206,31 @@ await snap.request({ }); ``` +### `Bold` + +Outputs bold text. + +#### Example + +```javascript title="index.jsx" +import { Box, Heading, Text, Bold } from "@metamask/snaps-sdk/jsx"; + +await snap.request({ + method: "snap_dialog", + params: { + type: "alert", + content: ( + + Hello world! + + This is bold. + + + ), + }, +}); +``` + ### `Box` Outputs a box, which can be used as a container for other components. From 11a2e612e45848047037f439155d90236b34baa0 Mon Sep 17 00:00:00 2001 From: Christian Montoya Date: Sat, 25 Jan 2025 11:06:44 -0500 Subject: [PATCH 10/17] Fix props for Banner and add Skeleton component --- snaps/features/custom-ui/index.md | 45 ++++++++++++++++++++++++------- 1 file changed, 35 insertions(+), 10 deletions(-) diff --git a/snaps/features/custom-ui/index.md b/snaps/features/custom-ui/index.md index 05572c4984a..416b95ec5bd 100644 --- a/snaps/features/custom-ui/index.md +++ b/snaps/features/custom-ui/index.md @@ -163,15 +163,11 @@ Outputs a banner that can be used to display important messages with different s #### Props -- `title`: `string` - Title of the banner. -- `severity`: `"danger" | "info" | "success" | "warning"` - Severity level of the banner. -- `children`: The content to display in the banner. Can include: - - Text components - - Formatting components - - Links - - Icons - - Buttons - - Skeleton loaders +- `title`: `string` - The title of the banner. +- `severity` - The severity level of the banner. + Possible values are `"danger"`, `"info"`, `"success"`, and `"warning"`. +- `children` - The content to display in the banner. + This can include [`Text`](#text), [`Link`](#link) [`Icon`](#icon), [`Button`](#button), and [`Skeleton`](#skeleton) components. #### Example @@ -1174,9 +1170,38 @@ const interfaceId = await snap.request({ Selector UI example

+### `Skeleton` + +Outputs an animated loading container. + +#### Props + +- `width`: `Array` - (Optional) width of the skeleton. +- `height`: `Array` - (Optional) height of the skeleton. +- `borderRadius`: `string` - (Optional) radius of the corners, can be `none`, `medium` or `full`. + +#### Example + +```javascript title="index.jsx" +import { Box, Heading, Skeleton } from "@metamask/snaps-sdk/jsx"; + +await snap.request({ + method: "snap_dialog", + params: { + type: "alert", + content: ( + + Please wait... + + + ), + }, +}); +``` + ### `Spinner` -Outputs a loading indicator. +Outputs an animated loading indicator. #### Example From 057ad2f010781e02d165142c21649450eeb934a2 Mon Sep 17 00:00:00 2001 From: Christian Montoya Date: Sat, 25 Jan 2025 11:08:43 -0500 Subject: [PATCH 11/17] Add Value as a child of Row --- snaps/features/custom-ui/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snaps/features/custom-ui/index.md b/snaps/features/custom-ui/index.md index 416b95ec5bd..03851c87709 100644 --- a/snaps/features/custom-ui/index.md +++ b/snaps/features/custom-ui/index.md @@ -1070,7 +1070,7 @@ Outputs a row with a label and value, which can be used for key-value data. Possible values are `"default"`, `"error"`, and `"warning"`. The default is `"default"`. - `children` - The value of the row, which can be a [`Text`](#text), [`Image`](#image), - [`Address`](#address), or [`Link`](#link) component. + [`Address`](#address), [`Link`](#link), or [`Value`](#value) component. #### Example From 3bfc09e3be28eec8e55a66d92c464dce4315e391 Mon Sep 17 00:00:00 2001 From: Christian Montoya Date: Sat, 25 Jan 2025 11:21:04 -0500 Subject: [PATCH 12/17] Add props for Address and update children for Text --- snaps/features/custom-ui/index.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/snaps/features/custom-ui/index.md b/snaps/features/custom-ui/index.md index 03851c87709..629130f6a4e 100644 --- a/snaps/features/custom-ui/index.md +++ b/snaps/features/custom-ui/index.md @@ -66,12 +66,16 @@ The following custom UI components are available: Outputs a formatted text field for a blockchain address. The address is automatically displayed with a [Jazzicon](https://www.npmjs.com/package/@metamask/jazzicon) and truncated value. -Hovering over the address shows the full value in a tooltip. +When the address is truncated, hovering over the address shows the full value in a tooltip. #### Props - `address`: `string` - A valid Ethereum address, starting with `0x`, or a valid [CAIP-10](https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-10.md) address. +- `truncate`: `boolean` - (Optional) whether to truncate the address. Defaults to `true`. +- `displayName`: `boolean` - (Optional) whether to display the internally saved account label in place of the address. + Defaults to `true`. +- `avatar`: `boolean` - (Optional) whether to show the address Jazzicon. Defaults to `true`. #### Example @@ -1238,6 +1242,8 @@ Outputs text. - `alignment` - (Optional) The alignment of the text. Possible values are `"start"`, `"center"`, and `"end"`. The default is `"start"`. +- `children` - The content to display. + This can include strings, [`Bold`](#bold), [`Italic`](#italic), [`Icon`](#icon), [`Link`](#link), and [`Skeleton`](#skeleton) components. #### Example From d38940bcb8d2b6492471914724f751bda8d644ca Mon Sep 17 00:00:00 2001 From: Christian Montoya Date: Sat, 25 Jan 2025 11:26:51 -0500 Subject: [PATCH 13/17] Update Avatar with new prop --- snaps/features/custom-ui/index.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/snaps/features/custom-ui/index.md b/snaps/features/custom-ui/index.md index 629130f6a4e..a293249c0f7 100644 --- a/snaps/features/custom-ui/index.md +++ b/snaps/features/custom-ui/index.md @@ -137,15 +137,16 @@ await snap.request({ Outputs a [Jazzicon](https://www.npmjs.com/package/@metamask/jazzicon) for an address. +#### Props + +- `address`: `string` - A valid [CAIP-10](https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-10.md) address. +- `size`: `string` - (Optional) The size of the avatar. Can be `sm`, `md`, or `lg`. Defaults to `md`. + :::note MetaMask automatically calculates checksums for EVM addresses (`eip155:`). Addresses for other namespaces are not validated; you should validate them in your Snap. ::: -#### Props - -- `address`: `string` - A valid [CAIP-10](https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-10.md) address. - #### Example ```js @@ -153,7 +154,7 @@ export const onHomePage: OnHomePageHandler = async () => { return { content: ( - + ), From eaed9d115c5cc1bd2b7a65796bcabc131285de1c Mon Sep 17 00:00:00 2001 From: Christian Montoya Date: Sat, 25 Jan 2025 11:30:55 -0500 Subject: [PATCH 14/17] Add prop for Box and update What's New --- docs/whats-new.md | 2 +- snaps/features/custom-ui/index.md | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/whats-new.md b/docs/whats-new.md index 67d8721ac92..c08ce17629c 100644 --- a/docs/whats-new.md +++ b/docs/whats-new.md @@ -11,7 +11,7 @@ of the [MetaMask developer page](https://metamask.io/developer/). ## January 2025 -- Documented Snaps [`Banner`](/snaps/features/custom-ui/#banner), [`Container`](/snaps/features/custom-ui/#container), [`Footer`](/snaps/features/custom-ui/#footer), and [`Value`](/snaps/features/custom-ui/#value) UI components. +- Documented Snaps [`Banner`](/snaps/features/custom-ui/#banner), [`Container`](/snaps/features/custom-ui/#container), [`Footer`](/snaps/features/custom-ui/#footer), [`Skeleton`](/snaps/features/custom-ui/#skeleton), and [`Value`](/snaps/features/custom-ui/#value) UI components. ([#1835](https://github.com/MetaMask/metamask-docs/pull/1835)) ## December 2024 diff --git a/snaps/features/custom-ui/index.md b/snaps/features/custom-ui/index.md index a293249c0f7..18fbdc1e15d 100644 --- a/snaps/features/custom-ui/index.md +++ b/snaps/features/custom-ui/index.md @@ -244,6 +244,8 @@ Outputs a box, which can be used as a container for other components. - `alignment` - (Optional) The alignment of the elements inside the box. Possible values are `"start"`, `"center"`, `"end"`, `"space-between"`, and `"space-around"`. The default is `"start"`. +- `center`: `boolean` - (Optional) whether to center the children within the box. + Defaults to `false`. #### Example @@ -258,6 +260,7 @@ module.exports.onHomePage = async () => { Feature 1 Feature 2 From 29a3aeeb11fdcbe66700447aff98890bc0d58f9d Mon Sep 17 00:00:00 2001 From: Alexandra Carrillo <12214231+alexandratran@users.noreply.github.com> Date: Sun, 26 Jan 2025 13:19:45 -0800 Subject: [PATCH 15/17] Apply suggestions from code review --- snaps/features/custom-ui/index.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/snaps/features/custom-ui/index.md b/snaps/features/custom-ui/index.md index 18fbdc1e15d..bf4e63e4989 100644 --- a/snaps/features/custom-ui/index.md +++ b/snaps/features/custom-ui/index.md @@ -72,10 +72,10 @@ When the address is truncated, hovering over the address shows the full value in - `address`: `string` - A valid Ethereum address, starting with `0x`, or a valid [CAIP-10](https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-10.md) address. -- `truncate`: `boolean` - (Optional) whether to truncate the address. Defaults to `true`. -- `displayName`: `boolean` - (Optional) whether to display the internally saved account label in place of the address. - Defaults to `true`. -- `avatar`: `boolean` - (Optional) whether to show the address Jazzicon. Defaults to `true`. +- `truncate`: `boolean` - (Optional) Whether to truncate the address. The default is `true`. +- `displayName`: `boolean` - (Optional) Whether to display the internally saved account label in place of the address. + The default is `true`. +- `avatar`: `boolean` - (Optional) Whether to show the address Jazzicon. The default is `true`. #### Example @@ -140,7 +140,7 @@ Outputs a [Jazzicon](https://www.npmjs.com/package/@metamask/jazzicon) for an ad #### Props - `address`: `string` - A valid [CAIP-10](https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-10.md) address. -- `size`: `string` - (Optional) The size of the avatar. Can be `sm`, `md`, or `lg`. Defaults to `md`. +- `size`: `string` - (Optional) The size of the avatar. Possible values are `"sm"`, `"md"`, and `"lg"`. The default is `"md"`. :::note MetaMask automatically calculates checksums for EVM addresses (`eip155:`). @@ -244,8 +244,8 @@ Outputs a box, which can be used as a container for other components. - `alignment` - (Optional) The alignment of the elements inside the box. Possible values are `"start"`, `"center"`, `"end"`, `"space-between"`, and `"space-around"`. The default is `"start"`. -- `center`: `boolean` - (Optional) whether to center the children within the box. - Defaults to `false`. +- `center`: `boolean` - (Optional) Whether to center the children within the box. + The default is `false`. #### Example @@ -1184,9 +1184,9 @@ Outputs an animated loading container. #### Props -- `width`: `Array` - (Optional) width of the skeleton. -- `height`: `Array` - (Optional) height of the skeleton. -- `borderRadius`: `string` - (Optional) radius of the corners, can be `none`, `medium` or `full`. +- `width`: `Array` - (Optional) The width of the skeleton. +- `height`: `Array` - (Optional) The height of the skeleton. +- `borderRadius`: `string` - (Optional) The radius of the corners. Possible values are `"none"`, `"medium"` or `"full"`. #### Example @@ -1247,7 +1247,7 @@ Outputs text. Possible values are `"start"`, `"center"`, and `"end"`. The default is `"start"`. - `children` - The content to display. - This can include strings, [`Bold`](#bold), [`Italic`](#italic), [`Icon`](#icon), [`Link`](#link), and [`Skeleton`](#skeleton) components. + This can include strings, and [`Bold`](#bold), [`Italic`](#italic), [`Icon`](#icon), [`Link`](#link), and [`Skeleton`](#skeleton) components. #### Example From 91146501b57bbfb48a5fa5fb58fd00564b469c3b Mon Sep 17 00:00:00 2001 From: Christian Montoya Date: Mon, 27 Jan 2025 12:18:11 -0500 Subject: [PATCH 16/17] Add defaults to Skeleton props --- snaps/features/custom-ui/index.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/snaps/features/custom-ui/index.md b/snaps/features/custom-ui/index.md index bf4e63e4989..c486d05a5ea 100644 --- a/snaps/features/custom-ui/index.md +++ b/snaps/features/custom-ui/index.md @@ -1184,9 +1184,10 @@ Outputs an animated loading container. #### Props -- `width`: `Array` - (Optional) The width of the skeleton. -- `height`: `Array` - (Optional) The height of the skeleton. +- `width`: `Array` - (Optional) The width of the skeleton. Defaults to `"100%"`. +- `height`: `Array` - (Optional) The height of the skeleton. Defaults to `22`. - `borderRadius`: `string` - (Optional) The radius of the corners. Possible values are `"none"`, `"medium"` or `"full"`. + Defaults to `"medium"`. #### Example From f7cc3b148cf91d993d42732ee4d2a80d059fbdb9 Mon Sep 17 00:00:00 2001 From: Christian Montoya Date: Mon, 27 Jan 2025 12:23:43 -0500 Subject: [PATCH 17/17] Cleanup Remove erroneous message about Address tooltip Make checkbox variant prop description match style of document. Make Skeleton defaults descriptions match style of document. --- snaps/features/custom-ui/index.md | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/snaps/features/custom-ui/index.md b/snaps/features/custom-ui/index.md index c486d05a5ea..6ae90aa7d2f 100644 --- a/snaps/features/custom-ui/index.md +++ b/snaps/features/custom-ui/index.md @@ -65,8 +65,7 @@ The following custom UI components are available: Outputs a formatted text field for a blockchain address. The address is automatically displayed with a [Jazzicon](https://www.npmjs.com/package/@metamask/jazzicon) -and truncated value. -When the address is truncated, hovering over the address shows the full value in a tooltip. +and truncated value. #### Props @@ -396,8 +395,7 @@ Outputs a checkbox for use in [interactive UI](interactive-ui.md). - `name`: `string` - The name sent to [`onUserInput`](../../reference/entry-points.md#onuserinput). - `checked`: `boolean` - (Optional) Whether the checkbox is checked. - `label`: `string` - (Optional) The label for the checkbox. -- `variant` - (Optional) The variant of the checkbox. - Possible values are `"default"` and `"toggle"`. +- `variant` - (Optional) The variant of the checkbox. Possible values are `"default"` and `"toggle"`. The default is `"default"`. #### Example @@ -1184,10 +1182,10 @@ Outputs an animated loading container. #### Props -- `width`: `Array` - (Optional) The width of the skeleton. Defaults to `"100%"`. -- `height`: `Array` - (Optional) The height of the skeleton. Defaults to `22`. +- `width`: `Array` - (Optional) The width of the skeleton. The default is `"100%"`. +- `height`: `Array` - (Optional) The height of the skeleton. The default is `22`. - `borderRadius`: `string` - (Optional) The radius of the corners. Possible values are `"none"`, `"medium"` or `"full"`. - Defaults to `"medium"`. + The default is `"medium"`. #### Example