Merge pull request #7742 from marmelab/doc-remove-empty-index-for-Sav…

…eButton [Doc] Fix `<SaveButton>` is documented in two different chapters
marmelab · May 23, 2022 · 7138351 · 7138351
2 parents ea45847 + fa1f344
commit 7138351
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 30 deletions.
diff --git a/docs/Buttons.md b/docs/Buttons.md
@@ -260,33 +260,6 @@ This button is an internal component used by react-admin in [the Filter button/f
 
 To override the style of all instances of `<FilterButton>` using the [MUI style overrides](https://mui.com/customization/globals/#css), use the `RaFilterButton` key.
 
-### `<SortButton>`
-
-Some List views don't have a natural UI for sorting - e.g. the `<SimpleList>`, or a list of images, don't have column headers like the `<Datagrid>`. For these cases, react-admin offers the `<SortButton>`, which displays a dropdown list of fields that the user can choose to sort on.
-
-![Sort Button](./img/sort-button.gif)
-
-`<SortButton>` expects one prop: `fields`, the list of fields it should allow to sort on. For instance, here is how to offer a button to sort on the `reference`, `sales`, and `stock` fields:
-
-```jsx
-import * as React from 'react';
-import { TopToolbar, SortButton, CreateButton, ExportButton } from 'react-admin';
-
-const ListActions = () => (
-    <TopToolbar>
-        <SortButton fields={['reference', 'sales', 'stock']} />
-        <CreateButton />
-        <ExportButton />
-    </TopToolbar>
-);
-```
-
-| Prop     | Required | Type           | Default               | Description                         |
-|----------|----------|----------------|-----------------------|-------------------------------------|
-| `fields` | Required | `string[]`     | -                     | List of fields to offer sort on     |
-| `icon`   | Optional | `ReactElement` | `<ArrowDropDownIcon>` | iconElement, e.g. `<CommentIcon />` |
-| `label`  | Optional | `string`       | 'ra.sort.sort_by'     | label or translation message to use |
-
 ## Record Buttons
 
 ### `<DeleteButton>`
@@ -333,7 +306,6 @@ const MyEdit = () => (
 {% endraw %}
 
 ### `<CloneButton>`
-### `<SaveButton>`
 
 ## Miscellaneous
 

diff --git a/docs/Reference.md b/docs/Reference.md
@@ -107,7 +107,7 @@ title: "Reference"
 * [`<RichTextField>`](./RichTextField.md)
 * [`<RichTextInput>`](./RichTextInput.md)
 * [`<RowForm>`](https://marmelab.com/ra-enterprise/modules/ra-editable-datagrid#rowform)<img class="icon" src="./img/premium.svg" />
-* `<SaveButton>`
+* [`<SaveButton>`](./SaveButton.md)
 * [`<SavedQueriesList>`](./SavedQueriesList.md)
 * [`<Search>`](https://marmelab.com/ra-enterprise/modules/ra-search#the-search-component)<img class="icon" src="./img/premium.svg" />
 * [`<SearchInput>`](./FilteringTutorial.md#searchinput)
@@ -125,7 +125,7 @@ title: "Reference"
 * [`<SimpleList>`](./SimpleList.md)
 * [`<SimpleShowLayout>`](./SimpleShowLayout.md)
 * [`<SingleFieldList>`](./SingleFieldList.md)
-* [`<SortButton>`](./Buttons.md#sortbutton)
+* [`<SortButton>`](./SortButton.md)
 * `<Tab>`
 * [`<TabbedForm>`](./TabbedForm.md)
 * [`<TabbedShowLayout>`](./TabbedShowLayout.md)

diff --git a/docs/SortButton.md b/docs/SortButton.md
@@ -26,6 +26,14 @@ const ListActions = () => (
 );
 ```
 
+## Props
+
+| Prop     | Required | Type           | Default               | Description                         |
+|----------|----------|----------------|-----------------------|-------------------------------------|
+| `fields` | Required | `string[]`     | -                     | List of fields to offer sort on     |
+| `icon`   | Optional | `ReactElement` | `<ArrowDropDownIcon>` | iconElement, e.g. `<CommentIcon />` |
+| `label`  | Optional | `string`       | 'ra.sort.sort_by'     | label or translation message to use |
+
 ## `fields`
 
 The `fields` prop expects an array of strings. Each string is the name of a field to sort on. The `<SortButton>` renders the corresponding menu item depending on the current sort order (ASC by default, or DESC if the current sort field is active).
@@ -44,3 +52,14 @@ You can customize the icon rendered on the left of the button by passing an `ico
     icon={<SortIcon />}
 />
 ```
+
+## `label`
+
+You can customize the label of the button by passing a `label` prop.
+
+```jsx
+<SortButton 
+    fields={['reference', 'sales', 'stock']}
+    label="Sort by"
+/>
+```