fix tooltip stories

microsoft · Nov 19, 2024 · 37e8565 · 37e8565
1 parent b4d2124
commit 37e8565
Showing 1 changed file with 41 additions and 36 deletions.
diff --git 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 })),
+  },
 };