Stack

Context

The <Stack> component is designed to arrange its children in a vertical or horizontal stack. It simplifies the process of controlling spacing between items and ensures consistent alignment throughout the interface.

Problem

When child components within a <Stack> have their own margins or paddings applied, it can lead to inconsistent and unintended layout results. This issue arises when spacing is not managed centrally by something like the <Stack> component, causing inconsistencies in the layout.

Proposed Solution

• Centralized Spacing Management:
• The <Stack> component should be responsible for managing the spacing between its child elements. Avoid applying individual margins or paddings to components inside the stack. This approach ensures a consistent layout.
• Initial Proposed Props:
• direction (optional): Specifies the direction of the stack.
• "vertical" (default): Arranges children in a vertical stack (top to bottom).
• "horizontal": Arranges children in a horizontal stack (left to right).
• Default: "vertical"
• spacing (optional): Defines the space between stack items. The spacing should be based on design tokens to maintain consistency.
• Type: number or string (based on design tokens)
• Default: To be determined (TBD)
• className (optional): Allows additional CSS classes to be applied to the stack container.
• children: The content to be stacked within the component

Other potential props could include "alignment".

Usage

• When to Use:
• The <Stack> component is ideal for creating consistent layouts by stacking child elements either vertically or horizontally. It ensures consistent spacing and alignment without the need for manual adjustments to margins or paddings.
• How to Use:
• To use the <Stack>, wrap your child components within it and configure the direction and spacing props to achieve the desired layout.

Code sample

                                                        
                                                        
                                                            import Stack from './Stack'; 
                                                        
                                                        function App() {
                                                          return (
                                                            <Stack direction="horizontal" spacing="12">
                                                              <button>Button 1</button>
                                                              <button>Button 2</button>
                                                            </Stack>
                                                          );
                                                        }
                                                        
                                                            

In this example, the <Stack> component arranges the buttons horizontally, with consistent spacing between each button, as defined by the spacing prop.

Next Steps

• Review and Feedback: Ensure the <Stack> component's approach to spacing is understood and applied correctly across the Figma design system.
• Implementation: Update the usage of <Stack> across the application where applicable, removing any individual margins or paddings from child components and relying solely on the <Stack> for spacing.

This decision ensures that the <Stack> component effectively maintains consistent spacing and alignment across layouts, improving the consistency of the design and simplicity of the implementation.