improve anchor position handling

microsoft · Dec 21, 2024 · 3761ed8 · 3761ed8
1 parent 1a1bb2e
commit 3761ed8
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 98 deletions.
diff --git a/packages/web-components/src/combobox/combobox.stories.ts b/packages/web-components/src/combobox/combobox.stories.ts
@@ -120,82 +120,6 @@ export const MultipleSelection: Story = {
   },
 };
 
-export const Small: Story = {
-  args: {
-    ...Default.args,
-    size: DropdownSize.small,
-  },
-};
-
-export const Large: Story = {
-  args: {
-    ...Default.args,
-    size: DropdownSize.large,
-  },
-};
-
-export const FilledLighter: Story = {
-  args: {
-    ...Default.args,
-    appearance: DropdownAppearance.filledLighter,
-  },
-};
-
-export const FilledDarker: Story = {
-  args: {
-    ...Default.args,
-    appearance: DropdownAppearance.filledDarker,
-  },
-};
-
-export const Outline: Story = {
-  args: {
-    ...Default.args,
-    appearance: DropdownAppearance.outline,
-  },
-};
-
-export const Transparent: Story = {
-  args: {
-    ...Default.args,
-    appearance: DropdownAppearance.transparent,
-  },
-};
-
-export const Inline: Story = {
-  render: renderComponent(html<StoryArgs<FluentDropdown>>`
-    <p>Some text inline with the ${dropdownTemplate} and more text.</p>
-  `),
-  args: {
-    ...Default.args,
-    slot: null,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    ...Default.args,
-    disabled: true,
-  },
-};
-
-export const DisabledOptions: Story = {
-  args: {
-    ...Default.args,
-    slottedContent: [
-      { disabled: true, value: 'apple', slottedContent: () => 'Apple' },
-      { value: 'banana', slottedContent: () => 'Banana' },
-      { value: 'orange', slottedContent: () => 'Orange' },
-      { disabled: true, value: 'mango', slottedContent: () => 'Mango' },
-      { disabled: true, value: 'kiwi', slottedContent: () => 'Kiwi' },
-      { value: 'cherry', slottedContent: () => 'Cherry' },
-      { value: 'grapefruit', slottedContent: () => 'Grapefruit' },
-      { disabled: true, value: 'papaya', slottedContent: () => 'Papaya' },
-      { value: 'lychee', slottedContent: () => 'Lychee' },
-    ],
-  },
-};
-
 export const ManyOptions: Story = {
   args: {
     ...Default.args,
@@ -451,3 +375,79 @@ export const ManyOptions: Story = {
     ],
   },
 };
