Fix 3296 by adjusting buttons location for the array field toolbar (#4859)

* 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

* Update packages/mantine/src/templates/BaseInputTemplate.tsx

* - Updated snapshots

* - Restored space in `classNames` that was accidentally removed

Author: heath-freenome

CHANGELOG.md

@@ -20,55 +20,76 @@ 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)
+- Updated the three hooks to add `use client` directive to support NextJS builds
+
+## Dev / docs / playground
 
+- Updated `uiSchema.md` in the docs to document the new `enableMarkdownInHelp` flag
 
 # 6.0.2
 

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<T, S, F>) {
-  const { children, buttonsProps, hasToolbar, index, registry, uiSchema } = props;
+  const { children, buttonsProps, displayLabel, hasDescription, hasToolbar, index, registry, uiSchema } = props;
   const uiOptions = getUiOptions<T, S, F>(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 (
     <Row align={toolbarAlign} key={`rjsf-array-item-${index}`} gutter={rowGutter}>
       <Col flex='1'>{children}</Col>
-
       {hasToolbar && (
-        <Col flex='192px'>
+        <Col flex='120px' style={{ marginTop: displayLabel ? `${margin}px` : undefined }}>
           <Space.Compact style={BTN_GRP_STYLE}>
             <ArrayFieldItemButtonsTemplate {...buttonsProps} style={BTN_STYLE} />
           </Space.Compact>

packages/antd/src/templates/ArrayFieldTemplate/index.tsx

@@ -82,7 +82,7 @@ export default function ArrayFieldTemplate<
         {canAdd && (
           <Col span={24}>
             <Row gutter={rowGutter} justify='end'>
-              <Col flex='192px'>
+              <Col flex='120px'>
                 <AddButton
                   id={buttonId(fieldPathId, 'add')}
                   className='rjsf-array-item-add'