fix undefined classNames in s2 (#8074)

Author: reidbarber

packages/@react-spectrum/s2/src/Card.tsx

@@ -501,7 +501,7 @@ export interface CardPreviewProps extends UnsafeStyles, DOMProps {
 
 export const CardPreview = forwardRef(function CardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {
   let {size, isQuiet, isHovered, isFocusVisible, isSelected, isPressed, isCheckboxSelection} = useContext(InternalCardContext);
-  let {UNSAFE_className, UNSAFE_style} = props;
+  let {UNSAFE_className = '', UNSAFE_style} = props;
   let domRef = useDOMRef(ref);
   return (
     <div

packages/@react-spectrum/s2/src/ColorSwatchPicker.tsx

@@ -50,6 +50,7 @@ export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: Co
     density = 'regular',
     size = 'M',
     rounding = 'none',
+    UNSAFE_className = '',
     ...otherProps
   } = props;
   let domRef = useDOMRef(ref);
@@ -58,7 +59,7 @@ export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: Co
     <AriaColorSwatchPicker
       {...otherProps}
       ref={domRef}
-      className={props.UNSAFE_className + style({
+      className={UNSAFE_className + style({
         display: 'flex',
         flexWrap: 'wrap',
         gap: {

packages/@react-spectrum/s2/src/Content.tsx

@@ -37,7 +37,7 @@ export const Heading = forwardRef(// Wrapper around RAC Heading to unmount when
 function Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, HeadingContext);
   let domRef = useDOMRef(ref);
-  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;
+  let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, ...otherProps} = props;
   if (isHidden) {
     return null;
   }
@@ -57,7 +57,7 @@ export const HeaderContext = createContext<ContextValue<Partial<ContentProps>, D
 export const Header = forwardRef(function Header(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, HeaderContext);
   let domRef = useDOMRef(ref);
-  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;
+  let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, ...otherProps} = props;
   if (isHidden) {
     return null;
   }
@@ -77,7 +77,7 @@ export const ContentContext = createContext<ContextValue<Partial<ContentProps>,
 export const Content = forwardRef(function Content(props: ContentProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ContentContext);
   let domRef = useDOMRef(ref);
-  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;
+  let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, ...otherProps} = props;
   if (isHidden) {
     return null;
   }
@@ -96,7 +96,7 @@ export const TextContext = createContext<ContextValue<Partial<ContentProps>, DOM
 export const Text = forwardRef(function Text(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, TextContext);
   let domRef = useDOMRef(ref);
-  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, children, ...otherProps} = props;
+  let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, children, ...otherProps} = props;
   let racContext = useContext(RACTextContext);
   let isSkeleton = useIsSkeleton();
   [children, UNSAFE_style] = useSkeletonText(children, UNSAFE_style);
@@ -130,7 +130,7 @@ export const KeyboardContext = createContext<ContextValue<Partial<ContentProps>,
 export const Keyboard = forwardRef(function Keyboard(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, KeyboardContext);
   let domRef = useDOMRef(ref);
-  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;
+  let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, ...otherProps} = props;
   if (isHidden) {
     return null;
   }
@@ -149,7 +149,7 @@ export const FooterContext = createContext<ContextValue<Partial<ContentProps>, D
 export const Footer = forwardRef(function Footer(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, FooterContext);
   let domRef = useDOMRef(ref);
-  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;
+  let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, ...otherProps} = props;
   if (isHidden) {
     return null;
   }