feat(Overlay): Convert Overlay to CSS modules behind team feature flag

.changeset/nice-boxes-sell.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+feat(Overlay): Convert Overlay to CSS modules behind team feature flag

e2e/components/Overlay.test.ts

@@ -0,0 +1,134 @@
+import {test, expect, type Page} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+const stories = [
+  {
+    title: 'Default',
+    id: 'private-components-overlay--default',
+    setup: async (page: Page) => {
+      await page.keyboard.press('Tab')
+      await page.keyboard.press('Enter')
+    },
+  },
+  {
+    title: 'Playground',
+    id: 'private-components-overlay-dev--sx-props',
+    setup: async (page: Page) => {
+      await page.keyboard.press('Tab')
+      await page.keyboard.press('Enter')
+    },
+  },
+  {
+    title: 'Dialog Overlay',
+    id: 'private-components-overlay-features--dialog-overlay',
+    setup: async (page: Page) => {
+      await page.keyboard.press('Tab')
+      await page.keyboard.press('Enter')
+    },
+  },
+  {
+    title: 'Dropdown Overlay',
+    id: 'private-components-overlay-features--dropdown-overlay',
+    setup: async (page: Page) => {
+      await page.keyboard.press('Tab')
+      await page.keyboard.press('Enter')
+    },
+  },
+  {
+    title: 'Memex Issue Overlay',
+    id: 'private-components-overlay-features--memex-issue-overlay',
+    setup: async (page: Page) => {
+      await page.keyboard.press('Tab')
+      await page.keyboard.press('Enter')
+    },
+  },
+  {
+    title: 'Memex Nested Overlays',
+    id: 'private-components-overlay-features--memex-nested-overlays',
+    setup: async (page: Page) => {
+      await page.keyboard.press('Tab')
+      await page.keyboard.press('Tab')
+      await page.keyboard.press('Enter')
+      await page.keyboard.press('Tab')
+      await page.keyboard.press('Enter')
+    },
+  },
+  {
+    title: 'Nested Overlays',
+    id: 'private-components-overlay-features--nested-overlays',
+    setup: async (page: Page) => {
+      await page.keyboard.press('Tab')
+      await page.keyboard.press('Tab')
+      await page.keyboard.press('Tab')
+      await page.keyboard.press('Enter')
+      await page.keyboard.press('Tab')
+      await page.keyboard.press('Tab')
+      await page.keyboard.press('Enter')
+    },
+  },
+  {
+    title: 'Overlay On Top Of Overlay',
+    id: 'private-components-overlay-features--overlay-on-top-of-overlay',
+    setup: async (page: Page) => {
+      await page.keyboard.press('Tab')
+      await page.keyboard.press('Tab')
+      await page.keyboard.press('Enter')
+      await page.keyboard.press('Enter')
+      await page.keyboard.press('Enter')
+    },
+  },
+  {
+    title: 'Positioned Overlays',
+    id: 'private-components-overlay-features--positioned-overlays',
+    setup: async (page: Page) => {
+      await page.keyboard.press('Tab')
+      await page.keyboard.press('Tab')
+      await page.keyboard.press('Enter')
+    },
+  },
+  {
+    title: 'SX Props',
+    id: 'private-components-overlay-dev--sx-props',
+    setup: async (page: Page) => {
+      await page.keyboard.press('Tab')
+      await page.keyboard.press('Enter')
+    },
+  },
+] as const
+
+test.describe('Overlay ', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('@vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+
+            await story.setup(page)
+
+            // Default state
+            expect(await page.screenshot()).toMatchSnapshot(`Overlay.${story.title}.${theme}.png`)
+          })
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await story.setup(page)
+
+            await expect(page).toHaveNoViolations()
+          })
+        })
+      }
+    })
+  }
+})

packages/react/src/Overlay/Overlay.dev.stories.tsx

