feat: Add formItemProps to UI schemas

src/controls/BooleanControl.tsx

@@ -1,10 +1,18 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import { ControlProps, isDescriptionHidden } from "@jsonforms/core"
+import {
+  ControlElement,
+  ControlProps as JSFControlProps,
+  isDescriptionHidden,
+} from "@jsonforms/core"
 import { Form } from "antd"
 import { Checkbox } from "../antd/Checkbox"
-import { QuestionCircleOutlined } from "@ant-design/icons"
+import { ControlUISchema } from "../ui-schema"
 import { withJsonFormsControlProps } from "@jsonforms/react"
 
+type ControlProps = JSFControlProps & {
+  uischema: ControlUISchema<unknown> | ControlElement
+}
+
 export function BooleanControl({
   data,
   visible,
@@ -39,21 +47,17 @@ export function BooleanControl({
 
   const showTooltip =
     !showDescription && !isDescriptionHidden(visible, description, true, true)
+  const formItemProps =
+    "formItemProps" in uischema ? uischema.formItemProps : {}
+  const tooltip = showTooltip && description ? description : undefined
+
   return (
     <Form.Item
       id={id}
       name={path}
       initialValue={data ?? schema.default}
-      {...{
-        ...(showTooltip
-          ? {
-              tooltip: {
-                title: description,
-                icon: <QuestionCircleOutlined />,
-              },
-            }
-          : {}),
-      }}
+      tooltip={tooltip}
+      {...formItemProps}
     >
       <Checkbox
         id={`${id}-input`}

src/controls/NumericControl.tsx

@@ -1,10 +1,20 @@
-import type { ControlProps, RendererProps } from "@jsonforms/core"
+import type {
+  ControlElement,
+  ControlProps,
+  RendererProps,
+} from "@jsonforms/core"
 import { Col, Form } from "antd"
 import type { Rule } from "antd/es/form"
 import { InputNumber } from "../antd/InputNumber"
+import { ControlUISchema } from "../ui-schema"
 import { withJsonFormsControlProps } from "@jsonforms/react"
 
-export const NumericControl = (props: ControlProps & RendererProps) => {
+type NumericControlProps = ControlProps &
+  RendererProps & {
+    uischema: ControlUISchema<unknown> | ControlElement
+  }
+
+export const NumericControl = (props: NumericControlProps) => {
   if (!props.visible) return null
 
   const initialValue =
@@ -14,6 +24,9 @@ export const NumericControl = (props: ControlProps & RendererProps) => {
     { required: props.required, message: `${props.label} is required` },
   ]
 
+  const formItemProps =
+    "formItemProps" in props.uischema ? props.uischema.formItemProps : {}
+
   return (
     <Form.Item
       label={props.label}
@@ -23,6 +36,7 @@ export const NumericControl = (props: ControlProps & RendererProps) => {
       initialValue={initialValue}
       rules={rules}
       validateTrigger={["onBlur"]}
+      {...formItemProps}
     >
       <Col span={18}>{InputNumber({ ...props })}</Col>
     </Form.Item>

src/controls/NumericSliderControl.tsx

@@ -1,11 +1,21 @@
-import type { ControlProps, RendererProps } from "@jsonforms/core"
+import type {
+  ControlElement,
+  ControlProps,
+  RendererProps,
+} from "@jsonforms/core"
 import { Col, Form, Row } from "antd"
 import type { Rule } from "antd/es/form"
 import { InputNumber } from "../antd/InputNumber"
 import { Slider } from "../antd/Slider"
+import { ControlUISchema } from "../ui-schema"
 import { withJsonFormsControlProps } from "@jsonforms/react"
 
-export const NumericSliderControl = (props: ControlProps & RendererProps) => {
+type NumericSliderControlProps = RendererProps &
+  ControlProps & {
+    uischema: ControlUISchema<unknown> | ControlElement
+  }
+
+export const NumericSliderControl = (props: NumericSliderControlProps) => {
   if (!props.visible) return null
 
   const initialValue =
@@ -17,6 +27,9 @@ export const NumericSliderControl = (props: ControlProps & RendererProps) => {
     { required: props.required, message: `${props.label} is required` },
   ]
 
+  const formItemProps =
+    "formItemProps" in props.uischema ? props.uischema.formItemProps : {}
+
   return (
     <Form.Item
       label={props.label}
@@ -26,6 +39,7 @@ export const NumericSliderControl = (props: ControlProps & RendererProps) => {
       initialValue={initialValue}
       rules={rules}
       validateTrigger={["onBlur"]}
+      {...formItemProps}
     >
       <Row>
         <Col span={8}>{Slider({ ...props })}</Col>

src/controls/ObjectArrayControl.tsx

@@ -1,6 +1,7 @@
 import {
+  ControlElement,
   Helpers,
-  ArrayLayoutProps,
+  ArrayLayoutProps as JSFArrayLayoutProps,
   composePaths,
   createDefaultValue,
   findUISchema,
@@ -12,10 +13,14 @@ import {
 import { Flex, Form, List, Button } from "antd"
 import range from "lodash.range"
 import { useEffect, useMemo } from "react"
-import { ArrayControlOptions } from "../ui-schema"
+import { ArrayControlOptions, ControlUISchema } from "../ui-schema"
 import { usePreviousValue } from "../common/usePreviousValue"
 import React from "react"
 
+type ArrayLayoutProps = JSFArrayLayoutProps & {
+  uischema: ControlUISchema<unknown> | ControlElement
+}
+
 export function ObjectArrayControl({
   data,
   enabled,
@@ -58,6 +63,9 @@ export function ObjectArrayControl({
     }
   })
 
+  const formItemProps =
+    "formItemProps" in uischema ? uischema.formItemProps : {}
+
   const labelDescription = Helpers.createLabelDescriptionFrom(uischema, schema)
   const label = labelDescription.show ? labelDescription.text : ""
 
@@ -86,6 +94,7 @@ export function ObjectArrayControl({
       required={required}
       rules={[{ required: required, message: `${label} is required` }]}
       validateTrigger={["onBlur"]}
+      {...formItemProps}
     >
       <>{label}</>
       <List<unknown>

src/controls/PrimitiveArrayControl.tsx

@@ -1,4 +1,5 @@
 import {
+  ControlElement,
   Helpers,
   composePaths,
   createDefaultValue,
@@ -11,11 +12,12 @@ import {
 } from "@jsonforms/react"
 import { Form, Button, Col, Row } from "antd"
 import React, { useEffect, useMemo } from "react"
-import { ArrayControlOptions } from "../ui-schema"
+import { ArrayControlOptions, ControlUISchema } from "../ui-schema"
 import { usePreviousValue } from "../common/usePreviousValue"
 
 type ArrayControlProps = Omit<JSFArrayControlProps, "data"> & {
   data?: unknown[]
+  uischema: ControlUISchema<unknown> | ControlElement
 }
 
 export function PrimitiveArrayControl({
@@ -68,11 +70,18 @@ export function PrimitiveArrayControl({
   const labelDescription = Helpers.createLabelDescriptionFrom(uischema, schema)
   const label = labelDescription.text || props.label // nullish coalescing doesn't work here because labelDescription.text can be an empty string =(
 
-  const options: ArrayControlOptions =
-    (uischema.options as ArrayControlOptions) ?? {}
+  const options: ArrayControlOptions = uischema.options ?? {}
+  const formItemProps =
+    "formItemProps" in uischema ? uischema.formItemProps : {}
 
   return (
-    <Form.Item id={id} name={path} label={label} required={required}>
+    <Form.Item
+      id={id}
+      name={path}
+      label={label}
+      required={required}
+      {...formItemProps}
+    >
       <Form.List name={path} initialValue={data ?? [undefined]}>
         {(fields, { add, remove }, { errors }) => (
           <Row justify={"start"}>

src/controls/TextControl.tsx

@@ -1,17 +1,17 @@
 import type { ChangeEvent } from "react"
 import { useCallback, useEffect } from "react"
 import { Input, Form } from "antd"
-import { QuestionCircleOutlined } from "@ant-design/icons"
 import type { Rule } from "antd/es/form"
-import type { ControlProps } from "@jsonforms/core"
+import type { ControlElement, ControlProps } from "@jsonforms/core"
 
-import type { TextControlOptions } from "../ui-schema"
+import type { ControlUISchema, TextControlOptions } from "../ui-schema"
 import { assertNever } from "../common/assert-never"
 import { withJsonFormsControlProps } from "@jsonforms/react"
 interface TextControlProps extends ControlProps {
   data: string
   handleChange(path: string, value: string): void
   path: string
+  uischema: ControlUISchema<unknown> | ControlElement
 }
 
 export function TextControl({
@@ -38,7 +38,9 @@ export function TextControl({
   const ariaLabel = label || schema.description
   const options: TextControlOptions =
     (uischema.options as TextControlOptions) ?? {}
-  const tooltip = options.tooltip
+  const formItemProps =
+    "formItemProps" in uischema ? uischema.formItemProps : {}
+  const tooltip = options.tooltip ? options.tooltip : formItemProps?.tooltip
   const placeholderText = options.placeholderText
   const form = Form.useFormInstance()
   const rules: Rule[] = [
@@ -60,14 +62,8 @@ export function TextControl({
       name={path}
       rules={rules}
       validateTrigger={["onBlur"]}
-      {...(tooltip
-        ? {
-            tooltip: {
-              title: tooltip,
-              icon: <QuestionCircleOutlined />,
-            },
-          }
-        : {})}
+      tooltip={tooltip}
+      {...formItemProps}
     >
       <TextControlInput
         aria-label={ariaLabel}

src/controls/combinators/AnyOfControl.tsx

@@ -3,7 +3,8 @@ AnyOfControl should be used when a form item would control other elements within
 AnyOfRenderer does not have options to render the label as a title
 */
 import {
-  CombinatorRendererProps,
+  ControlElement,
+  CombinatorRendererProps as JSFCombinatorRendererProps,
   createCombinatorRenderInfos,
   createDefaultValue,
   Helpers,
@@ -12,8 +13,13 @@ import {
 import { JsonFormsDispatch, withJsonFormsOneOfProps } from "@jsonforms/react"
 import { Form, Space } from "antd"
 import { useEffect, useState } from "react"
+import { ControlUISchema } from "../../ui-schema"
 import { CombinatorSchemaSwitcher } from "./CombinatorSchemaSwitcher"
 
+type CombinatorRendererProps = JSFCombinatorRendererProps & {
+  uischema: ControlUISchema<unknown> | ControlElement
+}
+
 export function AnyOfControl({
   handleChange,
   data,
@@ -72,12 +78,15 @@ export function AnyOfControl({
   ])
 
   const labelDescription = Helpers.createLabelDescriptionFrom(uischema, schema)
+  const formItemProps =
+    "formItemProps" in uischema ? uischema.formItemProps : {}
 
   return (
     <Space direction="vertical" style={{ width: "100%" }} size="middle">
       <Form.Item
         rules={[{ required, message: `${schema.title} is required` }]}
         label={labelDescription.show ? labelDescription.text : ""}
+        {...formItemProps}
       >
         <CombinatorSchemaSwitcher
           config={config as unknown}

src/controls/combinators/OneOfControl.tsx

@@ -1,5 +1,6 @@
 import {
-  CombinatorRendererProps,
+  ControlElement,
+  CombinatorRendererProps as JSFCombinatorRendererProps,
   createCombinatorRenderInfos,
   JsonSchema,
 } from "@jsonforms/core"
@@ -10,6 +11,10 @@ import { ControlUISchema } from "../../ui-schema"
 import { ControlLabel } from "../../common/ControlLabel"
 import { CombinatorSchemaSwitcher } from "./CombinatorSchemaSwitcher"
 
+type CombinatorRendererProps = JSFCombinatorRendererProps & {
+  uischema: ControlUISchema<unknown> | ControlElement
+}
+
 export function OneOfControl({
   handleChange,
   data,
@@ -35,8 +40,15 @@ export function OneOfControl({
     uischemas,
   )
 
+  const formItemProps =
+    "formItemProps" in uischema ? uischema.formItemProps : {}
+
   return (
-    <Form.Item required={required} label={uischema.label ? "" : schema.title}>
+    <Form.Item
+      required={required}
+      label={uischema.label ? "" : schema.title}
+      {...formItemProps}
+    >
       <Space direction="vertical" style={{ width: "100%" }} size="middle">
         {uischema.type === "Control" && uischema.label ? ( // I don't think it's possible for type to be other than "Control"
           // but until we improve the UISchema types a bit, it's hard to be sure

src/stories/controls/AnyOfControl.stories.tsx

@@ -5,6 +5,7 @@ import {
   SplitterUISchemaRegistryEntry,
   splitterAnyOfJsonSchema,
   AnyOfWithDefaultsBaseUISchema,
+  AnyOfTooltipUISchema,
   AnyOfWithDefaultsSchema,
   AnyOfWithDefaultsUISchemaRegistryEntries,
 } from "../../testSchemas/anyOfSchema"
@@ -138,3 +139,13 @@ export const WithDefaultValues: Story<typeof AnyOfWithDefaultsSchema> = {
   },
   argTypes: { jsonSchema: { control: "object" } },
 }
+
+export const Tooltip: Story<typeof AnyOfWithDefaultsSchema> = {
+  parameters: { controls: { expanded: true } },
+  tags: ["autodocs"],
+  args: {
+    jsonSchema: AnyOfWithDefaultsSchema,
+    uiSchemaRegistryEntries: AnyOfWithDefaultsUISchemaRegistryEntries,
+    uiSchema: AnyOfTooltipUISchema,
+  },
+}

src/stories/controls/NumericControl.stories.tsx

@@ -7,6 +7,7 @@ import {
   numericWeightSchema,
   numericSheepSchema,
   numericVerticalUISchema,
+  numericTooltipUISchema,
   numericPriceSchema,
   numericUSDUISchema,
   numericROISchema,
@@ -77,3 +78,11 @@ export const RequiredPercentage: Story = {
     uiSchema: numericPercentageUISchema,
   },
 }
+
+export const WithTooltip: Story = {
+  tags: ["autodocs"],
+  args: {
+    jsonSchema: numericSheepSchema,
+    uiSchema: numericTooltipUISchema,
+  },
+}