feat: Add text alignment prop (#2489)

Add `alignment` prop to the `Text` component.
MetaMask · Jun 14, 2024 · 151e6c5 · 151e6c5
1 parent 0b97b71
commit 151e6c5
Show file tree

Hide file tree

Showing 31 changed files with 37 additions and 28 deletions.
diff --git a/packages/examples/packages/bip32/snap.manifest.json b/packages/examples/packages/bip32/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "zAX3zpia+GVlYwefQz3qVY3O7ubnW6iBCFWBRmcei4E=",
+    "shasum": "9/a/+g1ymWbiZCwefOhs5yypEJY7MrmDmWaQAenmiDs=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/bip44/snap.manifest.json b/packages/examples/packages/bip44/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "c80K8ISvX9SxOzpD1XTSqHxi/oVQoEAJ+Y5spCtCi5s=",
+    "shasum": "sdAvlJI3hxd008HeY3WbsvRMOk3/7eNMDNydiaXahTA=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

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": "R7hCUzfYl50tu4GjCH94+DriHaeDVYJtRkeYbJVtwQU=",
+    "shasum": "UKLgcd/OX0YYdcewtiDzQQR4sdGUit1+sIjIs4w1pmg=",
     "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": "r5qYFnac1xM+c6383mmJKJD1BtYm7xSya0fgZ6OKXAc=",
+    "shasum": "BFFczwCLh0j4a+zcGoBnBq9Bnai/umTPr4j5B+CAoxg=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/client-status/snap.manifest.json b/packages/examples/packages/client-status/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "3F3splIWT701Gy44Fv5FQBwkVq8IKhPEMArvNOzMuUw=",
+    "shasum": "ke9Qrult9C6mw5ksdfnJGB/9lkamHpDTT1ZmBMFx//M=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/cronjobs/snap.manifest.json b/packages/examples/packages/cronjobs/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "Gz8Gi1nrpWoAA2P4/rpD/yYsHLZv9xqJSQWiQOOkA4c=",
+    "shasum": "zgBq83CQOjH2IJBmyNdxGXKSC1xqRFf4nSKWxFDxoU8=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/dialogs/snap.manifest.json b/packages/examples/packages/dialogs/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "vfqOWZkx2MCuE17IhxYwfhNO21pLoHATKnLu2xiVjnk=",
+    "shasum": "7MQ/yZNSvundmlvP95kxYNpDQOM/7KsRykhu9RYGm+8=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/ethereum-provider/snap.manifest.json b/packages/examples/packages/ethereum-provider/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "USXVYrPhQoMrEJKhJIhgSjheHQ0xvLIj2QXEaj8OVtg=",
+    "shasum": "bTYMHY21rd3YR3gOgCyvT89gEz7Qm/IB8YP4w/cqT9A=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/ethers-js/snap.manifest.json b/packages/examples/packages/ethers-js/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "ePqEKqZD06WNks6BmvNs2HGv5uqw8meI4aIcYHFij0Q=",
+    "shasum": "lm5WemXKF7OILiGJ2DoXTDsQwUy2SGS9xW9RCu7v07s=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/get-entropy/snap.manifest.json b/packages/examples/packages/get-entropy/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "SVacVTZ42QTcvb4Usz+cGp2e5hFyrsrlwBmrWB9Nzx0=",
+    "shasum": "HOJrO6IUg6fGYRgWOJvCQAHK82YxHsaJZM2wS7OdDP8=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/get-file/snap.manifest.json b/packages/examples/packages/get-file/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "ZosdV2QwEYJ/yywUWk/IX016ylaN/nZT2cCfh50Fuj8=",
+    "shasum": "L/U3mKQE4sXmKwmnwyhhN7QFRyzoGU0sIdK7qAKt6ig=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/home-page/snap.manifest.json b/packages/examples/packages/home-page/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "cOPK5By46fbBb66Y9X+6KajBZz9LokreCFt34eBzfvs=",
+    "shasum": "6WjI2OSNNeWB2gg7nV24NDfMKm5GoX5IXxWZcF8Q0Og=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/images/snap.manifest.json b/packages/examples/packages/images/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "hpjjgvbbCvd4SzNRyka8szx4ATk4KHGLeBGtkyGhNr0=",
+    "shasum": "4FqKrbTOEioXs3f46DLSdJxIH5pPuCw3vBZolTS+Y3I=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/interactive-ui/snap.manifest.json b/packages/examples/packages/interactive-ui/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "SrX0VKXee+l4Y1PkIEVHVTYHJeS0dPq8biaYLexxe3s=",
+    "shasum": "S/7dVgVP3IKcPSuKYX0zGEN8Xl1VDXvcPsiUNYjKEPE=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/invoke-snap/packages/consumer-signer/snap.manifest.json b/packages/examples/packages/invoke-snap/packages/consumer-signer/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "w/kQjoVrR0QXKvlYsbxJjyr99nPtRgADoxMLdwSuhzQ=",
+    "shasum": "NCB92co43gmFkKzQR4YR7tMr6XIQ99fIBjRzWgVzU9c=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/invoke-snap/packages/core-signer/snap.manifest.json b/packages/examples/packages/invoke-snap/packages/core-signer/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "yR7cPjniaUedjI5ct4oarCTtfn5Tm1S2KUhZQffO5uE=",
+    "shasum": "ztBLSOwgGEzVXvuk5f7wOrWe8cl5CitqMwsedZm7KaQ=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/json-rpc/snap.manifest.json b/packages/examples/packages/json-rpc/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "0Q3VKywf5n3hbuaWjdrwnGBMmNm2iU3bWffhCKC1UJE=",
+    "shasum": "0Juhm9dxf1Bn4kIWT1OXKBhuFfnOMqqOHGFLUC14JSA=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/jsx/snap.manifest.json b/packages/examples/packages/jsx/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "8mX0sPkLP85fLz4a1WLXf0BKXMMx3FD/+hh9y+3GVqQ=",
+    "shasum": "WJd77hs0zaDb7XIwup4zoY/iSgJXMPT4x0KJbW8IbYg=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/lifecycle-hooks/snap.manifest.json b/packages/examples/packages/lifecycle-hooks/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "zOcUoe1c/O+kmvhXyP13SxMHQtN4o8/6S2AryR2wAnc=",
+    "shasum": "MsE2I8c87bkLUKezCnAwu2FS2yn9QWo482iaFNwvqfs=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/localization/snap.manifest.json b/packages/examples/packages/localization/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "tJt5oKKkZP40Zry6dCs3X7ICqWYMcq9ROGkh2aRJydQ=",
+    "shasum": "Ez2wjgFDu1BcuEcn36OAvvx4+MPbaNMAX1Wk8jiMrEg=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/manage-state/snap.manifest.json b/packages/examples/packages/manage-state/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "itYAGJ1hCRxTBA0NH7a0oWgkJAj0d3xQGsYSEM6ZRcE=",
+    "shasum": "bX0tKl+zapOcrCDCaHgZWJjNs8WVUJ+vuAfvIU4O4iw=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/network-access/snap.manifest.json b/packages/examples/packages/network-access/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "/TMVNiKINxKKrA90Y3KZA3pY7uY0rZFQ3Mn13CpTOHA=",
+    "shasum": "G/zzn1Hq9CeQVTn9gCieOOGG3IHnhWiWx3qfIzME6EU=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/notifications/snap.manifest.json b/packages/examples/packages/notifications/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "OiOj32TxNeokYbDYbYUUo4deGd5+2qqfoUNGep7g7DA=",
+    "shasum": "oNhhTD7dyK806OEP3/Rpqi8pJJIaMTzoTsEhN2dzPdk=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/rollup-plugin/snap.manifest.json b/packages/examples/packages/rollup-plugin/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "DxzNxMl9/9jjyQ36+UMOwySeXhpm8H5aHXzx8VL4gY0=",
+    "shasum": "PupYfAoYE6LFjapmVNnXlju4+kDLJFxlFylk7ucbvtc=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/signature-insights/snap.manifest.json b/packages/examples/packages/signature-insights/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "WAnCb4phM9FGp4RLtp4Cn96wDxXeNIqqaFHdV/fpQcE=",
+    "shasum": "q0Jxpm6TMjarpqndNcAGl98jvEDQNsGMHXFENTPDKa0=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/transaction-insights/snap.manifest.json b/packages/examples/packages/transaction-insights/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "9J7Bh8EZDF3L+vdTxn3eJHDIlglw9BuFaZThmS1juvA=",
+    "shasum": "Hgff1r8pKsVuo2mP68OM5cc2Ia6pZQ4CpAk474PJGlU=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/wasm/snap.manifest.json b/packages/examples/packages/wasm/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "h9Ks6D8llUNa4tlouFWaAovss0zsuLAU940HuECNqBU=",
+    "shasum": "r/BcR2dPWNVxABZsDRgPvgHWuZ1R4ap0Bwke1Ge6Vqg=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/examples/packages/webpack-plugin/snap.manifest.json b/packages/examples/packages/webpack-plugin/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "zs+CYN/3rA/Ch771BleugXBN+11TPxN4xX7OqdlLTWw=",
+    "shasum": "za+YZXqlkHqC80AGAZ5QT5vpDUL9riPt40ljJJhvQ54=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/packages/snaps-sdk/src/jsx/components/Text.ts b/packages/snaps-sdk/src/jsx/components/Text.ts
@@ -17,6 +17,7 @@ export type TextChildren = MaybeArray<
  */
 export type TextProps = {
   children: TextChildren;
+  alignment?: 'start' | 'center' | 'end' | undefined;
 };
 
 const TYPE = 'Text';
@@ -31,6 +32,10 @@ const TYPE = 'Text';
  * <Text>
  *   Hello <Bold>world</Bold>!
  * </Text>
+ * @example
+ * <Text alignment="end">
+ *   Hello <Bold>world</Bold>!
+ * </Text>
  */
 export const Text = createSnapComponent<TextProps, typeof TYPE>(TYPE);
 

diff --git a/packages/snaps-sdk/src/jsx/validation.test.tsx b/packages/snaps-sdk/src/jsx/validation.test.tsx
@@ -650,6 +650,7 @@ describe('LinkStruct', () => {
 describe('TextStruct', () => {
   it.each([
     <Text>foo</Text>,
+    <Text alignment="end">foo</Text>,
     <Text>
       Hello, <Bold>world</Bold>
     </Text>,

diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
@@ -300,6 +300,9 @@ export const TextStruct: Describe<TextElement> = element('Text', {
   children: maybeArray(
     nullable(nullUnion([string(), BoldStruct, ItalicStruct, LinkStruct])),
   ),
+  alignment: optional(
+    nullUnion([literal('start'), literal('center'), literal('end')]),
+  ),
 });
 
 /**