Merge pull request #392 from fabscale/fn/add-stack-grow

Add `@grow` parameter to `<Layout::Stack>`
fabscale · Jul 28, 2022 · d90f7e7 · d90f7e7
2 parents 9596e3d + 26dc48b
commit d90f7e7
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 0 deletions.
diff --git 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>
diff --git 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
@@ -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
@@ -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>