From b41f8a218359d786f1e31e2b0052a69fa9a9a75a Mon Sep 17 00:00:00 2001 From: Heath Chiavettone Date: Sun, 9 Nov 2025 12:05:28 -0800 Subject: [PATCH 1/4] Fix 3296 by adjusting buttons location for the array field toolbar Fixed #3296 by updating `ArrayFieldItemTemplateProps` to add `displayLabel` and `hasDescription` and using them in the themes to adjust buttons location - In `@rjsf/utils`, updated `ArrayFieldItemTemplateProps` to add `displayLabel` and `hasDescription` flags - In `@rjsf/core`, updated `ArrayField` to compute and pass `displayLabel` and `hasDescription` flags - Updated `ArrayFieldItemTemplate` to use `displayLabel` and `hasDescription` to adjust buttons location - Also fixed bug where `StringField` was not using the `title` passed to it as found in `mantine` theme - In `@rjsf/antd`, updated `ArrayFieldItemTemplate` and `ArrayFieldTemplate` to adjust sizes and buttons location using `displayLabel` and `hasDescription` - In `@rjsf/chakra-ui`, updated snapshots due to `StringField` fix - In `@rjsf/daisyui`, updated `ArrayFieldItemTemplate` to adjust buttons location using `displayLabel` and `hasDescription` - Also updated `WrapIfAdditionalTemplate` and `BaseInputTemplate` to make the inputs full width - Also updated `FieldTemplate` to render the `description` which was missing in the theme - In `@rjsf/fluentui-rc`, updated `ArrayFieldItemTemplate` to adjust buttons location using `displayLabel` - Also updated `WrapIfAdditionalTemplate` to add `flexGrow` to allow the array item fields to grow properly for non-container elements - In `@rjsf/mantine`, updated `utils.ts` to add `label` to the cleanup fields to filter it from the `uiOptions` - Also updated `BaseInputTemplate` to display `description` which was missing in the theme - Also updated `ArrayFieldTitleTemplate` to support the `optionalData` - In `@rjsf/mui`, updated `ArrayFieldItemTemplate` to adjust buttons location using `displayLabel` and `hasDescription` - In `@rjsf/primereact`, updated `ArrayFieldItemTemplate` to adjust buttons location using `displayLabel` - In `@rjsf/react-bootstrap`, updated `ArrayFieldItemTemplate` to adjust buttons location using `displayLabel` and `hasDescription` - Also, updated `ArrayFieldTemplate` to improve it's responsiveness in relation to the `ArrayFieldItemTemplate` changes - In `@rjsf/semantic-ui`, updated `ArrayFieldItemTemplate` to adjust buttons location using `displayLabel` and `hasDescription` - In `@rjsf/shadcn`, updated `ArrayFieldItemTemplate` to adjust buttons location using `displayLabel` and `hasDescription` - Also updated `ArrayFieldTemplate` to add `justify-end` to the `AddButton` rendering - Updated all snapshots due to above changes - Updated `uiSchema.md` in the docs to document the new `enableMarkdownInHelp` flag from previous PR - Updated the `CHANGELOG.md` accordingly --- CHANGELOG.md | 52 +- .../ArrayFieldItemTemplate/index.tsx | 9 +- .../templates/ArrayFieldTemplate/index.tsx | 2 +- .../test/__snapshots__/Array.test.tsx.snap | 182 +-- .../test/__snapshots__/Form.test.tsx.snap | 104 +- .../test/__snapshots__/Object.test.tsx.snap | 28 +- .../test/__snapshots__/Array.test.tsx.snap | 8 +- .../test/__snapshots__/Form.test.tsx.snap | 12 +- .../test/__snapshots__/Object.test.tsx.snap | 8 +- .../core/src/components/fields/ArrayField.tsx | 7 + .../src/components/fields/StringField.tsx | 5 +- .../templates/ArrayFieldItemTemplate.tsx | 19 +- .../templates/ButtonTemplates/AddButton.tsx | 4 +- .../__snapshots__/ArraySnap.test.tsx.snap | 231 ++-- .../test/__snapshots__/FormSnap.test.tsx.snap | 134 +- .../__snapshots__/ObjectSnap.test.tsx.snap | 60 +- .../ArrayFieldItemTemplate.tsx | 9 +- .../BaseInputTemplate/BaseInputTemplate.tsx | 4 +- .../templates/FieldTemplate/FieldTemplate.tsx | 3 +- .../WrapIfAdditionalTemplate.tsx | 2 +- .../test/__snapshots__/Array.test.tsx.snap | 692 ++++++---- .../test/__snapshots__/Form.test.tsx.snap | 1152 +++++++++-------- .../test/__snapshots__/Grid.test.tsx.snap | 460 ++++--- .../test/__snapshots__/Object.test.tsx.snap | 428 +++--- packages/docs/docs/api-reference/uiSchema.md | 37 + .../ArrayFieldItemTemplate.tsx | 6 +- .../WrapIfAdditionalTemplate.tsx | 10 +- .../test/__snapshots__/Array.test.tsx.snap | 214 +-- .../test/__snapshots__/Form.test.tsx.snap | 276 ++-- .../test/__snapshots__/Grid.test.tsx.snap | 148 ++- .../test/__snapshots__/Object.test.tsx.snap | 98 +- .../src/templates/ArrayFieldTitleTemplate.tsx | 17 +- .../src/templates/BaseInputTemplate.tsx | 41 +- packages/mantine/src/utils.ts | 1 + .../test/__snapshots__/Array.test.tsx.snap | 216 +++- .../test/__snapshots__/Form.test.tsx.snap | 902 +++++++++---- .../test/__snapshots__/Object.test.tsx.snap | 256 ++-- .../ArrayFieldItemTemplate.tsx | 4 +- .../test/__snapshots__/Array.test.tsx.snap | 100 +- .../mui/test/__snapshots__/Form.test.tsx.snap | 72 +- .../test/__snapshots__/Object.test.tsx.snap | 32 +- .../ArrayFieldItemTemplate.tsx | 4 +- .../test/__snapshots__/Array.test.tsx.snap | 48 +- .../test/__snapshots__/Form.test.tsx.snap | 20 +- .../test/__snapshots__/Object.test.tsx.snap | 8 +- .../ArrayFieldItemTemplate.tsx | 7 +- .../ArrayFieldTemplate/ArrayFieldTemplate.tsx | 4 +- .../test/__snapshots__/Array.test.tsx.snap | 216 ++-- .../test/__snapshots__/Form.test.tsx.snap | 144 +-- .../test/__snapshots__/Object.test.tsx.snap | 24 +- .../ArrayFieldItemTemplate.tsx | 10 +- .../test/__snapshots__/Array.test.tsx.snap | 24 +- .../test/__snapshots__/Form.test.tsx.snap | 18 +- .../test/__snapshots__/Object.test.tsx.snap | 12 +- .../ArrayFieldItemTemplate.tsx | 8 +- .../ArrayFieldTemplate/ArrayFieldTemplate.tsx | 2 +- .../test/__snapshots__/Array.test.tsx.snap | 58 +- .../test/__snapshots__/Form.test.tsx.snap | 62 +- .../test/__snapshots__/Object.test.tsx.snap | 8 +- packages/utils/src/types.ts | 4 + 60 files changed, 3994 insertions(+), 2732 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 113d93822e..65a66f8132 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,55 +20,75 @@ should change the heading of the (upcoming) version to include a major version b ## @rjsf/antd - Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate` +- Updated `ArrayFieldItemTemplate` and `ArrayFieldTemplate` to adjust sizes and buttons location using `displayLabel` and `hasDescription`, fixing [#3296](https://github.com/rjsf-team/react-jsonschema-form/issues/3296) -## @rjsf/antd - -- Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate` - -## @rjsf/antd +## @rjsf/chakra-ui - Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate` -## @rjsf/mui +## @rjsf/core -- Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate` +- Added new `RichHelp` component for use in all the themes for help rendering, fixing [#4601](https://github.com/rjsf-team/react-jsonschema-form/issues/4601) +- Updated `ArrayField` to compute and pass `displayLabel` and `hasDescription` to the rendered `ArrayFieldItemTemplate` to support fixing [#3296](https://github.com/rjsf-team/react-jsonschema-form/issues/3296) +- Updated `StringField` to extract the `title` from the props and pass it down to the widget if provided +- Updated `ArrayFieldItemTemplate` to adjust buttons location using `displayLabel` and `hasDescription`, fixing [#3296](https://github.com/rjsf-team/react-jsonschema-form/issues/3296) +- Updated `AddButton` to improve it's responsiveness in relation to the `ArrayFieldItemTemplate` changes -## @rjsf/shadcn +## @rjsf/daisyui - Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate` +- Updated `ArrayFieldItemTemplate` to adjust buttons location using `displayLabel` and `hasDescription`, fixing [#3296](https://github.com/rjsf-team/react-jsonschema-form/issues/3296) +- Updated `WrapIfAdditionalTemplate` to add `flexGrow` and `BaseInputTemplate` to add `w-full` to allow the array item fields to grow properly +- Updated `FieldTemplate` to render the `description` which was missing in the theme -## @rjsf/primereact +## @rjsf/fluentui-rc - Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate` +- Updated `ArrayFieldItemTemplate` to adjust buttons location using `displayLabel`, fixing [#3296](https://github.com/rjsf-team/react-jsonschema-form/issues/3296) +- Updated `WrapIfAdditionalTemplate` to add `flexGrow` to allow the array item fields to grow properly for non-container elements -## @rjsf/react-bootstrap +## @rjsf/mantine - Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate` +- Updated `utils.ts` to add `label` to the cleanup fields to filter it from the `uiOptions` +- Updated `BaseInputTemplate` to display `description` which was missing in the theme +- Updated `ArrayFieldTitleTemplate` to support the `optionalData` -## @rjsf/semantic-ui +## @rjsf/mui - Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate` +- Updated `ArrayFieldItemTemplate` to adjust buttons location using `displayLabel` and `hasDescription`, fixing [#3296](https://github.com/rjsf-team/react-jsonschema-form/issues/3296) -## @rjsf/daisyui +## @rjsf/primereact - Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate` +- Updated `ArrayFieldItemTemplate` to adjust buttons location using `displayLabel`, fixing [#3296](https://github.com/rjsf-team/react-jsonschema-form/issues/3296) -## @rjsf/fluentui-rc +## @rjsf/react-bootstrap - Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate` +- Updated `ArrayFieldItemTemplate` to adjust buttons location using `displayLabel` and `hasDescription`, fixing [#3296](https://github.com/rjsf-team/react-jsonschema-form/issues/3296) +- Updated `ArrayFieldTemplate` to improve it's responsiveness in relation to the `ArrayFieldItemTemplate` changes -## @rjsf/chakra-ui +## @rjsf/semantic-ui - Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate` +- Updated `ArrayFieldItemTemplate` to adjust buttons location using `displayLabel` and `hasDescription`, fixing [#3296](https://github.com/rjsf-team/react-jsonschema-form/issues/3296) -## @rjsf/mantine +## @rjsf/shadcn - Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate` +- Updated `ArrayFieldItemTemplate` to adjust buttons location using `displayLabel` and `hasDescription`, fixing [#3296](https://github.com/rjsf-team/react-jsonschema-form/issues/3296) +- Updated `ArrayFieldTemplate` to add `justify-end` to the `AddButton` rendering ## @rjsf/utils -- Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate` +- Added new `enableMarkdownInHelp` to the `GlobalUISchemaOptions` type, fixing [#4601](https://github.com/rjsf-team/react-jsonschema-form/issues/4601) +- Added new `displayLabel` and `hasDescription` flags in the `ArrayFieldItemTemplateProps` to support fixing [#3296](https://github.com/rjsf-team/react-jsonschema-form/issues/3296) + +## Dev / docs / playground +- Updated `uiSchema.md` in the docs to document the new `enableMarkdownInHelp` flag # 6.0.2 diff --git a/packages/antd/src/templates/ArrayFieldItemTemplate/index.tsx b/packages/antd/src/templates/ArrayFieldItemTemplate/index.tsx index 9cfad610ae..397cdbbb9f 100644 --- a/packages/antd/src/templates/ArrayFieldItemTemplate/index.tsx +++ b/packages/antd/src/templates/ArrayFieldItemTemplate/index.tsx @@ -10,6 +10,7 @@ import { const BTN_GRP_STYLE = { width: '100%', + justifyContent: 'flex-end', }; const BTN_STYLE = { @@ -25,21 +26,21 @@ export default function ArrayFieldItemTemplate< S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any, >(props: ArrayFieldItemTemplateProps) { - const { children, buttonsProps, hasToolbar, index, registry, uiSchema } = props; + const { children, buttonsProps, displayLabel, hasDescription, hasToolbar, index, registry, uiSchema } = props; const uiOptions = getUiOptions(uiSchema); const ArrayFieldItemButtonsTemplate = getTemplate<'ArrayFieldItemButtonsTemplate', T, S, F>( 'ArrayFieldItemButtonsTemplate', registry, uiOptions, ); - const { rowGutter = 24, toolbarAlign = 'top' } = registry.formContext; + const { rowGutter = 24, toolbarAlign = displayLabel ? 'middle' : 'top' } = registry.formContext; + const margin = hasDescription ? -8 : 16; return ( {children} - {hasToolbar && ( - + diff --git a/packages/antd/src/templates/ArrayFieldTemplate/index.tsx b/packages/antd/src/templates/ArrayFieldTemplate/index.tsx index ec685d6d99..494cfb6891 100644 --- a/packages/antd/src/templates/ArrayFieldTemplate/index.tsx +++ b/packages/antd/src/templates/ArrayFieldTemplate/index.tsx @@ -82,7 +82,7 @@ export default function ArrayFieldTemplate< {canAdd && ( - +
- Test item + Test field-2