---
# System prepended metadata

title: Stack/Flex convergence
tags: [pitch]

---

---
robots: noindex, nofollow
tags: pitch
---

# Stack/Flex convergence

### Problem
Currently there are two components that try to achieve the same goal: An abstraction of flex box. These two components are Flex from v0 and Stack from v7. Since both components try to achieve the same, there needs to be a middleground component to replace both of them for Fluent UI.

This is where Stack/Flex convergence comes in. By comparing both components, we can converge them and improve some of the aspects of each of them to get an improved version of them.

### Appetite
Rest of the internship (~6 weeks).

### Solution
* High priority:
    * Removing the perf hit is one of the main issues, this hit happens when cloning children.
    * Move from css in js to scss
    * When converging it is important to keep track that tests and examples still work the same way.
    * (Start now!) Rename to Flex? (Asking people around and checking other UI libraries)
    * (Start now!) Converge prop names (David, Levi, Mak, (Shift or Miroslav), Elizabeth)
    * Package scaffolding
* Low priority:
    * Use compose without slots?
    * Add support for: as prop, native props, tokens, and gap

### Risks (Rabbit holes)
One of the main issues could be agreeing on what to keep from each component.
Getting stuck on one of the points, try to move forward as much as possible.

### Out of scope (No-gos)
* Add specific tokens for sizes and make it hard to hardcode values (Stretch goal)


## Current naming status

|Library      |Name   |
|      -      |   -   |
|Fluent UI    |Stack  |
|Stardust     |Flex   |
|Bootstrap    |Flex   |
|Primer       |Flex   |
|Theme UI     |Stack  |
|Material UI  |Flexbox|