From 37e8565554550117264a82a3f7be722faa7af087 Mon Sep 17 00:00:00 2001
From: John Kreitlow <863023+radium-v@users.noreply.github.com>
Date: Tue, 19 Nov 2024 09:17:21 -0800
Subject: [PATCH] fix tooltip stories

---
 .../src/tooltip/tooltip.stories.ts            | 77 ++++++++++---------
 1 file changed, 41 insertions(+), 36 deletions(-)

diff --git a/packages/web-components/src/tooltip/tooltip.stories.ts b/packages/web-components/src/tooltip/tooltip.stories.ts
index 29040e851e0bd..e40180b6ec213 100644
--- a/packages/web-components/src/tooltip/tooltip.stories.ts
+++ b/packages/web-components/src/tooltip/tooltip.stories.ts
@@ -1,10 +1,12 @@
-import { html, render, repeat } from '@microsoft/fast-element';
+import { html, repeat } from '@microsoft/fast-element';
 import { uniqueId } from '@microsoft/fast-web-utilities';
-import { Meta, renderComponent, Story } from '../helpers.stories.js';
+import { type Meta, renderComponent, type StoryObj } from '../helpers.stories.js';
 import { definition } from './tooltip.definition.js';
-import { Tooltip } from './tooltip.js';
+import type { Tooltip } from './tooltip.js';
 import { TooltipPositioningOption } from './tooltip.options.js';
 
+type Story = StoryObj<Tooltip>;
+
 const storyTemplate = () => {
   const id = uniqueId('anchor-');
 
@@ -48,13 +50,12 @@ export default {
       },
     },
   },
-} as unknown as Meta<Tooltip>;
+} as Meta<Tooltip>;
 
-export const Default: Story<Tooltip> = args => {
-  return renderComponent(html`${render(args, storyTemplate)}`)(args);
-};
-Default.args = {
-  slottedContent: () => html`Really long tooltip content goes here. lorem ipsum dolor sit amet.`,
+export const Default: Story = {
+  args: {
+    slottedContent: () => html`Really long tooltip content goes here. lorem ipsum dolor sit amet.`,
+  },
 };
 
 const iconArrowRight = (rotation = 0) => html`<svg
@@ -121,32 +122,36 @@ const positionTooltipTemplate = html`
   <fluent-tooltip anchor="btn-${x => x.id}" positioning="${x => x.id}"> ${x => x.id} </fluent-tooltip>
 `;
 
-export const Positioning: Story<Tooltip> = renderComponent(html`
-  <div>
-    <style>
-      .grid {
-        box-sizing: border-box;
-        display: grid;
-        gap: 4px;
-        max-width: min-content;
-        grid-template-areas:
-          '. above-start above above-end .'
-          'before-top . . . after-top'
-          'before . . . after'
-          'before-bottom . . . after-bottom'
-          '. below-start below below-end .';
-      }
-      .grid fluent-button {
-        aspect-ratio: 1;
-        min-width: 44px;
-      }
-    </style>
-    <div class="grid">${repeat(x => x.storyItems, positionButtonTemplate)}</div>
-
-    ${repeat(x => x.storyItems, positionTooltipTemplate)}
-  </div>
-`).bind({});
+export const Positioning: Story = {
+  parameters: {
+    layout: 'centered',
+  },
+  render: renderComponent(html`
+    <div>
+      <style>
+        .grid {
+          box-sizing: border-box;
+          display: grid;
+          gap: 4px;
+          max-width: min-content;
+          grid-template-areas:
+            '. above-start above above-end .'
+            'before-top . . . after-top'
+            'before . . . after'
+            'before-bottom . . . after-bottom'
+            '. below-start below below-end .';
+        }
+        .grid fluent-button {
+          aspect-ratio: 1;
+          min-width: 44px;
+        }
+      </style>
+      <div class="grid">${repeat(x => x.storyItems, positionButtonTemplate)}</div>
 
-Positioning.args = {
-  storyItems: Object.keys(TooltipPositioningOption).map(id => ({ id })),
+      ${repeat(x => x.storyItems, positionTooltipTemplate)}
+    </div>
+  `),
+  args: {
+    storyItems: Object.keys(TooltipPositioningOption).map(id => ({ id })),
+  },
 };