From 6bc347d526db66916be4979bab99bc30ade183cb Mon Sep 17 00:00:00 2001
From: Zacky Ma <machi@microsoft.com>
Date: Fri, 25 Oct 2024 13:17:02 -0700
Subject: [PATCH] fix: move proper menu positioning style for split button into
 the component css (#33140)

---
 ...eb-components-42dee933-09cf-43d3-84d7-c9f946dfa0cb.json | 7 +++++++
 packages/web-components/src/menu/menu.styles.ts            | 4 ++++
 .../src/split-button/split-button.stories.ts               | 2 +-
 3 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 change/@fluentui-web-components-42dee933-09cf-43d3-84d7-c9f946dfa0cb.json

diff --git a/change/@fluentui-web-components-42dee933-09cf-43d3-84d7-c9f946dfa0cb.json b/change/@fluentui-web-components-42dee933-09cf-43d3-84d7-c9f946dfa0cb.json
new file mode 100644
index 0000000000000..d5e83c01e6c50
--- /dev/null
+++ b/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": "machi@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/menu/menu.styles.ts b/packages/web-components/src/menu/menu.styles.ts
index e8f9c1b93f519..f5da5956f0c99 100644
--- a/packages/web-components/src/menu/menu.styles.ts
+++ b/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;
   }
diff --git a/packages/web-components/src/split-button/split-button.stories.ts b/packages/web-components/src/split-button/split-button.stories.ts
index b469a1125d585..2b8683abb163b 100644
--- a/packages/web-components/src/split-button/split-button.stories.ts
+++ b/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>