Merge pull request #391 from fabscale/fn/add-stack-float

Add `@float` parameter to `<Layout::Stack>`
fabscale · Jul 28, 2022 · 9596e3d · 9596e3d
2 parents 40b8e60 + 4b50811
commit 9596e3d
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 2 deletions.
diff --git a/addon/components/layout/stack/item.hbs b/addon/components/layout/stack/item.hbs
@@ -1,4 +1,8 @@
 <div
-  class="layout-stack-item"
+  class={{layout-join-classes
+    'layout-stack-item'
+    (layout-class-if @float 'bottom' 'layout-stack-item--bottom')
+    (layout-class-if @float 'center' 'layout-stack-item--center')
+  }}
   ...attributes
->{{yield}}</div>
+>{{yield}}</div>
diff --git a/addon/styles/addon.css b/addon/styles/addon.css
@@ -75,6 +75,17 @@
   border-bottom: 1px solid var(--layout-stack-separator-color);
 }
 
+/* "Floating" is achieved via margin: auto */
+.layout-stack-item--bottom {
+  margin-top: auto;
+}
+
+.layout-stack-item--center,
+.layout-stack-item--center:not(:last-child) {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
 /* 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
@@ -17,4 +17,18 @@ export default class StackController extends Controller {
   <Item>Second item</Item>
   <Item>Third item</Item>
 </Layout::Stack>`;
+
+  stackCodeBottom = `<Layout::Stack @fullHeight={{true}} as |Item|>
+  <Item>First item</Item>
+  <Item>Second item</Item>
+  <Item>Third item</Item>
+  <Item @float="bottom">Fourth item</Item>
+</Layout::Stack>`;
+
+  stackCodeCenter = `<Layout::Stack @fullHeight={{true}} as |Item|>
+  <Item>First item</Item>
+  <Item>Second item</Item>
+  <Item>Third item</Item>
+  <Item @float="center">Fourth item</Item>
+</Layout::Stack>`;
 }
diff --git a/tests/dummy/app/templates/stack.hbs b/tests/dummy/app/templates/stack.hbs
@@ -91,5 +91,98 @@
         </StackItem>
       </Layout::Stack>
     </SectionItem>
+
+    <SectionItem>
+      <h2>
+        Configuration options on items
+      </h2>
+
+      <p>
+        You can also specify some options on the stack items.
+      </p>
+    </SectionItem>
+
+    <SectionItem>
+      <h3>
+        Float items to the bottom
+      </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.stackCodeBottom}} @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 @float='bottom'>
+                <DemoItem />
+              </Item>
+            </Layout::Stack>
+          </div>
+        </StackItem>
+      </Layout::Stack>
+    </SectionItem>
+
+    <SectionItem>
+      <h3>
+        Float items to the center
+      </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.stackCodeCenter}} @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 @float='center'>
+                <DemoItem />
+              </Item>
+            </Layout::Stack>
+          </div>
+        </StackItem>
+      </Layout::Stack>
+    </SectionItem>
+
   </Layout::Stack>
 </Layout::Wrapper>