From b294de874c16fad64bc4b930ccee1c9ffeb1c20f Mon Sep 17 00:00:00 2001
From: Sukkyu Chung <sukkyu.chung@gmail.com>
Date: Thu, 16 May 2024 13:11:57 +0900
Subject: [PATCH] move deprecated argTypes.defaultValue to args (Tooltip &
 Popover) (#6387)

Co-authored-by: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
---
 .../stories/Popover.stories.tsx               | 28 ++++++++++---------
 .../stories/Tooltip.stories.tsx               | 22 ++++++++-------
 2 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/packages/react-aria-components/stories/Popover.stories.tsx b/packages/react-aria-components/stories/Popover.stories.tsx
index 5b5200b4062..163fbba5f50 100644
--- a/packages/react-aria-components/stories/Popover.stories.tsx
+++ b/packages/react-aria-components/stories/Popover.stories.tsx
@@ -43,16 +43,25 @@ export const PopoverExample = () => (
               Submit
             </Button>
           </form>
-        )}
+          )}
       </Dialog>
     </Popover>
   </DialogTrigger>
-);
+  );
 
 export const PopoverArrowBoundaryOffsetExample = {
+  args: {
+    topLeft: 25,
+    topRight: 25,
+    leftTop: 15,
+    leftBottom: 15,
+    rightTop: 15,
+    rightBottom: 15,
+    bottomLeft: 25,
+    bottomRight: 25
+  },
   argTypes: {
     topLeft: {
-      defaultValue: 25,
       control: {
         type: 'range',
         min: -100,
@@ -60,7 +69,6 @@ export const PopoverArrowBoundaryOffsetExample = {
       }
     },
     topRight: {
-      defaultValue: 25,
       control: {
         type: 'range',
         min: -100,
@@ -68,15 +76,13 @@ export const PopoverArrowBoundaryOffsetExample = {
       }
     },
     leftTop: {
-      defaultValue: 15,
       control: {
         type: 'range',
         min: -100,
         max: 100
       }
     },
-    leftBotton: {
-      defaultValue: 15,
+    leftBottom: {
       control: {
         type: 'range',
         min: -100,
@@ -84,7 +90,6 @@ export const PopoverArrowBoundaryOffsetExample = {
       }
     },
     rightTop: {
-      defaultValue: 15,
       control: {
         type: 'range',
         min: -100,
@@ -92,7 +97,6 @@ export const PopoverArrowBoundaryOffsetExample = {
       }
     },
     rightBottom: {
-      defaultValue: 15,
       control: {
         type: 'range',
         min: -100,
@@ -100,7 +104,6 @@ export const PopoverArrowBoundaryOffsetExample = {
       }
     },
     bottomLeft: {
-      defaultValue: 25,
       control: {
         type: 'range',
         min: -100,
@@ -108,7 +111,6 @@ export const PopoverArrowBoundaryOffsetExample = {
       }
     },
     bottomRight: {
-      defaultValue: 25,
       control: {
         type: 'range',
         min: -100,
@@ -116,7 +118,7 @@ export const PopoverArrowBoundaryOffsetExample = {
       }
     }
   },
-  render: ({topLeft, topRight, leftTop, leftBotton, rightTop, rightBottom, bottomLeft, bottomRight}: any) => {
+  render: ({topLeft, topRight, leftTop, leftBottom, rightTop, rightBottom, bottomLeft, bottomRight}: any) => {
     return (
       <div style={{display: 'flex', flexDirection: 'column'}}>
         <div style={{display: 'flex'}}>
@@ -206,7 +208,7 @@ export const PopoverArrowBoundaryOffsetExample = {
               <Popover
                 placement="left bottom"
                 shouldFlip={false}
-                arrowBoundaryOffset={leftBotton}
+                arrowBoundaryOffset={leftBottom}
                 style={{
                   background: 'Canvas',
                   color: 'CanvasText',
diff --git a/packages/react-aria-components/stories/Tooltip.stories.tsx b/packages/react-aria-components/stories/Tooltip.stories.tsx
index dd1cc1e0b0c..4483730e2b2 100644
--- a/packages/react-aria-components/stories/Tooltip.stories.tsx
+++ b/packages/react-aria-components/stories/Tooltip.stories.tsx
@@ -40,9 +40,18 @@ export const TooltipExample = () => (
 );
 
 export const TooltipArrowBoundaryOffsetExample = {
+  args: {
+    topLeft: 25,
+    topRight: 25,
+    leftTop: 15,
+    leftBottom: 15,
+    rightTop: 15,
+    rightBottom: 15,
+    bottomLeft: 25,
+    bottomRight: 25
+  },
   argTypes: {
     topLeft: {
-      defaultValue: 25,
       control: {
         type: 'range',
         min: -100,
@@ -50,7 +59,6 @@ export const TooltipArrowBoundaryOffsetExample = {
       }
     },
     topRight: {
-      defaultValue: 25,
       control: {
         type: 'range',
         min: -100,
@@ -58,7 +66,6 @@ export const TooltipArrowBoundaryOffsetExample = {
       }
     },
     leftTop: {
-      defaultValue: 15,
       control: {
         type: 'range',
         min: -100,
@@ -66,7 +73,6 @@ export const TooltipArrowBoundaryOffsetExample = {
       }
     },
     leftBotton: {
-      defaultValue: 15,
       control: {
         type: 'range',
         min: -100,
@@ -74,7 +80,6 @@ export const TooltipArrowBoundaryOffsetExample = {
       }
     },
     rightTop: {
-      defaultValue: 15,
       control: {
         type: 'range',
         min: -100,
@@ -82,7 +87,6 @@ export const TooltipArrowBoundaryOffsetExample = {
       }
     },
     rightBottom: {
-      defaultValue: 15,
       control: {
         type: 'range',
         min: -100,
@@ -90,7 +94,6 @@ export const TooltipArrowBoundaryOffsetExample = {
       }
     },
     bottomLeft: {
-      defaultValue: 25,
       control: {
         type: 'range',
         min: -100,
@@ -98,7 +101,6 @@ export const TooltipArrowBoundaryOffsetExample = {
       }
     },
     bottomRight: {
-      defaultValue: 25,
       control: {
         type: 'range',
         min: -100,
@@ -106,7 +108,7 @@ export const TooltipArrowBoundaryOffsetExample = {
       }
     }
   },
-  render: ({topLeft, topRight, leftTop, leftBotton, rightTop, rightBottom, bottomLeft, bottomRight}: any) => {
+  render: ({topLeft, topRight, leftTop, leftBottom, rightTop, rightBottom, bottomLeft, bottomRight}: any) => {
     return (
       <div style={{display: 'flex', flexDirection: 'column'}}>
         <div style={{display: 'flex'}}>
@@ -191,7 +193,7 @@ export const TooltipArrowBoundaryOffsetExample = {
                 placement="left bottom"
                 shouldFlip={false}
                 offset={7}
-                arrowBoundaryOffset={leftBotton}
+                arrowBoundaryOffset={leftBottom}
                 style={{
                   background: 'Canvas',
                   color: 'CanvasText',