refactor and update documentation

Author: Moritz Gramlich

docs/FileInput.md

@@ -62,6 +62,7 @@ Files are accepted or rejected based on the `accept`, `multiple`, `minSize` and
 | `multiple`             | Optional | `boolean`           | `false`    | Whether the inputs can accept multiple files.                       |
 | `options`              | Optional | `Object`            | `{}`       | Additional options passed to react-dropzone's `useDropzone()` hook. |
 | `placeholder`          | Optional | `ReactNode`         | -          | Invite displayed in the drop zone                                   |
+| `removeIcon`           | Optional | `ReactNode`         | -          | The clickable icon for removing images                              |
 | `validateFile Removal` | Optional | `function`          | -          | Allows to cancel the removal of files                               |
 
 `<FileInput>` also accepts the [common input props](./Inputs.md#common-input-props).
@@ -152,6 +153,10 @@ If that's not enough, you can pass a `placeholder` prop to overwrite it. The val
 </FileInput>
 ```
 
+## `removeIcon`
+
+Optionally overwrite the [default icon](https://mui.com/material-ui/material-icons/?query=removeCir&selected=RemoveCircle) for removing files.
+
 ## `sx`: CSS API
 
 The `<FileInput>` component accepts the usual `className` prop. You can also override many styles of the inner components thanks to the `sx` property (as most MUI components, see their [documentation about it](https://mui.com/customization/how-to-customize/#overriding-nested-component-styles)). This property accepts the following subclasses:

docs/ImageInput.md

@@ -53,13 +53,14 @@ Files are accepted or rejected based on the `accept`, `multiple`, `minSize` and
 
 | Prop                   | Required | Type                | Default    | Description                                                         |
 |------------------------|----------|---------------------|------------|---------------------------------------------------------------------|
-| `accept`               | Optional | `string | string[]` | -          | Accepted file type(s). When empty, all file types are accepted.     |
+| `accept`               | Optional | `string | string[]` | -                                                                   | Accepted file type(s). When empty, all file types are accepted.     |
 | `children`             | Optional | `ReactNode`         | -          | Element used to preview file(s)                                     |
 | `minSize`              | Optional | `number`            | 0          | Minimum file size (in bytes), e.g. 5000 for 5KB                     |
 | `maxSize`              | Optional | `number`            | `Infinity` | Maximum file size (in bytes), e.g. 5000000 for 5MB                  |
 | `multiple`             | Optional | `boolean`           | `false`    | Whether the inputs can accept multiple files.                       |
 | `options`              | Optional | `Object`            | `{}`       | Additional options passed to react-dropzone's `useDropzone()` hook. |
 | `placeholder`          | Optional | `ReactNode`         | -          | Invite displayed in the drop zone                                   |
+| `removeIcon`           | Optional | `ReactNode`         | -          | The clickable icon for removing images                              |
 | `validateFile Removal` | Optional | `function`          | -          | Allows to cancel the removal of files                               |
 
 `<ImageInput>` also accepts the [common input props](./Inputs.md#common-input-props).
@@ -149,6 +150,10 @@ If that's not enough, you can pass a `placeholder` prop to overwrite it. The val
 </ImageInput>
 ```
 
+## `removeIcon`
+
+Optionally overwrite the [default icon](https://mui.com/material-ui/material-icons/?query=removeCir&selected=RemoveCircle) for removing images.
+
 ## `sx`: CSS API
 
 The `<ImageInput>` component accepts the usual `className` prop. You can also override many styles of the inner components thanks to the `sx` property (as most MUI components, see their [documentation about it](https://mui.com/customization/how-to-customize/#overriding-nested-component-styles)). This property accepts the following subclasses:

packages/ra-ui-materialui/src/input/FileInputPreview.tsx

@@ -8,7 +8,14 @@ import { useTranslate } from 'ra-core';
 import { SvgIconProps } from '@mui/material';
 
 export const FileInputPreview = (props: FileInputPreviewProps) => {
-    const { children, className, onRemove, file, removeIcon, ...rest } = props;
+    const {
+        children,
+        className,
+        onRemove,
+        file,
+        removeIcon = RemoveCircle,
+        ...rest
+    } = props;
 
     const translate = useTranslate();
 
@@ -31,11 +38,7 @@ export const FileInputPreview = (props: FileInputPreviewProps) => {
                 title={translate('ra.action.delete')}
                 size="small"
             >
-                {removeIcon ?? (
-                    <RemoveCircle
-                        className={FileInputPreviewClasses.removeIcon}
-                    />
-                )}
+                {removeIcon}
             </IconButton>
             {children}
         </Root>