From d60eb02adb6195ed9f48a411baca86c1a937eb5d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mia=28=EC=9E=84=EC=A7=80=EC=98=81=29?=
 <37496919+YimJiYoung@users.noreply.github.com>
Date: Thu, 28 Dec 2023 16:19:05 +0900
Subject: [PATCH] chore: can use aspect ratio value as string (#922)

* feat: can use aspect ratio value as string

* test: add timeout seconds
---
 packages/vibrant-components/src/lib/Drawer/Drawer.spec.tsx | 2 +-
 packages/vibrant-core/src/lib/props/sizing/sizing.ts       | 2 +-
 packages/vibrant-core/src/lib/props/sizing/type.ts         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/vibrant-components/src/lib/Drawer/Drawer.spec.tsx b/packages/vibrant-components/src/lib/Drawer/Drawer.spec.tsx
index fa94049fa..d10ab7dc3 100644
--- a/packages/vibrant-components/src/lib/Drawer/Drawer.spec.tsx
+++ b/packages/vibrant-components/src/lib/Drawer/Drawer.spec.tsx
@@ -85,7 +85,7 @@ describe('<Drawer />', () => {
     });
 
     it('content size is shrink', async () => {
-      await waitFor(() => expect(computedStyle.width).toEqual('480px'), { timeout: 2000 });
+      await waitFor(() => expect(computedStyle.width).toEqual('480px'), { timeout: 5000 });
     });
   });
 
diff --git a/packages/vibrant-core/src/lib/props/sizing/sizing.ts b/packages/vibrant-core/src/lib/props/sizing/sizing.ts
index 908bd148c..32efba289 100644
--- a/packages/vibrant-core/src/lib/props/sizing/sizing.ts
+++ b/packages/vibrant-core/src/lib/props/sizing/sizing.ts
@@ -30,7 +30,7 @@ const boxSizingProp = createSystemProp({
 
 const aspectRatioProp = createSystemProp({
   property: 'aspectRatio',
-  transform: (value: number) => ({
+  transform: (value: number | string) => ({
     aspectRatio: value ? value.toString() : value,
   }),
 });
diff --git a/packages/vibrant-core/src/lib/props/sizing/type.ts b/packages/vibrant-core/src/lib/props/sizing/type.ts
index dcdb7f0d2..1a1c59687 100644
--- a/packages/vibrant-core/src/lib/props/sizing/type.ts
+++ b/packages/vibrant-core/src/lib/props/sizing/type.ts
@@ -8,5 +8,5 @@ export type SizingSystemProps = {
   minHeight?: ResponsiveValue<number | string | 'auto' | 'fit-content' | 'max-content' | 'min-content'>;
   maxHeight?: ResponsiveValue<number | string | 'auto' | 'fit-content' | 'max-content' | 'min-content' | 'none'>;
   boxSizing?: 'border-box' | 'content-box';
-  aspectRatio?: ResponsiveValue<number>;
+  aspectRatio?: ResponsiveValue<number | string>;
 };