Popover

<Stack alignItems='center' justifyContent='center' className='p-4' style={{ height: '200px' }}>
    <Popover
        trigger={<Button inactive>Element</Button>}
        open
        direction="r"
        header="Popover Header"
        width="xs"
        padding="s"
    >
        <BodyText size="small">Popover content.</BodyText>
    </Popover>
</Stack>

<Stack alignItems='center' justifyContent='center' className='p-4' style={{ height: '200px' }}>
    <Popover
        trigger={<Button inactive>Element</Button>}
        open
        direction="r"
        header="Popover Header"
        width="xs"
        padding="s"
    >
        <BodyText size="small">Popover content.</BodyText>
    </Popover>
</Stack>

Sizes

Popovers have a set of fixed width options, ranging from extra small (192px) to a large (640px). This is similar in how the Modal's width operates. There is also an option for the popover to extend to 100% the width of the element it is wrapped around.

<State>
    {([open, setOpen]) => (
        <>
        <ButtonGroup>
            {[['xs', 'Extra Small'], ['s', 'Small'], ['m', 'Medium'], ['l', 'Large']].map((item, index) => (
                <Popover
                    key={index}
                    portal
                    trigger={<Button onClick={() => setOpen(open !== index ? index : null)}>{item[1]}</Button>}
                    open={open === index}
                    direction="t"
                    width={item[0]}
                >
                    <BodyText size="small">{`${item[1]} Popover.`}</BodyText>
                    <BodyText size="small">Second line of text.</BodyText>
                </Popover>
            ))}
        </ButtonGroup>
        <br />
        <Popover
            portal
            trigger={
                <Card onClick={() => setOpen(open !== 4 ? 4 : null)}>
                    Match the width of the wrapped element (click to open)
                </Card>
            }
            open={open === 4}
            direction="b"
            width="100"
        >
            <BodyText size="small">Full-width Popover.</BodyText>
            <BodyText size="small">Second line of text.</BodyText>
        </Popover>
        </>
    )}
</State>

<State>
    {([open, setOpen]) => (
        <>
        <ButtonGroup>
            {[['xs', 'Extra Small'], ['s', 'Small'], ['m', 'Medium'], ['l', 'Large']].map((item, index) => (
                <Popover
                    key={index}
                    portal
                    trigger={<Button onClick={() => setOpen(open !== index ? index : null)}>{item[1]}</Button>}
                    open={open === index}
                    direction="t"
                    width={item[0]}
                >
                    <BodyText size="small">{`${item[1]} Popover.`}</BodyText>
                    <BodyText size="small">Second line of text.</BodyText>
                </Popover>
            ))}
        </ButtonGroup>
        <br />
        <Popover
            portal
            trigger={
                <Card onClick={() => setOpen(open !== 4 ? 4 : null)}>
                    Match the width of the wrapped element (click to open)
                </Card>
            }
            open={open === 4}
            direction="b"
            width="100"
        >
            <BodyText size="small">Full-width Popover.</BodyText>
            <BodyText size="small">Second line of text.</BodyText>
        </Popover>
        </>
    )}
</State>

Padding

There are three configurable padding options for the overall modal: small, medium, and large. These options are independent of the width properties.

Small

Made for small, simple dropdowns.

<Popover
    trigger={<Button inactive iconName='more_vert' />}
    open
    sharp
    direction="br"
    header="Popover Header"
    width="auto"
    padding="s"
>
    <BodyText size="small">Popover content.</BodyText>
    <BodyText size="small">Second line of text.</BodyText>
</Popover>

<Popover
    trigger={<Button inactive iconName='more_vert' />}
    open
    sharp
    direction="br"
    header="Popover Header"
    width="auto"
    padding="s"
>
    <BodyText size="small">Popover content.</BodyText>
    <BodyText size="small">Second line of text.</BodyText>
</Popover>

Medium

Default — for most use cases. Complex dropdowns, small–medium sized interactive overlays on screen.

<Stack alignItems="center" style={{ height: '320px' }}>
    <Popover
        trigger={<Button inactive iconName='more_vert' />}
        header={
            <Stack justifyContent="space-between" alignItems="center" className="w-100">
                <Headline size="small">Popover Header</Headline>
                <BodyText size="small" className="c-neutral-90">#12345</BodyText>
            </Stack>
        }
        headerAlign="space-between"
        footer={
            <ButtonGroup>
                <Button xsmall>Cancel</Button>
                <Button xsmall primary>Save</Button>
            </ButtonGroup>
        }
        footerAlign="right"
        open
        direction="r"
        width="s"
        padding="m"
    >
        <TagGroup style={{ marginLeft: "-4px", marginTop: "-4px" }}>
            <Tag>A Tag</Tag>
            <Tag>Another Tag</Tag>
            <Tag>Maintence</Tag>
        </TagGroup>
        <BodyText size="small" className="m-t-1">To be in the same Business Unit group, Business Units must have the same arrival windows. Please select which business units to remove and/or adjust your arrival windows in settings.</BodyText>
    </Popover>
</Stack>

<Stack alignItems="center" style={{ height: '320px' }}>
    <Popover
        trigger={<Button inactive iconN