RAC: Replacement of <FieldError /> with a more generic <HelpText /> component

[nwidynski]

We recently began development on our field components and have noticed that validation descriptors are mostly intended to replace a help text. In fact, RAC's own TextField Anatomy docs suggest a replacement instead of displaying them side-by-side.

Unfortunately, in the current way <FieldError /> is implemented this behavior can only be achieved through conditional rendering inside a function passed to the field, utilizing the isInvalid render prop.

import {TextField, Label, Input, FieldError, Text} from 'react-aria-components';

<TextField>
  {({ isInvalid }) => (
    <>
      <Label />
      <Input />
      { isInvalid ? <FieldError /> : <Text slot="description" />}
    </>
  )}
</TextField>

This implementation is rather long and cumbersome and we don't really see the benefit <FieldError />'s conditional rendering delivers in the current state.

For improvement, we suggest a replacement of the <FieldError /> with a more generic <HelpText /> component, similarly to the current React Spectrum implementation.

This new component would merge the functionality of both description & errorMessage slots into one component, ideally by renaming & extending <FieldError />'s render props.

With this new API, a conditional render of the helptext or error descriptors could be achieved just inside this <HelpText /> component. Internally <HelpText /> could still wrap its children with a <Text /> component if so desired.

import {TextField, Label, Input, HelpText} from 'react-aria-components';

<TextField>
  <Label />
  <Input />
  <HelpText>
    {({ isInvalid }) => isInvalid ? "Invalid" : "I am a textfield."}
  </HelpText>
</TextField>

[reidbarber]

Apologies for the delayed response. After the latest release (which now exports FieldErrorContext via #5743), you should be able to build a component like this for yourself:

export function HelpText(props) {
  let validation = useContext(FieldErrorContext)!;

  let children = props.children;

  if (typeof props.children === 'function') {
    children = props.children({
      isInvalid: validation?.isInvalid || undefined,
    });
  }

  return (
    <Text
      slot={validation.isInvalid ? 'errorMessage' : 'description'}
      {...props}
      children={children}
    />
  );
}

https://stackblitz.com/edit/vitejs-vite-qcuzgk?file=src%2FApp.tsx