From b370ad0df83e1ecb7de8583b0ab17c149956284c Mon Sep 17 00:00:00 2001
From: Marien Fressinaud <marien.fressinaud@probesys.com>
Date: Tue, 9 May 2023 10:27:51 +0200
Subject: [PATCH] tec: Provide a .row--wrap class

---
 assets/stylesheets/utils/flow.css | 18 ++++++++++++++++++
 assets/stylesheets/utils/rows.css |  4 ++++
 docs/developers/rows-and-grids.md | 14 ++++++++++++++
 3 files changed, 36 insertions(+)

diff --git a/assets/stylesheets/utils/flow.css b/assets/stylesheets/utils/flow.css
index 2172fa18..53c73bf3 100644
--- a/assets/stylesheets/utils/flow.css
+++ b/assets/stylesheets/utils/flow.css
@@ -49,3 +49,21 @@
         margin-left: var(--flow-size);
     }
 }
+
+.flow-smaller.row--always.row--wrap > *,
+.flow-small.row--always.row--wrap > *,
+.flow.row--always.row--wrap > *,
+.flow-large.row--always.row--wrap > *,
+.flow-larger.row--always.row--wrap > * {
+    margin-bottom: var(--flow-size);
+}
+
+@media (min-width: 800px) {
+    .flow-smaller.row--wrap > *,
+    .flow-small.row--wrap > *,
+    .flow.row--wrap > *,
+    .flow-large.row--wrap > *,
+    .flow-larger.row--wrap > * {
+        margin-bottom: var(--flow-size);
+    }
+}
diff --git a/assets/stylesheets/utils/rows.css b/assets/stylesheets/utils/rows.css
index c44ffc34..f5a17310 100644
--- a/assets/stylesheets/utils/rows.css
+++ b/assets/stylesheets/utils/rows.css
@@ -26,6 +26,10 @@
     justify-content: center;
 }
 
+.row--wrap {
+    flex-wrap: wrap;
+}
+
 .row__item--extend {
     flex: 1;
 }
diff --git a/docs/developers/rows-and-grids.md b/docs/developers/rows-and-grids.md
index 1b3bff89..499eddfb 100644
--- a/docs/developers/rows-and-grids.md
+++ b/docs/developers/rows-and-grids.md
@@ -71,6 +71,20 @@ To add space between row items, just use one of the `.flow*` classes:
 </div>
 ```
 
+In certain cases, you may want the items of the row to be placed on a new line.
+This can be done with `.row--wrap`:
+
+```html
+<div class="row row--wrap">
+    <div>A</div>
+    <div>Lot</div>
+    <div>Of</div>
+    <div>Items</div>
+</div>
+```
+
+Before using this class, please consider the grid system first.
+
 You can tell a row item to take all the remaining space with `.row__item--extend`:
 
 ```html