RadioGroup: Add flexible width to legend element to fill available space

[jandrade]

Summary:

Adds width: 100% to legend element to allow expanding it to fill the
available space.

Note that this applies to both RadioGroup and CheckboxGroup.

Issue: XXX-XXXX

Test plan:

Navigate to /?path=/docs/packages-form-radiogroup--docs#custom%20label.

Verify that the legend element is now full-bleed.

[changeset-bot]

🦋 Changeset detected

Latest commit: 9465590

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

This PR includes changesets to release 4 packages

Name	Type
@khanacademy/wonder-blocks-form	Patch
@khanacademy/wonder-blocks-search-field	Patch
@khanacademy/wonder-blocks-dropdown	Patch
@khanacademy/wonder-blocks-birthday-picker	Patch

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

[khan-actions-bot]

Gerald

Required Reviewers

• @Khan/wonder-blocks for changes to .changeset/cold-rocks-notice.md, __docs__/wonder-blocks-form/radio-group.stories.tsx, packages/wonder-blocks-form/src/components/group-styles.ts

---

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

[github-actions]

npm Snapshot: Published

🎉 Good news!! We've packaged up the latest commit from this PR (a432d96) and published all packages with changesets to npm.

You can install the packages in webapp by running:

./services/static/dev/tools/deploy_wonder_blocks.js --tag="PR2405"

Packages can also be installed manually by running:

yarn add @khanacademy/wonder-blocks-<package-name>@PR2405

[github-actions]

Size Change: +4 B (0%)

Total Size: 96.3 kB

Filename	Size	Change
packages/wonder-blocks-form/dist/es/index.js	6.2 kB	+4 B (+0.06%)

ℹ️ View Unchanged

Filename	Size
packages/wonder-blocks-accordion/dist/es/index.js	3.77 kB
packages/wonder-blocks-banner/dist/es/index.js	1.53 kB
packages/wonder-blocks-birthday-picker/dist/es/index.js	1.77 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js	887 B
packages/wonder-blocks-button/dist/es/index.js	4.04 kB
packages/wonder-blocks-cell/dist/es/index.js	2.01 kB
packages/wonder-blocks-clickable/dist/es/index.js	3.06 kB
packages/wonder-blocks-core/dist/es/index.js	2.88 kB
packages/wonder-blocks-data/dist/es/index.js	6.24 kB
packages/wonder-blocks-dropdown/dist/es/index.js	19.1 kB
packages/wonder-blocks-grid/dist/es/index.js	1.36 kB
packages/wonder-blocks-icon-button/dist/es/index.js	2.95 kB
packages/wonder-blocks-icon/dist/es/index.js	871 B
packages/wonder-blocks-labeled-field/dist/es/index.js	72 B
packages/wonder-blocks-layout/dist/es/index.js	1.82 kB
packages/wonder-blocks-link/dist/es/index.js	2.28 kB
packages/wonder-blocks-modal/dist/es/index.js	5.42 kB
packages/wonder-blocks-pill/dist/es/index.js	1.65 kB
packages/wonder-blocks-popover/dist/es/index.js	4.85 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js	1.52 kB
packages/wonder-blocks-search-field/dist/es/index.js	1.36 kB
packages/wonder-blocks-switch/dist/es/index.js	1.92 kB
packages/wonder-blocks-testing-core/dist/es/index.js	3.74 kB
packages/wonder-blocks-testing/dist/es/index.js	1.07 kB
packages/wonder-blocks-theming/dist/es/index.js	693 B
packages/wonder-blocks-timing/dist/es/index.js	1.8 kB
packages/wonder-blocks-tokens/dist/es/index.js	2.36 kB
packages/wonder-blocks-toolbar/dist/es/index.js	905 B
packages/wonder-blocks-tooltip/dist/es/index.js	6.99 kB
packages/wonder-blocks-typography/dist/es/index.js	1.23 kB

_{compressed-size-action}

[github-actions]

A new build was pushed to Chromatic! 🚀

https://5e1bf4b385e3fb0020b7073c-wbgjwitpcm.chromatic.com/

Chromatic results:

Metric	Total
Captured snapshots	164
Tests with visual changes	1
Total stories	507
Inherited (not captured) snapshots [TurboSnap]	208
Tests on the build	372

[beaesguerra]

Looks good to me, thanks for the quick fix!

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 0.00%. Comparing base (e095558) to head (9465590).
Report is 1 commits behind head on main.

Additional details and impacted files

@@     Coverage Diff      @@
##   main   #2405   +/-   ##
============================
============================

---

Continue to review full report in Codecov by Sentry.

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