Spread: Narrow component options to valid layout elements
Not all HTML elements make sense to be a layout container, e.g. input, so scoping the component prop to only surface relevant element types.
Spread: Apply content width to children
Align the behaviour of children in Spread to be the same as Inline children.
This makes their behaviour more predicatable when spreading full width elements, while also ensuring child elements are not stretched vertically.
Spread: Add component prop support
Enable support for changing the underlying HTML element of the Spread component.
EXAMPLE USAGE:
<Spread component="span"> ... </Spread>
Spread: Add data prop support
EXAMPLE USAGE:
<Spread data={{ test: 123 }}> ... </Spread>
Spread: Add new layout component
Introduce a new layout component, Spread, used to justify content with both an equally distributed and a specified minimum amount of space in between each child.
EXAMPLE USAGE:
The Spread component works horizontally by default:
<Spread space="small" alignY="center"> <Heading level="4">Heading</Heading> <OverflowMenu label="Options"> <MenuItem>First</MenuItem> <MenuItem>Second</MenuItem> </OverflowMenu> </Spread>
But can be switched to vertical via the direction prop:
<Spread space="large" direction="vertical"> <Stack space="small"> <Heading level="4">Heading</Heading> <Text>Text</Text> </Stack> <Text size="small" tone="secondary"> Date </Text> </Spread>