From 9e4c3108f55e96112b07e45e90bc59d456528ac0 Mon Sep 17 00:00:00 2001 From: erwanMarmelab Date: Tue, 6 Feb 2024 11:34:51 +0100 Subject: [PATCH] update doc --- docs/AccordionForm.md | 43 ++++++++++++++++++++++++++++--------------- 1 file changed, 28 insertions(+), 15 deletions(-) diff --git a/docs/AccordionForm.md b/docs/AccordionForm.md index 10294d44d32..e8590a66a1b 100644 --- a/docs/AccordionForm.md +++ b/docs/AccordionForm.md @@ -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 `` 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 `` elements. | -| `defaultValues` | Optional | `object|function` | - | The default values of the record. | -| `id` | Optional | `string` | - | The id of the underlying `
` 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 `` elements. | +| `defaultValues` | Optional | `object|function` | - | The default values of the record. | +| `id` | Optional | `string` | - | The id of the underlying `` 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). @@ -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) @@ -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 `` 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 | + ## `` The children of `` must be `` elements. @@ -371,6 +383,7 @@ Here are all the props you can set on the `` 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 { @@ -520,7 +533,7 @@ Check [the `` component](./AutoSave.md) documentation for more details ## Role-Based Access Control (RBAC) -Fine-grained permissions control can be added by using the [``](./AuthRBAC.md#accordionform), [``](./AuthRBAC.md#accordionform) and [``](./AuthRBAC.md#accordionsection) components provided by the `@react-admin/ra-enterprise` package. +Fine-grained permissions control can be added by using the [``](./AuthRBAC.md#accordionform), [``](./AuthRBAC.md#accordionform) and [``](./AuthRBAC.md#accordionsection) components provided by the `@react-admin/ra-enterprise` package. {% raw %} ```tsx