From 6cb2bbad98639270ed5558b624f1ca4019367e2f Mon Sep 17 00:00:00 2001 From: Erwan Bourlon Date: Mon, 4 Mar 2024 18:43:50 +0100 Subject: [PATCH] update doc --- docs/AccordionForm.md | 48 +++++++++++++++++++++++-------------------- 1 file changed, 26 insertions(+), 22 deletions(-) diff --git a/docs/AccordionForm.md b/docs/AccordionForm.md index e8590a66a1b..29ce4c45be2 100644 --- a/docs/AccordionForm.md +++ b/docs/AccordionForm.md @@ -375,15 +375,16 @@ This component renders a [Material UI `` component](https://mui.com/c Here are all the props you can set on the `` component: -| Prop | Required | Type | Default | Description | -| ----------------- | -------- | ----------- | ------- | ------------------------------------------------------------------------------------------------ | -| `label` | Required | `string` | - | The main label used as the accordion summary. Appears in red when the accordion has errors | -| `children` | Required | `ReactNode` | - | A list of `` elements | -| `secondary` | Optional | `string` | - | The secondary label used as the accordion summary | -| `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. | +| Prop | Required | Type | Default | Description | +| ----------------- | -------- | ----------------------- | ------- | ------------------------------------------------------------------------------------------------ | +| `children` | Required | `ReactNode` | - | A list of `` elements | +| `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. | +| `id` | Optional | `string` | - | An id for this Accordion to be used in the [`useFormGroup`](./Upgrade.md#useformgroup-hook-returned-state-has-changed) hook and for CSS classes. | +| `label` | Required | `string` or `ReactNode` | - | The main label used as the accordion summary. Appears in red when the accordion has errors | +| `secondary` | Optional | `string` or `ReactNode` | - | The secondary label used as the accordion summary | +| `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 { @@ -413,6 +414,8 @@ const CustomerEdit = () => ( ); ``` +**Warning**: To use an `` with the `autoClose` prop and a React node element as a `label`, you **must** specify an `id`. + ## `` Renders children (Inputs) inside a Material UI `` element without a Card style. To be used as child of a `` or a `` element. @@ -430,19 +433,20 @@ Prefer `` to `` to always display a list of imp Here are all the props you can set on the `` component: -| Prop | Required | Type | Default | Description | -| ------------------ | -------- | ----------- | ------- | ------------------------------------------------------------- | -| `Accordion` | Optional | `Component` | - | The component to use as the accordion. | -| `AccordionDetails` | Optional | `Component` | - | The component to use as the accordion details. | -| `AccordionSummary` | Optional | `Component` | - | The component to use as the accordion summary. | -| `label` | Required | `string` | - | The main label used as the accordion summary. | -| `children` | Required | `ReactNode` | - | A list of `` elements | -| `fullWidth` | Optional | `boolean` | `false` | If true, the Accordion takes the entire form width. | -| `className` | Optional | `string` | - | A class name to style the underlying `` | -| `secondary` | Optional | `string` | - | The secondary label used as the accordion summary | -| `defaultExpanded` | Optional | `boolean` | `false` | Set to true to have the accordion expanded by default | -| `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. | +| Prop | Required | Type | Default | Description | +| ------------------ | -------- | ----------------------- | ------- | ------------------------------------------------------------- | +| `Accordion` | Optional | `Component` | - | The component to use as the accordion. | +| `AccordionDetails` | Optional | `Component` | - | The component to use as the accordion details. | +| `AccordionSummary` | Optional | `Component` | - | The component to use as the accordion summary. | +| `children` | Required | `ReactNode` | - | A list of `` elements | +| `className` | Optional | `string` | - | A class name to style the underlying `` | +| `defaultExpanded` | Optional | `boolean` | `false` | Set to true to have the accordion expanded by default | +| `disabled` | Optional | `boolean` | `false` | If true, the accordion will be displayed in a disabled state. | +| `fullWidth` | Optional | `boolean` | `false` | If true, the Accordion takes the entire form width. | +| `id` | Optional | `string` | - | An id for this Accordion to be used for CSS classes. | +| `label` | Required | `string` or `ReactNode` | - | The main label used as the accordion summary. | +| `secondary` | Optional | `string` or `ReactNode` | - | The secondary label used as the accordion summary | +| `square` | Optional | `boolean` | `false` | If true, rounded corners are disabled. | ```tsx import {