Fix Additional Properties buttons location (rjsf-team#4862)

Co-authored-by: Nick Grosenbacher <[email protected]>

Author: heath-freenome

CHANGELOG.md

@@ -21,10 +21,12 @@ should change the heading of the (upcoming) version to include a major version b
 
 - 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)
+- Updated `FieldTemplate`, `ObjectFieldTemplate` and `WrapIfAdditionalTemplate` to adjust the sizes and buttons location using `displayLabel`
 
 ## @rjsf/chakra-ui
 
 - Added support for rendering `ui:help` as markdown via new `ui:enableMarkdownInHelp` flag in `FieldHelpTemplate`
+- Updated `FieldTemplate` and `WrapIfAdditionalTemplate` to adjust the sizes and buttons location using `displayLabel` and `rawDescription`
 
 ## @rjsf/core
 
@@ -33,63 +35,75 @@ should change the heading of the (upcoming) version to include a major version b
 - 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
+- Updated `WrapIfAdditionalTemplate` to adjust the sizes and buttons location using `displayLabel` and `rawDescription`
 
 ## @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
+- Updated `FieldTemplate` and `WrapIfAdditionalTemplate` to adjust the sizes and buttons location using `displayLabel` and `rawDescription`
 
 ## @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
+- Updated `FieldTemplate` and `WrapIfAdditionalTemplate` to adjust the sizes and buttons location using `displayLabel` and `rawDescription`
 
 ## @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`
+- Updated `FieldTemplate` and `WrapIfAdditionalTemplate` to adjust the sizes and buttons location using `displayLabel` and `rawDescription`
 
 ## @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)
+- Updated `FieldTemplate`, `ObjectFieldTemplate` and `WrapIfAdditionalTemplate` to adjust the sizes and buttons location using `displayLabel`
 
 ## @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)
+- Updated `WrapIfAdditionalTemplate` to adjust the sizes and buttons location using `displayLabel` and `rawDescription`
 
 ## @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
+- Updated `FieldTemplate`, `ObjectFieldTemplate` and `WrapIfAdditionalTemplate` to adjust the sizes and buttons location using `displayLabel` and `rawDescription`
 
 ## @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)
+- Updated `FieldTemplate` and `WrapIfAdditionalTemplate` to adjust the sizes and buttons location using `displayLabel` and `rawDescription`
 
 ## @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
+- Updated `FieldTemplate`, `ObjectFieldTemplate` and `WrapIfAdditionalTemplate` to adjust the sizes and buttons location using `displayLabel` and `rawDescription`
 
 ## @rjsf/utils
 
 - 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
+- Updated `WrapIfAdditionalTemplateProps` to also pick the `displayLabel` and `rawDescription` props from `FieldProps` for use in adjusting the Additional Properties buttons location
+- Fixed bug in `getDisplayLabel()` to return false ALWAYS, when the `ui:options` is set to false AND to return true for `array` and `object` types when they were added via additionalProperties
 
 ## Dev / docs / playground
 
 - Updated `uiSchema.md` in the docs to document the new `enableMarkdownInHelp` flag
+- Updated `objectTests.tsx` to increase the variations of the additionalProperties tests to include labels off, descriptions and object and array types
 
 # 6.0.2
 

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

@@ -24,23 +24,16 @@ export default function FieldTemplate<
 >(props: FieldTemplateProps<T, S, F>) {
   const {
     children,
-    classNames,
-    style,
     description,
-    disabled,
     displayLabel,
     errors,
     help,
     rawHelp,
     hidden,
     id,
     label,
-    onKeyRename,
-    onKeyRenameBlur,
-    onRemoveProperty,
     rawErrors,
     rawDescription,
-    readonly,
     registry,
     required,
     schema,
@@ -82,21 +75,7 @@ export default function FieldTemplate<
   }
   const isCheckbox = uiOptions.widget === 'checkbox';
   return (
-    <WrapIfAdditionalTemplate
-      classNames={classNames}
-      style={style}
-      disabled={disabled}
-      id={id}
-      label={label}
-      onKeyRename={onKeyRename}
-      onKeyRenameBlur={onKeyRenameBlur}
-      onRemoveProperty={onRemoveProperty}
-      readonly={readonly}
-      required={required}
-      schema={schema}
-      uiSchema={uiSchema}
-      registry={registry}
-    >
+    <WrapIfAdditionalTemplate {...props}>
       <Form.Item
         colon={colon}
         hasFeedback={schema.type !== 'array' && schema.type !== 'object'}

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

@@ -133,7 +133,7 @@ export default function ObjectFieldTemplate<
       {canExpand(schema, uiSchema, formData) && (
         <Col span={24}>
           <Row gutter={rowGutter} justify='end'>
-            <Col flex='192px'>
+            <Col flex='120px'>
               <AddButton
                 id={buttonId(fieldPathId, 'add')}
                 className='rjsf-object-property-expand'

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

@@ -32,6 +32,7 @@ export default function WrapIfAdditionalTemplate<
     classNames,
     style,
     disabled,
+    displayLabel,
     id,
     label,
     onRemoveProperty,
@@ -82,7 +83,7 @@ export default function WrapIfAdditionalTemplate<
               className='form-group'
               hasFeedback
               htmlFor={`${id}-key`}
-              label={keyLabel}
+              label={displayLabel ? keyLabel : undefined}
               labelCol={labelCol}
               required={required}
               style={wrapperStyle}
@@ -104,7 +105,7 @@ export default function WrapIfAdditionalTemplate<
         <Col className='form-additional' flex='1'>
           {children}
         </Col>
-        <Col flex='192px'>
+        <Col flex='120px' style={{ marginTop: displayLabel ? '40px' : undefined }}>
           <RemoveButton
             id={buttonId(id, 'remove')}
             className='rjsf-object-property-remove'

packages/antd/test/__snapshots__/Array.test.tsx.snap

@@ -9344,17 +9344,6 @@ exports[`with title and description with global label off checkboxes 1`] = `
         <div
           class="ant-row ant-form-item-row css-dev-only-do-not-override-ac2jek"
         >
-          <div
-            class="ant-col ant-col-24 ant-form-item-label css-dev-only-do-not-override-ac2jek"
-          >
-            <label
-              class=""
-              for="root"
-              title="Test field"
-            >
-              Test field
-            </label>
-          </div>
           <div
             class="ant-col ant-col-24 ant-form-item-control css-dev-only-do-not-override-ac2jek"
           >