migrate DialogV1 to css modules

primer · Nov 7, 2024 · d99f606 · d99f606
1 parent 307e706
commit d99f606
Show file tree

Hide file tree

Showing 2 changed files with 153 additions and 50 deletions.
diff --git a/packages/react/src/DialogV1/Dialog.module.css b/packages/react/src/DialogV1/Dialog.module.css
@@ -0,0 +1,62 @@
+.Overlay {
+  &:before {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: block;
+    cursor: default;
+    content: ' ';
+    z-index: 99;
+    background: var(--overlay-backdrop-bgColor, var(--color-primer-fg-canvas-backdrop));
+  }
+}
+
+.CloseIcon {
+  position: absolute;
+  top: var(--base-size-8);
+  right: var(--base-size-16);
+}
+
+.Dialog {
+  box-shadow: var(--shadow-floating-large, var(--color-shadow-large));
+  border-radius: var(--borderRadius-medium);
+  position: fixed;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  max-height: 80vh;
+  z-index: 999;
+  margin: 10vh auto;
+  background-color: var(--bgColor-default, var(--color-canvas-default));
+  width: 440px;
+  outline: none;
+
+  @media screen and (--viewportRange-narrow) {
+    width: 320px;
+  }
+
+  @media screen and (--viewportRange-wide) {
+    width: 640px;
+  }
+
+  @media screen and (max-width: 750px) {
+    width: 100dvw;
+    margin: 0;
+    border-radius: 0;
+    height: 100dvh;
+  }
+}
+
+.Header {
+  border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
+  display: flex;
+  padding: var(--base-size-16);
+  background: var(--bgColor-muted, var(--color-canvas-subtle));
+
+  @media screen and (max-width: 750px) {
+    border-radius: 0px;
+  }
+}
diff --git a/packages/react/src/DialogV1/Dialog.tsx b/packages/react/src/DialogV1/Dialog.tsx
@@ -10,6 +10,11 @@ import Text from '../Text'
 import type {ComponentProps} from '../utils/types'
 import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
 import {XIcon} from '@primer/octicons-react'
+import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
+import {useFeatureFlag} from '../FeatureFlags'
+import classes from './Dialog.module.css'
+
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
 
 // Dialog v1
 const noop = () => null
@@ -19,41 +24,50 @@ type StyledDialogBaseProps = {
   wide?: boolean
 } & SxProp
 
-const DialogBase = styled.div<StyledDialogBaseProps>`
-  box-shadow: ${get('shadows.shadow.large')};
-  border-radius: ${get('radii.2')};
-  position: fixed;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  max-height: 80vh;
-  z-index: 999;
-  margin: 10vh auto;
-  background-color: ${get('colors.canvas.default')};
-  width: ${props => (props.narrow ? '320px' : props.wide ? '640px' : '440px')};
-  outline: none;
-
-  @media screen and (max-width: 750px) {
-    width: 100dvw;
-    margin: 0;
-    border-radius: 0;
-    height: 100dvh;
-  }
+const DialogBase = toggleStyledComponent(
+  CSS_MODULES_FEATURE_FLAG,
+  'div',
+  styled.div<StyledDialogBaseProps>`
+    box-shadow: ${get('shadows.shadow.large')};
+    border-radius: ${get('radii.2')};
+    position: fixed;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    max-height: 80vh;
+    z-index: 999;
+    margin: 10vh auto;
+    background-color: ${get('colors.canvas.default')};
+    width: ${props => (props.narrow ? '320px' : props.wide ? '640px' : '440px')};
+    outline: none;
+
+    @media screen and (max-width: 750px) {
+      width: 100dvw;
+      margin: 0;
+      border-radius: 0;
+      height: 100dvh;
+    }
 
-  ${sx};
-`
+    ${sx};
+  `,
+)
 
-const DialogHeaderBase = styled(Box)<SxProp>`
-  border-radius: ${get('radii.2')} ${get('radii.2')} 0px 0px;
-  border-bottom: 1px solid ${get('colors.border.default')};
-  display: flex;
+const DialogHeaderBase = toggleStyledComponent(
+  CSS_MODULES_FEATURE_FLAG,
+  'div',
+  styled(Box)<SxProp>`
+    border-radius: ${get('radii.2')} ${get('radii.2')} 0px 0px;
+    border-bottom: 1px solid ${get('colors.border.default')};
+    display: flex;
 
-  @media screen and (max-width: 750px) {
-    border-radius: 0px;
-  }
+    @media screen and (max-width: 750px) {
+      border-radius: 0px;
+    }
+
+    ${sx};
+  `,
+)
 
-  ${sx};
-`
 export type DialogHeaderProps = ComponentProps<typeof DialogHeaderBase>
 
 function DialogHeader({theme, children, backgroundColor = 'canvas.subtle', ...rest}: DialogHeaderProps) {
@@ -65,28 +79,40 @@ function DialogHeader({theme, children, backgroundColor = 'canvas.subtle', ...re
     )
   }
 
+  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+
   return (
-    <DialogHeaderBase theme={theme} p={3} backgroundColor={backgroundColor} {...rest}>
+    <DialogHeaderBase
+      theme={theme}
+      p={3}
+      backgroundColor={backgroundColor}
+      {...rest}
+      className={enabled ? classes.Header : undefined}
+    >
       {children}
     </DialogHeaderBase>
   )
 }
 
-const Overlay = styled.span`
-  &:before {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: block;
-    cursor: default;
-    content: ' ';
-    background: transparent;
-    z-index: 99;
-    background: ${get('colors.primer.canvas.backdrop')};
-  }
-`
+const Overlay = toggleStyledComponent(
+  CSS_MODULES_FEATURE_FLAG,
+  'span',
+  styled.span`
+    &:before {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: block;
+      cursor: default;
+      content: ' ';
+      background: transparent;
+      z-index: 99;
+      background: ${get('colors.primer.canvas.backdrop')};
+    }
+  `,
+)
 
 type InternalDialogProps = {
   isOpen?: boolean
@@ -118,17 +144,32 @@ const Dialog = forwardRef<HTMLDivElement, InternalDialogProps>(
       returnFocusRef,
       overlayRef,
     })
+
+    const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+
+    const iconStyles = enabled
+      ? {className: classes.CloseIcon}
+      : {sx: {position: 'absolute', top: '8px', right: '16px'}}
+
     return isOpen ? (
       <>
-        <Overlay ref={overlayRef} />
-        <DialogBase tabIndex={-1} ref={modalRef} role="dialog" aria-modal="true" {...props} {...getDialogProps()}>
+        <Overlay className={enabled ? classes.Overlay : undefined} ref={overlayRef} />
+        <DialogBase
+          tabIndex={-1}
+          ref={modalRef}
+          role="dialog"
+          aria-modal="true"
+          {...props}
+          {...getDialogProps()}
+          className={enabled ? classes.Dialog : undefined}
+        >
           <IconButton
             icon={XIcon}
             ref={closeButtonRef}
             onClick={onCloseClick}
-            sx={{position: 'absolute', top: '8px', right: '16px'}}
             aria-label="Close"
             variant="invisible"
+            {...iconStyles}
           />
           {children}
         </DialogBase>