feat: add FormGroup component

[dierat]

Summary:

Clubhouse ticket: https://app.shortcut.com/czi-edu/story/169595/button-group-form-group-move-to-eds
Location in traject: https://github.com/FB-PLP/traject/tree/master/app/assets/javascripts/v2/core/EDSCandidates/FormGroup

Screenshots

Test Plan:

• Manually tested the component in storybook
• Verified the snapshot tests output looks right

[codecov]

Codecov Report

Merging #809 (2278b94) into main (c413ac6) will increase coverage by 0.09%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##             main     #809      +/-   ##
==========================================
+ Coverage   95.58%   95.68%   +0.09%     
==========================================
  Files         136      139       +3     
  Lines         975      997      +22     
  Branches      134      137       +3     
==========================================
+ Hits          932      954      +22     
  Misses         43       43              

Impacted Files	Coverage Δ
src/FormGroup/FormGroup.stories.tsx	100.00% <0.00%> (ø)
src/FormGroup/FormGroup.tsx	100.00% <0.00%> (ø)
src/Checkbox/index.ts	100.00% <0.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c413ac6...2278b94. Read the comment docs.

[ghost]

Should this be removed?

Suggested change

// @flow

[dierat]

Yes!! Thank you ❤️

[ghost]

Is it intentional that this is being merged into diedra/button-group/add instead of the master/main branch?

[ahuth]

Does this result in HTML like with an extra P tag:

<legend>
  <p class="stuff">Some text</p>
</legend>

?

If so, I wonder if it's worth thinking about reducing unnecessary elements. Maybe with something like

<Text as={Component} className={clsx(className, styles.title)} size="sm" weight="bold">
  {children}
</Text>

Although that may not really be worth it. And would probably require updating the Text component to accept more things for as.

[dierat]

And would probably require updating the Text component to accept more things for as.

Looks like it. Maybe we should make that change anyway and then update this.

[dierat]

https://app.shortcut.com/czi-edu/story/182120/allow-text-component-to-use-more-elements-for-as-prop

[dierat]

Is it intentional that this is being merged into diedra/button-group/add instead of the master/main branch?

Yeah; I stacked them so it was easier to make an alpha version with both of them on it. I'll merge them into main separately.

[github-actions]

size-limit report

Path	Size
components	68.48 KB (+1.37% 🔺)
styles	4.44 KB (0%)

[ahuth]

LGTM

[dierat]

Any idea what's causing this?

[ahuth]

No idea why a size increase of 1.37% would cause the size limit action to block merging. Maybe it's enforcing a total size limit of the package or something.

Couple options:

1. [Easiest] Dismiss the action's review, and see if subsequent PRs have this same issue
2. Delete the size-limit-action. I don't think we really need it.
3. See if we can tune it's parameters

[dierat]

No idea why a size increase of 1.37% would cause the size limit action to block merging. Maybe it's enforcing a total size limit of the package or something.

Couple options:

1. [Easiest] Dismiss the action's review, and see if subsequent PRs have this same issue
2. Delete the size-limit-action. I don't think we really need it.
3. See if we can tune it's parameters

Cool, I'll just dismiss it for now. Thanks for verifying! 👍

We're cool with the package getting a little bigger as we add more components. The size does seem a little high for this component (?), but it's within reason.