Ask for elementType on FieldError to structure a FieldError with <p>

[mw10013]

Provide a general summary of the feature here

Ask for elementType on FieldError to structure a FieldError with <p> instead of <span>, which seems to be the default.

FieldError seems to call Text internally. (https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/src/FieldError.tsx). While Text seems to have an elementType property, FieldError does not.

🤔 Expected Behavior?

Desired way to structure FieldError with <p>.

export function OuiFieldError({className, ...props}: FieldErrorProps) {
  return (
      <FieldError
        elementType="p"
        {...props}
        className={composeTailwindRenderProps(
          className,
          'text-[0.8rem] font-medium text-destructive'
        )}
      />
  )
}

😯 Current Behavior

My clumsy implementation to structure a FieldError with <p> along with guard for empty <p>'s.

export function OuiFieldError({ className, ...props }: FieldErrorProps) {
  // FieldError seems to structure with a <span> and does not have elementType like Text.
  // Wrap with <p> to get closer to shadcn.
  // Guard with validation check to prevent empty <p>'s.
  // Reference: https://github.com/adobe/react-spectrum/issues/7525
  const validation = useContext(FieldErrorContext)
  if (!validation?.isInvalid) {
    return null
  }
  return (
    <p>
      <FieldError
        {...props}
        className={composeTailwindRenderProps(
          className,
          'text-[0.8rem] font-medium text-destructive'
        )}
      />
    </p>
  )
}

💁 Possible Solution

No response

🔦 Context

Use case for this ask is simpler implementation for composing rac with shadcn.

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[mw10013]

TextContext can provide the elementType to Text. Still would prefer elementType on FieldError but this certainly works.

export function OuiFieldError({ className, ...props }: FieldErrorProps) {
  return (
    <TextContext.Provider value={{ elementType: 'p' }}>
      <FieldError
        {...props}
        className={composeTailwindRenderProps(
          className,
          'text-[0.8rem] font-medium text-destructive'
        )}
      />
    </TextContext.Provider>
  )
}

[snowystinger]

Closing as not planned, see #5476 (comment)