Add center prop to Box component (#2716)

This adds the `center` prop to the `Box` component allowing the childrens in it to be center aligned.
MetaMask · Sep 12, 2024 · a5d85c3 · a5d85c3
1 parent dee5632
commit a5d85c3
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 3 deletions.
diff --git 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": "N8UDq+EKKrGSUr/xn+g8Fn0ebj34zd+6Urgv1S7pzuM=",
+    "shasum": "jBWYn37FTI6J3QI2ORlw36g4uXpIcBdH3n4o0CRdDvk=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git 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": "j2B/JJ/tTdTWMJo+c5S8vZpnt4pRk9Xp3MhYBmDaz1s=",
+    "shasum": "GKhf9ua3RUl21+DodL6sdx+DQFBkkdjVHMxHQy0GjGE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/snaps-sdk/src/jsx/components/Box.test.tsx b/packages/snaps-sdk/src/jsx/components/Box.test.tsx
@@ -92,7 +92,7 @@ describe('Box', () => {
 
   it('renders a box with a conditional', () => {
     const result = (
-      <Box direction="horizontal" alignment="space-between">
+      <Box direction="horizontal" alignment="space-between" center={true}>
         {false && <Text>Hello</Text>}
       </Box>
     );
@@ -103,6 +103,7 @@ describe('Box', () => {
       props: {
         direction: 'horizontal',
         alignment: 'space-between',
+        center: true,
         children: false,
       },
     });

diff --git a/packages/snaps-sdk/src/jsx/components/Box.ts b/packages/snaps-sdk/src/jsx/components/Box.ts
@@ -7,6 +7,7 @@ import { createSnapComponent } from '../component';
  * @property children - The children of the box.
  * @property direction - The direction to stack the components within the box. Defaults to `vertical`.
  * @property alignment - The alignment mode to use within the box. Defaults to `start`.
+ * @property center - Whether to center the children within the box. Defaults to `false`.
  */
 export type BoxProps = {
   // We can't use `JSXElement` because it causes a circular reference.
@@ -19,6 +20,7 @@ export type BoxProps = {
     | 'space-between'
     | 'space-around'
     | undefined;
+  center?: boolean | undefined;
 };
 
 const TYPE = 'Box';

diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
@@ -493,6 +493,7 @@ export const BoxStruct: Describe<BoxElement> = element('Box', {
       literal('space-around'),
     ]),
   ),
+  center: optional(boolean()),
 });
 
 const FooterButtonStruct = refine(ButtonStruct, 'FooterButton', (value) => {