feat: Add formItemProps to UI schemas

src/controls/BooleanControl.tsx

@@ -2,7 +2,7 @@
 import { ControlProps, isDescriptionHidden } from "@jsonforms/core"
 import { Form } from "antd"
 import { Checkbox } from "../antd/Checkbox"
-import { QuestionCircleOutlined } from "@ant-design/icons"
+import { tooltipStringToAntdLabelTooltip } from "./utils"
 import { withJsonFormsControlProps } from "@jsonforms/react"
 
 export function BooleanControl({
@@ -39,21 +39,16 @@ export function BooleanControl({
 
   const showTooltip =
     !showDescription && !isDescriptionHidden(visible, description, true, true)
+  const tooltip =
+    showTooltip && description
+      ? tooltipStringToAntdLabelTooltip(description)
+      : undefined
   return (
     <Form.Item
       id={id}
       name={path}
       initialValue={data ?? schema.default}
-      {...{
-        ...(showTooltip
-          ? {
-              tooltip: {
-                title: description,
-                icon: <QuestionCircleOutlined />,
-              },
-            }
-          : {}),
-      }}
+      tooltip={tooltip}
     >
       <Checkbox
         id={`${id}-input`}

src/controls/NumericControl.tsx

@@ -2,6 +2,8 @@ import type { ControlProps, RendererProps } from "@jsonforms/core"
 import { Col, Form } from "antd"
 import type { Rule } from "antd/es/form"
 import { InputNumber } from "../antd/InputNumber"
+import type { NumericControlOptions } from "../ui-schema"
+import { tooltipStringToAntdLabelTooltip } from "./utils"
 import { withJsonFormsControlProps } from "@jsonforms/react"
 
 export const NumericControl = (props: ControlProps & RendererProps) => {
@@ -14,6 +16,11 @@ export const NumericControl = (props: ControlProps & RendererProps) => {
     { required: props.required, message: `${props.label} is required` },
   ]
 
+  const options: NumericControlOptions = props.uischema.options ?? {}
+  const tooltip = options.tooltip
+    ? tooltipStringToAntdLabelTooltip(options.tooltip)
+    : undefined
+
   return (
     <Form.Item
       label={props.label}
@@ -23,6 +30,7 @@ export const NumericControl = (props: ControlProps & RendererProps) => {
       initialValue={initialValue}
       rules={rules}
       validateTrigger={["onBlur"]}
+      tooltip={tooltip}
     >
       <Col span={18}>{InputNumber({ ...props })}</Col>
     </Form.Item>

src/controls/NumericSliderControl.tsx

@@ -3,6 +3,8 @@ import { Col, Form, Row } from "antd"
 import type { Rule } from "antd/es/form"
 import { InputNumber } from "../antd/InputNumber"
 import { Slider } from "../antd/Slider"
+import type { NumericControlOptions } from "../ui-schema"
+import { tooltipStringToAntdLabelTooltip } from "./utils"
 import { withJsonFormsControlProps } from "@jsonforms/react"
 
 export const NumericSliderControl = (props: ControlProps & RendererProps) => {
@@ -17,6 +19,11 @@ export const NumericSliderControl = (props: ControlProps & RendererProps) => {
     { required: props.required, message: `${props.label} is required` },
   ]
 
+  const options: NumericControlOptions = props.uischema.options ?? {}
+  const tooltip = options.tooltip
+    ? tooltipStringToAntdLabelTooltip(options.tooltip)
+    : undefined
+
   return (
     <Form.Item
       label={props.label}
@@ -26,6 +33,7 @@ export const NumericSliderControl = (props: ControlProps & RendererProps) => {
       initialValue={initialValue}
       rules={rules}
       validateTrigger={["onBlur"]}
+      tooltip={tooltip}
     >
       <Row>
         <Col span={8}>{Slider({ ...props })}</Col>

src/controls/PrimitiveArrayControl.tsx

@@ -13,6 +13,7 @@ import { Form, Button, Col, Row } from "antd"
 import React, { useEffect, useMemo } from "react"
 import { ArrayControlOptions } from "../ui-schema"
 import { usePreviousValue } from "../common/usePreviousValue"
+import { tooltipStringToAntdLabelTooltip } from "./utils"
 
 type ArrayControlProps = Omit<JSFArrayControlProps, "data"> & {
   data?: unknown[]
@@ -68,11 +69,19 @@ 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 tooltip = options.tooltip
+    ? tooltipStringToAntdLabelTooltip(options.tooltip)
+    : undefined
 
   return (
-    <Form.Item id={id} name={path} label={label} required={required}>
+    <Form.Item
+      id={id}
+      name={path}
+      label={label}
+      required={required}
+      tooltip={tooltip}
+    >
       <Form.List name={path} initialValue={data ?? [undefined]}>
         {(fields, { add, remove }, { errors }) => (
           <Row justify={"start"}>

src/controls/TextControl.tsx

@@ -2,12 +2,12 @@ import type { ChangeEvent } from "react"
 import { useCallback, useEffect } from "react"
 import type { InputProps } from "antd"
 import { Input, Form } from "antd"
-import { QuestionCircleOutlined } from "@ant-design/icons"
 import type { Rule } from "antd/es/form"
 import type { TextAreaProps } from "antd/es/input"
 import type { ControlProps } from "@jsonforms/core"
 
 import type { TextControlOptions, TextControlType } from "../ui-schema"
+import { tooltipStringToAntdLabelTooltip } from "./utils"
 import { assertNever } from "../common/assert-never"
 import { withJsonFormsControlProps } from "@jsonforms/react"
 interface TextControlProps extends ControlProps {
@@ -42,6 +42,8 @@ export function TextControl({
     (uischema.options as TextControlOptions) ?? {}
   const textControlType: TextControlType = options.type ?? "singleline"
   const tooltip = options.tooltip
+    ? tooltipStringToAntdLabelTooltip(options.tooltip)
+    : undefined
   const placeholderText = options.placeholderText
   const form = Form.useFormInstance()
   const rules: Rule[] = [
@@ -63,14 +65,7 @@ export function TextControl({
       name={path}
       rules={rules}
       validateTrigger={["onBlur"]}
-      {...(tooltip
-        ? {
-            tooltip: {
-              title: tooltip,
-              icon: <QuestionCircleOutlined />,
-            },
-          }
-        : {})}
+      tooltip={tooltip}
     >
       <TextControlInput
         type={textControlType}

src/controls/combinators/AnyOfControl.tsx

@@ -13,6 +13,8 @@ import { JsonFormsDispatch, withJsonFormsOneOfProps } from "@jsonforms/react"
 import { Form, Space } from "antd"
 import { useEffect, useState } from "react"
 import { CombinatorSchemaSwitcher } from "./CombinatorSchemaSwitcher"
+import { AnyOfControlOptions } from "../../ui-schema"
+import { tooltipStringToAntdLabelTooltip } from "../utils"
 
 export function AnyOfControl({
   handleChange,
@@ -72,12 +74,17 @@ export function AnyOfControl({
   ])
 
   const labelDescription = Helpers.createLabelDescriptionFrom(uischema, schema)
+  const options: AnyOfControlOptions = uischema.options ?? {}
+  const tooltip = options.tooltip
+    ? tooltipStringToAntdLabelTooltip(options.tooltip)
+    : undefined
 
   return (
     <Space direction="vertical" style={{ width: "100%" }} size="middle">
       <Form.Item
         rules={[{ required, message: `${schema.title} is required` }]}
         label={labelDescription.show ? labelDescription.text : ""}
+        tooltip={tooltip}
       >
         <CombinatorSchemaSwitcher
           config={config as unknown}

src/controls/combinators/OneOfControl.tsx

@@ -6,7 +6,8 @@ import {
 import { JsonFormsDispatch, withJsonFormsOneOfProps } from "@jsonforms/react"
 import { Form, Space } from "antd"
 import { useState } from "react"
-import { ControlUISchema } from "../../ui-schema"
+import { ControlUISchema, OneOfControlOptions } from "../../ui-schema"
+import { tooltipStringToAntdLabelTooltip } from "../utils"
 import { ControlLabel } from "../../common/ControlLabel"
 import { CombinatorSchemaSwitcher } from "./CombinatorSchemaSwitcher"
 
@@ -35,8 +36,17 @@ export function OneOfControl({
     uischemas,
   )
 
+  const options: OneOfControlOptions = uischema.options ?? {}
+  const tooltip = options.tooltip
+    ? tooltipStringToAntdLabelTooltip(options.tooltip)
+    : undefined
+
   return (
-    <Form.Item required={required} label={uischema.label ? "" : schema.title}>
+    <Form.Item
+      required={required}
+      label={uischema.label ? "" : schema.title}
+      tooltip={tooltip}
+    >
       <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/controls/utils.ts → src/controls/utils.tsx

@@ -1,3 +1,6 @@
+import { QuestionCircleOutlined } from "@ant-design/icons"
+import { LabelTooltipType } from "antd/es/form/FormItemLabel"
+
 export function decimalToPercentage(value?: number) {
   if (value === undefined) return ""
   const percentage = parseFloat((value * 100).toFixed(10)) // accounting for 10 digits after the decimal point
@@ -11,3 +14,10 @@
 export const coerceToInteger = (value: number) => Math.round(value)
 
 export const coerceToNumber = (value: number) => Number(value)
+
+export const tooltipStringToAntdLabelTooltip = (
+  tooltip: string,
+): LabelTooltipType => ({
+  title: tooltip,
+  icon: <QuestionCircleOutlined />,
+})

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

src/stories/controls/PrimitiveArrayControl.stories.tsx

@@ -4,6 +4,7 @@ import { StorybookAntDJsonForm } from "../../common/StorybookAntDJsonForm"
 import {
   stringArrayControlJsonSchema,
   arrayControlUISchema,
+  arrayControlTooltipUISchema,
 } from "../../testSchemas/arraySchema"
 
 const meta: Meta<typeof StorybookAntDJsonForm> = {
@@ -84,3 +85,22 @@ export const PrePopulatedArray: Story = {
     data: { assets: [1, 2, 3] },
   },
 }
+
+export const WithTooltip: Story = {
+  tags: ["autodocs"],
+  args: {
+    jsonSchema: {
+      type: "object",
+      properties: {
+        assets: {
+          type: "array",
+          items: {
+            type: "number",
+          },
+        },
+      },
+    } satisfies JSONSchema,
+    uiSchema: arrayControlTooltipUISchema,
+    data: { assets: [1, 2, 3] },
+  },
+}