@@ -0,0 +1,82 @@
+import React, {useRef, useState} from 'react'
+import type {Meta} from '@storybook/react'
+import Text from '../Text'
+import {Button, IconButton} from '../Button'
+import Overlay from './Overlay'
+import {useFocusTrap} from '../hooks/useFocusTrap'
+import Box from '../Box'
+import {XIcon} from '@primer/octicons-react'
+
+export default {
+  title: 'Private/Components/Overlay/Dev',
+  component: Overlay,
+} as Meta<typeof Overlay>
+
+export const SxProps = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const confirmButtonRef = useRef<HTMLButtonElement>(null)
+  const anchorRef = useRef<HTMLDivElement>(null)
+  const closeOverlay = () => setIsOpen(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+  useFocusTrap({
+    containerRef,
+    disabled: !isOpen,
+  })
+  return (
+    <Box ref={anchorRef}>
+      <Button
+        ref={buttonRef}
+        onClick={() => {
+          setIsOpen(!isOpen)
+        }}
+      >
+        Open overlay
+      </Button>
+      {isOpen ? (
+        <Overlay
+          initialFocusRef={confirmButtonRef}
+          returnFocusRef={buttonRef}
+          ignoreClickRefs={[buttonRef]}
+          onEscape={closeOverlay}
+          onClickOutside={closeOverlay}
+          width="large"
+          anchorSide="inside-right"
+          role="dialog"
+          aria-modal="true"
+          aria-label="Sample overlay"
+          ref={containerRef}
+          sx={{
+            left: '50%',
+            mt: 2,
+            color: 'var(--bgColor-danger-muted)',
+          }}
+          style={{padding: '16px'}}
+        >
+          <Box
+            sx={{
+              height: '100vh',
+              maxWidth: 'calc(-1rem + 100vw)',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <IconButton
+              aria-label="Close"
+              onClick={closeOverlay}
+              icon={XIcon}
+              variant="invisible"
+              sx={{
+                position: 'absolute',
+                left: '5px',
+                top: '5px',
+              }}
+            />
+            <Text>Look! an overlay</Text>
+          </Box>
+        </Overlay>
+      ) : null}
+    </Box>
+  )
+}

packages/react/src/Overlay/Overlay.features.stories.tsx

@@ -117,6 +117,7 @@ export const DialogOverlay = ({anchorSide, role}: OverlayProps) => {
           anchorSide={anchorSide}
           role={role}
           aria-modal={role === 'dialog' ? 'true' : undefined}
+          aria-label={role === 'list' ? 'Confirmation screen' : undefined}
           ref={containerRef}
         >
           <Box display="flex" flexDirection="column" p={2}>
@@ -171,6 +172,7 @@ export const OverlayOnTopOfOverlay = ({anchorSide, role}: OverlayProps) => {
           anchorSide={anchorSide}
           role={role}
           aria-modal={role === 'dialog' ? 'true' : undefined}
+          aria-label={role === 'list' ? 'Open overlay' : undefined}
           ref={primaryContainer}
           preventOverflow={false}
         >
@@ -188,6 +190,7 @@ export const OverlayOnTopOfOverlay = ({anchorSide, role}: OverlayProps) => {
               anchorSide={anchorSide}
               role={role}
               aria-modal={role === 'dialog' ? 'true' : undefined}
+              aria-label={role === 'list' ? 'Options' : undefined}
               ref={secondaryContainer}
               preventOverflow={false}
             >
@@ -249,6 +252,7 @@ export const MemexNestedOverlays = ({role}: OverlayProps) => {
           left={16}
           role={role}
           aria-modal={role === 'dialog' ? 'true' : undefined}
+          aria-label={role === 'list' ? 'Add iteration' : undefined}
           ref={containerRef}
           preventOverflow={false}
         >
@@ -334,6 +338,7 @@ export const NestedOverlays = ({role}: OverlayProps) => {
           ref={primaryContainer}
           role={role}
           aria-modal={role === 'dialog' ? 'true' : undefined}
+          aria-label={role === 'list' ? 'Sample list' : undefined}
         >
           <Box sx={{display: 'flex', flexDirection: 'column', py: 2}}>
             <Box sx={{paddingX: 3, paddingY: 2}}>
@@ -375,6 +380,7 @@ export const NestedOverlays = ({role}: OverlayProps) => {
               left={64}
               role={role}
               aria-modal={role === 'dialog' ? 'true' : undefined}
+              aria-label={role === 'list' ? 'Create a list' : undefined}
               ref={secondaryContainer}
             >
               <Box as="form" sx={{display: 'flex', flexDirection: 'column', p: 3}}>
@@ -446,6 +452,7 @@ export const MemexIssueOverlay = ({role}: OverlayProps) => {
           left="calc(100vw - 350px)"
           role={role}
           aria-modal={role === 'dialog' ? 'true' : undefined}
+          aria-label={role === 'list' ? 'Draft issue editor' : undefined}
           ref={containerRef}
         >
           <Box sx={{p: 4, height: '100vh', width: '350px'}}>
@@ -559,6 +566,7 @@ export const PositionedOverlays = ({right, role}: OverlayProps) => {
             anchorSide="inside-right"
             role={role}
             aria-modal={role === 'dialog' ? 'true' : undefined}
+            aria-label={role === 'list' ? 'Left aligned overlay' : undefined}
             ref={containerRef}
           >
             <Box
@@ -603,6 +611,7 @@ export const PositionedOverlays = ({right, role}: OverlayProps) => {
             position="fixed"
             role={role}
             aria-modal={role === 'dialog' ? 'true' : undefined}
+            aria-label={role === 'list' ? 'Right aligned overlay' : undefined}
             ref={containerRef}
           >
             <Box