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>
  )