From b86fcad5f915a19c217c818cb47766c46f7be1c9 Mon Sep 17 00:00:00 2001
From: Josh Farrant <joshfarrant@github.com>
Date: Tue, 21 Jan 2025 17:27:53 +0000
Subject: [PATCH 1/3] wrap inline ControlGroup examples

---
 apps/docs/content/components/CheckboxGroup/react.mdx            | 2 +-
 apps/docs/content/components/RadioGroup/react.mdx               | 2 +-
 .../src/forms/CheckboxGroup/CheckboxGroup.examples.stories.tsx  | 2 +-
 .../react/src/forms/RadioGroup/RadioGroup.examples.stories.tsx  | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/docs/content/components/CheckboxGroup/react.mdx b/apps/docs/content/components/CheckboxGroup/react.mdx
index d1736299e..611905e29 100644
--- a/apps/docs/content/components/CheckboxGroup/react.mdx
+++ b/apps/docs/content/components/CheckboxGroup/react.mdx
@@ -133,7 +133,7 @@ When space is limited, checkboxes can be arranged horizontally using the [Stack]
   <CheckboxGroup.Caption>
     Some inline checkboxes with a visually hidden label
   </CheckboxGroup.Caption>
-  <Stack direction="horizontal" gap="normal" padding="none">
+  <Stack direction="horizontal" gap="normal" padding="none" flexWrap="wrap">
     <FormControl>
       <FormControl.Label>Choice one</FormControl.Label>
       <Checkbox value="one" />
