feat(atoms): add xl gap for grid layout

8base · Aug 8, 2018 · 015711d · 015711d
1 parent 2f82549
commit 015711d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/src/atoms/Grid/GridLayout.js b/src/atoms/Grid/GridLayout.js
@@ -6,11 +6,11 @@ import { createStyledTag, createTheme } from '../../utils';
 type GridLayoutProps = {|
   children?: React$Node,
   /** possbile spaces between grid items */
-  gap?: 'xs' | 'md' | 'lg' | 'none',
+  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none',
   /** when true then set inline-grid */
   inline?: boolean,
   /** possible offsets of the grid layout */
-  offset?: 'xs' | 'md' | 'lg' | 'none',
+  offset?: 'sm' | 'md' | 'lg' | 'none',
   /** justify-content css rule*/
   justifyContent?: 'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly',
   /** align-content css rule*/
@@ -27,6 +27,9 @@ const theme = createTheme(name, {
   modifiers: {
     gap: {
       xs: {
+        gridGap: '0.5rem',
+      },
+      sm: {
         gridGap: '1rem',
       },
       md: {
@@ -35,10 +38,13 @@ const theme = createTheme(name, {
       lg: {
         gridGap: '2rem',
       },
+      xl: {
+        gridGap: '3rem',
+      },
       none: {},
     },
     padding: {
-      xs: {
+      sm: {
         padding: '1rem',
       },
       md: {

diff --git a/storybook/__tests__/__snapshots__/storyshots.test.js.snap b/storybook/__tests__/__snapshots__/storyshots.test.js.snap
@@ -12651,7 +12651,7 @@ exports[`Storyshots MOLECULES/Rating with default modifiers 1`] = `
 .emotion-4 {
   display: inline-grid;
   grid-auto-columns: min-content;
-  grid-gap: 1rem;
+  grid-gap: 0.5rem;
 }
 
 .emotion-1 {