Merge pull request #6446 from WiXSL/docs-fixes

Fix typos, anchors and code samples

CHANGELOG.md

@@ -2260,7 +2260,7 @@ For highlights about this version, read [the 2.2 release announcement post](http
 ## v2.1.1
 
 * Fix FormInput not passing `resource` to `Labeled` inputs ([djhi](https://github.com/djhi))
-* Add documentaton on how to prefill a `<Create>` form based on another record ([fzaninotto](https://github.com/fzaninotto))
+* Add documentation on how to prefill a `<Create>` form based on another record ([fzaninotto](https://github.com/fzaninotto))
 * Add polish translations ([tskorupka](https://github.com/tskorupka))
 * Add documentation on tabs routing ([djhi](https://github.com/djhi))
 

docs/Actions.md

@@ -644,9 +644,9 @@ const NotifyButton = () => {
 The callback takes 5 arguments:
  - the message to display
  - the level of the notification (`info`, `success` or `warning` - the default is `info`)
- - an `options` object to pass to the `translate` function (because notificatoin messages are translated if your admin has an `i18nProvider`). It is useful for inserting variables into the translation.
+ - an `options` object to pass to the `translate` function (because notification messages are translated if your admin has an `i18nProvider`). It is useful for inserting variables into the translation.
  - an `undoable` boolean. Set it to `true` if the notification should contain an "undo" button
- - a `duration` number. Set it to `0` if the notification should not be dismissable.
+ - a `duration` number. Set it to `0` if the notification should not be dismissible.
 
 Here are more examples of `useNotify` calls: 
 

docs/List.md

@@ -458,7 +458,7 @@ export default CustomResetViewsButton;
 
 **Tip**: `<Confirm>` leverages material-ui's `<Dialog>` component to implement a confirmation popup. Feel free to use it in your admins!
 
-**Tip**: `<Confirm>` text props such as `title` and `content` are translatable. You can pass translation keys in these props. Note: `content` is only translateable when value is `string`, otherwise it renders the content as a `ReactNode`.
+**Tip**: `<Confirm>` text props such as `title` and `content` are translatable. You can pass translation keys in these props. Note: `content` is only translatable when value is `string`, otherwise it renders the content as a `ReactNode`.
 
 **Tip**: You can customize the text of the two `<Confirm>` component buttons using the `cancel` and `confirm` props which accept translation keys. You can customize the icons by setting the `ConfirmIcon` and `CancelIcon` props, which accept a SvgIcon type.
 
@@ -1309,7 +1309,7 @@ For instance, by default, the filter button/form combo doesn't provide a submit
 
 In that case, the solution is to process the filter when users click on a submit button, rather than when they type values in form inputs. React-admin doesn't provide any component for that, but it's a good opportunity to illustrate the internals of the filter functionality. We'll actually provide an alternative implementation to the Filter button/form combo.
 
-To create a custom filter UI, we'll have to override the default List Actions component, which will contain both a Filter Button and a Filetr Form, interacting with the List filters via the ListContext.
+To create a custom filter UI, we'll have to override the default List Actions component, which will contain both a Filter Button and a Filter Form, interacting with the List filters via the ListContext.
 
 #### Filter Callbacks
 
@@ -2307,7 +2307,8 @@ export default withStyles(styles)(PostList);
 
 It's possible that a Datagrid will have no records to display. If the Datagrid's parent component handles the loading state, the Datagrid will return `null` and render nothing.
 Passing through a component to the `empty` prop will cause the Datagrid to render the `empty` component instead of `null`.
-### CSS API
+
+### Datagrid CSS API
 
 The `Datagrid` component accepts the usual `className` prop but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://material-ui.com/customization/components/#overriding-styles-with-classes)). This property accepts the following keys:
 
@@ -2825,7 +2826,8 @@ const getUserFilters = (permissions) => ([
     <TextInput label="user.list.search" source="q" alwaysOn />,
     <TextInput source="name" />,
     permissions === 'admin' ? <TextInput source="role" /> : null,
-].filter(filter => filter !== null)));
+    ].filter(filter => filter !== null)
+);
 
 export const UserList = ({ permissions, ...props }) => {
     const isSmall = useMediaQuery(theme => theme.breakpoints.down('sm'));
@@ -2864,14 +2866,15 @@ You can use the `<Datagrid>` component with [custom queries](./Actions.md#useque
 
 {% raw %}
 ```jsx
-import keyBy from 'lodash/keyBy'
+import keyBy from 'lodash/keyBy';
+import { Fragment } from 'react';
 import {
     useQuery,
     Datagrid,
     TextField,
     Pagination,
     Loading,
-} from 'react-admin'
+} from 'react-admin';
 
 const CustomList = () => {
     const [page, setPage] = useState(1);
@@ -2894,22 +2897,24 @@ const CustomList = () => {
         return <p>ERROR: {error}</p>
     }
     return (
-        <Datagrid 
-            data={keyBy(data, 'id')}
-            ids={data.map(({ id }) => id)}
-            currentSort={sort}
-            setSort={(field, order) => setSort({ field, order })}
-        >
-            <TextField source="id" />
-            <TextField source="title" />
-        </Datagrid>
-        <Pagination
-            page={page}
-            setPage={setPage}
-            perPage={perPage}
-            setPerPage={setPerPage}
-            total={total}
-        />
+        <Fragment>
+            <Datagrid 
+                data={keyBy(data, 'id')}
+                ids={data.map(({ id }) => id)}
+                currentSort={sort}
+                setSort={(field, order) => setSort({ field, order })}
+            >
+                <TextField source="id" />
+                <TextField source="title" />
+            </Datagrid>
+            <Pagination
+                page={page}
+                setPage={setPage}
+                perPage={perPage}
+                setPerPage={setPerPage}
+                total={total}
+            />
+        </Fragment>
     );
 }
 ```

docs/Reference.md

@@ -53,11 +53,12 @@ title: "Reference"
 * [`<EditButton>`](./Buttons.md#editbutton)
 * [`<EditDialog>`](https://marmelab.com/ra-enterprise/modules/ra-form-layout#createdialog--editdialog)<img class="icon" src="./img/premium.svg" />
 * [`<EmailField>`](./Fields.md#emailfield)
+* [`<Empty>`](./List.md#empty-empty-page-component)  
 * [`<FileField>`](./Fields.md#filefield)
 * [`<FileInput>`](./Inputs.md#fileinput)
 * [`<Filter>`](./List.md#filters-filter-inputs)
 * [`<FilterButton>`](./Buttons.md#filterbutton)
-* [`<FilterForm>`](./List.md#custom-form-component)
+* [`<FilterForm>`](./List.md#custom-filter-form)
 * [`<FilterList>`](./List.md#the-filterlist-sidebar)
 * [`<FilterListItem>`](./List.md#the-filterlist-sidebar)
 * [`<FilterLiveSearch>`](./List.md#live-search)

docs/Theming.md

@@ -99,7 +99,7 @@ This example results in:
 
 ![Visitor List with customized CSS classes](./img/list_with_customized_css.png)
 
-Take a look at a component documentation and source code to know which classes are available for styling. For instance, you can have a look at the [Datagrid CSS documentation](./List.md##css-api-1).
+Take a look at a component documentation and source code to know which classes are available for styling. For instance, you can have a look at the [Datagrid CSS documentation](./List.md#datagrid-css-api).
 
 If you need more control over the HTML code, you can also create your own [Field](./Fields.md#writing-your-own-field-component) and [Input](./Inputs.md#writing-your-own-input-component) components.
 

packages/ra-core/src/controller/useList.ts

@@ -49,7 +49,7 @@ import { ListControllerProps } from '.';
  * @param {Identifier[]} props.ids An array of the record identifiers
  * @param {Boolean} props.loaded: A boolean indicating whether the data has been loaded at least once
  * @param {Boolean} props.loading: A boolean indicating whether the data is being loaded
- * @param {Error | String} props.error: Optional. The error if any occured while loading the data
+ * @param {Error | String} props.error: Optional. The error if any occurred while loading the data
  * @param {Object} props.filter: Optional. An object containing the filters applied on the data
  * @param {Number} props.page: Optional. The initial page index
  * @param {Number} props.perPage: Optional. The initial page size

packages/ra-core/src/form/useSuggestions.ts

@@ -229,7 +229,7 @@ export const getSuggestionsFactory = ({
     if (allowCreate) {
         const filterIsSelectedItem =
             // If the selectedItem is an array (for example AutocompleteArrayInput)
-            // we should't try to match
+            // we shouldn't try to match
             !!selectedItem && !Array.isArray(selectedItem)
                 ? matchSuggestion(filter, selectedItem, true)
                 : false;

packages/ra-data-simple-rest/README.md

@@ -38,7 +38,7 @@ The API response when called by `getList` should look like this:
 ]
 ```
 
-An `id` field is requied. You can also set [custom identifier or primary key for your resources](https://marmelab.com/react-admin/FAQ.html#can-i-have-custom-identifiersprimary-keys-for-my-resources)
+An `id` field is required. You can also set [custom identifier or primary key for your resources](https://marmelab.com/react-admin/FAQ.html#can-i-have-custom-identifiersprimary-keys-for-my-resources)
 
 **Note**: The simple REST data provider expects the API to include a `Content-Range` header in the response to `getList` calls. The value must be the total number of resources in the collection. This allows react-admin to know how many pages of resources there are in total, and build the pagination controls.
 

packages/react-admin/README.md

@@ -212,7 +212,7 @@ Both of these examples work without server - the API is simulated on the client-
 
 ### Testing Your Changes In Your App
 
-Using `yarn link`, you can have your project use a local checkout of the react-admn package instead of npm. This allows you to test react-admin changes in your app: 
+Using `yarn link`, you can have your project use a local checkout of the react-admin package instead of npm. This allows you to test react-admin changes in your app: 
 
 ```sh
 # Register your local react-admin as a linkable package