[Layout] Review layout components for final release

[aweell]

• Implement Flex component #1209

[GomezIvann]

New Layout components

After some discussions, the final approach involves two new Layout components:

• DxcRows.
  • DxcRow. Inner component; cannot be used outside of their respective parents.
• DxcColumns.
  • DxcColumn. Inner component; cannot be used outside of their respective parents.
• DxcInline.
• DxcStack.

DxcRows & DxcColumns

Columns - API

Name	Type	Default value	Prop description
alignX	Align	start or stretch	Align columns in the main axis.
alignY	Align	start or stretch	Align columns in the cross axis.
as	string	div	Set the component to a different HTML tag.
divider	boolean	false	Add a divider between columns.
gutter	Gutter	"none"	Spacing between columns.
reverse	boolean	false	Change the flex-direction of the column to reverse.
children	Column	-	Single Column.

Rows - API

Name	Type	Default value	Prop description
alignX	Align	start or stretch	Align columns in the main axis.
alignY	Align	start or stretch	Align columns in the cross axis.
as	string	div	Set the component to a different HTML tag.
divider	boolean	false	Add a divider between rows.
gutter	Gutter	"none"	Spacing between rows.
reverse	boolean	false	Change the flex-direction of the row to reverse.
children	Row	-	Single Row.

being Gutter:

type Gutter = "0rem" | "0.125rem" | "0.25rem" | "0.5rem" | "0.75rem" | "1rem" | "1.5rem" | "2rem";

and Align:

type Align = "start" | "end" | "center" | "baseline" | "stretch";

DxcRows.Row & DxcColumns.Column

Inner components of Rows and Columns. They can't be used outside of them.

Column - API

By default, flex-direction will be set to column.

Name	Type	Default value	Prop description
width	Size	"auto"	Fixed height of the single row.
children	React.ReactNode	-	Custom content.

Row - API

By default, flex-direction will be set to row.

Name	Type	Default value	Prop description
height	Size	"auto"	Fixed width of the single row.
children	React.ReactNode	-	Custom content.

being Size:

type Size = "auto" | "content" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8";

Extra components: DxcInline & DxcStack

Inline - API

Arranges child nodes horizontally, wrapping them into multiple lines if needed, with equal spacing between items. It may look similar to DxcColumns, but the key point is that flex-wrap is set to wrap, so if multiple components can't be fitted in the available width, they will jump into the next one.

Name	Type	Default value	Prop description
alignX	Align	start or stretch	Align columns in the main axis.
alignY	Align	start or stretch	Align columns in the cross axis.
as	string	div	Set the component to a different HTML tag.
divider	boolean	false	Add a divider between rows.
gutter	Gutter	"none"	Spacing between rows.
reverse	boolean	false	Change the flex-direction of the row to reverse.
children	React.ReactNode	-	Content.

The existence of this component will imply the removal of the previous prop wrap since this components fit its use case.

Stack - API

Arranges child nodes vertically, wrapping them into multiple columns if needed, with equal spacing between items. It may look similar to DxcRows, but the key point is that flex-wrap is set to wrap, so if multiple components can't be fitted in the available height, they will jump into the next one.

Name	Type	Default value	Prop description
alignX	Align	start or stretch	Align columns in the main axis.
as	string	div	Set the component to a different HTML tag.
divider	boolean	false	Add a divider between rows.
gutter	Gutter	"none"	Spacing between rows.
reverse	boolean	false	Change the flex-direction of the row to reverse.
children	React.ReactNode	-	Content.

The existence of this component will imply the removal of the previous prop wrap since this components fit its use case.

[GomezIvann]

Notes

Topics opened to discuss:

• Should Row and Column offer the same props as Inline and Stack? (Internally they would be implemented using them and compound components, like the application layout).

Edge cases

Inline

1. Inline flex container width is surpassed by the component's width.
2. Inline flex container height is surpassed by the component's width.

[GomezIvann]

After many discussions, we have decided that we don't have enough knowledge to define layout components with a specific context, such as Stack/Inline or Rows/Columns. For now, we are going to add a new component Flex, with a more flexible API, to try to adapt to more situations and give the user more options for building its layouts.

Flex

A primitive component that can be used to build flexbox-based elements and layouts.

API

By default, the display attribute would be set to flex:

Name	Type	Default value	Prop description
as	string	div	Set the component to a different HTML tag.
direction	row or row-reverse or column or column-reverse	row	Items direction inside the flex container.
wrap	nowrap or wrap or wrap-reverse	nowwrap	Wrap into multiple lines.
grow	number (no negative numbers)	0	Sets the flex grow factor of a flex item's main size.
shrink	number (no negative numbers)	1	Defines the ability for a flex item to shrink if necessary.
basis	string	auto	Defines the default size of an element before the remaining space is distributed.
justify-content	flex-start or flex-end or start or end or left or right or center or space-between or space-around or space-evenly	flex-start	Defines the alignment along the main axis.
align-items	stretch or flex-start or flex-end or start or end or self-start or self-end or center or baseline	normal	Controls the alignment of items on the Cross Axis.
align-content	normal or flex-start or flex-end or start or end or center or space-between or space-around or space-evenly or stretch	normal	Defines the alignment along the cross axis.
align-self	auto or flex-start or flex-end or center or baseline or stretch	auto	The align-self CSS property overrides a grid or flex item's align-items value.
order	number	0	Controls the order in which they appear in the flex container.
children	React.ReactNode	-	Content.