feat: more control over no gap for grid layout (#1970)

* feat: more control over no gap for grid layout * feat: remove fd-title from fundamental styles
SAP · Dec 18, 2020 · 296ad14 · 296ad14
1 parent 07fcfb1
commit 296ad14
Show file tree

Hide file tree

Showing 3 changed files with 336 additions and 5 deletions.
diff --git a/src/layout-grid.scss b/src/layout-grid.scss
@@ -144,11 +144,18 @@ $cols: 12;
       margin-top: 0;
     }
 
-    &--no-gap {
+    &--no-horizontal-gap {
+      .fd-col {
+        padding-left: 0;
+        padding-right: 0;
+      }
+    }
+
+    &--no-vertical-gap {
       margin: 0;
 
       .fd-col {
-        padding: 0;
+        padding-top: 0;
       }
     }
   }

diff --git a/stories/layout-grid/__snapshots__/layout-grid.stories.storyshot b/stories/layout-grid/__snapshots__/layout-grid.stories.storyshot
@@ -830,7 +830,245 @@ exports[`Storyshots Layouts/Layout Grid Nesting 1`] = `
 
 exports[`Storyshots Layouts/Layout Grid No Gap 1`] = `
 <div
-  class="fd-container fd-container--no-gap"
+  class="fd-container fd-container--no-horizontal-gap fd-container--no-vertical-gap"
+>
+
+
+  <div
+    class="fd-row"
+  >
+
+
+    <div
+      class="fd-col fd-col--8"
+    >
+
+
+      <div
+        class="docs-layout-grid-bg docs-layout-grid-bg--color-1"
+      >
+
+            8 col no gap
+
+      </div>
+
+
+    </div>
+
+
+    <div
+      class="fd-col fd-col--4"
+    >
+
+
+      <div
+        class="docs-layout-grid-bg docs-layout-grid-bg--color-2"
+      >
+
+            4 col no gap
+
+      </div>
+
+
+    </div>
+
+
+    <div
+      class="fd-col fd-col--6"
+    >
+
+
+      <div
+        class="docs-layout-grid-bg docs-layout-grid-bg--color-3"
+      >
+
+            6 col no gap
+
+      </div>
+
+
+    </div>
+
+
+    <div
+      class="fd-col fd-col--6"
+    >
+
+
+      <div
+        class="docs-layout-grid-bg docs-layout-grid-bg--color-4"
+      >
+
+            6 col no gap
+
+      </div>
+
+
+    </div>
+
+
+    <div
+      class="fd-col fd-col--4"
+    >
+
+
+      <div
+        class="docs-layout-grid-bg docs-layout-grid-bg--color-5"
+      >
+
+            4 col no gap
+
+      </div>
+
+
+    </div>
+
+
+    <div
+      class="fd-col fd-col--8"
+    >
+
+
+      <div
+        class="docs-layout-grid-bg docs-layout-grid-bg--color-6"
+      >
+
+            8 col no gap
+
+      </div>
+
+
+    </div>
+
+
+  </div>
+
+
+</div>
+`;
+
+exports[`Storyshots Layouts/Layout Grid No Horizontal Gap 1`] = `
+<div
+  class="fd-container fd-container--no-horizontal-gap"
+>
+
+
+  <div
+    class="fd-row"
+  >
+
+
+    <div
+      class="fd-col fd-col--8"
+    >
+
+
+      <div
+        class="docs-layout-grid-bg docs-layout-grid-bg--color-1"
+      >
+
+            8 col no gap
+
+      </div>
+
+
+    </div>
+
+
+    <div
+      class="fd-col fd-col--4"
+    >
+
+
+      <div
+        class="docs-layout-grid-bg docs-layout-grid-bg--color-2"
+      >
+
+            4 col no gap
+
+      </div>
+
+
+    </div>
+
+
+    <div
+      class="fd-col fd-col--6"
+    >
+
+
+      <div
+        class="docs-layout-grid-bg docs-layout-grid-bg--color-3"
+      >
+
+            6 col no gap
+
+      </div>
+
+
+    </div>
+
+
+    <div
+      class="fd-col fd-col--6"
+    >
+
+
+      <div
+        class="docs-layout-grid-bg docs-layout-grid-bg--color-4"
+      >
+
+            6 col no gap
+
+      </div>
+
+
+    </div>
+
+
+    <div
+      class="fd-col fd-col--4"
+    >
+
+
+      <div
+        class="docs-layout-grid-bg docs-layout-grid-bg--color-5"
+      >
+
+            4 col no gap
+
+      </div>
+
+
+    </div>
+
+
+    <div
+      class="fd-col fd-col--8"
+    >
+
+
+      <div
+        class="docs-layout-grid-bg docs-layout-grid-bg--color-6"
+      >
+
+            8 col no gap
+
+      </div>
+
+
+    </div>
+
+
+  </div>
+
+
+</div>
+`;
+
+exports[`Storyshots Layouts/Layout Grid No Vertical Gap 1`] = `
+<div
+  class="fd-container fd-container--no-vertical-gap"
 >
 
 

