Skip to content

Commit

Permalink
chore(stack): added comments to stack.ts for the documentation site
Browse files Browse the repository at this point in the history
  • Loading branch information
nickonometry committed Feb 22, 2024
1 parent 30284e2 commit 35b3b43
Showing 1 changed file with 33 additions and 0 deletions.
33 changes: 33 additions & 0 deletions src/lib/stack/stack.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,39 @@ declare global {

/**
* @tag forge-stack
*
* @summary The stack is a utility component that helps manage spacing and alignment of immediate children along a vertical or horizontal axis.
*
* @description
* The stack utility component uses flexbox under the hood, but it is not meant to be an abstraction or replacement for CSS flexbox.
* It's simply a utility component for developer convenience. There are many UI patterns and situations where elements need to be
* arranged horizontally or vertically with a specific gap inbetween. Rather than having to inline a style or create a class for
* these scenarios, you can reach for the stack. This keeps developers within the template and prevents jumping around from template
* to CSS, and helps minimize the number of CSS classes being used.
*
* @property {boolean} inline - Sets the direction of child items to be horizontal.
* @property {boolean} wrap - Wrap is used to wrap child elements to a new row when there's not enough space. This only works when inline is set to true.
* @property {boolean} stretch - Stretch allows each child element to take up as much width as possible until the parent container is filled. You can override this on each individual child element by changing its --forge-stack-stretch CSS custom property.
* @property {string} gap - Controls the amount of space between child elements within a stack.
* @property {StackAlignment} alignment - Controls the align-items property of the stack.
* @property {StackAlignment} justify - Controls the justify-content property of the stack.
*
* @attribute {boolean} inline - Sets the direction of child items to be horizontal.
* @attribute {boolean} wrap - Wrap is used to wrap child elements to a new row when there's not enough space. This only works when inline is set to true.
* @attribute {boolean} stretch - Stretch allows each child element to take up as much width as possible until the parent container is filled. You can override this on each individual child element by changing its --forge-stack-stretch CSS custom property.
* @attribute {string} gap - Controls the amount of space between child elements within a stack.
* @attribute {StackAlignment} alignment - Controls the align-items property of the stack.
* @attribute {StackAlignment} justify - Controls the justify-content property of the stack.
*
* @cssproperty --forge-stack-alignment - Controls the align-items CSS property of the root stack element.
* @cssproperty --forge-stack-justify - Controls the justify-content CSS property of the root stack element.
* @cssproperty --forge-stack-gap - Controls the gap between each child element within a stack.
* @cssproperty --forge-stack-height - Controls the height of the root stack element.
* @cssproperty --forge-stack-stretch - Controls the flex shorthand property of a child element within the stack.
*
* @csspart root - The root container element.
*
* @slot - The default/unnamed slot for stack content.
*/
@CustomElement({
name: STACK_CONSTANTS.elementName
Expand Down

0 comments on commit 35b3b43

Please sign in to comment.