Update docs for Flask 12.4 (#1540)

* Document color and alignment props of <Text>

* Document Selector component

* Document Snaps RadioGroup component

* Document Snaps Tooltip component

* Update onHomePage screenshot

* Document Snaps Icon component

* Document checkbox component

* Document `context` parameter of interactive UI

* Document FileInput component

* minor edits

* update "What's new?"

* Add default values, replace old custom UI, etc.

* Remove old function-based UI examples

* Remove mention of deprecated UI component

Also move the migration section to the bottom of the page

* Fix incorrect link

* Remove errant closing tab tags

---------

Co-authored-by: Alexandra Tran <[email protected]>
Co-authored-by: Christian Montoya <[email protected]>

docs/whats-new.md

@@ -11,6 +11,9 @@ of the [MetaMask developer page](https://metamask.io/developer/).
 
 ## September 2024
 
+- Documented new [Snaps custom UI JSX components](/snaps/features/custom-ui) for Flask
+  version 12.4, and removed documentation for deprecated function-based library.
+  ([#1540](https://github.com/MetaMask/metamask-docs/pull/1540))
 - Documented [Snaps user-defined components](/snaps/features/custom-ui/user-defined-components).
   ([#1557](https://github.com/MetaMask/metamask-docs/pull/1557))
 - Updated [Android SDK documentation](/wallet/how-to/use-sdk/mobile/android) with convenience

snaps/features/custom-ui/dialogs.md

@@ -3,9 +3,6 @@ description: Display custom alert, confirmation, or prompt screens in MetaMask.
 sidebar_position: 2
 ---
 
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
-
 # Dialogs
 
 You can display a dialog in the MetaMask UI using the
@@ -38,9 +35,6 @@ To display an alert that can only be acknowledged, call
 [`snap_dialog`](../../reference/snaps-api.md#snap_dialog) with `type: "alert"`.
 The following example displays custom UI that alerts the user when something happens in the system:
 
-<Tabs>
-<TabItem value="JSX">
-
 ```tsx title="index.tsx"
 import { Box, Text, Heading } from "@metamask/snaps-sdk/jsx";
 
@@ -60,30 +54,6 @@ await snap.request({
 // Code that should execute after the alert has been acknowledged.
 ```
 
-</TabItem>
-<TabItem value="Functions" deprecated>
-
-```javascript title="index.js"
-import { panel, text, heading } from "@metamask/snaps-sdk"
-
-await snap.request({
-  method: "snap_dialog",
-  params: {
-    type: "alert",
-    content: panel([
-      heading("Something happened in the system"),
-      text("The thing that happened is..."),
-    ]),
-  },
-})
-
-// Code that should execute after the alert has been acknowledged.
-```
-
-</TabItem>
-</Tabs>
-
-
 <p align="center">
 <img src={require("../../assets/alert-dialog.png").default} alt="Alert dialog example" width="360px" style={{border: "1px solid #DCDCDC"}} />
 </p>
@@ -95,9 +65,6 @@ To display a confirmation that can be accepted or rejected, call
 The following example displays custom UI that asks the user to confirm whether they would like to
 take an action:
 
-<Tabs>
-<TabItem value="JSX">
-
 ```tsx title="index.tsx"
 import { Box, Text, Heading } from "@metamask/snaps-sdk/jsx";
 
@@ -119,31 +86,6 @@ if (result === true) {
 }
 ```
 
-</TabItem>
-<TabItem value="Functions" deprecated>
-
-```javascript title="index.js"
-import { panel, text, heading } from "@metamask/snaps-sdk"
-
-const result = await snap.request({
-  method: "snap_dialog",
-  params: {
-    type: "confirmation",
-    content: panel([
-      heading("Would you like to take the action?"),
-      text("The action is..."),
-    ]),
-  },
-})
-
-if (result === true) {
-  // Do the action.
-}
-```
-
-</TabItem>
-</Tabs>
-
 <p align="center">
 <img src={require("../../assets/confirmation-dialog.png").default} alt="Confirmation dialog example" width="360px" style={{border: "1px solid #DCDCDC"}} />
 </p>
@@ -156,9 +98,6 @@ Prompt dialogs also accept a `placeholder` value that displays in the input fiel
 
 The following example displays custom UI that prompts the user to enter a wallet address:
 
-<Tabs>
-<TabItem value="JSX">
-
 ```tsx title="index.tsx"
 import { Box, Text, Heading } from "@metamask/snaps-sdk/jsx";
 
@@ -179,30 +118,6 @@ const walletAddress = await snap.request({
 // walletAddress will be a string containing the address entered by the user.
 ```
 
-</TabItem>
-<TabItem value="Functions" deprecated>
-
-```javascript title="index.js"
-import { panel, text, heading } from "@metamask/snaps-sdk"
-
-const walletAddress = await snap.request({
-  method: "snap_dialog",
-  params: {
-    type: "prompt",
-    content: panel([
-      heading("What is the wallet address?"),
-      text("Please enter the wallet address to be monitored"),
-    ]),
-    placeholder: "0x123...",
-  },
-})
-
-// walletAddress will be a string containing the address entered by the user.
-```
-
-</TabItem>
-</Tabs>
-
 <p align="center">
 <img src={require("../../assets/prompt-dialog.png").default} alt="Prompt dialog example" width="360px" style={{border: "1px solid #DCDCDC"}} />
 </p>

snaps/features/custom-ui/home-pages.md

@@ -3,9 +3,6 @@ description: Display a dedicated UI page in MetaMask for your Snap.
 sidebar_position: 3
 ---
 
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
-
 # Home pages
 
 You can display a dedicated UI, or "home page," for your Snap within MetaMask.
@@ -35,9 +32,6 @@ MetaMask calls this method when a user selects your Snap name in the Snaps menu.
 
 The following example displays custom UI that welcomes the user to the Snap's home page:
 
-<Tabs>
-<TabItem value="JSX">
-
 ```tsx title="index.tsx"
 import type { OnHomePageHandler } from "@metamask/snaps-sdk";
 import { Box, Heading, Text } from "@metamask/snaps-sdk/jsx";
@@ -54,26 +48,6 @@ export const onHomePage: OnHomePageHandler = async () => {
 };
 ```
 
-</TabItem>
-<TabItem value="Functions" deprecated>
-
-```typescript title="index.ts"
-import type { OnHomePageHandler } from "@metamask/snaps-sdk"
-import { panel, text, heading } from "@metamask/snaps-sdk"
-
-export const onHomePage: OnHomePageHandler = async () => {
-  return {
-    content: panel([
-      heading("Hello world!"),
-      text("Welcome to my Snap home page!"),
-    ]),
-  }
-}
-```
-
-</TabItem>
-</Tabs>
-
 <p align="center">
 <img src={require("../../assets/home-page.png").default} alt="Home page example" width="360px" style={{border: "1px solid #DCDCDC"}} />
 </p>