ModalActions: Don't add spacing for null child items

[scottlovegrove]

🐛 Bug report

Current behavior

I'm creating a wizard within a Modal component and making use of the ModalActions feature, but the buttons being displayed are dynamic in their nature depending on which step of the wizard you are at.

My code for the ModalActions looks like this

<ModalActions>
    {buttonData.back ? (
        <Button variant="secondary" onClick={backClicked}>
            <>{t('addLeague.back')}</>
        </Button>
    ) : null}
    {buttonData.next ? (
        <Button variant="primary" disabled={busy} type="submit" loading={busy}>
            <>{t('addLeague.next')}</>
        </Button>
    ) : null}
    {!buttonData.next && !buttonData.back ? (
        <Button variant="primary" onClick={close}>
            <>{t('addLeague.close')}</>
        </Button>
    ) : null}
</ModalActions>

At some point, some of these buttons won't be displayed and will instead return null, but they still seem to become children for the ModalActions which results in empty divs being created, and the default spacing (large) applied to those empty divs, which results in the following

Steps to reproduce the bug

Create a Modal, set the ModalActions as follows:

<ModalActions>
    {null}
    {null}
    {null}
</ModalActions>

Then inspect the resulting html, it will give you

Expected behavior

It should not be adding empty divs when the child is null

Possible solutions

https://github.com/Doist/reactist/blob/main/src/new-components/modal/modal.tsx#L361-L363

This part could filter out any children that are null/undefined

Environment

• @doist/reactist version: v11.0.0
• react version: 17.0.2
• Browser: Chrome