fix: move proper menu positioning style for split button into the com…

…ponent css (#33140)
microsoft · Oct 25, 2024 · 6bc347d · 6bc347d
1 parent 5b86f90
commit 6bc347d
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/change/@fluentui-web-components-42dee933-09cf-43d3-84d7-c9f946dfa0cb.json 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
@@ -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
@@ -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>