Merge pull request #9174 from marmelab/fix-singlefieldlist-link-color

Fix SingleFieldList children don't use default link color

Author: adguernier

docs/ArrayField.md

@@ -53,7 +53,7 @@ const PostShow = () => (
         <SimpleShowLayout>
             <TextField source="title" />
             <ArrayField source="tags">
-                <SingleFieldList>
+                <SingleFieldList linkType={false}>
                     <ChipField source="name" size="small" />
                 </SingleFieldList>
             </ArrayField>
@@ -89,7 +89,7 @@ const PostShow = () => (
 ```jsx
 {/* using SingleFieldList as child */}
 <ArrayField source="tags">
-    <SingleFieldList>
+    <SingleFieldList linkType={false}>
         <ChipField source="name" />
     </SingleFieldList>
 </ArrayField>
@@ -210,7 +210,7 @@ By default, `<ArrayField>` displays the items in the order they are stored in th
 {% raw %}
 ```jsx
 <ArrayField source="tags" sort={{ field: 'name', order: 'ASC' }}>
-    <SingleFieldList>
+    <SingleFieldList linkType={false}>
         <ChipField source="name" />
     </SingleFieldList>
 </ArrayField>
@@ -244,7 +244,7 @@ const PostShow = () => (
         <SimpleShowLayout>
             <TextField source="title" />
             <ArrayField source="tags">
-                <SingleFieldList>
+                <SingleFieldList linkType={false}>
                     <SelectedChip />
                 </SingleFieldList>
             </ArrayField>

docs/SingleFieldList.md

@@ -56,10 +56,14 @@ const PostList = () => (
 
 ![SingleFieldList in Datagrid](./img/singlefieldlist-datagrid.png)
 
+## Props
+
 `<SingleFieldList>` accepts the following props:
 
-* [`linkType`](#linktype)
-* [`sx`](#sx-css-api)
+| Prop        | Required | Type                      | Default | Description                                   |
+| ----------- | -------- | ------------------------- | ------- | --------------------------------------------- |
+| `linkType`  | Optional | `'edit' | 'show' | false` | `edit`  | The target of the link on each item           |
+| `sx`        | Optional | `object`                  |         | The sx props of the Material UI Box component |
 
 ## `linkType`
 
@@ -78,14 +82,12 @@ The `<SingleFieldList>` items link to the edition page by default. You can set t
 </ReferenceArrayField>
 ```
 
-
 `linkType` accepts the following values:
 
 * `linkType="edit"`: links to the edit page. This is the default behavior.
 * `linkType="show"`: links to the show page.
 * `linkType={false}`: does not create any link.
 
-
 ## `sx`: CSS API
 
 The `<SingleFieldList>` component accepts the usual `className` prop. You can also override the styles of the inner components thanks to the `sx` property. This property accepts the following subclasses:

packages/ra-ui-materialui/src/field/ArrayField.stories.tsx

@@ -30,7 +30,7 @@ let books = [
 export const Basic = () => (
     <MemoryRouter>
         <ArrayField record={{ id: 123, books }} source="books">
-            <SingleFieldList>
+            <SingleFieldList linkType={false}>
                 <ChipField source="title" />
             </SingleFieldList>
         </ArrayField>
@@ -48,7 +48,7 @@ export const PerPage = () => (
                     source="books"
                     perPage={2}
                 >
-                    <SingleFieldList>
+                    <SingleFieldList linkType={false}>
                         <ChipField source="title" />
                     </SingleFieldList>
                     <Pagination />
@@ -65,7 +65,7 @@ export const Sort = () => (
             source="books"
             sort={{ field: 'title', order: 'ASC' }}
         >
-            <SingleFieldList>
+            <SingleFieldList linkType={false}>
                 <ChipField source="title" />
             </SingleFieldList>
         </ArrayField>
@@ -79,7 +79,7 @@ export const Filter = () => (
             source="books"
             filter={{ title: 'Anna Karenina' }}
         >
-            <SingleFieldList>
+            <SingleFieldList linkType={false}>
                 <ChipField source="title" />
             </SingleFieldList>
         </ArrayField>
@@ -122,7 +122,7 @@ const SelectedChip = () => {
 export const ListContext = () => (
     <MemoryRouter>
         <ArrayField record={{ id: 123, books }} source="books">
-            <SingleFieldList sx={{ p: 2 }}>
+            <SingleFieldList sx={{ p: 2 }} linkType={false}>
                 <SelectedChip />
             </SingleFieldList>
             <SortButton /> <FilterButton />
@@ -155,7 +155,7 @@ export const InShowLayout = () => (
                 <SimpleShowLayout>
                     <TextField source="title" />
                     <ArrayField source="tags">
-                        <SingleFieldList>
+                        <SingleFieldList linkType={false}>
                             <ChipField source="name" size="small" />
                         </SingleFieldList>
                     </ArrayField>

packages/ra-ui-materialui/src/field/ReferenceManyField.stories.tsx

@@ -11,6 +11,7 @@ import { createTheme } from '@mui/material/styles';
 import { TextField } from '../field';
 import { ReferenceManyField } from './ReferenceManyField';
 import { Datagrid } from '../list/datagrid/Datagrid';
+import { SingleFieldList } from '../list';
 import { Notification } from '../layout/Notification';
 import { FilterForm } from '../list';
 import { TextInput } from '../input';
@@ -78,6 +79,16 @@ export const Basic = () => (
     </Wrapper>
 );
 
+export const WithSingleFieldList = () => (
+    <Wrapper>
+        <ReferenceManyField reference="books" target="author_id">
+            <SingleFieldList sx={{ gap: 1 }}>
+                <TextField source="title" />
+            </SingleFieldList>
+        </ReferenceManyField>
+    </Wrapper>
+);
+
 export const WithFilter = () => (
     <Wrapper>
         <ReferenceManyField reference="books" target="author_id">

packages/ra-ui-materialui/src/list/SingleFieldList.tsx

@@ -35,8 +35,8 @@ import { Link } from '../Link';
  * Set the linkType prop to "show" to link to the <Show> page instead.
  *
  * @example
- * <ReferenceManyField reference="books" target="author_id" linkType="show">
- *     <SingleFieldList>
+ * <ReferenceManyField reference="books" target="author_id">
+ *     <SingleFieldList linkType="show">
  *         <ChipField source="title" />
  *     </SingleFieldList>
  * </ReferenceManyField>
@@ -45,8 +45,8 @@ import { Link } from '../Link';
  * `linkType` to false.
  *
  * @example
- * <ReferenceManyField reference="books" target="author_id" linkType={false}>
- *     <SingleFieldList>
+ * <ReferenceManyField reference="books" target="author_id">
+ *     <SingleFieldList linkType={false}>
  *         <ChipField source="title" />
  *     </SingleFieldList>
  * </ReferenceManyField>
@@ -159,14 +159,17 @@ export const SingleFieldListClasses = {
 const Root = styled('div', {
     name: PREFIX,
     overridesResolver: (props, styles) => styles.root,
-})({
+})(({ theme }) => ({
     display: 'flex',
     flexWrap: 'wrap',
 
     [`& .${SingleFieldListClasses.link}`]: {
         textDecoration: 'none',
+        '& > *': {
+            color: theme.palette.primary.main,
+        },
     },
-});
+}));
 
 // useful to prevent click bubbling in a datagrid with rowClick
 const stopPropagation = e => e.stopPropagation();