move deprecated argTypes.defaultValue to args (Tooltip & Popover) (#6387)

Co-authored-by: Yihui Liao <[email protected]>

Author: sookmax

packages/react-aria-components/stories/Popover.stories.tsx

@@ -43,80 +43,82 @@ 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,
         max: 100
       }
     },
     topRight: {
-      defaultValue: 25,
       control: {
         type: 'range',
         min: -100,
         max: 100
       }
     },
     leftTop: {
-      defaultValue: 15,
       control: {
         type: 'range',
         min: -100,
         max: 100
       }
     },
-    leftBotton: {
-      defaultValue: 15,
+    leftBottom: {
       control: {
         type: 'range',
         min: -100,
         max: 100
       }
     },
     rightTop: {
-      defaultValue: 15,
       control: {
         type: 'range',
         min: -100,
         max: 100
       }
     },
     rightBottom: {
-      defaultValue: 15,
       control: {
         type: 'range',
         min: -100,
         max: 100
       }
     },
     bottomLeft: {
-      defaultValue: 25,
       control: {
         type: 'range',
         min: -100,
         max: 100
       }
     },
     bottomRight: {
-      defaultValue: 25,
       control: {
         type: 'range',
         min: -100,
         max: 100
       }
     }
   },
-  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',

packages/react-aria-components/stories/Tooltip.stories.tsx

@@ -40,73 +40,75 @@ 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,
         max: 100
       }
     },
     topRight: {
-      defaultValue: 25,
       control: {
         type: 'range',
         min: -100,
         max: 100
       }
     },
     leftTop: {
-      defaultValue: 15,
       control: {
         type: 'range',
         min: -100,
         max: 100
       }
     },
     leftBotton: {
-      defaultValue: 15,
       control: {
         type: 'range',
         min: -100,
         max: 100
       }
     },
     rightTop: {
-      defaultValue: 15,
       control: {
         type: 'range',
         min: -100,
         max: 100
       }
     },
     rightBottom: {
-      defaultValue: 15,
       control: {
         type: 'range',
         min: -100,
         max: 100
       }
     },
     bottomLeft: {
-      defaultValue: 25,
       control: {
         type: 'range',
         min: -100,
         max: 100
       }
     },
     bottomRight: {
-      defaultValue: 25,
       control: {
         type: 'range',
         min: -100,
         max: 100
       }
     }
   },
-  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',