Merge branch 'main' into hussam-i-am/css-modules-page-header

.changeset/rotten-teachers-brush.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Update `Timeline` component to use CSS modules behind the feature flag primer_react_css_modules_team

e2e/components/Overlay.test.ts

@@ -0,0 +1,84 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+const stories = [
+  {
+    title: 'Default',
+    id: 'private-components-overlay--default',
+  },
+  {
+    title: 'Playground',
+    id: 'private-components-overlay--playground',
+  },
+  {
+    title: 'Dialog Overlay',
+    id: 'private-components-overlay-features--dialog-overlay',
+  },
+  {
+    title: 'Dropdown Overlay',
+    id: 'private-components-overlay-features--dropdown-overlay',
+  },
+  {
+    title: 'Memex Issue Overlay',
+    id: 'private-components-overlay-features--memex-issue-overlay',
+  },
+  {
+    title: 'Memex Nested Overlays',
+    id: 'private-components-overlay-features--memex-nested-overlays',
+  },
+  {
+    title: 'Nested Overlays',
+    id: 'private-components-overlay-features--nested-overlays',
+  },
+  {
+    title: 'Overlay On Top Of Overlay',
+    id: 'private-components-overlay-features--overlay-on-top-of-overlay',
+  },
+  {
+    title: 'Positioned Overlays',
+    id: 'private-components-overlay-features--positioned-overlays',
+  },
+  {
+    title: 'SX Props',
+    id: 'private-components-overlay-dev--sx-props',
+  },
+] 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,
+              },
+              args: {
+                open: true,
+              },
+            })
+
+            await expect(page).toHaveScreenshot(`Overlay.${story.title}.${theme}.png`, {animations: 'disabled'})
+          })
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+              args: {
+                open: true,
+              },
+            })
+
+            await expect(page).toHaveNoViolations()
+          })
+        })
+      }
+    })
+  }
+})

e2e/components/Timeline.test.ts

@@ -2,143 +2,65 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
-test.describe('Timeline', () => {
-  test.describe('Default', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-timeline--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Timeline.Default.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-timeline--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
-              },
-            },
-          })
-        })
-      })
-    }
-  })
+const stories = [
+  {
+    title: 'Default',
+    id: 'components-timeline--default',
+  },
+  {
+    title: 'Clip Sidebar',
+    id: 'components-timeline-features--clip-sidebar',
+  },
+  {
+    title: 'Condensed Items',
+    id: 'components-timeline-features--condensed-items',
+  },
+  {
+    title: 'Timeline Break',
+    id: 'components-timeline-features--timeline-break',
+  },
+  {
+    title: 'SX Props',
+    id: 'components-timeline-dev--sx-props',
+  },
+] as const
 
-  test.describe('Clip Sidebar', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-timeline-features--clip-sidebar',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Timeline.Clip Sidebar.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-timeline-features--clip-sidebar',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
+test.describe('Timeline', () => {
+  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,
               },
-            },
-          })
-        })
-      })
-    }
-  })
+            })
 
-  test.describe('Condensed Items', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-timeline-features--condensed-items',
-            globals: {
-              colorScheme: theme,
-            },
+            // Default state
+            expect(await page.screenshot()).toMatchSnapshot(`Timeline.${story.title}.${theme}.png`)
           })
 
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Timeline.Condensed Items.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-timeline-features--condensed-items',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
               },
-            },
-          })
-        })
-      })
-    }
-  })
-
-  test.describe('Timeline Break', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-timeline-features--timeline-break',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Timeline.Timeline Break.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-timeline-features--timeline-break',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
+            })
+            await expect(page).toHaveNoViolations({
+              rules: {
+                'color-contrast': {
+                  enabled: theme !== 'dark_dimmed',
+                },
               },
-            },
+            })
           })
         })
-      })
-    }
-  })
-
+      }
+    })
+  }
   test.describe('With Inline Links', () => {
     for (const theme of themes) {
       test.describe(theme, () => {

e2e/test-helpers/storybook.ts

@@ -54,7 +54,7 @@ export async function visit(page: Page, options: Options) {
 
   await page.goto(url.toString())
   await page.waitForSelector('body.sb-show-main:not(.sb-show-preparing-story)')
-  await page.waitForSelector('#storybook-root > *')
+  await page.waitForSelector('#storybook-root > *', {state: 'attached'})
 
   await waitForImages(page)
 }

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

@@ -0,0 +1,91 @@
+import React, {useRef, useState} from 'react'
+import type {Args, 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,
+  args: {
+    open: false,
+  },
+  argTypes: {
+    open: {
+      control: false,
+      visible: false,
+    },
+  },
+} as Meta<typeof Overlay>
+
+export const SxProps = (args: Args) => {
+  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 || args.open ? (
+        <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>
+  )
+}