Make some updates to extend Skeleton params possibilities

Author: david0xd

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

@@ -3,6 +3,7 @@ import type { ButtonElement } from './form/Button';
 import type { StandardFormattingElement } from './formatting';
 import type { IconElement } from './Icon';
 import type { LinkElement } from './Link';
+import type { SkeletonElement } from './Skeleton';
 import type { TextElement } from './Text';
 
 /**
@@ -14,6 +15,7 @@ export type BannerChildren = SnapsChildren<
   | LinkElement
   | IconElement
   | ButtonElement
+  | SkeletonElement
 >;
 
 /**

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

@@ -9,8 +9,8 @@ import type { BorderRadius } from './utils';
  * @param borderRadius - Border radius of the Skeleton.
  */
 export type SkeletonProps = {
-  width: number | string;
-  height: number | string;
+  width?: number | string | undefined;
+  height?: number | string | undefined;
   borderRadius?: BorderRadius | undefined;
 };
 

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

@@ -3,12 +3,17 @@ import { createSnapComponent } from '../component';
 import type { StandardFormattingElement } from './formatting';
 import type { IconElement } from './Icon';
 import type { LinkElement } from './Link';
+import type { SkeletonElement } from './Skeleton';
 
 /**
  * The children of the {@link Text} component.
  */
 export type TextChildren = SnapsChildren<
-  string | StandardFormattingElement | LinkElement | IconElement
+  | string
+  | StandardFormattingElement
+  | LinkElement
+  | IconElement
+  | SkeletonElement
 >;
 
 /**

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

@@ -1623,6 +1623,7 @@ describe('BannerStruct', () => {
 
 describe('SkeletonStruct', () => {
   it.each([
+    <Skeleton />,
     <Skeleton width={320} height={32} />,
     <Skeleton width="30%" height="30%" />,
     <Skeleton width={32} height="30%" />,
@@ -1641,8 +1642,6 @@ describe('SkeletonStruct', () => {
     {},
     [],
     // @ts-expect-error - Invalid props.
-    <Skeleton />,
-    // @ts-expect-error - Invalid props.
     <Skeleton foo="bar">foo</Skeleton>,
     // @ts-expect-error - Invalid props.
     <Skeleton title={<Copyable value="bar" />} severity="info">

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

@@ -692,6 +692,17 @@ export const LinkStruct: Describe<LinkElement> = element('Link', {
   ]),
 });
 
+/**
+ * A struct for the {@link SkeletonElement} type.
+ */
+export const SkeletonStruct: Describe<SkeletonElement> = element('Skeleton', {
+  width: optional(union([number(), string()])),
+  height: optional(union([number(), string()])),
+  borderRadius: optional(
+    nullUnion([literal('none'), literal('medium'), literal('full')]),
+  ),
+});
+
 /**
  * A struct for the {@link TextElement} type.
  */
@@ -701,7 +712,13 @@ export const TextStruct: Describe<TextElement> = element('Text', {
       if (typeof value === 'string') {
         return string();
       }
-      return typedUnion([BoldStruct, ItalicStruct, LinkStruct, IconStruct]);
+      return typedUnion([
+        BoldStruct,
+        ItalicStruct,
+        LinkStruct,
+        IconStruct,
+        SkeletonStruct,
+      ]);
     }),
   ]),
   alignment: optional(
@@ -797,6 +814,7 @@ export const BannerStruct: Describe<BannerElement> = element('Banner', {
     ButtonStruct,
     BoldStruct,
     ItalicStruct,
+    SkeletonStruct,
   ]),
   title: string(),
   severity: union([
@@ -807,17 +825,6 @@ export const BannerStruct: Describe<BannerElement> = element('Banner', {
   ]),
 });
 
-/**
- * A struct for the {@link SkeletonElement} type.
- */
-export const SkeletonStruct: Describe<SkeletonElement> = element('Skeleton', {
-  width: union([number(), string()]),
-  height: union([number(), string()]),
-  borderRadius: optional(
-    nullUnion([literal('none'), literal('medium'), literal('full')]),
-  ),
-});
-
 /**
  * A struct for the {@link RowElement} type.
  */