import { Layout } from '@uhg-abyss/web/ui/Layout';

Layout.Group

Used to align elements in a row.

space

alignLayout

alignItems

grow

<Layout.Group>
    <div style={{ border: '1px solid black', padding: '15px', margin: '4px' }}>
      Group 1
    </div>
    <div style={{ border: '1px solid black', padding: '10px', margin: '4px' }}>
      Group 2
    </div>
    <div style={{ border: '1px solid black', padding: '5px', margin: '4px' }}>
      Group 3
    </div>
</Layout.Group>

Layout.Stack

Used to align elements in a column.

space

alignLayout

alignItems

grow

<Layout.Stack>
    <div style={{ border: '1px solid black', padding: '15px', margin: '4px' }}>
      Stack Sandbox 1
    </div>
    <div style={{ border: '1px solid black', padding: '10px', margin: '4px' }}>
      Stack Sandbox 2
    </div>
    <div style={{ border: '1px solid black', padding: '5px', margin: '4px' }}>
      Stack Sandbox 3
    </div>
</Layout.Stack>

Combine Layout.Group and Layout.Stack

Use Stack and Group together to make simple sets of rows and columns

Layout.Group and Layout.Stack props

Space

Use the space property to set the spacing for a Group or Stack. The default is set to 8.

AlignLayout

Use the alignLayout property to indicate the horizontal alignment of the items in a Group or Stack.

• For a Group, the possible options are left, center, right, between, and around; the default is set to left.
• For a Stack, the possible options are left, center, and right; the default is set to center.

AlignItems

Use the alignItems property to indicate the alignment of the items in a Group or Stack. For a Group the vertical alignment is adjusted, whereas for a Stack the horizontal alignment is adjusted.

• For a Group, the possible options are top, center, and bottom.
• For a Stack, the possible options are left, center, and right.

The default is set to center in both cases.

Grow

Use the grow property indicate whether the grouped components should be stretched to fill the space horizontally. The default is set to false.

Width

Use the optional width property to set the minimum width for each child element.

Element types

To change what type of html elements are displayed, use the props as and childElementsAs. They default to displaying as divs.

Layout.Group Props

Name	Type	Default	Required	Description
alignItems	"center" | "top" | "bottom"	'center'	-	Adjust the vertical alignment of items in the LayoutGroup
alignLayout	"center" | "left" | "right" | "between" | "around"	'left'	-	Set the position of the LayoutGroup
as	string	-	-	Determine what type of html element the LayoutGroup container will render
childElementsAs	string	-	-	Determine what type of html element the LayoutGroup elements will render
children	React.ReactNode	-		The element the LayoutGroup wraps
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	false	-	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
grow	boolean	false	-	If true, distribute all space evenly between child elements
space	number	8	-	Distance between elements in the LayoutGroup
width	string | number	-	-	Set the width of the LayoutGroup

Below are the link(s) to the relevant GitHub type files:

Abyss.d.ts

LayoutGroup.types.ts

Layout.Insert Props

Name	Type	Default	Required	Description
after	React.ReactNode | ((props: FuncProps) => React.ReactNode)	-	-	Insert element after children
before	React.ReactNode | ((props: FuncProps) => React.ReactNode)	-	-	Insert element before children
children	React.ReactNode	-	-	The element the inserted elements are between
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	false	-	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
padding	string | number	'$xs'	-	The space between the inserted element and children

Below are the link(s) to the relevant GitHub type files:

Abyss.d.ts

LayoutInsert.types.ts

Layout.Space Props

Name	Type	Default	Required	Description
className	string	-	-	CSS class name to apply to each element within the component
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	false	-	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
space	string | number	16	-	The amount of space to place between components

Below are the link(s) to the relevant GitHub type files:

Abyss.d.ts

LayoutSpace.types.ts

Layout.Stack Props

Name	Type	Default	Required	Description
alignItems	"center" | "left" | "right"	'center'	-	Adjust the horizontal alignment of items in the LayoutStack
alignLayout	"center" | "left" | "right"	'left'	-	Set the position of the LayoutStack
as	string	-	-	Determine what type of html element the LayoutStack container will render
childElementsAs	string	-	-	Determine what type of html element the LayoutStack elements will render
children	React.ReactNode	-		The element the LayoutStack wraps
className	string	-	-	CSS class name to apply to each element within the component
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	false	-	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
grow	boolean	false	-	If true , distribute all space evenly between child elements
space	number	8	-	Distance between elements in the LayoutStack
width	string | number	-	-	Set the width of the LayoutStack

Below are the link(s) to the relevant GitHub type files:

Abyss.d.ts

LayoutStack.types.ts

Layout.Group Classes

Class Name	Description
.abyss-layout-group	LayoutGroup root element

Layout.Insert Classes

Class Name	Description
.abyss-insert-element-root	Insert element root
.abyss-insert-element-before	Insert element before
.abyss-insert-element-after	Insert element after

Layout.Space Classes

Class Name	Description
.abyss-layout-space	LayoutSpace root element

Layout.Stack Classes

Class Name	Description
.abyss-layout-stack	LayoutStack root element

For basic content layout, the normal divs should be sufficient. When using layout for semantic elements such as bulleted (ul) or ordered (ol) lists, be sure to use the as and childElementsAs props to correctly preserve the semantic structure. For example, the only valid children for ul and ol are li. Not doing so introduces semantic and code validation errors often reported in accessibility testing (including automated tools like Evinced).