Stack - Added height and instruction for building sidebars

Author: Phyele

projects/layout-components/src/lib/stack/stack.component.css

@@ -1,5 +1,4 @@
 :host {
     display: flex;
     flex-direction: column;
-    padding: 12px;
 }

projects/layout-components/src/lib/stack/stack.component.ts

@@ -1,5 +1,4 @@
 import { Component, HostBinding, Input } from '@angular/core';
-import { Properties } from 'csstype';
 import { AlignItems, Gap, JustifyContent, Padding } from '../common';
 
 @Component({
@@ -10,15 +9,20 @@ import { AlignItems, Gap, JustifyContent, Padding } from '../common';
   styleUrl: './stack.component.css',
 })
 export class StackComponent {
-  @HostBinding('style.justify-content') @Input() justifyContent: JustifyContent =
-    'flex-start';
+  @HostBinding('style.justify-content')
+  @Input()
+  justifyContent: JustifyContent = 'flex-start';
   @HostBinding('style.align-items')
   @Input()
   alignItems: AlignItems = 'stretch';
+  @HostBinding('style.height')
+  @Input()
+  height?: string;
   @HostBinding('style.gap')
   /**
    * The gap between the children of the stack.
    */
-  @Input() gap: Gap = '0';
+  @Input()
+  gap: Gap = '0';
   @HostBinding('style.padding') @Input() padding: Padding = '0';
 }

projects/layout-components/src/stories/stack.stories.ts

@@ -9,6 +9,8 @@ import { StackComponent } from '../lib/stack/stack.component';
 
 /**
  * The Stack component is used to arrange its children vertically.
+ *
+ * If you want to create a sidebar, Stack is the most suitable component. Set <code>[height]="100%"</code> on Stack and do the same with all its parents. If you want a child of the Stack to grow to cover a specific portion of the available space, set a <code>flex-grow</code> on it.
  */
 const meta: Meta<typeof StackComponent> = {
   title: 'Components/Stack',
@@ -35,5 +37,6 @@ type Story = StoryObj<StackComponent>;
 export const Basic: Story = {
   args: {
     gap: '16px',
+    height: '100%',
   },
 };