feat: Support className prop in FormControl.Caption component

[smockle]

What does this PR add?

This PR adds a className prop to FormControl.Caption. Related components—e.g. FormControl and FormControl.Label—already have a className prop.

Does FormControl.Caption need a className prop?

Yes! There are basically 3 options for styling FormControl.Caption:

1. Option 1: Wrap FormControl.Caption in a <div>, and style the <div>. This option is a non-starter, because GitHub uses eslint(primer-react/direct-slot-children) to enforce that FormControl.Caption is a direct child of FormControl.

2. Option 2: Style FormControl.Caption using sx. This option is a non-starter, because sx is deprecated.

3. Option 3: Style FormControl.Caption using className. This option is not possible today, because FormControl.Caption is missing a className prop, but this is otherwise the best way to style FormControl.Caption, ergo this PR.

Why do you want to style FormControl.Caption anyways?

The image below gives an example of the kinds of styles that might be applied—in it, a FormControl.Label is positioned atop FormControl.Caption, and these (together) are displayed beside a control:

With sx, that layout can be accomplished like this:

<FormControl sx={{display: 'grid', gap: '0 10px'}}>
    <FormControl.Label sx={{gridColumn: 1, gridRow: 1}}>Increase contrast</FormControl.Label>
    <FormControl.Caption sx={{gridColumn: 1, gridRow: 2}}>
        Enable high contrast for a single theme or for both light and dark mode
    </FormControl.Caption>
    <ActionMenu>
        <ActionMenu.Button sx={{gridColumn: 3, gridRow: '1 / span 2'}} />
        {/* … */}
    </ActionMenu>
</FormControl>

I’d like to accomplish the same layout, using className in place of sx. This PR makes that possible.

Changelog

New

• Added className prop to FormControl.Caption component

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Do other components have className-related tests or previews?

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 0c0fbcd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	105.94 KB (+0.01% 🔺)
packages/react/dist/browser.umd.js	106.3 KB (-0.09% 🔽)

[joshblack]

Looks great! Just left a comment for the changeset, I think this would fall under minor for us since this is adding functionality.