diff --git a/apps/docs/content/components/RadioGroup/react.mdx b/apps/docs/content/components/RadioGroup/react.mdx
index 5c7a96c58..33fdffbed 100644
--- a/apps/docs/content/components/RadioGroup/react.mdx
+++ b/apps/docs/content/components/RadioGroup/react.mdx
@@ -109,7 +109,7 @@ When space is limited, radio inputs can be arranged horizontally using the [Stac
   <CheckboxGroup.Caption>
     Some inline radio inputs with a visually hidden label
   </CheckboxGroup.Caption>
-  <Stack direction="horizontal" gap="normal" padding="none">
+  <Stack direction="horizontal" gap="normal" padding="none" flexWrap="wrap">
     <FormControl>
       <FormControl.Label>Last 7 days</FormControl.Label>
       <Radio name="period" value="week" />
diff --git a/packages/react/src/forms/CheckboxGroup/CheckboxGroup.examples.stories.tsx b/packages/react/src/forms/CheckboxGroup/CheckboxGroup.examples.stories.tsx
index cd41a3b54..dd32396ac 100644
--- a/packages/react/src/forms/CheckboxGroup/CheckboxGroup.examples.stories.tsx
+++ b/packages/react/src/forms/CheckboxGroup/CheckboxGroup.examples.stories.tsx
@@ -23,7 +23,7 @@ export const Inline: Story = {
         <CheckboxGroup.Label visuallyHidden={labelVisuallyHidden}>{labelChildren}</CheckboxGroup.Label>
         {captionChildren ? <CheckboxGroup.Caption>{captionChildren}</CheckboxGroup.Caption> : null}
 
-        <Stack direction="horizontal" gap="normal" padding="none">
+        <Stack direction="horizontal" gap="normal" padding="none" flexWrap="wrap">
           <FormControl>
             <FormControl.Label>Choice one</FormControl.Label>
             <Checkbox value="one" defaultChecked />
diff --git a/packages/react/src/forms/RadioGroup/RadioGroup.examples.stories.tsx b/packages/react/src/forms/RadioGroup/RadioGroup.examples.stories.tsx
index 9d301dfd3..29b331322 100644
--- a/packages/react/src/forms/RadioGroup/RadioGroup.examples.stories.tsx
+++ b/packages/react/src/forms/RadioGroup/RadioGroup.examples.stories.tsx
@@ -23,7 +23,7 @@ export const Inline: Story = {
         <RadioGroup.Label visuallyHidden={labelVisuallyHidden}>{labelChildren}</RadioGroup.Label>
         {captionChildren ? <RadioGroup.Caption>{captionChildren}</RadioGroup.Caption> : null}
 
-        <Stack direction="horizontal" gap="normal" padding="none">
+        <Stack direction="horizontal" gap="normal" padding="none" flexWrap="wrap">
           <FormControl>
             <FormControl.Label>0-99</FormControl.Label>
             <Radio name="demo" value="one" />

From 7ed87de8d453ec69d64a0483f6b898ecc2be7b99 Mon Sep 17 00:00:00 2001
From: Josh Farrant <joshfarrant@github.com>
Date: Tue, 21 Jan 2025 17:41:40 +0000
Subject: [PATCH 2/3] reduce rowGap

---
 apps/docs/content/components/CheckboxGroup/react.mdx      | 8 +++++++-
 apps/docs/content/components/RadioGroup/react.mdx         | 8 +++++++-
 .../CheckboxGroup/CheckboxGroup.examples.stories.tsx      | 8 +++++++-
 .../src/forms/RadioGroup/RadioGroup.examples.stories.tsx  | 8 +++++++-
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/apps/docs/content/components/CheckboxGroup/react.mdx b/apps/docs/content/components/CheckboxGroup/react.mdx
index 611905e29..8a82cd401 100644
--- a/apps/docs/content/components/CheckboxGroup/react.mdx
+++ b/apps/docs/content/components/CheckboxGroup/react.mdx
@@ -133,7 +133,13 @@ When space is limited, checkboxes can be arranged horizontally using the [Stack]
   <CheckboxGroup.Caption>
     Some inline checkboxes with a visually hidden label
   </CheckboxGroup.Caption>
-  <Stack direction="horizontal" gap="normal" padding="none" flexWrap="wrap">
+  <Stack
+    direction="horizontal"
+    gap="normal"
+    padding="none"
+    flexWrap="wrap"
+    style={{rowGap: 'var(--base-size-8)'}}
+  >
     <FormControl>
       <FormControl.Label>Choice one</FormControl.Label>
       <Checkbox value="one" />
diff --git a/apps/docs/content/components/RadioGroup/react.mdx b/apps/docs/content/components/RadioGroup/react.mdx
index 33fdffbed..b0c6db51a 100644
--- a/apps/docs/content/components/RadioGroup/react.mdx
+++ b/apps/docs/content/components/RadioGroup/react.mdx
@@ -109,7 +109,13 @@ When space is limited, radio inputs can be arranged horizontally using the [Stac
   <CheckboxGroup.Caption>
     Some inline radio inputs with a visually hidden label
   </CheckboxGroup.Caption>
-  <Stack direction="horizontal" gap="normal" padding="none" flexWrap="wrap">
+  <Stack
+    direction="horizontal"
+    gap="normal"
+    padding="none"
+    flexWrap="wrap"
+    style={{rowGap: 'var(--base-size-8)'}}
+  >
     <FormControl>
       <FormControl.Label>Last 7 days</FormControl.Label>
       <Radio name="period" value="week" />
diff --git a/packages/react/src/forms/CheckboxGroup/CheckboxGroup.examples.stories.tsx b/packages/react/src/forms/CheckboxGroup/CheckboxGroup.examples.stories.tsx
index dd32396ac..b09d23d90 100644
--- a/packages/react/src/forms/CheckboxGroup/CheckboxGroup.examples.stories.tsx
+++ b/packages/react/src/forms/CheckboxGroup/CheckboxGroup.examples.stories.tsx
@@ -23,7 +23,13 @@ export const Inline: Story = {
         <CheckboxGroup.Label visuallyHidden={labelVisuallyHidden}>{labelChildren}</CheckboxGroup.Label>
         {captionChildren ? <CheckboxGroup.Caption>{captionChildren}</CheckboxGroup.Caption> : null}
 
-        <Stack direction="horizontal" gap="normal" padding="none" flexWrap="wrap">
+        <Stack
+          direction="horizontal"
+          gap="normal"
+          padding="none"
+          flexWrap="wrap"
+          style={{rowGap: 'var(--base-size-8)'}}
+        >
           <FormControl>
             <FormControl.Label>Choice one</FormControl.Label>
             <Checkbox value="one" defaultChecked />
diff --git a/packages/react/src/forms/RadioGroup/RadioGroup.examples.stories.tsx b/packages/react/src/forms/RadioGroup/RadioGroup.examples.stories.tsx
index 29b331322..c3923c306 100644
--- a/packages/react/src/forms/RadioGroup/RadioGroup.examples.stories.tsx
+++ b/packages/react/src/forms/RadioGroup/RadioGroup.examples.stories.tsx
@@ -23,7 +23,13 @@ export const Inline: Story = {
         <RadioGroup.Label visuallyHidden={labelVisuallyHidden}>{labelChildren}</RadioGroup.Label>
         {captionChildren ? <RadioGroup.Caption>{captionChildren}</RadioGroup.Caption> : null}
 
-        <Stack direction="horizontal" gap="normal" padding="none" flexWrap="wrap">
+        <Stack
+          direction="horizontal"
+          gap="normal"
+          padding="none"
+          flexWrap="wrap"
+          style={{rowGap: 'var(--base-size-8)'}}
+        >
           <FormControl>
             <FormControl.Label>0-99</FormControl.Label>
             <Radio name="demo" value="one" />

From cff4ee8f4f5435427acc367a8615ee85adba282a Mon Sep 17 00:00:00 2001
From: Josh Farrant <joshfarrant@github.com>
Date: Wed, 22 Jan 2025 13:03:57 +0000
Subject: [PATCH 3/3] Revert "reduce rowGap"

This reverts commit 7ed87de8d453ec69d64a0483f6b898ecc2be7b99.
---
 apps/docs/content/components/CheckboxGroup/react.mdx      | 8 +-------
 apps/docs/content/components/RadioGroup/react.mdx         | 8 +-------
 .../CheckboxGroup/CheckboxGroup.examples.stories.tsx      | 8 +-------
 .../src/forms/RadioGroup/RadioGroup.examples.stories.tsx  | 8 +-------
 4 files changed, 4 insertions(+), 28 deletions(-)

diff --git a/apps/docs/content/components/CheckboxGroup/react.mdx b/apps/docs/content/components/CheckboxGroup/react.mdx
index 8a82cd401..611905e29 100644
--- a/apps/docs/content/components/CheckboxGroup/react.mdx
+++ b/apps/docs/content/components/CheckboxGroup/react.mdx
@@ -133,13 +133,7 @@ When space is limited, checkboxes can be arranged horizontally using the [Stack]
   <CheckboxGroup.Caption>
     Some inline checkboxes with a visually hidden label
   </CheckboxGroup.Caption>
-  <Stack
-    direction="horizontal"
-    gap="normal"
-    padding="none"
-    flexWrap="wrap"
-    style={{rowGap: 'var(--base-size-8)'}}
-  >
+  <Stack direction="horizontal" gap="normal" padding="none" flexWrap="wrap">
     <FormControl>
       <FormControl.Label>Choice one</FormControl.Label>
       <Checkbox value="one" />
diff --git a/apps/docs/content/components/RadioGroup/react.mdx b/apps/docs/content/components/RadioGroup/react.mdx
index b0c6db51a..33fdffbed 100644
--- a/apps/docs/content/components/RadioGroup/react.mdx
+++ b/apps/docs/content/components/RadioGroup/react.mdx
@@ -109,13 +109,7 @@ When space is limited, radio inputs can be arranged horizontally using the [Stac
   <CheckboxGroup.Caption>
     Some inline radio inputs with a visually hidden label
   </CheckboxGroup.Caption>
-  <Stack
-    direction="horizontal"
-    gap="normal"
-    padding="none"
-    flexWrap="wrap"
-    style={{rowGap: 'var(--base-size-8)'}}
-  >
+  <Stack direction="horizontal" gap="normal" padding="none" flexWrap="wrap">
     <FormControl>
       <FormControl.Label>Last 7 days</FormControl.Label>
       <Radio name="period" value="week" />
diff --git a/packages/react/src/forms/CheckboxGroup/CheckboxGroup.examples.stories.tsx b/packages/react/src/forms/CheckboxGroup/CheckboxGroup.examples.stories.tsx
index b09d23d90..dd32396ac 100644
--- a/packages/react/src/forms/CheckboxGroup/CheckboxGroup.examples.stories.tsx
+++ b/packages/react/src/forms/CheckboxGroup/CheckboxGroup.examples.stories.tsx
@@ -23,13 +23,7 @@ export const Inline: Story = {
         <CheckboxGroup.Label visuallyHidden={labelVisuallyHidden}>{labelChildren}</CheckboxGroup.Label>
         {captionChildren ? <CheckboxGroup.Caption>{captionChildren}</CheckboxGroup.Caption> : null}
 
-        <Stack
-          direction="horizontal"
-          gap="normal"
-          padding="none"
-          flexWrap="wrap"
-          style={{rowGap: 'var(--base-size-8)'}}
-        >
+        <Stack direction="horizontal" gap="normal" padding="none" flexWrap="wrap">
           <FormControl>
             <FormControl.Label>Choice one</FormControl.Label>
             <Checkbox value="one" defaultChecked />
diff --git a/packages/react/src/forms/RadioGroup/RadioGroup.examples.stories.tsx b/packages/react/src/forms/RadioGroup/RadioGroup.examples.stories.tsx
index c3923c306..29b331322 100644
--- a/packages/react/src/forms/RadioGroup/RadioGroup.examples.stories.tsx
+++ b/packages/react/src/forms/RadioGroup/RadioGroup.examples.stories.tsx
@@ -23,13 +23,7 @@ export const Inline: Story = {
         <RadioGroup.Label visuallyHidden={labelVisuallyHidden}>{labelChildren}</RadioGroup.Label>
         {captionChildren ? <RadioGroup.Caption>{captionChildren}</RadioGroup.Caption> : null}
 
-        <Stack
-          direction="horizontal"
-          gap="normal"
-          padding="none"
-          flexWrap="wrap"
-          style={{rowGap: 'var(--base-size-8)'}}
-        >
+        <Stack direction="horizontal" gap="normal" padding="none" flexWrap="wrap">
           <FormControl>
             <FormControl.Label>0-99</FormControl.Label>
             <Radio name="demo" value="one" />