fix: stories drawer to menu-button (#32891)

packages/web-components/src/anchor-button/anchor-button.stories.ts

@@ -1,13 +1,18 @@
 import { html } from '@microsoft/fast-element';
 import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { AnchorButton as FluentAnchorButton } from './anchor-button.js';
-import { AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize } from './anchor-button.options.js';
+import { AnchorButtonAppearance, AnchorButtonShape, AnchorButtonSize, AnchorTarget } from './anchor-button.options.js';
 
 type Story = StoryObj<FluentAnchorButton>;
 
 const storyTemplate = html<StoryArgs<FluentAnchorButton>>`
   <fluent-anchor-button
     href="${story => story.href}"
+    hreflang="${story => story.hreflang}"
+    referrerpolicy="${story => story.referrerpolicy}"
+    rel="${story => story.rel}"
+    type="${story => story.type}"
+    target="${story => story.target || void 0}"
     appearance="${story => story.appearance}"
     shape="${story => story.shape}"
     size="${story => story.size}"
@@ -23,8 +28,6 @@ export default {
   render: renderComponent(storyTemplate),
   args: {
     href: '#',
-    disabled: false,
-    disabledFocusable: false,
     slottedContent: () => 'Anchor',
   },
   argTypes: {
@@ -48,58 +51,45 @@ export default {
         type: { summary: Object.values(AnchorButtonShape).join('|') },
       },
     },
-    disabled: {
-      control: 'boolean',
-      description: "Sets the button's disabled state.",
-      table: { category: 'attributes', type: { summary: 'boolean' } },
-    },
-    disabledFocusable: {
-      control: 'boolean',
-      description: 'Indicates the button is focusable while disabled.',
-      name: 'disabled-focusable',
-      table: { category: 'attributes', type: { summary: 'boolean' } },
-    },
     href: {
       control: 'text',
-      description: 'The href of the anchor',
+      description: 'The href of the anchor.',
       name: 'href',
       table: { category: 'attributes', type: { summary: 'string' } },
     },
-    formAction: {
+    hreflang: {
       control: 'text',
-      description: 'The URL that processes the form submission.',
-      name: 'formaction',
+      description: 'Hints at the language of the referenced resource.',
+      name: 'hreflang',
       table: { category: 'attributes', type: { summary: 'string' } },
     },
-    formAttribute: {
+    referrerpolicy: {
       control: 'text',
-      description: 'The id of a form to associate the element to.',
-      name: 'form',
+      description: 'The referrerpolicy attribute.',
+      name: 'referrerpolicy',
       table: { category: 'attributes', type: { summary: 'string' } },
     },
-    formEnctype: {
+    rel: {
       control: 'text',
-      description: 'The encoding type for the form submission.',
-      name: 'formenctype',
+      description: 'The rel attribute.',
+      name: 'rel',
       table: { category: 'attributes', type: { summary: 'string' } },
     },
-    formMethod: {
+    type: {
       control: 'text',
-      description: 'The HTTP method that the browser uses to submit the form.',
-      name: 'formmethod',
+      description: 'The type attribute.',
+      name: 'type',
       table: { category: 'attributes', type: { summary: 'string' } },
     },
-    formNoValidate: {
-      control: 'boolean',
-      description: 'Indicates that the form will not be validated when submitted.',
-      name: 'formnovalidate',
-      table: { category: 'attributes', type: { summary: 'boolean' } },
-    },
-    formTarget: {
-      control: 'text',
-      description: 'The target frame or window to open the form submission in.',
-      name: 'formtarget',
-      table: { category: 'attributes', type: { summary: 'string' } },
+    target: {
+      control: 'select',
+      description: 'The target attribute.',
+      options: ['', ...Object.values(AnchorTarget)],
+      mapping: { '': null, ...AnchorTarget },
+      table: {
+        category: 'attributes',
+        type: { summary: Object.values(AnchorTarget).join('|') },
+      },
     },
     iconOnly: {
       control: 'boolean',

packages/web-components/src/drawer/drawer.stories.ts

@@ -1,8 +1,10 @@
 import { html } from '@microsoft/fast-element';
-import { Meta, renderComponent, Story, StoryArgs } from '../helpers.stories.js';
+import { type NewMeta as Meta, renderComponent, type StoryArgs, type StoryObj } from '../helpers.stories.js';
 import type { Drawer as FluentDrawer } from './drawer.js';
 import { DrawerPosition, DrawerSize, DrawerType } from './drawer.options.js';
 
+type Story = StoryObj<FluentDrawer>;
+
 const dismissed20Regular = html<StoryArgs<FluentDrawer>>`<svg
   fill="currentColor"
   aria-hidden="true"
@@ -60,10 +62,12 @@ const storyTemplate = html<StoryArgs<FluentDrawer>>`
   <div class="demo">
     <fluent-drawer
       id="drawer-default"
-      position="${x => x.position}"
-      size="${x => x.size}"
-      type="${x => x.type}"
-      style="${x => (x['--drawer-width'] !== '' ? `--drawer-width: ${x['--drawer-width']}` : void 0)}"
+      position="${story => story.position}"
+      size="${story => story.size}"
+      type="${story => story.type}"
+      style="${story =>
+        story['--drawer-width'] !== '' ? `--drawer-width: ${story['--drawer-width']};` : ''} ${story =>
+        story['--dialog-backdrop'] !== '' ? `--dialog-backdrop: ${story['--dialog-backdrop']};` : ''}"
     >
       <fluent-drawer-body>
         <span slot="title"> Drawer Header</span>
@@ -135,65 +139,63 @@ const storyTemplate = html<StoryArgs<FluentDrawer>>`
 
 export default {
   title: 'Components/Drawer',
+  render: renderComponent(storyTemplate),
   args: {
     type: DrawerType.modal,
     size: DrawerSize.medium,
     position: DrawerPosition.start,
     '--drawer-width': '',
+    '--dialog-backdrop': 'var(--colorBackgroundOverlay)',
   },
   argTypes: {
     position: {
-      options: Object.values(DrawerPosition),
-      control: {
-        type: 'select',
-      },
+      control: 'select',
+      description: 'Sets the position of drawer',
+      mapping: { '': null, ...DrawerPosition },
+      options: ['', ...Object.values(DrawerPosition)],
       table: {
-        type: {
-          summary: 'Sets the position of drawer',
-        },
-        defaultValue: {
-          summary: DrawerPosition.start,
-        },
+        category: 'attributes',
+        type: { summary: Object.values(DrawerPosition).join('|') },
       },
     },
     type: {
-      options: Object.values(DrawerType),
-      control: {
-        type: 'select',
-      },
+      control: 'select',
+      description: 'Sets the modal type of the drawer',
+      mapping: { '': null, ...DrawerType },
+      options: ['', ...Object.values(DrawerType)],
       table: {
-        type: {
-          summary: 'Sets the modal type of the drawer',
-        },
-        defaultValue: {
-          summary: DrawerType.modal,
-        },
+        category: 'attributes',
+        type: { summary: Object.values(DrawerType).join('|') },
       },
     },
     size: {
-      options: Object.values(DrawerSize),
-      control: {
-        type: 'select',
-      },
+      control: 'select',
+      description: 'Sets the modal type of the drawer',
+      mapping: { '': null, ...DrawerSize },
+      options: ['', ...Object.values(DrawerSize)],
       table: {
-        type: {
-          summary: 'Sets the width of drawer',
-        },
-        defaultValue: {
-          summary: DrawerSize.medium,
-        },
+        category: 'attributes',
+        type: { summary: Object.values(DrawerSize).join('|') },
       },
     },
     '--drawer-width': {
       control: 'text',
+      description: 'Sets the custom width of drawer, e.g. 300px',
+      required: false,
+      table: {
+        category: 'CSS Custom Properties',
+      },
+    },
+    '--dialog-backdrop': {
+      control: 'color',
+      description: 'Sets the custom color of the drawer backdrop, e.g. #000000',
       required: false,
       table: {
-        type: {
-          summary: 'Sets the custom width of drawer, e.g. 300px',
-        },
+        category: 'CSS Custom Properties',
+        type: { summary: 'Defaults to --colorBackgroundOverlay' },
       },
     },
   },
 } as Meta<FluentDrawer>;
 
-export const Drawer: Story<FluentDrawer> = renderComponent(storyTemplate).bind({});
+export const Default: Story = {};