feat(snaps): Add crossAlignment to Box (#30400)

## **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.
MetaMask · Feb 19, 2025 · f57a80a · f57a80a
1 parent 629f6d1
commit f57a80a
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 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
@@ -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
@@ -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,
   },