fix: override default RAC class names for all S2 components (#9245)

* fix: override default RAC class names for all S2 components

* get rid of hidden input field class name

Author: LFDanLu

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

@@ -353,14 +353,14 @@ export const CalendarGrid = (props: Omit<AriaCalendarGridProps, 'children'> & Pr
         isolation: 'isolate'
       })}
       offset={{months: props.months}}>
-      <CalendarGridHeader>
+      <CalendarGridHeader className="">
         {(day) => (
           <CalendarHeaderCell>
             {day}
           </CalendarHeaderCell>
         )}
       </CalendarGridHeader>
-      <CalendarGridBody>
+      <CalendarGridBody className="">
         {(date) => (
           <CalendarCell date={date} firstDayOfWeek={props.firstDayOfWeek} />
         )}

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

@@ -171,7 +171,7 @@ export function DateInputContainer(props: PropsWithChildren): ReactElement {
 
 export function DateInput(props: Omit<DateInputProps, 'children'>): ReactElement {
   return (
-    <AriaDateInput {...props}>
+    <AriaDateInput className="" {...props}>
       {(segment) => (
         <AriaDateSegment
           segment={segment}

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

@@ -225,7 +225,7 @@ export const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps,
       {composeRenderProps(props.children, (children, renderProps) => (
         <>
           {!hideArrow && (
-            <OverlayArrow>
+            <OverlayArrow className="">
               <svg viewBox="0 0 18 10" className={arrow(renderProps)}>
                 <path transform="translate(0 -1)" d="M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1" />
               </svg>

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

@@ -681,6 +681,7 @@ let CollapsingTabs = ({collection, containerRef, ...props}: {collection: Collect
     contents = (
       <RACTabs
         {...props}
+        className=""
         style={{display: 'contents'}}>
         {props.children}
       </RACTabs>

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

@@ -185,6 +185,7 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
     <div>
       <AriaSelect
         {...pickerProps}
+        className=""
         aria-labelledby={`${labelBehavior === 'hide' ? valueId : ''} ${ariaLabelledby}`}>
         {({isOpen}) => (
           <>

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

@@ -174,7 +174,7 @@ export const Tooltip = forwardRef(function Tooltip(props: TooltipProps, ref: DOM
       className={renderProps => UNSAFE_className + tooltip({...renderProps, colorScheme})}>
       {renderProps => (
         <>
-          <OverlayArrow>
+          <OverlayArrow className="">
             <svg className={arrowStyles(renderProps)} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 5">
               <path d="M4.29289 4.29289L0 0H10L5.70711 4.29289C5.31658 4.68342 4.68342 4.68342 4.29289 4.29289Z" />
             </svg>

packages/react-aria-components/src/Calendar.tsx

@@ -449,7 +449,7 @@ function CalendarGridHeader(props: CalendarGridHeaderProps, ref: ForwardedRef<HT
       {...mergeProps(DOMProps, headerProps)}
       ref={ref}
       style={style}
-      className={className || 'react-aria-CalendarGridHeader'}>
+      className={className ?? 'react-aria-CalendarGridHeader'}>
       <tr>
         {weekDays.map((day, key) => React.cloneElement(children(day), {key}))}
       </tr>
@@ -514,7 +514,7 @@ function CalendarGridBody(props: CalendarGridBodyProps, ref: ForwardedRef<HTMLTa
       {...DOMProps}
       ref={ref}
       style={style}
-      className={className || 'react-aria-CalendarGridBody'}>
+      className={className ?? 'react-aria-CalendarGridBody'}>
       {[...new Array(weeksInMonth).keys()].map((weekIndex) => (
         <tr key={weekIndex}>
           {state.getDatesInWeek(weekIndex, startDate).map((date, i) => (

packages/react-aria-components/src/DateField.tsx

@@ -214,7 +214,7 @@ export const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function T
         ref={ref}
         slot={props.slot || undefined}
         data-invalid={state.isInvalid || undefined}
-        data-disabled={state.isDisabled || undefined} 
+        data-disabled={state.isDisabled || undefined}
         data-readonly={state.isReadOnly || undefined} />
     </Provider>
   );
@@ -313,7 +313,7 @@ const DateInputInner = forwardRef((props: DateInputProps, ref: ForwardedRef<HTML
         isDisabled={state.isDisabled}>
         {state.segments.map((segment, i) => cloneElement(children(segment), {key: i}))}
       </Group>
-      <Input />
+      <Input className="" />
     </>
   );
 });

packages/react-aria-components/src/FileTrigger.tsx

@@ -64,6 +64,7 @@ export const FileTrigger = forwardRef(function FileTrigger(props: FileTriggerPro
       </PressResponder>
       <Input
         {...domProps}
+        className=""
         type="file"
         ref={inputRef}
         style={{display: 'none'}}