RadioGroup: Add flexible width to legend element to fill available sp…

…ace (#2405)

## 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.

Author: jandrade

Reviewers: beaesguerra

Required Reviewers:

Approved By: beaesguerra

Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️  dependabot

Pull Request URL: #2405

.changeset/cold-rocks-notice.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-form": patch
+---
+
+Adds `width: 100%` to `legend` element to allow expanding it to fill the available space

__docs__/wonder-blocks-form/radio-group.stories.tsx

@@ -2,7 +2,9 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import type {Meta, StoryObj} from "@storybook/react";
 
-import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {LabelLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
 
 import {Choice, RadioGroup} from "@khanacademy/wonder-blocks-form";
 import packageConfig from "../../packages/wonder-blocks-form/package.json";
@@ -226,6 +228,36 @@ FiltersOutFalsyChildren.parameters = {
     },
 };
 
+/**
+ * There are specific situations where you might want to use a custom label
+ * component instead of using the default `LabelMedium` component. This example
+ * demonstrates how to use a custom label component that can be passed in as a
+ * prop to the `RadioGroup` component.
+ */
+export const CustomLabel: StoryComponentType = {
+    ...Default,
+    args: {
+        style: {
+            // Adding an arbitrary width to the radio group to demonstrate how
+            // the custom label component expands to fill the available space.
+            width: 400,
+        },
+        label: (
+            <View
+                style={{
+                    border: `1px dashed ${semanticColor.border.strong}`,
+                    padding: spacing.medium_16,
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                }}
+            >
+                <LabelLarge>Pokemon</LabelLarge>
+                <LabelMedium>(optional)</LabelMedium>
+            </View>
+        ),
+    },
+};
+
 const styles = StyleSheet.create({
     choice: {
         margin: 0,

packages/wonder-blocks-form/src/components/group-styles.ts

@@ -15,6 +15,8 @@ const styles: StyleDeclaration = StyleSheet.create({
 
     legend: {
         padding: 0,
+        // Let the legend use the size defined by the parent.
+        width: "100%",
     },
 
     description: {