Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Doc] Fix anchors and typos #8330

Merged
merged 3 commits into from
Oct 28, 2022
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/Admin.md
Original file line number Diff line number Diff line change
Expand Up @@ -537,7 +537,7 @@ You might want to dynamically define the resources when the app starts. To do so

### Using a Function As `<Admin>` Child

The `<Admin>` component accepts a function as one of its children and this function can return a Promise. If you also defined an `authProvider`, the child function will receive the result of a call to `authProvider.getPermissions()` (you can read more about this in the [Auth Provider](./Authentication.md#authorization) chapter).
The `<Admin>` component accepts a function as one of its children and this function can return a Promise. If you also defined an `authProvider`, the child function will receive the result of a call to `authProvider.getPermissions()` (you can read more about this in the [Auth Provider](./Authentication.md#enabling-auth-features) chapter).

For instance, getting the resource from an API might look like:

Expand Down
2 changes: 1 addition & 1 deletion docs/ArrayInput.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ To edit arrays of data embedded inside a record, `<ArrayInput>` creates a list o

## Usage

`<ArrayInput>` expects a single child, which must be a *form iterator* component. A form iterator is a component rendering a field array (the object returned by react-hook-form's [`useFieldArray`](https://react-hook-form.com/api/usefieldarray). For instance, [the `<SimpleFormIterator>` component](./SimpleFormIterator.md) displays an array of react-admin Inputs in an unordered list (`<ul>`), one sub-form by list item (`<li>`). It also provides controls for adding and removing a sub-record.
`<ArrayInput>` expects a single child, which must be a *form iterator* component. A form iterator is a component rendering a field array (the object returned by react-hook-form's [`useFieldArray`](https://react-hook-form.com/api/usefieldarray)). For instance, [the `<SimpleFormIterator>` component](./SimpleFormIterator.md) displays an array of react-admin Inputs in an unordered list (`<ul>`), one sub-form by list item (`<li>`). It also provides controls for adding and removing a sub-record.

```jsx
import {
Expand Down
4 changes: 3 additions & 1 deletion docs/Buttons.md
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,7 @@ The ripple effect can cause [performance issues](https://github.com/marmelab/rea

It's worth noting that removing the ripple will cause accessibility issues, including a lack of focus states during tab navigating for components like `BooleanInput` and `CheckboxGroupInput`.

Note: The `disableRipple` was set to `true` in React Admin for a time, but was reimplement due to accessibility concerns. If you'd like to reimplement the static ripple colour effect, you can use the [React Admin's previous implementation](https://github.com/marmelab/react-admin/blob/994079cbca810a2e74d85329e684811645b04ae2/packages/ra-ui-materialui/src/defaultTheme.ts#L31) as a starting point. [The MUI docs](https://mui.com/material-ui/api/button-base/#props) also gives details on how to reimplement focus styles using the `Mui-focusVisible` class.
Note: The `disableRipple` was set to `true` in React Admin for a time, but was reimplemented due to accessibility concerns. If you'd like to reimplement the static ripple colour effect, you can use the [React Admin's previous implementation](https://github.com/marmelab/react-admin/blob/994079cbca810a2e74d85329e684811645b04ae2/packages/ra-ui-materialui/src/defaultTheme.ts#L31) as a starting point. [The MUI docs](https://mui.com/material-ui/api/button-base/#props) also gives details on how to reimplement focus styles using the `Mui-focusVisible` class.

## Miscellaneous

Expand Down Expand Up @@ -451,3 +451,5 @@ To override the style of all instances of `<MenuItemLink>` using the [MUI style
| `& .RaUserMenu-avatar` | Applied to the underlying `MuiAvatar` component when `useGetIdentity().avatar` is `true` |

To override the style of all instances of `<UserMenu>` using the [MUI style overrides](https://mui.com/customization/globals/#css), use the `RaUserMenu` key.

See [The theming documentation](./Theming.md#usermenu-customization) for more details.
2 changes: 1 addition & 1 deletion docs/Caching.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ title: "Caching"

# Caching

Not hitting the server is the best way to improve a web app performance, and its an ecological footprint too (network and datacenter usage account for about 40% of the CO2 emissions in IT). React-admin comes with a built-in cache-first approach called *optimistic rendering*, and it supports caching both at the HTTP level and the application level.
Not hitting the server is the best way to improve a web app performance, and it's an ecological footprint too (network and datacenter usage account for about 40% of the CO2 emissions in IT). React-admin comes with a built-in cache-first approach called *optimistic rendering*, and it supports caching both at the HTTP level and the application level.
WiXSL marked this conversation as resolved.
Show resolved Hide resolved

## Optimistic Rendering

Expand Down
2 changes: 1 addition & 1 deletion docs/Ecosystem.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ See the [Available Translation](./TranslationLocales.md) page.

## Authentication Providers

See the [Auth Provider](./Authentication.md#available-providers) page. Here is a list of additional packages:
See the [Auth Provider List](./AuthProviderList.md) page. Here is a list of additional packages:

## Authorization Management

Expand Down
4 changes: 2 additions & 2 deletions docs/EditGuesser.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ title: "The EditGuesser Component"

# `<EditGuesser>`

Use `<EditGuesser>` to quickly bootstrap a Edit view on top of an existing API, without adding the innputs one by one.
Use `<EditGuesser>` to quickly bootstrap an `Edit` view on top of an existing API, without adding the innputs one by one.
WiXSL marked this conversation as resolved.
Show resolved Hide resolved

Just like [`<Edit>`](./Edit.md), `<EditGuesser>` fetches the data. It then analyzes the response, and guesses the inputs it should use to display a basic `<SimpleForm>` with the data. It also dumps the components it has guessed in the console, so you can copy it into your own code.

Expand All @@ -32,4 +32,4 @@ Then browse to the edition page for that resource, open the console, copy the co

React-admin provides guessers for the Edit view (`<EditGuesser>`), the List view ([`<ListGuesser>`](./ListGuesser.md)), and the Show view ([`<ShowGuesser>`](./ShowGuesser.md)).

**Tip**: Do not use the guessers in production. They are slower than manually-defined components, because they have to infer types based on the content. Besides, the guessers are not always perfect.
**Tip**: Do not use the guessers in production. They are slower than manually-defined components, because they have to infer types based on the content. Besides, the guessers are not always perfect.
4 changes: 2 additions & 2 deletions docs/EditTutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -291,7 +291,7 @@ export const BookEdit = () => {

### `<EditContext>` Exposes Data And Callbacks

Instead of passing the `record` and `onSubmit` callback to the `<SimpleForm>` element, react-admin prefers putting them in an [`<EditContext>`](./EditContext.md) context. This allows any descendant element to "pull" the data and callback from the context.
Instead of passing the `record` and `onSubmit` callback to the `<SimpleForm>` element, react-admin prefers putting them in an [`<EditContext>`](./useEditContext.md) context. This allows any descendant element to "pull" the data and callback from the context.

{% raw %}
```diff
Expand Down Expand Up @@ -886,4 +886,4 @@ Users often need to edit data from several resources in the same form. React-adm

![EditInDialogButton](https://marmelab.com/ra-enterprise/modules/assets/ra-form-layout/latest/InDialogButtons.gif)

![ReferenceManyInput](./img/reference-many-input.gif)
![ReferenceManyInput](./img/reference-many-input.gif)
2 changes: 1 addition & 1 deletion docs/FileInput.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ title: "The FileInput Component"

# `<FileInput>`

`<FileInput>` allows editing and uploading file attachments (pdfs, csv, images, etc). It is powered by [react-dropzone](https://github.com/okonet/react-dropzone).
`<FileInput>` allows editing and uploading file attachments (pdfs, csv, images, etc.). It is powered by [react-dropzone](https://github.com/okonet/react-dropzone).

![FileInput](./img/file-input.png)

Expand Down
2 changes: 1 addition & 1 deletion docs/Form.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export const PostCreate = () => (

## `id`

Normally, a submit button only works when placed inside a `<form>` tag. However, you can place a submit button outside of the form if the submit button `form` matches the form `id`.
Normally, a submit button only works when placed inside a `<form>` tag. However, you can place a submit button outside the form if the submit button `form` matches the form `id`.

Set this form `id` via the `id` prop.

Expand Down
4 changes: 2 additions & 2 deletions docs/ImageInput.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ title: "The ImageInput Component"

# `<ImageInput>`

`<ImageInput>` allows editing and uploading images (png, jpg, gif, etc). It is powered by [react-dropzone](https://github.com/okonet/react-dropzone).
`<ImageInput>` allows editing and uploading images (png, jpg, gif, etc.). It is powered by [react-dropzone](https://github.com/okonet/react-dropzone).

![ImageInput](./img/image-input.png)

Expand Down Expand Up @@ -45,7 +45,7 @@ After modification by the user, the value is stored as an array of objects with
* `src`: An [object URL](https://developer.mozilla.org/fr/docs/Web/API/URL/createObjectURL) for the `File`, e.g. 'blob:https://example.com/1e67e00e-860d-40a5-89ae-6ab0cbee6273'
* `rawFile`: [The `File` object](https://developer.mozilla.org/fr/docs/Web/API/File) itself

It is the responsibility of your `dataProvider` to send the file to the server (encoded in Base64, or using multipart upload) and to transform the `src` property. See [the Data Provider documentation](./DataProviders.html#handling-file-uploads) for an example.
It is the responsibility of your `dataProvider` to send the file to the server (encoded in Base64, or using multipart upload) and to transform the `src` property. See [the Data Provider documentation](./DataProviders.md#handling-file-uploads) for an example.

Files are accepted or rejected based on the `accept`, `multiple`, `minSize` and `maxSize` props.

Expand Down
2 changes: 1 addition & 1 deletion docs/MultiLevelMenu.md
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ const MyMenu = () => (
);
```

Check [the `<MultiLevelMenu.Item>` section](#MultiLevelMenuitem) for more information.
Check [the `<MultiLevelMenu.Item>` section](#multilevelmenuitem) for more information.

## `initialOpen`

Expand Down
2 changes: 1 addition & 1 deletion docs/Reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ title: "Reference"
* [`useGetMany`](./useGetMany.md)
* [`useGetManyReference`](./useGetManyReference.md)
* [`useGetOne`](./useGetOne.md)
* [`useGetPermissions`](./Authentication.md#usegetpermissions-hook)
* [`useGetPermissions`](./WithPermissions.md)
* [`useHasLock`](https://marmelab.com/ra-enterprise/modules/ra-realtime#locks-on-content)<img class="icon" src="./img/premium.svg" />
* [`useHasLocks`](https://marmelab.com/ra-enterprise/modules/ra-realtime#locks-on-content)<img class="icon" src="./img/premium.svg" />
* [`useInput`](./useInput.md)
Expand Down
4 changes: 2 additions & 2 deletions docs/Show.md
Original file line number Diff line number Diff line change
Expand Up @@ -325,7 +325,7 @@ const PostShow = () => (

## Displaying Fields Depending On User Permissions

If you want to display some fields only to users with specific permissions, use the `usePermissions` hook and JSX conditions to show or hide fields.
If you want to display some fields only to users with specific permissions, use the [`usePermissions`](./usePermissions.md) hook and JSX conditions to show or hide fields.

Here's an example inside a `Show` view with a `SimpleShowLayout` and a custom `actions` component:

Expand Down Expand Up @@ -388,7 +388,7 @@ export const UserShow = () => {
```
{% endraw %}

For more details about permissions, check out the [authProvider documentation](./Authentication.md#authorization).
For more details about permissions, check out the [authProvider documentation](./Authentication.md).

## Adding `meta` To The DataProvider Call

Expand Down
2 changes: 1 addition & 1 deletion docs/Theming.md
Original file line number Diff line number Diff line change
Expand Up @@ -433,7 +433,7 @@ export const PostList = () => (
```
{% endraw %}

**Tip**: if you don't want to create a custom component to apply conditional formatting, you can also use [the `<WithRecord>` component](./WithRecord.md)].
**Tip**: if you don't want to create a custom component to apply conditional formatting, you can also use [the `<WithRecord>` component](./WithRecord.md).

## `useMediaQuery` Hook

Expand Down
2 changes: 1 addition & 1 deletion docs/TranslationSetup.md
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ const App = () => (
);
```

That's all it takes to have a multilingual UI. As an added benefit, once a user has chosen a locale different than the default one, the react-admin app will always render using that locale (thanks to [the Store](./Store.md)).
That's all it takes to have a multilingual UI. As an added benefit, once a user has chosen a locale different from the default one, the react-admin app will always render using that locale (thanks to [the Store](./Store.md)).

## Using The Browser Locale

Expand Down
4 changes: 2 additions & 2 deletions docs/Tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@ Let's get back to `<Datagrid>`. It reads the data fetched by `<List>`, then rend

[![Users List](./img/tutorial_users_list_selected_columns.png)](./img/tutorial_users_list_selected_columns.png)

In react-admin, most configuration is achieved via components. `<Datagrid>` could have taken a `columns` prop expecting a configuration object. But by using the `children` prop instead, it opens the door to much powerful customization - for instance, changing the column type, or using your own component for a given column.
In react-admin, most configuration is achieved via components. `<Datagrid>` could have taken a `columns` prop expecting a configuration object. But by using the `children` prop instead, it opens the door to a much powerful customization - for instance, changing the column type, or using your own component for a given column.

## Using Field Types

Expand Down Expand Up @@ -498,7 +498,7 @@ The post list now displays the user names on each line.

[![Post List With User Names](./img/tutorial_list_user_name.png)](./img/tutorial_list_user_name.png)

The `<ReferenceField>` component fetches the reference data, creates a `RecordContext` with the result, and renders the record representation (or its its children).
The `<ReferenceField>` component fetches the reference data, creates a `RecordContext` with the result, and renders the record representation (or its children).

**Tip**: Look at the network tab of your browser again: react-admin deduplicates requests for users, and aggregates them in order to make only *one* HTTP request to the `/users` endpoint for the whole Datagrid. That's one of many optimizations that keep the UI fast and responsive.

Expand Down
2 changes: 1 addition & 1 deletion docs/UrlField.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ title: "The UrlField Component"
# `<UrlField>`


`<UrlField>` displays a url in a MUI's `<Link href="" />` component.
`<UrlField>` displays an url in a MUI's `<Link href="" />` component.
WiXSL marked this conversation as resolved.
Show resolved Hide resolved

```jsx
import { UrlField } from 'react-admin';
Expand Down