From 562c9e203f74c4e8acf3879ffb3533b05bd8344a Mon Sep 17 00:00:00 2001
From: Julien Vonthron <julien.vonthron@gmail.com>
Date: Fri, 30 Aug 2024 11:24:58 +0200
Subject: [PATCH 1/2] fix: update SimpleFormIterator documentation for add and
 remove buttons

---
 docs/SimpleFormIterator.md | 59 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 57 insertions(+), 2 deletions(-)

diff --git a/docs/SimpleFormIterator.md b/docs/SimpleFormIterator.md
index 903f9dc410d..c0b98c869c6 100644
--- a/docs/SimpleFormIterator.md
+++ b/docs/SimpleFormIterator.md
@@ -93,13 +93,36 @@ const OrderEdit = () => (
 This prop lets you pass a custom element to replace the default Add button. 
 
 ```jsx
-<SimpleFormIterator addButton={<Button>Add</Button>}>
+<SimpleFormIterator addButton={<MyAddButton label={"Add a line"} />}>
     <TextInput source="name" />
     <NumberInput source="price" />
     <NumberInput source="quantity" />
 </SimpleFormIterator>
 ```
 
+You need to provide an element that triggers the `add` function from `useSimpleFormIterator` when clicked. Here is an example:
+
+```jsx
+import {ButtonProps, useSimpleFormIterator, useTranslate} from "react-admin";
+import React from "react";
+import Button from "@mui/material/Button";
+
+export const MyAddButton = (props: ButtonProps) => {
+    const { add } = useSimpleFormIterator();
+    const translate = useTranslate();
+
+    return (
+        <Button
+            onClick={() => add()}
+            variant={'outlined'}
+            {...props}
+        >
+            {translate(props.label ?? 'ra.action.add')}
+        </Button>
+    );
+};
+```
+
 ## `children`
 
 A list of Input elements, that will be rendered on each row. 
@@ -294,13 +317,45 @@ Without this prop, `<SimpleFormIterator>` will render one input per line.
 This prop lets you pass a custom element to replace the default Remove button. 
 
 ```jsx
-<SimpleFormIterator removeButton={<Button>Remove</Button>}>
+<SimpleFormIterator removeButton={<MyRemoveButton label="Remove this line" />}>
     <TextInput source="name" />
     <NumberInput source="price" />
     <NumberInput source="quantity" />
 </SimpleFormIterator>
 ```
 
+You need to provide an element that triggers the `remove` function from `useSimpleFormIteratorItem` when clicked. Here is an example:
+
+```jsx
+import * as React from 'react';
+import clsx from 'clsx';
+import {ButtonProps, useSimpleFormIterator, useSimpleFormIteratorItem, useTranslate} from "react-admin";
+import Button from "@mui/material/Button";
+
+export const MyRemoveButton = (props: Omit<ButtonProps, 'onClick'>) => {
+    const { remove, index } = useSimpleFormIteratorItem();
+    const { source } = useSimpleFormIterator();
+    const { className, ...rest } = props;
+    const translate = useTranslate();
+
+    return (
+        <Button
+            label="ra.action.remove"
+            size="small"
+            onClick={() => remove()}
+            color="warning"
+            variant={'outlined'}
+            className={clsx(
+                `button-remove button-remove-${source}-${index}`,
+                className
+            )}
+            {...rest}
+        >
+            {translate(props.label ?? 'ra.action.remove')}
+        </Button>
+    );
+};
+```
 ## `reOrderButtons`
 
 This prop lets you pass a custom element to replace the default Up and Down buttons. This custom element must use the `useSimpleFormIteratorItem` hook to access the current row index and reorder callback.

From 66ae41ac15a27703b7473ef96a96500f794a134c Mon Sep 17 00:00:00 2001
From: Francois Zaninotto <fzaninotto@gmail.com>
Date: Fri, 30 Aug 2024 17:38:25 +0200
Subject: [PATCH 2/2] Fix typos

---
 docs/SimpleFormIterator.md | 24 ++++++------------------
 1 file changed, 6 insertions(+), 18 deletions(-)

diff --git a/docs/SimpleFormIterator.md b/docs/SimpleFormIterator.md
index c0b98c869c6..ad382ff3863 100644
--- a/docs/SimpleFormIterator.md
+++ b/docs/SimpleFormIterator.md
@@ -103,7 +103,7 @@ This prop lets you pass a custom element to replace the default Add button.
 You need to provide an element that triggers the `add` function from `useSimpleFormIterator` when clicked. Here is an example:
 
 ```jsx
-import {ButtonProps, useSimpleFormIterator, useTranslate} from "react-admin";
+import { ButtonProps, useSimpleFormIterator, useTranslate } from "react-admin";
 import React from "react";
 import Button from "@mui/material/Button";
 
@@ -112,11 +112,7 @@ export const MyAddButton = (props: ButtonProps) => {
     const translate = useTranslate();
 
     return (
-        <Button
-            onClick={() => add()}
-            variant={'outlined'}
-            {...props}
-        >
+        <Button onClick={() => add()} {...props}>
             {translate(props.label ?? 'ra.action.add')}
         </Button>
     );
@@ -329,33 +325,25 @@ You need to provide an element that triggers the `remove` function from `useSimp
 ```jsx
 import * as React from 'react';
 import clsx from 'clsx';
-import {ButtonProps, useSimpleFormIterator, useSimpleFormIteratorItem, useTranslate} from "react-admin";
+import { ButtonProps, useSimpleFormIteratorItem, useTranslate } from "react-admin";
 import Button from "@mui/material/Button";
 
 export const MyRemoveButton = (props: Omit<ButtonProps, 'onClick'>) => {
-    const { remove, index } = useSimpleFormIteratorItem();
-    const { source } = useSimpleFormIterator();
-    const { className, ...rest } = props;
+    const { remove } = useSimpleFormIteratorItem();
     const translate = useTranslate();
 
     return (
         <Button
-            label="ra.action.remove"
-            size="small"
             onClick={() => remove()}
             color="warning"
-            variant={'outlined'}
-            className={clsx(
-                `button-remove button-remove-${source}-${index}`,
-                className
-            )}
-            {...rest}
+            {...props}
         >
             {translate(props.label ?? 'ra.action.remove')}
         </Button>
     );
 };
 ```
+
 ## `reOrderButtons`
 
 This prop lets you pass a custom element to replace the default Up and Down buttons. This custom element must use the `useSimpleFormIteratorItem` hook to access the current row index and reorder callback.