From 21aa904e2761e75ef99413aae84015b0baee4c08 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Thu, 17 Apr 2025 10:42:41 -0700
Subject: [PATCH] refactor: Make it a TypeScript error to pass style macro to
 UNSAFE_className

---
 packages/@react-spectrum/s2/src/ContextualHelp.tsx | 2 +-
 packages/@react-spectrum/s2/src/style-utils.ts     | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/ContextualHelp.tsx b/packages/@react-spectrum/s2/src/ContextualHelp.tsx
index 339c83902d3..8c9b48167a3 100644
--- a/packages/@react-spectrum/s2/src/ContextualHelp.tsx
+++ b/packages/@react-spectrum/s2/src/ContextualHelp.tsx
@@ -103,7 +103,7 @@ export const ContextualHelp = forwardRef(function ContextualHelp(props: Contextu
         offset={offset}
         crossOffset={crossOffset}
         hideArrow
-        UNSAFE_className={popover}>
+        styles={popover}>
         <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: -24, padding: 24}))}>
           <Provider
             values={[
diff --git a/packages/@react-spectrum/s2/src/style-utils.ts b/packages/@react-spectrum/s2/src/style-utils.ts
index 42ba1333f0b..ac6e346f672 100644
--- a/packages/@react-spectrum/s2/src/style-utils.ts
+++ b/packages/@react-spectrum/s2/src/style-utils.ts
@@ -186,9 +186,10 @@ const heightProperties = [
 export type StylesProp = StyleString<(typeof allowedOverrides)[number] | (typeof widthProperties)[number]>;
 export type StylesPropWithHeight = StyleString<(typeof allowedOverrides)[number] | (typeof widthProperties)[number] | (typeof heightProperties)[number]>;
 export type StylesPropWithoutWidth = StyleString<(typeof allowedOverrides)[number]>;
+export type UnsafeClassName = string & {properties?: never};
 export interface UnsafeStyles {
   /** Sets the CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. */
-  UNSAFE_className?: string,
+  UNSAFE_className?: UnsafeClassName,
   /** Sets inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. Only use as a **last resort**. Use the `style` macro via the `styles` prop instead. */
   UNSAFE_style?: CSSProperties
 }