From f57a80a83e6482877d2191e732528a8b0664abce Mon Sep 17 00:00:00 2001
From: Guillaume Roux <guillaumeroux123@gmail.com>
Date: Wed, 19 Feb 2025 10:40:11 +0100
Subject: [PATCH] feat(snaps): Add `crossAlignment` to `Box` (#30400)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## **Description**

This PR adds the `crossAlignment` prop to the Snap UI `Box` component.
It generates a `align-items` property.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/30400?quickstart=1)

## **Related issues**

Fixes: #30368

## **Manual testing steps**

## **Screenshots/Recordings**

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
 .../snap-ui-renderer.test.js.snap             | 26 +++++++++----------
 .../snaps/snap-ui-renderer/components/box.ts  | 26 ++++++++++++++++++-
 2 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/ui/components/app/snaps/snap-ui-renderer/__snapshots__/snap-ui-renderer.test.js.snap b/ui/components/app/snaps/snap-ui-renderer/__snapshots__/snap-ui-renderer.test.js.snap
index 42d019e2a1f0..1a5d0c9051fb 100644
--- a/ui/components/app/snaps/snap-ui-renderer/__snapshots__/snap-ui-renderer.test.js.snap
+++ b/ui/components/app/snaps/snap-ui-renderer/__snapshots__/snap-ui-renderer.test.js.snap
@@ -10,7 +10,7 @@ exports[`SnapUIRenderer prefills interactive inputs with existing state 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <div
           class="mm-box mm-form-text-field snap-ui-renderer__input mm-box--display-flex mm-box--flex-direction-column"
@@ -48,7 +48,7 @@ exports[`SnapUIRenderer re-focuses input after re-render 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <div
           class="mm-box mm-form-text-field snap-ui-renderer__input mm-box--display-flex mm-box--flex-direction-column"
@@ -102,7 +102,7 @@ exports[`SnapUIRenderer re-renders when the interface changes 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <div
           class="mm-box mm-form-text-field snap-ui-renderer__input mm-box--display-flex mm-box--flex-direction-column"
@@ -156,7 +156,7 @@ exports[`SnapUIRenderer re-syncs state when the interface changes 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <div
           class="mm-box mm-form-text-field snap-ui-renderer__input mm-box--display-flex mm-box--flex-direction-column"
@@ -210,7 +210,7 @@ exports[`SnapUIRenderer renders basic UI 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <p
           class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--font-weight-normal mm-text--overflow-wrap-break-word mm-box--color-inherit"
@@ -237,7 +237,7 @@ exports[`SnapUIRenderer renders footers 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <p
           class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--font-weight-normal mm-text--overflow-wrap-break-word mm-box--color-inherit"
@@ -308,7 +308,7 @@ exports[`SnapUIRenderer supports container backgrounds 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <p
           class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--font-weight-normal mm-text--overflow-wrap-break-word mm-box--color-inherit"
@@ -356,7 +356,7 @@ exports[`SnapUIRenderer supports file inputs 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <form
           class="mm-box snap-ui-renderer__form mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
@@ -419,7 +419,7 @@ exports[`SnapUIRenderer supports forms 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <form
           class="mm-box snap-ui-renderer__form mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
@@ -469,7 +469,7 @@ exports[`SnapUIRenderer supports forms with fields 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <form
           class="mm-box snap-ui-renderer__form mm-box--display-flex mm-box--gap-2 mm-box--flex-direction-column"
@@ -551,7 +551,7 @@ exports[`SnapUIRenderer supports interactive inputs 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <div
           class="mm-box mm-form-text-field snap-ui-renderer__input mm-box--display-flex mm-box--flex-direction-column"
@@ -589,7 +589,7 @@ exports[`SnapUIRenderer supports the contentBackgroundColor prop 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <p
           class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--font-weight-normal mm-text--overflow-wrap-break-word mm-box--color-inherit"
@@ -637,7 +637,7 @@ exports[`SnapUIRenderer supports the onCancel prop 1`] = `
       class="box snap-ui-renderer__container box--display-flex box--flex-direction-column"
     >
       <div
-        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--color-text-default"
+        class="box snap-ui-renderer__panel box--display-flex box--flex-direction-column box--justify-content-flex-start box--align-items-flex-start box--color-text-default"
       >
         <p
           class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--font-weight-normal mm-text--overflow-wrap-break-word mm-box--color-inherit"
diff --git a/ui/components/app/snaps/snap-ui-renderer/components/box.ts b/ui/components/app/snaps/snap-ui-renderer/components/box.ts
index fccf81729285..eb003e4a4dd8 100644
--- a/ui/components/app/snaps/snap-ui-renderer/components/box.ts
+++ b/ui/components/app/snaps/snap-ui-renderer/components/box.ts
@@ -31,6 +31,27 @@ function generateJustifyContent(alignment?: BoxProps['alignment']) {
   }
 }
 
+function generateAlignItems(
+  crossAlignment: BoxProps['crossAlignment'],
+  center?: BoxProps['center'],
+) {
+  if (center) {
+    return AlignItems.center;
+  }
+
+  switch (crossAlignment) {
+    default:
+    case 'start':
+      return AlignItems.flexStart;
+
+    case 'center':
+      return AlignItems.center;
+
+    case 'end':
+      return AlignItems.flexEnd;
+  }
+}
+
 export const box: UIComponentFactory<BoxElement> = ({
   element,
   ...params
@@ -46,7 +67,10 @@ export const box: UIComponentFactory<BoxElement> = ({
         ? FlexDirection.Row
         : FlexDirection.Column,
     justifyContent: generateJustifyContent(element.props.alignment),
-    alignItems: element.props.center && AlignItems.center,
+    alignItems: generateAlignItems(
+      element.props.crossAlignment,
+      element.props.center,
+    ),
     className: 'snap-ui-renderer__panel',
     color: TextColor.textDefault,
   },