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

align

justify

gap

wrap

grow

preventGrowOverflow

() => {
  const ExampleBox = useMemo(() => {
    return styled('div', {
      static: {
        padding: '$web.semantic.spacing.scale.lg',
        borderRadius: '$web.semantic.border-radius.container.large',
        backgroundColor: '$web.semantic.color.surface.container.primary',
        color: '$web.semantic.color.text.content.primary-alt',
      },
    });
  }, []);

  return (
    <Group css={{ height: '160px' }}>
      <ExampleBox>Item 1</ExampleBox>
      <ExampleBox>Item 2</ExampleBox>
      <ExampleBox>Item 3</ExampleBox>
    </Group>
  );
};

Gap, align, and justify

Use the gap prop to set the space between children. This corresponds to the CSS gap value. Accepts a $web.semantic.spacing.scale.* token (e.g. $web.semantic.spacing.scale.lg) or a raw CSS length. Defaults to $web.semantic.spacing.scale.lg.

Use the justify prop to control main-axis (horizontal) alignment. This corresponds to the CSS justify-content value. The possible values are 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', or 'space-evenly'. Defaults to 'flex-start'.

Use the align prop to control cross-axis (vertical) alignment. This corresponds to the CSS align-items value. The possible values are 'stretch', 'flex-start', 'flex-end', 'center', or 'baseline'. Defaults to 'center'.

Grow

Use the grow prop so each child gets flex-grow: 1 and expands to fill the row. With preventGrowOverflow (on by default) children stay to an equal share; set it to false to let them grow from their content size. Defaults to true.

Wrap

Use the wrap prop to control whether children should wrap onto multiple lines when they overflow. This corresponds to the CSS flex-wrap value. The possible values are 'nowrap', 'wrap', or 'wrap-reverse'. Defaults to 'wrap'.

Group Props

Name	Type	Default	Required	Description
align	'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | undefined	'center'	-	Cross-axis (vertical) alignment of children.
asElement	string | undefined	'div'	-	Determine what type of html element the Group will render
children	React.ReactNode | undefined	-	-	The elements to arrange horizontally. Rendered as-is, with no wrapper elements added around individual children.
gap	Abyss.Space | undefined	'$web.semantic.spacing.scale.lg'	-	The space between children — a $web.semantic.spacing.scale.* token or a raw CSS length.
grow	boolean | undefined	false	-	If set, each child gets flex-grow: 1 so children expand to fill the row.
justify	'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | undefined	'flex-start'	-	Main-axis (horizontal) distribution of children.
preventGrowOverflow	boolean | undefined	true	-	When grow is set, keeps children to an equal share of the row instead of letting them grow past it based on content. Only applies with grow.
wrap	'nowrap' | 'wrap' | 'wrap-reverse' | undefined	'wrap'	-	Whether children wrap onto multiple lines when they overflow the row.

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

Abyss.d.ts

Group.types.ts

Group Classes

Class Name	Description
.abyss-group-root	Group root element