reduce rowGap

primer · Jan 21, 2025 · 7ed87de · 7ed87de
1 parent b86fcad
commit 7ed87de
Show file tree

Hide file tree

Showing 4 changed files with 28 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,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
@@ -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
@@ -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
@@ -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" />