From a833e24bd160a0d359f4bcb648f18fd09b3712df Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Fri, 22 Nov 2024 13:13:05 -0500
Subject: [PATCH] Add feature flag to PointerBox

---
 .../src/PointerBox/PointerBox.module.css      |  5 +++
 packages/react/src/PointerBox/PointerBox.tsx  | 45 ++++++++++++++++++-
 2 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 packages/react/src/PointerBox/PointerBox.module.css

diff --git a/packages/react/src/PointerBox/PointerBox.module.css b/packages/react/src/PointerBox/PointerBox.module.css
new file mode 100644
index 00000000000..4d0b1c5983c
--- /dev/null
+++ b/packages/react/src/PointerBox/PointerBox.module.css
@@ -0,0 +1,5 @@
+.PointerBox {
+    position: relative;
+    border: 1px solid var(--borderColor-default);
+    border-radius: var(--borderRadius-medium);
+}
\ No newline at end of file
diff --git a/packages/react/src/PointerBox/PointerBox.tsx b/packages/react/src/PointerBox/PointerBox.tsx
index 3aea8d0b112..3f53f032cc7 100644
--- a/packages/react/src/PointerBox/PointerBox.tsx
+++ b/packages/react/src/PointerBox/PointerBox.tsx
@@ -6,6 +6,11 @@ import type {CaretProps} from '../Caret'
 import Caret from '../Caret'
 import {get} from '../constants'
 import type {SxProp} from '../sx'
+import {useFeatureFlag} from '../FeatureFlags'
+import classes from './PointerBox.module.css'
+import {clsx} from 'clsx'
+
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
 
 // FIXME: Make this work with BetterStyledSystem types
 type MutatedSxProps = {
@@ -21,13 +26,14 @@ export type PointerBoxProps = {
   bg?: CaretProps['bg']
   borderColor?: CaretProps['borderColor']
   border?: CaretProps['borderWidth']
+  className?: string
 } & BoxProps &
   MutatedSxProps
 
 function PointerBox(props: PointerBoxProps) {
   // don't destructure these, just grab them
   const themeContext = React.useContext(ThemeContext)
-  const {bg, border, borderColor, theme: themeProp, sx} = props
+  const {bg, border, borderColor, theme: themeProp, sx, className} = props
   const {caret, children, ...boxProps} = props
   const {bg: sxBg, backgroundColor, ...sxRest} = sx || {}
   const theme = themeProp || themeContext
@@ -42,6 +48,43 @@ function PointerBox(props: PointerBoxProps) {
   }
 
   const defaultBoxProps = {borderWidth: '1px', borderStyle: 'solid', borderColor: 'border.default', borderRadius: 2}
+  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+
+  if (enabled) {
+    const styles: {[key: string]: string} = {}
+    if (customBackground) {
+      const pointerBoxBg = `var(--bgColor-${customBackground})`
+      styles['background-color'] = pointerBoxBg
+      styles['background-image'] =
+        `linear-gradient(${pointerBoxBg}, ${pointerBoxBg}), linear-gradient(var(--bgColor-default), var(--bgColor-default))`
+    }
+
+    if (sx) {
+      return (
+        <Box
+          {...boxProps}
+          className={clsx(className, {[classes.PointerBox]: enabled})}
+          sx={{
+            ...sxRest,
+            '--custom-bg': get(`colors.accent.emphasis`)({theme}),
+            backgroundImage: customBackground
+              ? `linear-gradient(var(--custom-bg), var(--custom-bg)), linear-gradient(var(--bgColor-default), var(--bgColor-default))`
+              : undefined,
+            position: 'relative',
+          }}
+        >
+          {children}
+          <Caret {...caretProps} />
+        </Box>
+      )
+    }
+    return (
+      <div {...boxProps} className={clsx(className, {[classes.PointerBox]: enabled})} style={styles}>
+        {children}
+        <Caret {...caretProps} />
+      </div>
+    )
+  }
 
   return (
     <Box