Revert to medium as default

Amsterdam · Jan 12, 2024 · adc8399 · adc8399
1 parent 0623587
commit adc8399
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/packages/css/src/components/grid/grid.scss b/packages/css/src/components/grid/grid.scss
@@ -9,8 +9,8 @@
   --amsterdam-grid-gap: var(--amsterdam-grid-spacious-gap);
   --amsterdam-grid-padding-inline: var(--amsterdam-grid-spacious-padding-inline);
 
-  column-gap: var(--amsterdam-grid-gap);
   display: grid;
+  gap: var(--amsterdam-grid-gap);
   grid-template-columns: repeat(var(--amsterdam-grid-column-count), 1fr);
   padding-inline: var(--amsterdam-grid-padding-inline);
 
@@ -28,12 +28,12 @@
   --amsterdam-grid-padding-inline: var(--amsterdam-grid-compact-padding-inline);
 }
 
-.amsterdam-grid--gap-vertical--small {
-  row-gap: calc(var(--amsterdam-grid-gap) / 2);
+.amsterdam-grid--gap-vertical--none {
+  row-gap: initial;
 }
 
-.amsterdam-grid--gap-vertical--medium {
-  row-gap: var(--amsterdam-grid-gap);
+.amsterdam-grid--gap-vertical--small {
+  row-gap: calc(var(--amsterdam-grid-gap) / 2);
 }
 
 .amsterdam-grid--gap-vertical--large {

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' | 'medium' | '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: { undefined: 'none', small: 'small', medium: 'medium', large: 'large' },
+      labels: { none: 'none', small: 'small', undefined: 'medium', large: 'large' },
     },
-    options: [undefined, 'small', 'medium', 'large'],
+    options: ['none', 'small', undefined, 'large'],
   },
   paddingVertical: paddingArgType,
   paddingTop: paddingArgType,