Add RecordField component

[fzaninotto]

Problem

<SimpleShowLayout> uses child inspection to decorate its children with labels.

This isn't robust, as you just need to wrap a child component to break this decoration:

export const BookShow = () => (
  <Show>
    <SimpleShowLayout>
      <TextField source="id" />
      <CanAccess resource="posts.title" action="read">
        <TextField source="title" />
      </CanAccess>
    </SimpleShowLayout>
  </Show>
);

Solution

Invert the responsibilities : it's no longer the layout's role to add a label, but the field's.

Provide a new component to render a field and its label, RecordField:

import { Show, RecordField } from 'react-admin';
import { Stack } from '@mui/material';

export const BookShow = () => (
  <Show>
    <Stack>
      <RecordField source="id" />
      <CanAccess resource="posts.title" action="read">
         <RecordField source="title" />
      </CanAccess>
    </Stack>
  </Show>
);

How To Test

Use the fields/RecordField story

Additional Checks

• The PR targets master for a bugfix or a documentation fix, or next for a feature
• The PR includes unit tests (if not possible, describe why)
• The PR includes one or several stories (if not possible, describe why)
• The documentation is up to date

[slax57]

other than that LGTM

[slax57]

This comes as a surprise to me. Why require a render prop to support a React element? To me, you should be able to use a React element in all cases. You can simply render empty (when it's a React element) instead of the provided children/field/render when the value is empty.

[fzaninotto]

Except TextField and other fields don't use the empty, they use emptyText, and it can only be a string. This may change in the future, but until then we're blocked with allowing React Element in empty only when using the render prop.

[slax57]

I think it's no big deal for now, so this is non-blocking. But just for the record, my idea was that RecordField would be responsible for rendering the empty element, not TextField, nor any other component passed as children or field.