Add e2e tests for AnchoredOverlay

e2e/components/ActionList.test.ts

@@ -179,8 +179,10 @@ test.describe('ActionList', () => {
         const inlineItem = page.getByRole('button', {name: /Inline Description/}).first()
         await inlineItem.focus()
 
-        // Tooltip uses popover attribute; wait for it to become visible
-        await expect(page.locator('[popover]:popover-open')).toBeVisible()
+        // Tooltip uses popover attribute; wait for it to become visible and finish animating
+        const tooltip = page.locator('[popover]:popover-open')
+        await expect(tooltip).toBeVisible()
+        await tooltip.evaluate(el => el.getAnimations().map(a => a.finish()))
         await expect(page).toHaveScreenshot(`ActionList.Truncated Inline Tooltip.${theme}.png`)
       })
 
@@ -196,7 +198,10 @@ test.describe('ActionList', () => {
         const complexItem = page.getByRole('button', {name: /Description with truncation and complex children/})
         await complexItem.focus()
 
-        await expect(page.locator('[popover]:popover-open')).toBeVisible()
+        // Wait for tooltip to become visible and finish animating
+        const tooltip = page.locator('[popover]:popover-open')
+        await expect(tooltip).toBeVisible()
+        await tooltip.evaluate(el => el.getAnimations().map(a => a.finish()))
         await expect(page).toHaveScreenshot(`ActionList.Truncated Complex Tooltip.${theme}.png`)
       })
     }

e2e/components/ActionMenu.test.ts

@@ -59,32 +59,42 @@ const stories: Array<{
   },
 ] as const
 
+const featureFlagVariants = [
+  {flagEnabled: false, suffix: ''},
+  {flagEnabled: true, suffix: '.css-anchor-positioning'},
+] as const
+
 test.describe('ActionMenu', () => {
   for (const story of stories) {
     test.describe(story.title, () => {
       for (const theme of themes) {
         test.describe(theme, () => {
-          test('default @vrt', async ({page}) => {
-            await visit(page, {
-              id: story.id,
-              globals: {
-                colorScheme: theme,
-              },
-            })
+          for (const {flagEnabled, suffix} of featureFlagVariants) {
+            test(`default @vrt${suffix}`, async ({page}) => {
+              await visit(page, {
+                id: story.id,
+                globals: {
+                  colorScheme: theme,
+                  featureFlags: {
+                    primer_react_css_anchor_positioning: flagEnabled,
+                  },
+                },
+              })
 
-            const buttonName = story.buttonName ?? 'Open menu'
+              const buttonName = story.buttonName ?? 'Open menu'
 
-            // Default state
-            // Open state
+              // Default state
+              // Open state
 
-            if (!story.skipOpen) {
-              await page.locator('button', {hasText: buttonName}).waitFor()
-              await page.getByRole('button', {name: buttonName}).click()
-            }
-            expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-              `ActionMenu.${story.title}.${theme}.png`,
-            )
-          })
+              if (!story.skipOpen) {
+                await page.locator('button', {hasText: buttonName}).waitFor()
+                await page.getByRole('button', {name: buttonName}).click()
+              }
+              expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+                `ActionMenu.${story.title}.${theme}${suffix}.png`,
+              )
+            })
+          }
         })
       }
     })

e2e/components/AnchoredOverlay.test.ts

@@ -0,0 +1,173 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {viewports} from '../test-helpers/viewports'
+import {waitForImages} from '../test-helpers/waitForImages'
+
+const stories: Array<{
+  title: string
+  id: string
+  viewport?: keyof typeof viewports
+  waitForText?: string
+  buttonName?: string
+  openDialog?: boolean
+  openNestedDialog?: boolean
+}> = [
+  // Default
+  {
+    title: 'Default',
+    id: 'components-anchoredoverlay--default',
+  },
+  // Features
+  {
+    title: 'Portal Inside Scrolling Element',
+    id: 'components-anchoredoverlay-features--portal-inside-scrolling-element',
+  },
+  {
+    title: 'Custom Anchor Id',
+    id: 'components-anchoredoverlay-features--custom-anchor-id',
+  },
+  {
+    title: 'Height',
+    id: 'components-anchoredoverlay-features--height',
+  },
+  {
+    title: 'Width',
+    id: 'components-anchoredoverlay-features--width',
+  },
+  {
+    title: 'Anchor Alignment',
+    id: 'components-anchoredoverlay-features--anchor-alignment',
+  },
+  {
+    title: 'Anchor Side',
+    id: 'components-anchoredoverlay-features--anchor-side',
+  },
+  {
+    title: 'Offset Position From Anchor',
+    id: 'components-anchoredoverlay-features--offset-position-from-anchor',
+  },
+  {
+    title: 'Offset Alignment From Anchor',
+    id: 'components-anchoredoverlay-features--offset-alignment-from-anchor',
+  },
+  {
+    title: 'Focus Trap Overrides',
+    id: 'components-anchoredoverlay-features--focus-trap-overrides',
+  },
+  {
+    title: 'Focus Zone Overrides',
+    id: 'components-anchoredoverlay-features--focus-zone-overrides',
+  },
+  {
+    title: 'Overlay Props Overrides',
+    id: 'components-anchoredoverlay-features--overlay-props-overrides',
+  },
+  {
+    title: 'Fullscreen Variant',
+    id: 'components-anchoredoverlay-features--fullscreen-variant',
+    viewport: 'primer.breakpoint.xs',
+    buttonName: 'Open Fullscreen on Narrow',
+  },
+  {
+    title: 'Anchor Position Grid',
+    id: 'components-anchoredoverlay-features--anchor-position-grid',
+    buttonName: 'Anchor',
+  },
+  {
+    title: 'Scroll With Anchor',
+    id: 'components-anchoredoverlay-features--scroll-with-anchor',
+    buttonName: 'Open Overlay',
+  },
+  // {
+  //   title: 'Within Dialog',
+  //   id: 'components-anchoredoverlay-features--within-dialog',
+  //   buttonName: 'Open Overlay',
+  //   openDialog: true,
+  // },
+  // {
+  //   title: 'Within Nested Dialog',
+  //   id: 'components-anchoredoverlay-features--within-nested-dialog',
+  //   buttonName: 'Open Overlay',
+  //   openDialog: true,
+  //   openNestedDialog: true,
+  // },
+  // {
+  //   title: 'Within Dialog Overflowing',
+  //   id: 'components-anchoredoverlay-features--within-dialog-overflowing',
+  //   buttonName: 'Open Overlay',
+  //   openDialog: true,
+  // },
+  {
+    title: 'Within Sticky Element',
+    id: 'components-anchoredoverlay-features--within-sticky-element',
+    buttonName: 'Open Overlay',
+  },
+  // Dev
+  {
+    title: 'Reposition After Content Grows',
+    id: 'components-anchoredoverlay-dev--reposition-after-content-grows',
+    waitForText: 'content with 300px height',
+  },
+  {
+    title: 'Reposition After Content Grows Within Dialog',
+    id: 'components-anchoredoverlay-dev--reposition-after-content-grows-within-dialog',
+    waitForText: 'content with 300px height',
+  },
+] as const
+
+const theme = 'light'
+
+test.describe('AnchoredOverlay', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const withCSSAnchorPositioning of [false, true]) {
+        const namePostfix = withCSSAnchorPositioning ? '.css-anchor-positioning' : ''
+
+        test(`default @vrt${namePostfix ? ` ${namePostfix}` : ''}`, async ({page}) => {
+          await visit(page, {
+            id: story.id,
+            globals: {
+              colorScheme: theme,
+              ...(withCSSAnchorPositioning && {
+                featureFlags: {
+                  primer_react_css_anchor_positioning: true,
+                },
+              }),
+            },
+          })
+
+          if (story.viewport) {
+            await page.setViewportSize({
+              width: viewports[story.viewport],
+              height: 667,
+            })
+          }
+
+          // Open dialog if needed
+          if (story.openDialog) {
+            await page.getByRole('button', {name: 'Open Dialog'}).click()
+          }
+
+          // Open nested dialog if needed
+          if (story.openNestedDialog) {
+            await page.getByRole('button', {name: 'Open Inner Dialog'}).click()
+          }
+
+          // Open the overlay
+          const buttonName = story.buttonName ?? 'Button'
+          await page.locator('button', {hasText: buttonName}).first().waitFor()
+          const overlayButton = page.getByRole('button', {name: buttonName}).first()
+          await overlayButton.click()
+
+          // for the dev stories, we intentionally change the content after the overlay is open to test that it repositions correctly
+          if (story.waitForText) await page.getByText(story.waitForText).waitFor()
+          await waitForImages(page)
+
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+            `AnchoredOverlay.${story.title}.${theme}${namePostfix}.png`,
+          )
+        })
+      }
+    })
+  }
+})

packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.module.css

@@ -62,3 +62,95 @@
 .Icon {
   color: var(--fgColor-muted);
 }
+
+.CenteredTrigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 300vh;
+  /* stylelint-disable-next-line primer/responsive-widths -- intentionally large for scroll testing */
+  min-width: 300vw;
+}
+
+.AnchorGridContainer {
+  overflow: auto;
+  height: 100vh;
+  width: 100vw;
+}
+
+.AnchorGrid {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 200vh;
+  /* stylelint-disable-next-line primer/responsive-widths -- intentionally large for grid layout testing */
+  min-width: 200vw;
+}
+
+.AnchorGridCell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* stylelint-disable-next-line primer/colors -- fallback value for borderColor-default */
+  border: var(--borderWidth-thin) solid var(--borderColor-default, #d1d9e0);
+  padding: var(--base-size-16);
+  position: relative;
+  height: 200px;
+}
+
+.AnchorGridLabel {
+  font-size: var(--text-body-size-small);
+  line-height: var(--text-body-lineHeight-small);
+  color: var(--fgColor-muted);
+  position: absolute;
+  top: var(--base-size-8);
+  left: var(--base-size-8);
+}
+
+.AnchorGridInner {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr;
+  width: 50%;
+  height: 50%;
+}
+
+.ScrollContainer {
+  height: 400px;
+  overflow: auto;
+  /* stylelint-disable-next-line primer/colors -- fallback value for borderColor-default */
+  border: var(--borderWidth-thin) solid var(--borderColor-default, #d1d9e0);
+  border-radius: var(--borderRadius-medium);
+  position: relative;
+}
+
+.ScrollContent {
+  height: 1200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--base-size-16);
+}
+
+.StickyHeader {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--base-size-8) var(--base-size-16);
+  background-color: var(--bgColor-default);
+  /* stylelint-disable-next-line primer/colors -- fallback value for borderColor-default */
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default, #d1d9e0);
+}
+
+.StickyScrollArea {
+  height: 1200px;
+  padding: var(--base-size-16);
+}
+
+.DialogBody {
+  padding: var(--base-size-16);
+  height: 2000px;
+}