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

#5300)

* chore(Popover): convert popover to css modules -- partial

* chore(Popover): add dev story and small caret refactor

* Create three-falcons-compete.md

* test(vrt): update snapshots

* fix(Popover): format

---------

Co-authored-by: francinelucca <francinelucca@users.noreply.github.com>

.changeset/three-falcons-compete.md

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

e2e/components/Popover.test.ts

@@ -2,60 +2,49 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
-test.describe('Popover', () => {
-  test.describe('Default', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-popover--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
+const stories = [
+  {
+    title: 'Default',
+    id: 'components-popover--default',
+  },
+  {
+    title: 'Playground',
+    id: 'components-popover--playground',
+  },
+  {
+    title: 'SX Props',
+    id: 'components-popover-dev--sx-props',
+  },
+] as const
 
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Popover.Default.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-popover--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
+test.describe('Popover', () => {
+  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('Playground', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-popover--playground',
-            globals: {
-              colorScheme: theme,
-            },
+            // Default state
+            expect(await page.screenshot()).toMatchSnapshot(`Popover.${story.title}.${theme}.png`)
           })
 
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Popover.Playground.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-popover--playground',
-            globals: {
-              colorScheme: theme,
-            },
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await expect(page).toHaveNoViolations()
           })
-          await expect(page).toHaveNoViolations()
         })
-      })
-    }
-  })
+      }
+    })
+  }
 })

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

@@ -0,0 +1,38 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import Heading from '../Heading'
+import Popover from './Popover'
+import Text from '../Text'
+import {Button} from '../Button'
+
+export default {
+  title: 'Components/Popover/Dev',
+  component: Popover,
+} as Meta<typeof Popover>
+
+export const SxProps = () => (
+  <Popover
+    relative
+    open={true}
+    caret="top-right"
+    sx={{
+      left: '50%',
+      transform: 'translateX(-50%)',
+      mt: 2,
+      color: 'var(--bgColor-danger-muted)',
+    }}
+    style={{padding: '16px'}}
+  >
+    <Popover.Content
+      sx={{
+        minWidth: '260px',
+        width: '40%',
+      }}
+      style={{padding: '32px'}}
+    >
+      <Heading sx={{fontSize: 2}}>Popover heading</Heading>
+      <Text as="p">Message about popovers</Text>
+      <Button>Got it!</Button>
+    </Popover.Content>
+  </Popover>
+)

packages/react/src/Popover/Popover.module.css

