Field Components Implementation in React-Spectrum and RAC Starter kits

[alexasselin008]

Hi 👋

I'm in the process of developing my company's design system, and we've chosen to base it on react-aria and react-aria-components.

The guiding principles we've established align closely with the implementation philosophy reflected in react-spectrum. We're particularly focused on utilizing components that are declaratively written and make effective use of slots. Ensuring a consistent and predictable API is also of great importance to us.

While I'm confident in most aspects of our API design, I've encountered some challenges specifically with our field components. I'd greatly appreciate your insights on this matter.

Observing components such as Button and Dialog in react-spectrum, it's evident that slots and a declarative approach are utilized across components with both simple and complex layouts

Given these observations, one might assume that if we were to design a CheckboxGroup component, the API would resemble the following:

<CheckboxGroup>
  <Label>Favorite sports</Label>
  <ContextualHelp>
    <Heading>What does this do?</Heading>
    <Content>
  	  Your sport taste is used to train our machine learning
	  recommendation algorithm.
    </Content>
  </ContextualHelp>
  <Checkbox value="soccer">Soccer</Checkbox>
  <Checkbox value="baseball">Baseball</Checkbox>
  <Checkbox value="basketball">Basketball</Checkbox>
</CheckboxGroup>

However, the actual implementation chosen in react-spectrum and in the RAC starter kits diverges, as illustrated below:

<CheckboxGroup  
  label="Favorite sports" 
  contextualHelp={
    <ContextualHelp>
      <Heading>What does this do?</Heading>
      <Content>
  	    Your sport taste is used to train our machine learning
	    recommendation algorithm.
      </Content>
    </ContextualHelp>
  }
>
  <Checkbox value="soccer">Soccer</Checkbox>
  <Checkbox value="baseball">Baseball</Checkbox>
  <Checkbox value="basketball">Basketball</Checkbox>
</CheckboxGroup>

While this difference isn't a problem at all, I'm curious about the rationale behind it, especially considering the contrast with the rest of the components.

Thanks a lot for your time!

[reidbarber]

RAC was built after React Spectrum, so I would recommend following the patterns there more closely. I think one reason it wasn't a child is because some of the field components are collections (like React Spectrum's ComboBox), so they wouldn't be able to accept non-collection-item children. I don't think this would be an issue with RAC since the collections would be inside other wrappers like ListBox. I think you should definitely proceed with the first pattern since you're building on top of RAC.