diff --git a/stories/layout-grid/layout-grid.stories.js b/stories/layout-grid/layout-grid.stories.js
@@ -290,7 +290,93 @@ offset.parameters = {
     }
 };
 
-export const noGap = () => `<div class="fd-container fd-container--no-gap">
+export const noHorizontalGap = () => `<div class="fd-container fd-container--no-horizontal-gap">
+  <div class="fd-row">
+    <div class="fd-col fd-col--8">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-1">
+            8 col no gap
+        </div>
+    </div>
+    <div class="fd-col fd-col--4">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-2">
+            4 col no gap
+        </div>
+    </div>
+    <div class="fd-col fd-col--6">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-3">
+            6 col no gap
+        </div>
+    </div>
+    <div class="fd-col fd-col--6">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-4">
+            6 col no gap
+        </div>
+    </div>
+    <div class="fd-col fd-col--4">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-5">
+            4 col no gap
+        </div>
+    </div>
+    <div class="fd-col fd-col--8">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-6">
+            8 col no gap
+        </div>
+    </div>
+  </div>
+</div>
+`;
+
+noHorizontalGap.parameters = {
+    docs: {
+        iframeHeight: 300,
+        storyDescription: 'To remove gutters between columns apply the <code class="docs-code">fd-container--no-horizontal-gap</code> modifier to the container.'
+    }
+};
+
+export const noVerticalGap = () => `<div class="fd-container fd-container--no-vertical-gap">
+  <div class="fd-row">
+    <div class="fd-col fd-col--8">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-1">
+            8 col no gap
+        </div>
+    </div>
+    <div class="fd-col fd-col--4">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-2">
+            4 col no gap
+        </div>
+    </div>
+    <div class="fd-col fd-col--6">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-3">
+            6 col no gap
+        </div>
+    </div>
+    <div class="fd-col fd-col--6">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-4">
+            6 col no gap
+        </div>
+    </div>
+    <div class="fd-col fd-col--4">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-5">
+            4 col no gap
+        </div>
+    </div>
+    <div class="fd-col fd-col--8">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-6">
+            8 col no gap
+        </div>
+    </div>
+  </div>
+</div>
+`;
+
+noVerticalGap.parameters = {
+    docs: {
+        iframeHeight: 300,
+        storyDescription: 'To remove gutters between rows apply the <code class="docs-code">fd-container--no-vertical-gap</code> modifier to the container.'
+    }
+};
+
+export const noGap = () => `<div class="fd-container fd-container--no-horizontal-gap fd-container--no-vertical-gap">
   <div class="fd-row">
     <div class="fd-col fd-col--8">
         <div class="docs-layout-grid-bg docs-layout-grid-bg--color-1">
@@ -329,7 +415,7 @@ export const noGap = () => `<div class="fd-container fd-container--no-gap">
 noGap.parameters = {
     docs: {
         iframeHeight: 300,
-        storyDescription: 'To remove gutters between columns apply the <code class="docs-code">fd-container--no-gap</code> modifier for the container and the <code class="docs-code">fd-col--no-gap</code> modifier with the column.'
+        storyDescription: 'To remove gutters between rows and columns apply both the <code class="docs-code">fd-container--no-vertical-gap</code> and <code class="docs-code">fd-container--no-horizontal-gap</code> modifiers to the container.'
     }
 };