Allow inline ControlGroup examples to reflow (#898)

* wrap inline ControlGroup examples * reduce rowGap * Revert "reduce rowGap" This reverts commit 7ed87de.
primer · Jan 22, 2025 · e6dd060 · e6dd060
1 parent bc24d7a
commit e6dd060
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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" />