From 26dc48b40950797872982882a16f0e8a691807e8 Mon Sep 17 00:00:00 2001
From: Francesco Novy <francesco@fabscale.com>
Date: Thu, 28 Jul 2022 14:09:34 +0200
Subject: [PATCH] feat: Add `@grow` parameter to `<Layout::Stack>`

---
 addon/components/layout/stack/item.hbs |  1 +
 addon/styles/addon.css                 |  4 +++
 tests/dummy/app/controllers/stack.js   |  7 +++++
 tests/dummy/app/templates/stack.hbs    | 41 ++++++++++++++++++++++++++
 4 files changed, 53 insertions(+)

diff --git a/addon/components/layout/stack/item.hbs b/addon/components/layout/stack/item.hbs
index adf3ae40..aed7c7c0 100644
--- a/addon/components/layout/stack/item.hbs
+++ b/addon/components/layout/stack/item.hbs
@@ -3,6 +3,7 @@
     'layout-stack-item'
     (layout-class-if @float 'bottom' 'layout-stack-item--bottom')
     (layout-class-if @float 'center' 'layout-stack-item--center')
+    (layout-class-if @grow true 'layout-stack-item--grow')
   }}
   ...attributes
 >{{yield}}</div>
\ No newline at end of file
diff --git a/addon/styles/addon.css b/addon/styles/addon.css
index f87a0217..af79c3e3 100644
--- a/addon/styles/addon.css
+++ b/addon/styles/addon.css
@@ -86,6 +86,10 @@
   margin-bottom: auto;
 }
 
+.layout-stack-item--grow {
+  flex-grow: 1;
+}
+
 /* Cluster */
 .layout-cluster {
   --cluster-gap-size: var(--layout-cluster-gap);
diff --git a/tests/dummy/app/controllers/stack.js b/tests/dummy/app/controllers/stack.js
index 2fb654e3..e02b795b 100644
--- a/tests/dummy/app/controllers/stack.js
+++ b/tests/dummy/app/controllers/stack.js
@@ -31,4 +31,11 @@ export default class StackController extends Controller {
   <Item>Third item</Item>
   <Item @float="center">Fourth item</Item>
 </Layout::Stack>`;
+
+  stackCodeGrow = `<Layout::Stack @fullHeight={{true}} as |Item|>
+  <Item>First item</Item>
+  <Item>Second item</Item>
+  <Item>Third item</Item>
+  <Item @grow={{true}}>Fourth item</Item>
+</Layout::Stack>`;
 }
diff --git a/tests/dummy/app/templates/stack.hbs b/tests/dummy/app/templates/stack.hbs
index 7dd66415..15479b65 100644
--- a/tests/dummy/app/templates/stack.hbs
+++ b/tests/dummy/app/templates/stack.hbs
@@ -184,5 +184,46 @@
       </Layout::Stack>
     </SectionItem>
 
+    <SectionItem>
+      <h3>
+        Grow item
+      </h3>
+
+      <p>
+        Note that this will require the stack to be a specified height (e.g.
+        full height) to have an effect.
+      </p>
+
+      <Layout::Stack as |StackItem|>
+        <StackItem>
+          <CodeBlock @code={{this.stackCodeGrow}} @language='handlebars' />
+        </StackItem>
+        <StackItem>
+          {{! template-lint-disable no-inline-styles }}
+          <div style='height: 20rem; background: lightgrey'>
+            <Layout::Stack
+              @gap={{this.stackGap}}
+              @withSeparator={{this.stackWithSeparator}}
+              @fullHeight={{true}}
+              as |Item|
+            >
+              <Item>
+                <DemoItem />
+              </Item>
+              <Item>
+                <DemoItem />
+              </Item>
+              <Item>
+                <DemoItem />
+              </Item>
+              <Item @grow={{true}}>
+                <DemoItem />
+              </Item>
+            </Layout::Stack>
+          </div>
+        </StackItem>
+      </Layout::Stack>
+    </SectionItem>
+
   </Layout::Stack>
 </Layout::Wrapper>
\ No newline at end of file