+
+export const Small: Story = {
+  args: {
+    ...Default.args,
+    size: DropdownSize.small,
+  },
+};
+
+export const Large: Story = {
+  args: {
+    ...Default.args,
+    size: DropdownSize.large,
+  },
+};
+
+export const FilledLighter: Story = {
+  args: {
+    ...Default.args,
+    appearance: DropdownAppearance.filledLighter,
+  },
+};
+
+export const FilledDarker: Story = {
+  args: {
+    ...Default.args,
+    appearance: DropdownAppearance.filledDarker,
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    ...Default.args,
+    appearance: DropdownAppearance.outline,
+  },
+};
+
+export const Transparent: Story = {
+  args: {
+    ...Default.args,
+    appearance: DropdownAppearance.transparent,
+  },
+};
+
+export const Inline: Story = {
+  render: renderComponent(html<StoryArgs<FluentDropdown>>`
+    <p>Some text inline with the ${dropdownTemplate} and more text.</p>
+  `),
+  args: {
+    ...Default.args,
+    slot: null,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+};
+
+export const DisabledOptions: Story = {
+  args: {
+    ...Default.args,
+    slottedContent: [
+      { disabled: true, value: 'apple', slottedContent: () => 'Apple' },
+      { value: 'banana', slottedContent: () => 'Banana' },
+      { value: 'orange', slottedContent: () => 'Orange' },
+      { disabled: true, value: 'mango', slottedContent: () => 'Mango' },
+      { disabled: true, value: 'kiwi', slottedContent: () => 'Kiwi' },
+      { value: 'cherry', slottedContent: () => 'Cherry' },
+      { value: 'grapefruit', slottedContent: () => 'Grapefruit' },
+      { disabled: true, value: 'papaya', slottedContent: () => 'Papaya' },
+      { value: 'lychee', slottedContent: () => 'Lychee' },
+    ],
+  },
+};
diff --git a/packages/web-components/src/dropdown/dropdown.styles.ts b/packages/web-components/src/dropdown/dropdown.styles.ts
@@ -248,15 +248,15 @@ export const styles = css`
   }
 
   @supports not (anchor-name: --anchor) {
-    :host(${fallbackState}) ::slotted([popover]) {
+    :host(:where(${fallbackState})) ::slotted([popover]) {
       margin-block-start: calc(${lineHeightBase300} + (${spacingVerticalSNudge} * 2) + ${strokeWidthThin});
     }
 
-    :host(${fallbackState}${smallState}) ::slotted([popover]) {
+    :host(:where(${fallbackState}${smallState})) ::slotted([popover]) {
       margin-block-start: calc(${lineHeightBase200} + (${spacingVerticalXS} * 2) + ${strokeWidthThin});
     }
 
-    :host(${fallbackState}${largeState}) ::slotted([popover]) {
+    :host(:where(${fallbackState}${largeState})) ::slotted([popover]) {
       margin-block-start: calc(${lineHeightBase400} + (${spacingVerticalS} * 2) + ${strokeWidthThin});
     }
 

diff --git a/packages/web-components/src/dropdown/dropdown.ts b/packages/web-components/src/dropdown/dropdown.ts
@@ -980,26 +980,27 @@ export class Dropdown extends BaseDropdown {
       return;
     }
 
-    if (!window.CSS_ANCHOR_POLYFILL) {
-      const observerCallback = (entries: IntersectionObserverEntry[]): void => {
-        entries.forEach(entry => {
-          const target = entry.target as Listbox;
-          if (isListbox(target)) {
-            if (inRange(entry.intersectionRatio, 0, 1)) {
-              toggleState(
-                target.dropdown?.elementInternals,
-                'flip-block',
-                entry.intersectionRect.bottom >= window.innerHeight,
-              );
-            }
+    const observerCallback = (entries: IntersectionObserverEntry[]): void => {
+      entries.forEach(entry => {
+        const target = entry.target as Listbox;
+        if (isListbox(target)) {
+          if (inRange(entry.intersectionRatio, 0, 1)) {
+            toggleState(
+              target.dropdown?.elementInternals,
+              'flip-block',
+              entry.intersectionRect.bottom >= window.innerHeight,
+            );
           }
-        });
-      };
+        }
+      });
+    };
+
+    Dropdown.AnchorPositionFallbackObserver =
+      Dropdown.AnchorPositionFallbackObserver ?? new IntersectionObserver(observerCallback, { threshold: [0, 1] });
 
-      Dropdown.AnchorPositionFallbackObserver =
-        Dropdown.AnchorPositionFallbackObserver ?? new IntersectionObserver(observerCallback, { threshold: [0, 1] });
+    toggleState(this.elementInternals, 'anchor-position-fallback', true);
 
-      toggleState(this.elementInternals, 'anchor-position-fallback', true);
+    if (!window.CSS_ANCHOR_POLYFILL) {
       return;
     }
 
@@ -1016,8 +1017,6 @@ export class Dropdown extends BaseDropdown {
 
       #${this.listbox.id} {
         position-anchor: ${anchorName};
-        top: anchor(bottom);
-        left: anchor(left);
         position-try-fallbacks: block-start, flip-inline, flip-block;
         max-height: var(--listbox-max-height, calc(100vh - anchor-size(self-block)));
         min-width: anchor-size(width);