Add <SingleFieldList empty gap direction> props, and allow it to be used without children

[fzaninotto]

Problems

<SingleFieldList> has many issues:

• It still clones its children (we don't do this since 3.x)
• It forces users to pass children, while most of the time it's a <ChipField>
• It renders kind of a Stack, except it's not a Stack
• It doesn't support the empty prop

Solution

• <SingleFieldList> now renders a real <Stack>, and supports all its props
• <SingleFieldList> used without children renders a <ChipField> with the recordRepresentation
• <SingleFieldList> supports an empty prop

const PostList = () => (
    <List>
        <Datagrid>
            <TextField source="id" />
            <TextField source="title" />
            <DateField source="published_at" />
            <BooleanField source="commentable" />
            <NumberField source="views" />
            <ReferenceArrayField label="Tags" reference="tags" source="tags">
                <SingleFieldList />
            </ReferenceArrayField>
        </Datagrid>
    </List>
)

Closes #7634

Minor BC Break

If you used <SingleFieldList> with a <ChipField> child and enabled the links, the chips background will no longer change on hover. To reenable this visual effect, add the clickable prop to the <ChipField>:

const PostList = () => (
    <List>
        <Datagrid>
            <TextField source="id" />
            <TextField source="title" />
            <DateField source="published_at" />
            <BooleanField source="commentable" />
            <NumberField source="views" />
            <ReferenceArrayField label="Tags" reference="tags" source="tags">
                <SingleFieldList>
-                  <ChipField source="name" />
+                  <ChipField source="name" clickable />
               </SingleFieldList>
            </ReferenceArrayField>
        </Datagrid>
    </List>
)

Alternately, if the <ChipField source> is the same as the resource's recordRepresentation, you can omit the child altogether.

const PostList = () => (
    <List>
        <Datagrid>
            <TextField source="id" />
            <TextField source="title" />
            <DateField source="published_at" />
            <BooleanField source="commentable" />
            <NumberField source="views" />
            <ReferenceArrayField label="Tags" reference="tags" source="tags">
-               <SingleFieldList>
-                  <ChipField source="name" />
-              </SingleFieldList>
+              <SingleFieldList />
            </ReferenceArrayField>
        </Datagrid>
    </List>
)

[fzaninotto]

This is technically a BC break, as people may use SingleFieldList with children expecting record as prop. However, it's not supposed to be the case since 4.0.

[fzaninotto]

We no longer need this: the default child uses the clickable prop only when necessary. And when developers pass a custom child, they'll have to set the clickable themselves if they want. In that case, this PR is a slight BC break.

[slax57]

Unless I'm mistaken, until now developers always had to pass a child. So it's a BC for everyone using <SingleFieldList> right now unless they have specifically disabled the link.

I agree it's a very minor BC, but it will still impact almost everyone using <SingleFieldList> right now. Maybe we should insist on it more in the docs and/or the changelog?

[fzaninotto]

You're right. I updated the PR description, and we should include the "Minor BC break" section in the release changelog.

[fzaninotto]

component is now passed down to <Stack>, which knows how to handle it.

[slax57]

Other than that, it works great! 🎉
And the stories are very helpful.

[slax57]

Unless I'm mistaken, until now developers always had to pass a child. So it's a BC for everyone using <SingleFieldList> right now unless they have specifically disabled the link.

I agree it's a very minor BC, but it will still impact almost everyone using <SingleFieldList> right now. Maybe we should insist on it more in the docs and/or the changelog?