Merge pull request #3963 from WiXSL/patch-docs-style-next

[v3] Patch docs style next

CHANGELOG.md

@@ -2,8 +2,8 @@
 
 ## v3.0.0-beta.6
 
-* Fix `<AutocompleteInput allowEmpty` position ([3953](https://github.com/marmelab/react-admin/pull/3953)) ([fzaninotto](https://github.com/fzaninotto))
-* Fix `>AutocompleteInput>` suggestion list placement ([3951](https://github.com/marmelab/react-admin/pull/3951)) ([fzaninotto](https://github.com/fzaninotto))
+* Fix `<AutocompleteInput>` `allowEmpty` position ([3953](https://github.com/marmelab/react-admin/pull/3953)) ([fzaninotto](https://github.com/fzaninotto))
+* Fix `<AutocompleteInput>` suggestion list placement ([3951](https://github.com/marmelab/react-admin/pull/3951)) ([fzaninotto](https://github.com/fzaninotto))
 * Fix delete wrong item in `<AutocompleteArrayInput>` ([3950](https://github.com/marmelab/react-admin/pull/3950)) ([fzaninotto](https://github.com/fzaninotto))
 * Fix click in `<AutocompleteArrayInput>` does not show options ([3949](https://github.com/marmelab/react-admin/pull/3949)) ([fzaninotto](https://github.com/fzaninotto))
 * Fix `<EnhancedFilterForm>` does not allow style override via classes prop ([3948](https://github.com/marmelab/react-admin/pull/3948)) ([MiMo42](https://github.com/MiMo42))
@@ -91,7 +91,7 @@
 * Fix react-admin dependency in secondary packages ([3791](https://github.com/marmelab/react-admin/pull/3791)) ([manelpb](https://github.com/manelpb))
 * Fix trailing slash in url breaks routing ([3788](https://github.com/marmelab/react-admin/pull/3788)) ([djhi](https://github.com/djhi))
 * Fix jsDoc in `refresh` side effect ([3780](https://github.com/marmelab/react-admin/pull/3780)) ([gillesdemey](https://github.com/gillesdemey))
-* Fix autocomplete of Password field on `LoginForm` ([3666](https://github.com/marmelab/react-admin/pull/3666)) ([UltimateForm](https://github.com/UltimateForm))
+* Fix autocomplete of `Password` field on `LoginForm` ([3666](https://github.com/marmelab/react-admin/pull/3666)) ([UltimateForm](https://github.com/UltimateForm))
 
 ## v2.9.7
 

docs/Actions.md

@@ -173,10 +173,10 @@ The return value of `useQuery` is an array with the following items:
 
 This object updates according to the request state:
 
-- mount: { loading: false, loaded: false }
-- mutate called: { loading: true, loaded: false }
-- success: { data: [data from response], total: [total from response], loading: false, loaded: true }
-- error: { error: [error from response], loading: false, loaded: true }
+- mount: `{ loading: false, loaded: false }`
+- mutate called: `{ loading: true, loaded: false }`
+- success: `{ data: [data from response], total: [total from response], loading: false, loaded: true }`
+- error: `{ error: [error from response], loading: false, loaded: true }`
 
 You can destructure the return value of the `useMutation` hook as `[mutate,  { data, total, error, loading, loaded }]`.
 

docs/CustomApp.md

@@ -92,7 +92,7 @@ import { createHashHistory } from 'history';
 import { Admin, Resource } from 'react-admin';
 import restProvider from 'ra-data-simple-rest';
 import defaultMessages from 'ra-language-english';
-import polyglotI18nProvider from 'ra_i18n_polyglot';
+import polyglotI18nProvider from 'ra-i18n-polyglot';
 
 import createAdminStore from './createAdminStore';
 import messages from './i18n';
@@ -158,7 +158,7 @@ import { createHashHistory } from 'history';
 +import { AuthContext, DataProviderContext, TranslationProvider, Resource } from 'react-admin';
 import restProvider from 'ra-data-simple-rest';
 import defaultMessages from 'ra-language-english';
-import polyglotI18nProvider from 'ra_i18n_polyglot';
+import polyglotI18nProvider from 'ra-i18n-polyglot';
 +import { ThemeProvider } from '@material-ui/styles';
 +import AppBar from '@material-ui/core/AppBar';
 +import Toolbar from '@material-ui/core/Toolbar';

docs/DataProviders.md

@@ -184,14 +184,14 @@ Now all the requests to the REST API will contain the `X-Custom-Header: foobar`
 
 **Tip**: The most common usage of custom headers is for authentication. `fetchJson` has built-on support for the `Authorization` token header:
 
-```jsx
+```js
 const fetchJson = (url, options = {}) => {
     options.user = {
         authenticated: true,
         token: 'SRTRDFVESGNJYTUKTYTHRG'
-    }
+    };
     return fetchUtils.fetchJson(url, options);
-}
+};
 const dataProvider = simpleRestProvider('http://path.to.my.api/', fetchJson);
 ```
 
@@ -203,7 +203,7 @@ As Data Providers are just objects, you can extend them with custom logic for a
 
 For instance, the following Data Provider extends the `ra-data-simple-rest` provider, and adds image upload support for the `update('posts')` call (react-admin offers an `<ImageInput />` component that allows image upload).
 
-```jsx
+```js
 import dataProvider from 'ra-data-simple-rest';
 
 const myDataProvider = {
@@ -295,7 +295,7 @@ Method             | Usage                                           | Parameter
 
 Here are several examples of how react-admin can call the Data Provider:
 
-```jsx
+```js
 dataProvider.getList('posts', {
     pagination: { page: 1, perPage: 5 },
     sort: { field: 'title', order: 'ASC' },
@@ -347,7 +347,7 @@ A `{Record}` is an object literal with at least an `id` property, e.g. `{ id: 12
 
 Building up on the previous example, here are example responses matching the format expected by react-admin:
 
-```jsx
+```js
 dataProvider.getList('posts', {
     pagination: { page: 1, perPage: 5 },
     sort: { field: 'title', order: 'ASC' },

docs/Fields.md

@@ -195,7 +195,7 @@ import { DateField } from 'react-admin';
 <DateField source="publication_date" />
 ```
 
-This component accepts a `showTime` attribute (false by default) to force the display of time in addition to date. It uses `Intl.DateTimeFormat()` if available, passing the `locales` and `options` props as arguments. If Intl is not available, it ignores the `locales` and `options` props.
+This component accepts a `showTime` attribute (`false` by default) to force the display of time in addition to date. It uses `Intl.DateTimeFormat()` if available, passing the `locales` and `options` props as arguments. If Intl is not available, it ignores the `locales` and `options` props.
 
 {% raw %}
 ```jsx
@@ -454,7 +454,7 @@ However, in some cases (e.g. inside a `<ReferenceField>`), you may not want the
 <SelectField source="gender" choices={choices} translateChoice={false}/>
 ```
 
-**Tip**: <ReferenceField> sets `translateChoice` to false by default.
+**Tip**: `<ReferenceField>` sets `translateChoice` to `false` by default.
 
 ## `<ReferenceField>`
 
@@ -935,11 +935,11 @@ export const UserList = (props) => (
 
 ## Adding Label To Custom Field Components In The Show View
 
-React-admin lets you use the same Field components in the List view and in the Show view. But if you use the `<FullNameField>` custom field component defined earlier in a Show view, something is missing: the Field label. Why do other fields have a label and not this custom Field? And how can you create a Field component that has a label in the Show view, but not in the List view?
+React-admin lets you use the same `Field` components in the `List` view and in the `Show` view. But if you use the `<FullNameField>` custom field component defined earlier in a `Show` view, something is missing: the `Field` label. Why do other fields have a label and not this custom `Field`? And how can you create a `Field` component that has a label in the `Show` view, but not in the `List` view?
 
-React-admin uses a trick: the Show view layouts (`<SimpleShowLayout>` and `<TabbedShowLayout>`) inspect their Field children, and whenever one has the `addLabel` prop set to `true`, the layout adds a label.
+React-admin uses a trick: the `Show` view layouts (`<SimpleShowLayout>` and `<TabbedShowLayout>`) inspect their `Field` children, and whenever one has the `addLabel` prop set to `true`, the layout adds a label.
 
-That means that the only thing you need to add to a custom component to make it usable in a Show view is a `addLabel: true` default prop.
+That means that the only thing you need to add to a custom component to make it usable in a `Show` view is a `addLabel: true` default prop.
 
 ```js
 FullNameField.defaultProps = {
@@ -965,9 +965,9 @@ const ConditionalEmailField = ({ record, ...rest }) =>
 export default ConditionalEmailField;
 ```
 
-**Tip**: Always check that the `record` is defined before inspecting its properties, as react-admin displays the Show view *before* fetching the record from the data provider. So the first time it renders the show view for a resource, the `record` is `undefined`.
+**Tip**: Always check that the `record` is defined before inspecting its properties, as react-admin displays the `Show` view *before* fetching the record from the data provider. So the first time it renders the show view for a resource, the `record` is `undefined`.
 
-This `ConditionalEmailField` is properly hidden when `hasEmail` is false. But when `hasEmail` is true, the Show layout renders it... without label. And if you add a `addLabel` default prop, the Show layout will render the label regardless of the `hasEmail` value...
+This `ConditionalEmailField` is properly hidden when `hasEmail` is `false`. But when `hasEmail` is `true`, the Show layout renders it... without label. And if you add a `addLabel` default prop, the `Show` layout will render the label regardless of the `hasEmail` value...
 
 One solution is to add the label manually in the custom component:
 

docs/Inputs.md

@@ -159,7 +159,7 @@ const choices = [
 ```
 
 However, in some cases (e.g. inside a `<ReferenceInput>`), you may not want the choice to be translated. 
-In that case, set the `translateChoice` prop to false.
+In that case, set the `translateChoice` prop to `false`.
 
 ```jsx
 <AutocompleteInput source="gender" choices={choices} translateChoice={false}/>
@@ -265,7 +265,7 @@ const choices = [
 ];
 ```
 
-However, in some cases (e.g. inside a `<ReferenceInput>`), you may not want the choice to be translated. In that case, set the `translateChoice` prop to false.
+However, in some cases (e.g. inside a `<ReferenceInput>`), you may not want the choice to be translated. In that case, set the `translateChoice` prop to `false`.
 
 ```jsx
 <AutocompleteArrayInput source="gender" choices={choices} translateChoice={false}/>
@@ -315,15 +315,15 @@ If you need to override the props of the suggestions container (a `Popper` eleme
 | Prop | Required | Type | Default | Description |
 | ---|---|---|---|--- |
 | `choices` | Required | `Object[]` | - | List of items to autosuggest |
-| `fullWith` | Optional | Boolean | If `true`, the input will take all the form width
+| `fullWith` | Optional | `Boolean` | If `true`, the input will take all the form width
 | `matchSuggestion` | Optional | `Function` | - | Required if `optionText` is a React element. Function returning a boolean indicating whether a choice matches the filter. `(filter, choice) => boolean`
 | `optionValue` | Optional | `string` | `id` | Fieldname of record containing the value to use as input value  |
 | `optionText` | Optional | <code>string &#124; Function</code> | `name` | Fieldname of record to display in the suggestion item or function which accepts the current record as argument (`(record)=> {string}`) |
 | `resource` | Required | `string` | - | The resource working on. This field is passed down by wrapped components like `Create` and `Edit`.   |
 | `setFilter` | Optional | `Function` | `null` | A callback to inform the `searchText` has changed and new `choices` can be retrieved based on this `searchText`. Signature `searchText => void`. This function is automatically setup when using `ReferenceInput`.  |
 | `source` | Required |  `string` | - | Name of field to edit, its type should match the type retrieved from `optionValue`  |
-| `suggestionLimit` | Optional | Number | `null` | Limits the numbers of suggestions that are shown in the dropdown list |
-| `shouldRenderSuggestions` | Optional | Function | `() => true` | A function that returns a `boolean` to determine whether or not suggestions are rendered. Use this when working with large collections of data to improve performance and user experience. This function is passed into the underlying react-autosuggest component. Ex.`(value) => value.trim() > 2` |
+| `suggestionLimit` | Optional | `Number` | `null` | Limits the numbers of suggestions that are shown in the dropdown list |
+| `shouldRenderSuggestions` | Optional | `Function` | `() => true` | A function that returns a `boolean` to determine whether or not suggestions are rendered. Use this when working with large collections of data to improve performance and user experience. This function is passed into the underlying react-autosuggest component. Ex.`(value) => value.trim() > 2` |
 
 ## `<BooleanInput>` and `<NullableBooleanInput>`
 
@@ -429,7 +429,7 @@ const choices = [
 ];
 ```
 
-However, in some cases (e.g. inside a `<ReferenceInput>`), you may not want the choice to be translated. In that case, set the `translateChoice` prop to false.
+However, in some cases (e.g. inside a `<ReferenceInput>`), you may not want the choice to be translated. In that case, set the `translateChoice` prop to `false`.
 
 ```jsx
 <CheckboxGroupInput source="gender" choices={choices} translateChoice={false}/>
@@ -452,7 +452,7 @@ import { FavoriteBorder, Favorite } from '@material-ui/icons';
 
 | Prop | Type | Default | Description |
 | ---|---|---|--- |
-| `row` | `boolean` | true | Display group of elements in a compact row. |
+| `row` | `boolean` | `true` | Display group of elements in a compact row. |
 
 Refer to [Material UI Checkbox documentation](https://material-ui.com/api/checkbox/) for more details.
 
@@ -615,7 +615,7 @@ const choices = [
 ];
 ```
 
-However, in some cases (e.g. inside a `<ReferenceInput>`), you may not want the choice to be translated. In that case, set the `translateChoice` prop to false.
+However, in some cases (e.g. inside a `<ReferenceInput>`), you may not want the choice to be translated. In that case, set the `translateChoice` prop to `false`.
 
 ```jsx
 <RadioButtonGroupInput source="gender" choices={choices} translateChoice={false}/>
@@ -951,13 +951,13 @@ const choices = [
 ];
 ```
 
-However, in some cases, you may not want the choice to be translated. In that case, set the `translateChoice` prop to false.
+However, in some cases, you may not want the choice to be translated. In that case, set the `translateChoice` prop to `false`.
 
 ```jsx
 <SelectInput source="gender" choices={choices} translateChoice={false}/>
 ```
 
-Note that `translateChoice` is set to false when `<SelectInput>` is a child of `<ReferenceInput>`.
+Note that `translateChoice` is set to `false` when `<SelectInput>` is a child of `<ReferenceInput>`.
 
 Lastly, use the `options` attribute if you want to override any of Material UI's `<SelectField>` attributes:
 

docs/List.md

@@ -775,10 +775,11 @@ The `Datagrid` is an *iterator* component: it receives an array of ids, and a da
 
 By default, `<Datagrid>` renders its body using `<DatagridBody>`, an internal react-admin component. You can pass a custom component as the `row` prop to override that default. And by the way, `<DatagridBody>` has a `row` property set to `<DatagridRow>` by default for the same purpose. `<DatagridRow>` receives the row `record`, the `resource`, and a copy of the `<Datagrid>` children. That means you can create custom datagrid logic without copying several components from the react-admin source.
 
-For instance, to show the selection checkbox only for records that have a `selectable` field set to true, you can override `<DatagridRow>` and `<DatagridBody>` as follows:
+For instance, to show the selection checkbox only for records that have a `selectable` field set to `true`, you can override `<DatagridRow>` and `<DatagridBody>` as follows:
 
 ```jsx
 // in src/PostList.js
+import React from 'react';
 import { Datagrid, DatagridBody, List, TextField } from 'react-admin';
 import TableCell from '@material-ui/core/TableCell';
 import TableRow from '@material-ui/core/TableRow';
@@ -804,15 +805,15 @@ const MyDatagridRow = ({ record, resource, id, onToggleItem, children, selected,
             </TableCell>
         ))}
     </TableRow>
-)
+);
 
 const MyDatagridBody = props => <DatagridBody {...props} row={<MyDatagridRow />} />;
 const MyDatagrid = props => <Datagrid {...props} body={<MyDatagridBody />} />;
 
 const PostList = props => (
     <List {...props}>
         <MyDatagrid>
-            <Textfield source="title" />
+            <TextField source="title" />
             ...
         </MyDatagrid>
     </List>
@@ -983,6 +984,7 @@ You can customize the `<Datagrid>` styles by passing a `classes` object as prop,
 
 {% raw %}
 ```jsx
+import React from 'react';
 import { makeStyles } from '@material-ui/core';
 
 const useStyles = makeStyles({
@@ -1009,6 +1011,7 @@ export PostList;
 **Tip**: If you want to override the `header` and `cell` styles independently for each column, use the `headerClassName` and `cellClassName` props in `<Field>` components. For instance, to hide a certain column on small screens:
 
 ```jsx
+import React from 'react';
 import { makeStyles } from '@material-ui/core';
 
 const useStyles = makeStyles(theme => ({
@@ -1183,6 +1186,7 @@ You'll need to create your own iterator component as follows:
 {% raw %}
 ```jsx
 // in src/comments.js
+import React from 'react';
 import Card from '@material-ui/core/Card';
 import CardActions from '@material-ui/core/CardActions';
 import CardContent from '@material-ui/core/CardContent';

docs/Theming.md

@@ -92,7 +92,7 @@ const VisitorFilter = props => {
     );
 };
 
-// The List component supports the `root`, `header`, `actions` and `noResults` CSS classes. Here we override the `header` and `actions` classes
+// The `List` component supports the `root`, `header`, `actions` and `noResults` CSS classes. Here we override the `header` and `actions` classes
 const useListStyles = makeStyles({
     actions: {
         backgroundColor: 'Lavender',

docs/Translation.md

@@ -49,9 +49,9 @@ React-admin components use translation keys for their labels, and rely on the `i
 const SaveButton = ({ doSave }) => {
     const translate = useTranslate(); // returns the i18nProvider.translate() method
     return (
-        <Button onclick={doSave}>
+        <Button onClick={doSave}>
             {translate('ra.action.save')} // will translate to "Save" in English and "Enregistrer" in French
-        </Button>;
+        </Button>
     );
 };
 ```