feat!: Allow zero row gap for Grid (#1040)

Co-authored-by: Vincent Smedinga <[email protected]>
Amsterdam · Jan 12, 2024 · 6ef7b08 · 6ef7b08
1 parent 2955915
commit 6ef7b08
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/packages/css/src/components/grid/grid.scss b/packages/css/src/components/grid/grid.scss
@@ -28,6 +28,10 @@
   --amsterdam-grid-padding-inline: var(--amsterdam-grid-compact-padding-inline);
 }
 
+.amsterdam-grid--gap-vertical--none {
+  row-gap: initial;
+}
+
 .amsterdam-grid--gap-vertical--small {
   row-gap: calc(var(--amsterdam-grid-gap) / 2);
 }

diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx
@@ -48,7 +48,7 @@ export type GridProps = {
    */
   compact?: boolean
   /** The amount of vertical whitespace between rows of the grid. */
-  gapVertical?: 'small' | 'large'
+  gapVertical?: 'none' | 'small' | 'large'
 } & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) &
   PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 

diff --git a/storybook/storybook-react/src/Grid/Grid.stories.tsx b/storybook/storybook-react/src/Grid/Grid.stories.tsx
@@ -23,9 +23,9 @@ const gridArgTypes = {
   gapVertical: {
     control: {
       type: 'radio',
-      labels: { small: 'small', undefined: 'medium', large: 'large' },
+      labels: { none: 'none', small: 'small', undefined: 'medium', large: 'large' },
     },
-    options: ['small', undefined, 'large'],
+    options: ['none', 'small', undefined, 'large'],
   },
   paddingVertical: paddingArgType,
   paddingTop: paddingArgType,