fix: change to new css anchor positioning properties (#33139)

microsoft · Oct 25, 2024 · c547276 · c547276
1 parent 84f915c
commit c547276
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 5 deletions.
diff --git a/change/@fluentui-web-components-cb8c9815-f5ec-4855-b020-72aec63d5760.json b/change/@fluentui-web-components-cb8c9815-f5ec-4855-b020-72aec63d5760.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: change to new css anchor positioning properties",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/menu-item/menu-item.styles.ts b/packages/web-components/src/menu-item/menu-item.styles.ts
@@ -151,12 +151,12 @@ export const styles = css`
     }
 
     ::slotted([popover]) {
-      inset-area: inline-end span-block-end;
       margin: 0;
       max-height: var(--menu-max-height, auto);
       position: absolute;
       position-anchor: --menu-trigger;
-      position-try-options: flip-inline, inset-area(block-start);
+      position-area: inline-end span-block-end;
+      position-try-fallbacks: flip-inline;
       z-index: 1;
     }
 

diff --git a/packages/web-components/src/menu/menu.styles.ts b/packages/web-components/src/menu/menu.styles.ts
@@ -13,11 +13,11 @@ export const styles = css`
   }
 
   ::slotted([popover]) {
-    inset-area: block-end span-inline-end;
     margin: 0;
     max-height: var(--menu-max-height, auto);
     position-anchor: --menu-trigger;
-    position-try-options: flip-block;
+    position-area: block-end span-inline-end;
+    position-try-fallbacks: flip-block;
     position: absolute;
     z-index: 1;
   }

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="inset-area: block-end span-inline-start;">
+  <fluent-menu-list style="position-area: block-end span-inline-start;">
     <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>