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

.changeset/tricky-scissors-walk.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Convert ConfirmationDialog to CSS modules behind feature flag

e2e/components/ConfirmationDialog.test.ts

@@ -0,0 +1,64 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+const stories = [
+  {
+    title: 'Default',
+    id: 'components-confirmationdialog--default',
+  },
+  {
+    title: 'Playground',
+    id: 'components-confirmationdialog--playground',
+  },
+  {
+    title: 'Shorthand Hook',
+    id: 'components-confirmationdialog-features--shorthand-hook',
+  },
+  {
+    title: 'Shorthand Hook From Action Menu',
+    id: 'components-confirmationdialog-features--shorthand-hook-from-action-menu',
+  },
+] as const
+
+test.describe('ConfirmationDialog', () => {
+  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},
+            })
+
+            // Default state
+            expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+              `ConfirmationDialog.${story.title}.${theme}.png`,
+            )
+
+            // Focus state
+            await page.keyboard.press('Tab')
+            expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+              `ConfirmationDialog.${story.title}.focus.${theme}.png`,
+            )
+          })
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+              args: {open: true},
+            })
+            await expect(page).toHaveNoViolations()
+          })
+        })
+      }
+    })
+  }
+})

packages/react/src/ConfirmationDialog/ConfirmationDialog.module.css

@@ -0,0 +1,31 @@
+.ConfirmationHeader {
+  display: flex;
+  padding: var(--base-size-8);
+  flex-direction: row;
+
+  > h1 {
+    padding: var(--base-size-6) var(--base-size-8);
+
+    /* override default margin */
+    margin: 0;
+    font-size: var(--text-title-size-medium);
+    font-weight: var(--text-title-weight-medium);
+    flex-grow: 1;
+  }
+}
+
+.ConfirmationBody {
+  padding: 0 var(--base-size-16) var(--base-size-16) var(--base-size-16);
+  font-size: var(--text-body-size-medium);
+  flex-grow: 1;
+}
+
+.ConfirmationFooter {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+  grid-gap: var(--base-size-8);
+  align-items: end;
+  justify-content: end;
+  padding: var(--base-size-4) var(--base-size-16) var(--base-size-16);
+}

packages/react/src/ConfirmationDialog/ConfirmationDialog.stories.tsx

