fix: storybook - tooltip position fix

app/client/src/components/stories/Toast.stories.tsx

@@ -18,33 +18,23 @@ export default {
   decorators: [withDesign],
   parameters: {
     status: {
-      type: statusType.BETA,
+      type: statusType.STABLE,
     },
   },
 };
 
 export function ToastStory(args: ToastProps) {
   return (
-    <StoryWrapper>
-      <StyledToastContainer
-        autoClose={5000}
-        closeButton={false}
-        draggable={false}
-        hideProgressBar
-        pauseOnHover={false}
-        transition={Slide}
-      />
-      <Button
-        category={Category.primary}
-        onClick={() => {
-          action("button-clicked");
-          Toaster.show(args);
-        }}
-        size={Size.large}
-        tag={"button"}
-        text="Show toast message"
-      />
-    </StoryWrapper>
+    <Button
+      category={Category.primary}
+      onClick={() => {
+        action("button-clicked");
+        Toaster.show(args);
+      }}
+      size={Size.large}
+      tag={"button"}
+      text="Show toast message"
+    />
   );
 }
 

app/client/src/components/stories/Tooltip.stories.tsx

@@ -2,26 +2,38 @@ import React from "react";
 import { withDesign } from "storybook-addon-designs";
 import { Position } from "@blueprintjs/core";
 import TooltipComponent, { TooltipProps } from "components/ads/Tooltip";
-import { StoryWrapper, Variant } from "components/ads/common";
+import { Variant } from "components/ads/common";
 import Button, { Size } from "components/ads/Button";
 import { storyName } from "./config/constants";
 import { statusType } from "./config/types";
 import { action } from "@storybook/addon-actions";
+import styled from "styled-components";
 
 export default {
   title: storyName.platform.tooltip.PATH,
   component: TooltipComponent,
   decorators: [withDesign],
   parameters: {
     status: {
-      type: statusType.BETA,
+      type: statusType.STABLE,
     },
   },
 };
 
+const TooltipWrapper = styled.div`
+  background: #ffffff;
+  height: 250px;
+  margin: auto;
+  .bp3-popover-target {
+    width: fit-content;
+    margin: auto;
+    margin-top: 50px;
+  }
+`;
+
 export function TooltipStory(args: TooltipProps) {
   return (
-    <StoryWrapper style={{ height: 350 }}>
+    <TooltipWrapper>
       <TooltipComponent {...args} onOpening={action("tooltip-opened")}>
         <Button
           size={Size.large}
@@ -30,14 +42,23 @@ export function TooltipStory(args: TooltipProps) {
           variant={Variant.info}
         />
       </TooltipComponent>
-    </StoryWrapper>
+    </TooltipWrapper>
   );
 }
 
 TooltipStory.args = {
   content: "I'm a hover over text.",
   position: Position.BOTTOM,
-  // isOpen: true,
+  isOpen: undefined,
+  disabled: false,
+  variant: Variant.info,
+  maxWidth: "250px",
+  boundary: "scrollParent",
+  minWidth: "200px",
+  openOnTargetFocus: false,
+  autoFocus: false,
+  hoverOpenDelay: 100,
+  minimal: false,
 };
 
 TooltipStory.argTypes = {};