From 39552542620763071608c774f5c7c122530a9933 Mon Sep 17 00:00:00 2001
From: Manuel Puyol <manuelpuyol@github.com>
Date: Wed, 26 May 2021 10:33:29 -0500
Subject: [PATCH] specify the divider flowrow variants

---
 docs/content/components/layout.md | 14 +++++++++++---
 src/layout/mixins.scss            |  6 +++++-
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/docs/content/components/layout.md b/docs/content/components/layout.md
index 3e69acb8..56cdd1a0 100644
--- a/docs/content/components/layout.md
+++ b/docs/content/components/layout.md
@@ -41,7 +41,10 @@ of the sidebar position.
 ### Dividers
 
 Use `Layout--divided` in conjuction with a `Layout-divider` to show a divider between the main content and the sidebar.
-Add `Layout-divider--shallow` to change the divider on `sm` to be filled and 8px tall.
+Flowing as row:
+- default: shows a `1px` line between main and sidebar
+- `Layout-divider--flowRow-shallow`: shows a filled `8px` divider.
+- `Layout-divider--flowRow-hidden`: hides the divider
 
 
 ```html live
@@ -57,8 +60,13 @@ Add `Layout-divider--shallow` to change the divider on `sm` to be filled and 8px
 </div>
 <div class="Layout Layout--divided">
   <div class="Layout-main border">main content</div>
-  <div class="Layout-divider Layout-divider--shallow"></div>
-  <div class="Layout-sidebar border">shallow divider</div>
+  <div class="Layout-divider Layout-divider--flowRow-shallow"></div>
+  <div class="Layout-sidebar border">flowRow shallow divider</div>
+</div>
+<div class="Layout Layout--divided">
+  <div class="Layout-main border">main content</div>
+  <div class="Layout-divider Layout-divider--flowRow-hidden"></div>
+  <div class="Layout-sidebar border">flowRow hidden divider</div>
 </div>
 ```
 
diff --git a/src/layout/mixins.scss b/src/layout/mixins.scss
index 72ad9fc7..02e2cf15 100644
--- a/src/layout/mixins.scss
+++ b/src/layout/mixins.scss
@@ -48,7 +48,11 @@
   .Layout-divider {
     height: 1px;
 
-    &.Layout-divider--shallow {
+    &.Layout-divider--flowRow-hidden {
+      display: none;
+    }
+
+    &.Layout-divider--flowRow-shallow {
       height: 8px;
       margin-right: 0;
       background: var(--color-bg-canvas-inset);