New component: Stack

[Justineo]

Prior art

Library	Spectrum	Carbon	Geist	MUI	chakra	Polaris	Fluent	Mantine	Braid	Ant	Arco	Semi	React Suite	TDesign	Naïve
Component	Flex	Stack	Stack	Stack	Stack	Stack	Stack	Stack	Stack	Space	Space	Space	Stack	Space	Space
flex-direction	direction	$\textcolor{#ffa733}{\texttt{orientation}}$	direction	direction $\textcolor{#848b99}{\texttt{flexDirection}}$	direction	$\textcolor{#ffa733}{\texttt{vertical}}$	$\textcolor{#ffa733}{\texttt{horizontal}}$ $\textcolor{#ffa733}{\texttt{reversed}}$			direction	direction	$\textcolor{#ffa733}{\texttt{vertical}}$	direction	$\textcolor{#ffa733}{\texttt{direction}}$	$\textcolor{#ffa733}{\texttt{vertical}}$
flex-wrap	wrap		wrap	$\textcolor{#848b99}{\texttt{flexWrap}}$	wrap	wrap	wrap			$\textcolor{#ffa733}{\texttt{wrap}}$	wrap	wrap	wrap	$\textcolor{#ffa733}{\texttt{breakLine}}$	wrap
align-items	alignItems		align	$\textcolor{#848b99}{\texttt{alignItems}}$	align	alignment	$\textcolor{#ffa733}{\texttt{verticalAlign}}$	align	$\textcolor{#ffa733}{\texttt{align}}$	align	align	align	alignItems		align
justify-content	justifyContent		justify	$\textcolor{#848b99}{\texttt{justifyContent}}$	justify	distribution	$\textcolor{#ffa733}{\texttt{horizontalAlign}}$	justify					justifyContent		justify
align-content	alignContent			$\textcolor{#848b99}{\texttt{alignContent}}$
gap	gap	gap	gap	spacing $\textcolor{#848b99}{\texttt{gap}}$	spacing	spacing	tokens.childrenGap	spacing	space	size	size	spacing	spacing	size	size
gap value	size-{0,10,25,...,6000}	$spacing-{01,02,03,...,13}	{0,0.25,0.5,...,40}	number	{0.5,1,1.5,...,96}	{extraTight,tight,baseTight,loose,extraLoose,none}	{s2,s1,m,l1,l2}	{xs,sm,md,lg,xs}	{xsmall,small,large,medium,none,gutter,xxsmall,xlarge,xxlarge}	{small,middle,large}	{mini,small,middle,large}	{loose,medium,tight}	number	{small,medium,large}	{small,middle,large}
divider				divider	divider				dividers	split	split		divider	separator
CSS display	flex	grid	flex	flex	flex	flex	flex	flex	block	inline-flex	inline-flex	inline-flex	flex	inline-flex	per inline prop

$\textcolor{#848b99}{\texttt{MUI's global style attributes}}$ $\textcolor{#ffa733}{\texttt{slightly different property/value/restrictions}}$

Stack component

interface StackProps {
  gap?: string | number
  wrap?: boolean
  inline?: boolean
  direction?: 'row' | 'column'
  align?: 'start' | 'center' | 'end' | 'stretch'
  justify?: 'start' | 'center' | 'end' | 'space-between'
}

TBD:

• Enhance Layout component? no
• Maybe gap → ui? gap
• display: inline-flex or display: flex? inline-block or flow-root according to inline prop

[Justineo]

Implemented in #1126.