diff --git a/packages/examples/packages/browserify-plugin/snap.manifest.json b/packages/examples/packages/browserify-plugin/snap.manifest.json index 85264e4c59..11cf515d69 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": "VLL7J8JE/MX0j3B7FCAGtrJ/LYXYSnq88hKUr8mMfFQ=", + "shasum": "Hk6cbofZemMiX1hbyOek/sMo3kLlgCATBaLReHnTjys=", "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 b84b8557e9..8b4d9c46f4 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": "mAFLwxqRmE5DHBRs1/nOM91YpcmeEHkyqksRrXTgjJY=", + "shasum": "OMGLit1mel4LuH9aYDSlSOoT7ZO6IsJXQjorv4NYgeQ=", "location": { "npm": { "filePath": "dist/bundle.js", diff --git a/packages/snaps-sdk/src/jsx/components/Container.test.tsx b/packages/snaps-sdk/src/jsx/components/Container.test.tsx index ad27289175..f8cf3ee651 100644 --- a/packages/snaps-sdk/src/jsx/components/Container.test.tsx +++ b/packages/snaps-sdk/src/jsx/components/Container.test.tsx @@ -7,7 +7,7 @@ import { Text } from './Text'; describe('Container', () => { it('renders a container element with a box', () => { const result = ( - + Hello world! @@ -18,6 +18,7 @@ describe('Container', () => { type: 'Container', key: null, props: { + backgroundColor: 'alternative', children: { type: 'Box', key: null, diff --git a/packages/snaps-sdk/src/jsx/components/Container.ts b/packages/snaps-sdk/src/jsx/components/Container.ts index 4277fcab54..6b2500663a 100644 --- a/packages/snaps-sdk/src/jsx/components/Container.ts +++ b/packages/snaps-sdk/src/jsx/components/Container.ts @@ -2,6 +2,11 @@ import type { GenericSnapElement } from '../component'; import { createSnapComponent } from '../component'; import type { FooterElement } from './Footer'; +/** + * Definition of container background colors. + */ +export type ContainerBackgroundColor = 'default' | 'alternative'; + /** * The props of the {@link Container} component. * @@ -9,6 +14,7 @@ import type { FooterElement } from './Footer'; */ export type ContainerProps = { children: [GenericSnapElement, FooterElement] | GenericSnapElement; + backgroundColor?: ContainerBackgroundColor | undefined; }; const TYPE = 'Container'; @@ -17,10 +23,11 @@ const TYPE = 'Container'; * A container component, which is used to create a container with a box and a footer. * * @param props - The props of the component. + * @param props.backgroundColor - The color of the background. * @param props.children - The Box and the Footer or the Box element. * @returns A container element. * @example - * + * * * Hello world! * diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx index 721a586459..0f2c3114c7 100644 --- a/packages/snaps-sdk/src/jsx/validation.test.tsx +++ b/packages/snaps-sdk/src/jsx/validation.test.tsx @@ -759,6 +759,12 @@ describe('ContainerStruct', () => { Hello world! , + + Hello world! + , + + Hello world! + , Hello world!