@@ -0,0 +1,208 @@
+.Popover {
+  position: absolute;
+  z-index: 100;
+  display: none;
+
+  &:where([data-open]) {
+    display: block;
+  }
+
+  &:where([data-relative]) {
+    position: relative;
+  }
+}
+
+.PopoverContent {
+  position: relative;
+  width: 232px;
+  padding: var(--base-size-24);
+  margin-right: auto;
+  margin-left: auto;
+  background-color: var(--overlay-bgColor);
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-radius: var(--borderRadius-medium);
+
+  /* Carets */
+  &::before,
+  &::after {
+    position: absolute;
+    left: 50%;
+    display: inline-block;
+    content: '';
+  }
+
+  &::before {
+    top: calc(-1 * var(--base-size-16));
+    /* stylelint-disable-next-line primer/spacing */
+    margin-left: -9px;
+
+    /* TODO: solid? */
+    /* stylelint-disable-next-line primer/borders */
+    border: var(--base-size-8) solid transparent;
+    border-bottom-color: var(--borderColor-default);
+  }
+
+  &::after {
+    /* stylelint-disable-next-line primer/spacing */
+    top: -14px;
+    margin-left: calc(-1 * var(--base-size-8));
+
+    /* // todo: solid */
+    /* stylelint-disable-next-line primer/borders */
+    border: 7px solid transparent;
+    /* stylelint-disable-next-line primer/colors */
+    border-bottom-color: var(--overlay-bgColor);
+  }
+
+  /* Bottom-oriented carets */
+  :where([data-caret='bottom']) &,
+  :where([data-caret='bottom-right']) &,
+  :where([data-caret='bottom-left']) & {
+    &::before,
+    &::after {
+      top: auto;
+      border-bottom-color: transparent;
+    }
+
+    &::before {
+      bottom: calc(-1 * var(--base-size-16));
+      border-top-color: var(--borderColor-default);
+    }
+
+    &::after {
+      /* stylelint-disable-next-line primer/spacing */
+      bottom: -14px;
+      /* stylelint-disable-next-line primer/colors */
+      border-top-color: var(--overlay-bgColor);
+    }
+  }
+
+  /* Top & Bottom: Right-oriented carets */
+  :where([data-caret='top-right']) &,
+  :where([data-caret='bottom-right']) & {
+    /* stylelint-disable-next-line primer/spacing */
+    right: -9px;
+    margin-right: 0;
+
+    &::before,
+    &::after {
+      left: auto;
+      margin-left: 0;
+    }
+
+    &::before {
+      /* stylelint-disable-next-line primer/spacing */
+      right: 20px;
+    }
+
+    &::after {
+      /* stylelint-disable-next-line primer/spacing */
+      right: 21px;
+    }
+  }
+
+  /* Top & Bottom: Left-oriented carets */
+  :where([data-caret='top-left']) &,
+  :where([data-caret='bottom-left']) & {
+    /* stylelint-disable-next-line primer/spacing */
+    left: -9px;
+    margin-left: 0;
+
+    &::before,
+    &::after {
+      left: var(--base-size-24);
+      margin-left: 0;
+    }
+
+    &::after {
+      /* stylelint-disable-next-line primer/spacing */
+      left: calc(var(--base-size-24) + 1px);
+    }
+  }
+
+  /* Right- & Left-oriented carets */
+  :where([data-caret='right']) &,
+  :where([data-caret='right-top']) &,
+  :where([data-caret='right-bottom']) &,
+  :where([data-caret='left']) &,
+  :where([data-caret='left-top']) &,
+  :where([data-caret='left-bottom']) & {
+    &::before,
+    &::after {
+      top: 50%;
+      left: auto;
+      margin-left: 0;
+      border-bottom-color: transparent;
+    }
+
+    &::before {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-top: calc((var(--base-size-8) + 1px) * -1);
+    }
+
+    &::after {
+      margin-top: calc(-1 * var(--base-size-8));
+    }
+  }
+
+  /* Right-oriented carets */
+  :where([data-caret='right']) &,
+  :where([data-caret='right-top']) &,
+  :where([data-caret='right-bottom']) & {
+    &::before {
+      right: calc(-1 * var(--base-size-16));
+      border-left-color: var(--borderColor-default);
+    }
+
+    &::after {
+      /* stylelint-disable-next-line primer/spacing */
+      right: -14px;
+      /* stylelint-disable-next-line primer/colors */
+      border-left-color: var(--overlay-bgColor);
+    }
+  }
+
+  /* Left-oriented carets */
+  :where([data-caret='left']) &,
+  :where([data-caret='left-top']) &,
+  :where([data-caret='left-bottom']) & {
+    &::before {
+      left: calc(-1 * var(--base-size-16));
+      border-right-color: var(--borderColor-default);
+    }
+
+    &::after {
+      /* stylelint-disable-next-line primer/spacing */
+      left: -14px;
+      /* stylelint-disable-next-line primer/colors */
+      border-right-color: var(--overlay-bgColor);
+    }
+  }
+
+  /* Right & Left: Top-oriented carets */
+  :where([data-caret='right-top']) &,
+  :where([data-caret='left-top']) & {
+    &::before,
+    &::after {
+      top: var(--base-size-24);
+    }
+  }
+
+  /* Right & Left: Bottom-oriented carets */
+  :where([data-caret='right-bottom']) &,
+  :where([data-caret='left-bottom']) & {
+    &::before,
+    &::after {
+      top: auto;
+    }
+
+    &::before {
+      bottom: var(--base-size-16);
+    }
+
+    &::after {
+      /* stylelint-disable-next-line primer/spacing */
+      bottom: calc(var(--base-size-16) + 1px);
+    }
+  }
+}