DateField docs does not merge className prop correctly

[jeremy-code]

🙋 Documentation Request

Consider the following bit of code for the Tailwind CSS docs on DateField:

react-spectrum/starters/tailwind/src/DateField.tsx

Line 52 in 9c28234

<AriaDateInput className={renderProps => fieldGroupStyles({...renderProps, class: 'inline min-w-[150px] px-3 h-9 text-sm leading-8.5 font-sans cursor-text disabled:cursor-default whitespace-nowrap overflow-x-auto [scrollbar-width:none]'})} {...props}>

export function DateInput(props: Omit<DateInputProps, 'children'>) {
  return (
    <AriaDateInput className={renderProps => fieldGroupStyles({...renderProps, class: 'inline min-w-[150px] px-3 h-9 text-sm leading-8.5 font-sans cursor-text disabled:cursor-default whitespace-nowrap overflow-x-auto [scrollbar-width:none]'})} {...props}>
...

Since className is used to set fieldGroupStyles and {...props} follows it, the className will be overwritten if set on DateInput. Setting the classname for Dateinput is shown in DatePicker: https://react-aria.adobe.com/DatePicker

I think the change to fix this would be something like:

export function DateInput(props: Omit<DateInputProps, 'children'>) {
  return (
    <AriaDateInput {...props} className={composeRenderProps(props.className, (className, renderProps) => fieldGroupStyles({...renderProps, class: cn('inline min-w-[150px] px-3 h-9 text-sm leading-8.5 font-sans cursor-text disabled:cursor-default whitespace-nowrap overflow-x-auto [scrollbar-width:none]', className) }) )}>
...

or just to make a new variant in tailwind-variants that extends fieldGroupStyles

🧢 Your Company/Team

No response

[snowystinger]

Thanks for the issue.

These are meant to be a starting point, and it looks like the classname is intentionally overridden here given that doing the above yields something that looks like this:

That's not to say it couldn't be improved, but it's going to need a little more work. We also aren't using cn in our examples right now, so that could be why it looks weird.

Is this causing a real problem for you? or are you having trouble creating your own components because of this? A little more information would help us provide a meaningful change without making a potentially overly complicated example.