@@ -25,6 +25,7 @@ export const Default = () => {
   const [isOpen, setIsOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
   const onDialogClose = useCallback(() => setIsOpen(false), [])
+
   return (
     <>
       <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
@@ -44,3 +45,60 @@ export const Default = () => {
     </>
   )
 }
+
+interface PlaygroundProps {
+  open: boolean
+}
+
+export const Playground = ({open, ...args}: PlaygroundProps) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const onDialogClose = useCallback(() => setIsOpen(false), [])
+
+  return (
+    <>
+      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
+        Show dialog
+      </Button>
+      {(isOpen || open) && (
+        <ConfirmationDialog
+          title="Delete universe?"
+          onClose={onDialogClose}
+          confirmButtonContent="Delete it!"
+          confirmButtonType="danger"
+          {...args}
+        >
+          Deleting the universe could have disastrous effects, including but not limited to destroying all life on
+          Earth.
+        </ConfirmationDialog>
+      )}
+    </>
+  )
+}
+
+Playground.args = {
+  open: false,
+}
+
+Playground.argTypes = {
+  open: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  title: {
+    control: {
+      type: 'text',
+    },
+  },
+  cancelButtonContent: {
+    control: {
+      type: 'text',
+    },
+  },
+  confirmButtonContent: {
+    control: {
+      type: 'text',
+    },
+  },
+}

packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx

@@ -10,6 +10,9 @@ import type {DialogProps, DialogHeaderProps, DialogButtonProps} from '../Dialog/
 import {Dialog} from '../Dialog/Dialog'
 import {useFocusZone} from '../hooks/useFocusZone'
 import BaseStyles from '../BaseStyles'
+import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
+import {useFeatureFlag} from '../FeatureFlags'
+import classes from './ConfirmationDialog.module.css'
 
 /**
  * Props to customize the ConfirmationDialog.
@@ -43,54 +46,85 @@ export interface ConfirmationDialogProps {
   confirmButtonType?: 'normal' | 'primary' | 'danger'
 }
 
-const StyledConfirmationHeader = styled.div`
-  padding: ${get('space.2')};
-  display: flex;
-  flex-direction: row;
-`
-const StyledTitle = styled(Box).attrs({as: 'h1'})`
-  font-size: ${get('fontSizes.3')};
-  font-weight: ${get('fontWeights.bold')};
-  padding: 6px ${get('space.2')};
-  flex-grow: 1;
-  margin: 0; /* override default margin */
-`
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+
+const StyledConfirmationHeader = toggleStyledComponent(
+  CSS_MODULES_FEATURE_FLAG,
+  'div',
+  styled.div`
+    padding: ${get('space.2')};
+    display: flex;
+    flex-direction: row;
+  `,
+)
+
+const StyledTitle = toggleStyledComponent(
+  CSS_MODULES_FEATURE_FLAG,
+  'h1',
+  styled(Box).attrs({as: 'h1'})`
+    font-size: ${get('fontSizes.3')};
+    font-weight: ${get('fontWeights.bold')};
+    padding: 6px ${get('space.2')};
+    flex-grow: 1;
+    margin: 0; /* override default margin */
+  `,
+)
+
 const ConfirmationHeader: React.FC<React.PropsWithChildren<DialogHeaderProps>> = ({title, onClose, dialogLabelId}) => {
   const onCloseClick = useCallback(() => {
     onClose('close-button')
   }, [onClose])
+
+  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
   return (
-    <StyledConfirmationHeader>
+    <StyledConfirmationHeader className={enabled && classes.ConfirmationHeader}>
       <StyledTitle id={dialogLabelId}>{title}</StyledTitle>
       <Dialog.CloseButton onClose={onCloseClick} />
     </StyledConfirmationHeader>
   )
 }
-const StyledConfirmationBody = styled(Box)`
-  font-size: ${get('fontSizes.1')};
-  padding: 0 ${get('space.3')} ${get('space.3')} ${get('space.3')};
-  flex-grow: 1;
-`
+const StyledConfirmationBody = toggleStyledComponent(
+  CSS_MODULES_FEATURE_FLAG,
+  'div',
+  styled(Box)`
+    font-size: ${get('fontSizes.1')};
+    padding: 0 ${get('space.3')} ${get('space.3')} ${get('space.3')};
+    flex-grow: 1;
+  `,
+)
+
 const ConfirmationBody: React.FC<React.PropsWithChildren<DialogProps>> = ({children}) => {
-  return <StyledConfirmationBody>{children}</StyledConfirmationBody>
+  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+  return <StyledConfirmationBody className={enabled && classes.ConfirmationBody}>{children}</StyledConfirmationBody>
 }
-const StyledConfirmationFooter = styled(Box)`
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: max-content;
-  grid-gap: ${get('space.2')};
-  align-items: end;
-  justify-content: end;
-  padding: ${get('space.1')} ${get('space.3')} ${get('space.3')};
-`
+const StyledConfirmationFooter = toggleStyledComponent(
+  CSS_MODULES_FEATURE_FLAG,
+  'div',
+  styled(Box)`
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: max-content;
+    grid-gap: ${get('space.2')};
+    align-items: end;
+    justify-content: end;
+    padding: ${get('space.1')} ${get('space.3')} ${get('space.3')};
+  `,
+)
+
 const ConfirmationFooter: React.FC<React.PropsWithChildren<DialogProps>> = ({footerButtons}) => {
   const {containerRef: footerRef} = useFocusZone({
     bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.Tab,
     focusInStrategy: 'closest',
   })
+
+  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+
   // Must have exactly 2 buttons!
   return (
-    <StyledConfirmationFooter ref={footerRef as React.RefObject<HTMLDivElement>}>
+    <StyledConfirmationFooter
+      ref={footerRef as React.RefObject<HTMLDivElement>}
+      className={enabled && classes.ConfirmationFooter}
+    >
       <Dialog.Buttons buttons={footerButtons ?? []} />
     </StyledConfirmationFooter>
   )