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