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 is not true. You can have source and field for instance.

Did you mean the following?

Suggested change

	The `source`, `field`, `children`, and `render` props are mutually exclusive.
	The `field`, `children`, and `render` props are mutually exclusive.

[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.

[slax57]

FMI, why are you using em units with the default variant, but rem units for the inline variant?

[slax57]

Suggested change

	interface ComponentNameToClassKey {
	RaRecordField: 'root' | 'content' | 'button' | 'icon';
	}
	interface ComponentNameToClassKey {
	RaRecordField: 'root' | 'label' | 'value' | 'inline';
	}