fix: move proper menu positioning style for split button into the component css (#33140)

Author: marchbox

change/@fluentui-web-components-42dee933-09cf-43d3-84d7-c9f946dfa0cb.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: move proper menu positioning for split button into component css",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/web-components/src/menu/menu.styles.ts

@@ -22,6 +22,10 @@ export const styles = css`
     z-index: 1;
   }
 
+  :host([split]) ::slotted([popover]) {
+    position-area: block-end span-inline-start;
+  }
+
   ::slotted([popover]:popover-open) {
     inset: unset;
   }

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

@@ -6,7 +6,7 @@ import type { Menu as FluentMenu } from '../menu/menu.js';
 type Story = StoryObj<FluentMenu>;
 
 const defaultSlottedContent = html`
-  <fluent-menu-list style="position-area: block-end span-inline-start;">
+  <fluent-menu-list>
     <fluent-menu-item>Menu item 1</fluent-menu-item>
     <fluent-menu-item>Menu item 2</fluent-menu-item>
     <fluent-menu-item>Menu item 3</fluent-menu-item>