feat: Add formItemProps to UI schemas

src/controls/BooleanControl.tsx

@@ -1,8 +1,12 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import { ControlProps, isDescriptionHidden } from "@jsonforms/core"
+import {
+  ControlElement,
+  ControlProps,
+  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"
 
 export function BooleanControl({
@@ -39,21 +43,17 @@ export function BooleanControl({
 
   const showTooltip =
     !showDescription && !isDescriptionHidden(visible, description, true, true)
+  const uiSchema = uischema as ControlUISchema<typeof uischema> & ControlElement
+  const formItemProps = 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,7 +1,12 @@
-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) => {
@@ -14,6 +19,10 @@ export const NumericControl = (props: ControlProps & RendererProps) => {
     { required: props.required, message: `${props.label} is required` },
   ]
 
+  const uiSchema = props.uischema as ControlUISchema<typeof props.uischema> &
+    ControlElement
+  const formItemProps = uiSchema.formItemProps ?? {}
+
   return (
     <Form.Item
       label={props.label}
@@ -23,6 +32,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,8 +1,13 @@
-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) => {
@@ -17,6 +22,10 @@ export const NumericSliderControl = (props: ControlProps & RendererProps) => {
     { required: props.required, message: `${props.label} is required` },
   ]
 
+  const uiSchema = props.uischema as ControlUISchema<typeof props.uischema> &
+    ControlElement
+  const formItemProps = uiSchema.formItemProps ?? {}
+
   return (
     <Form.Item
       label={props.label}
@@ -26,6 +35,7 @@ export const NumericSliderControl = (props: ControlProps & RendererProps) => {
       initialValue={initialValue}
       rules={rules}
       validateTrigger={["onBlur"]}
+      {...formItemProps}
     >
       <Row>
         <Col span={8}>{Slider({ ...props })}</Col>

src/controls/PrimitiveArrayControl.tsx

@@ -1,4 +1,5 @@
 import {
+  ControlElement,
   Helpers,
   composePaths,
   createDefaultValue,
@@ -11,7 +12,7 @@ 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"> & {
@@ -68,11 +69,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 uiSchema = uischema as ControlUISchema<typeof uischema> & ControlElement
+  const options: ArrayControlOptions = uiSchema.options ?? {}
+  const formItemProps = 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,11 +1,10 @@
 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 {
@@ -26,6 +25,7 @@ export function TextControl({
   id,
   uischema,
 }: TextControlProps) {
+  const uiSchema = uischema as ControlUISchema<typeof uischema> & ControlElement
   const setInitialValue = useCallback(
     (value: unknown) => {
       if (typeof value !== "number") return value
@@ -37,8 +37,9 @@ export function TextControl({
   )
   const ariaLabel = label || schema.description
   const options: TextControlOptions =
-    (uischema.options as TextControlOptions) ?? {}
-  const tooltip = options.tooltip
+    (uiSchema.options as TextControlOptions) ?? {}
+  const formItemProps = uiSchema.formItemProps ?? {}
+  const tooltip = options.tooltip ? options.tooltip : formItemProps.tooltip
   const placeholderText = options.placeholderText
   const form = Form.useFormInstance()
   const rules: Rule[] = [
@@ -60,14 +61,7 @@ export function TextControl({
       name={path}
       rules={rules}
       validateTrigger={["onBlur"]}
-      {...(tooltip
-        ? {
-            tooltip: {
-              title: tooltip,
-              icon: <QuestionCircleOutlined />,
-            },
-          }
-        : {})}
+      tooltip={tooltip}
     >
       <TextControlInput
         aria-label={ariaLabel}

src/controls/combinators/AnyOfControl.tsx

@@ -3,6 +3,7 @@ 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 {
+  ControlElement,
   CombinatorRendererProps,
   createCombinatorRenderInfos,
   createDefaultValue,
@@ -12,6 +13,7 @@ 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"
 
 export function AnyOfControl({
@@ -73,18 +75,22 @@ export function AnyOfControl({
 
   const labelDescription = Helpers.createLabelDescriptionFrom(uischema, schema)
 
+  const uiSchema = uischema as ControlUISchema<typeof uischema> & ControlElement
+  const formItemProps = 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}
           renderInfos={combinatorRenderInfos}
           selectedIndex={selectedIndex}
           setSelectedIndex={setSelectedIndex}
-          uischema={uischema}
+          uischema={uiSchema}
           path={path}
           // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
           data={data}

src/controls/combinators/OneOfControl.tsx

@@ -1,4 +1,5 @@
 import {
+  ControlElement,
   CombinatorRendererProps,
   createCombinatorRenderInfos,
   JsonSchema,
@@ -35,13 +36,20 @@ export function OneOfControl({
     uischemas,
   )
 
+  const uiSchema = uischema as ControlUISchema<typeof uischema> & ControlElement
+  const formItemProps = 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"
+        {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
           <ControlLabel
-            uischema={uischema as ControlUISchema<unknown>}
+            uischema={uiSchema as ControlUISchema<unknown>}
             schema={schema}
           />
         ) : null}
@@ -50,7 +58,7 @@ export function OneOfControl({
           renderInfos={oneOfRenderInfos}
           selectedIndex={selectedIndex}
           setSelectedIndex={setSelectedIndex}
-          uischema={uischema}
+          uischema={uiSchema}
           path={path}
           // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
           data={data}

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,
+  },
+}

src/stories/controls/NumericSliderControl.stories.tsx

@@ -4,6 +4,8 @@ import { StorybookAntDJsonForm } from "../../common/StorybookAntDJsonForm"
 import {
   numericSliderBasisPointsSchema,
   numericSliderVerticalUISchema,
+  numericSliderTooltipUISchema,
+  numericSliderKelvinSchema,
   numericSliderTemperatureSchema,
   numericSliderTemperatureUISchema,
   numericSliderFinalGradeSchema,
@@ -60,3 +62,11 @@ export const OptionalUSDWithDefault: Story = {
     uiSchema: numericSliderUSDUISchema,
   },
 }
+
+export const WithTooltip: Story = {
+  tags: ["autodocs"],
+  args: {
+    jsonSchema: numericSliderKelvinSchema,
+    uiSchema: numericSliderTooltipUISchema,
+  },
+}

src/stories/controls/ObjectControl.stories.tsx

@@ -5,6 +5,7 @@ import { StorybookAntDJsonForm } from "../../common/StorybookAntDJsonForm"
 import {
   objectSchema,
   objectUISchemaWithName,
+  objectUISchemaWithTooltip,
   objectUISchemaWithNameAndLastName,
   objectUISchemaWithRule,
 } from "../../testSchemas/objectSchema"
@@ -56,3 +57,11 @@ export const ObjectWithRuleHidingLastNameIfNameIsJohn: Story = {
     uiSchema: objectUISchemaWithRule,
   },
 }
+
+export const ObjectWithTooltip: Story = {
+  tags: ["autodocs"],
+  args: {
+    jsonSchema: objectSchema,
+    uiSchema: objectUISchemaWithTooltip,
+  },
+}

src/stories/controls/OneOfControl.stories.tsx

@@ -163,6 +163,22 @@ const segmentedUISchema = {
   ],
 } satisfies UISchema<typeof schema>
 
+const tooltipUISchema = {
+  type: "VerticalLayout",
+  elements: [
+    {
+      type: "Control",
+      scope: "#/properties/deliveryOption",
+      options: {
+        optionType: "segmented",
+      },
+      formItemProps: {
+        tooltip: "We charge a $3 delivery fee",
+      },
+    },
+  ],
+} satisfies UISchema<typeof schema>
+
 export const Segmented: Story = {
   parameters: { controls: { expanded: true } },
   tags: ["autodocs"],
@@ -292,3 +308,12 @@ export const OneOfArray: Story = {
     },
   },
 }
+
+export const OneOfTooltip: Story = {
+  parameters: { controls: { expanded: true } },
+  tags: ["autodocs"],
+  args: {
+    jsonSchema: schema,
+    uiSchema: tooltipUISchema,
+  },
+}