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.

Sign up for GitHub

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

Jump to bottom

[Doc] Update <AccordionForm> and <AccordionFormPanel> docs #9646

Merged
merged 1 commit into from
Feb 8, 2024
Merged

[Doc] Update <AccordionForm> and <AccordionFormPanel> docs #9646

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
43 changes: 28 additions & 15 deletions docs/AccordionForm.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,19 +84,19 @@ Check [the `ra-form-layout` documentation](https://marmelab.com/ra-enterprise/mo

Here are all the props you can set on the `<AccordionForm>` component:

| Prop | Required | Type | Default | Description |
| ------------------------ | -------- | ----------------- | ------- | ---------------------------------------------------------- |
| `autoClose` | Optional | `boolean` | - | Set to `true` to close the current accordion when opening another one. |
| `children` | Required | `ReactNode` | - | A list of `<AccordionForm.Panel>` elements. |
| `defaultValues` | Optional | `object|function` | - | The default values of the record. |
| `id` | Optional | `string` | - | The id of the underlying `<form>` tag. |
| `noValidate` | Optional | `boolean` | - | Set to `true` to disable the browser's default validation. |
| `onSubmit` | Optional | `function` | `save` | A callback to call when the form is submitted. |
| `sanitize EmptyValues` | Optional | `boolean` | - | Set to `true` to remove empty values from the form state. |
| `toolbar` | Optional | `ReactElement` | - | A custom toolbar element. |
| `validate` | Optional | `function` | - | A function to validate the form values. |
| `warnWhen UnsavedChanges` | Optional | `boolean` | - | Set to `true` to warn the user when leaving the form with unsaved changes. |

| Prop | Required | Type | Default | Description |
| ------------------------- | -------- | ----------------- | ------- | ---------------------------------------------------------------------------- |
| `autoClose` | Optional | `boolean` | - | Set to `true` to close the current accordion when opening another one. |
| `children` | Required | `ReactNode` | - | A list of `<AccordionForm.Panel>` elements. |
| `defaultValues` | Optional | `object|function` | - | The default values of the record. |
| `id` | Optional | `string` | - | The id of the underlying `<form>` tag. |
| `noValidate` | Optional | `boolean` | - | Set to `true` to disable the browser's default validation. |
| `onSubmit` | Optional | `function` | `save` | A callback to call when the form is submitted. |
| `sanitize EmptyValues` | Optional | `boolean` | - | Set to `true` to remove empty values from the form state. |
| `toolbar` | Optional | `ReactElement` | - | A custom toolbar element. |
| `validate` | Optional | `function` | - | A function to validate the form values. |
| `warnWhen UnsavedChanges` | Optional | `boolean` | - | Set to `true` to warn the user when leaving the form with unsaved changes. |
| `sx` | Optional | `Object` | - | An object containing the MUI style overrides to apply to the root component. |

Additional props are passed to `react-hook-form`'s [`useForm` hook](https://react-hook-form.com/docs/useform).

Expand Down Expand Up @@ -335,7 +335,7 @@ export const UserCreate = () => (

## `warnWhenUnsavedChanges`

React-admin keeps track of the form state, so it can detect when the user leaves an `Edit` or `Create` page with unsaved changes. To avoid data loss, you can use this ability to ask the user to confirm before leaving a page with unsaved changes.
React-admin keeps track of the form state, so it can detect when the user leaves an `Edit` or `Create` page with unsaved changes. To avoid data loss, you can use this ability to ask the user to confirm before leaving a page with unsaved changes.

![Warn About Unsaved Changes](./img/warn_when_unsaved_changes.png)

Expand All @@ -353,6 +353,18 @@ export const TagEdit = () => (

**Warning**: This feature only works if you have a dependency on react-router 6.3.0 **at most**. The react-router team disabled this possibility in react-router 6.4, so `warnWhenUnsavedChanges` will silently fail with react-router 6.4 or later.

## `sx`: CSS API

The `<AccordionForm>` component accepts the usual `className` prop. You can also override the styles of the inner components thanks to the `sx` property. This property accepts the following subclasses:

| Rule name | Description |
| ---------------------------- | ---------------------------------- |
| `&.MuiBox-root` | Applied to the root component |
| `&.MuiAccordion-root` | Applied to all the Accordions |
| `&.Mui-expanded` | Applied to the expanded Accordions |
| `&.MuiAccordionSummary-root` | Applied to the Accordion's title |
| `&.MuiCollapse-root` | Applied to the Accordion's content |

## `<AccordionForm.Panel>`

The children of `<AccordionForm>` must be `<AccordionForm.Panel>` elements.
Expand All @@ -371,6 +383,7 @@ Here are all the props you can set on the `<AccordionForm.Panel>` component:
| `defaultExpanded` | Optional | `boolean` | `false` | Set to true to have the accordion expanded by default (except if autoClose = true on the parent) |
| `disabled` | Optional | `boolean` | `false` | If true, the accordion will be displayed in a disabled state. |
| `square` | Optional | `boolean` | `false` | If true, rounded corners are disabled. |
| `sx` | Optional | `Object` | - | An object containing the MUI style overrides to apply to the root component. |

```tsx
import {
Expand Down Expand Up @@ -520,7 +533,7 @@ Check [the `<AutoSave>` component](./AutoSave.md) documentation for more details

## Role-Based Access Control (RBAC)

Fine-grained permissions control can be added by using the [`<AccordionForm>`](./AuthRBAC.md#accordionform), [`<AccordionFormPanel>`](./AuthRBAC.md#accordionform) and [`<AccordionSection>`](./AuthRBAC.md#accordionsection) components provided by the `@react-admin/ra-enterprise` package.
Fine-grained permissions control can be added by using the [`<AccordionForm>`](./AuthRBAC.md#accordionform), [`<AccordionFormPanel>`](./AuthRBAC.md#accordionform) and [`<AccordionSection>`](./AuthRBAC.md#accordionsection) components provided by the `@react-admin/ra-enterprise` package.

{% raw %}
```tsx
Expand Down