Add backgroundColor property to Container component

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",

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",

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 = (
-      <Container>
+      <Container backgroundColor="alternative">
         <Box>
           <Text>Hello world!</Text>
         </Box>
@@ -18,6 +18,7 @@ describe('Container', () => {
       type: 'Container',
       key: null,
       props: {
+        backgroundColor: 'alternative',
         children: {
           type: 'Box',
           key: null,

packages/snaps-sdk/src/jsx/components/Container.ts

@@ -2,13 +2,19 @@ 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.
  *
  * @property children - The Box and the Footer or the Box element.
  */
 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
- * <Container>
+ * <Container backgroundColor="default">
  *   <Box>
  *     <Text>Hello world!</Text>
  *   </Box>

packages/snaps-sdk/src/jsx/validation.test.tsx

@@ -759,6 +759,12 @@ describe('ContainerStruct', () => {
     <Container>
       <Text>Hello world!</Text>
     </Container>,
+    <Container backgroundColor="default">
+      <Text>Hello world!</Text>
+    </Container>,
+    <Container backgroundColor="alternative">
+      <Text>Hello world!</Text>
+    </Container>,
     <Container>
       <Text>Hello world!</Text>
       <Footer>

packages/snaps-sdk/src/jsx/validation.ts

@@ -877,6 +877,9 @@ export const ContainerStruct: Describe<ContainerElement> = element(
       [GenericSnapElement, FooterElement] | GenericSnapElement,
       null
     >,
+    backgroundColor: optional(
+      nullUnion([literal('default'), literal('alternative')]),
+    ),
   },
 );