fix: many bugs related to titles, descriptions, labels not being disp…

…layed correctly Fixes rjsf-team#827, rjsf-team#2636, rjsf-team#2399, rjsf-team#2791, rjsf-team#3231, and rjsf-team#3531 so that titles, descriptions and labels are picked up from uiSchema then schema and are hidden correctly when `label` in uiSchema is false - Updated `@rjsf/utils` to add `displayLabel` to `WidgetProps` - Updated `@rjsf/core` to fix the bugs as follows: - Updated `ArrayField`, `MultiSchemaField`, `StringField` to pass the label as `uiOptions.title || schema.title || name` as well as passing `displayLabel` from the `uiOptions` - Updated `ObjectField` to not pass `title` or `description` when `displayLabel` is false and `ObjectTitleTemplate` to only check `title` and `description` - Updated `ArrayFieldDescriptionTemplate` and `ArrayFieldTitleTemplate` to pass `globalUiOptions` into `getUiOptions` to pick up the global `label` - Updated `CheckboxWidget` to not show description when `displayLabel` is false - Updated `@rjsf/antd` to fix the bugs as follows: - Updated `ObjectTitleTemplate` to only check `title` and `description` since they will be falsey from `ObjectField` when `displayLabel` is false - Updated `CheckboxWidget` to render the description using the `DescriptionFieldTemplate`, except when `displayLabel` is false - Updated `@rjsf/bootstrap-4` to fix the bugs as follows: - Updated `ObjectTitleTemplate` to only check `title` and `description` since they will be falsey from `ObjectField` when `displayLabel` is false - Updated `CheckboxWidget` to render the description using the `DescriptionFieldTemplate`, except when `displayLabel` is false - Updated `RangeWidget` to only pass `label` in the `extraProps` when `displayLabel` is true - Updated `@rjsf/chakra-ui` to fix the bugs as follows: - Updated `ObjectTitleTemplate` to only check `title` and `description` since they will be falsey from `ObjectField` when `displayLabel` is false - Updated `CheckboxWidget` to render the description using the `DescriptionFieldTemplate`, except when `displayLabel` is false - Updated `BaseInputTemplate`, `CheckboxesWidget`, `RadioWidget`, `RangeWidget`, `SelectWidget`, `TextareaWidget` and `UpDownWidget` to hide `label` when `displayLabel` and `label` are falsy - Updated test snapshots due to fixed bugs - Updated `@rjsf/fluent-ui` to fix the bugs as follows: - Updated `ObjectTitleTemplate` to only check `title` and `description` since they will be falsey from `ObjectField` when `displayLabel` is false - Updated `CheckboxWidget` to render the description using the `DescriptionFieldTemplate`, except when `displayLabel` is false - Updated `BaseInputTemplate`, `CheckboxesWidget`, `ColorWidget`, `DateWidget`, `RadioWidget`, `RangeWidget`, `SelectWidget` and `UpDownWidget` to hide `label` when `displayLabel` and `label` are falsy - Updated `FieldTemplate` to hide description when `displayLabel` is false - Updated test snapshots due to fixed bugs - Updated `@rjsf/material-ui` and `@rjsf/mui` to fix the bugs as follows: - Updated `ObjectTitleTemplate` to only check `title` and `description` since they will be falsey from `ObjectField` when `displayLabel` is false - Updated `CheckboxWidget` to render the description using the `DescriptionFieldTemplate`, except when `displayLabel` is false - Updated `BaseInputTemplate`, `CheckboxesWidget`, `RadioWidget`, `RangeWidget` and `SelectWidget` to hide `label` when `displayLabel` and `label` are falsy - Updated test snapshots due to fixed bugs - Updated `@rjsf/semantic-ui` to fix the bugs as follows: - Updated `ObjectTitleTemplate` to only check `title` and `description` since they will be falsey from `ObjectField` when `displayLabel` is false - Updated `CheckboxWidget` to render the description using the `DescriptionFieldTemplate`, except when `displayLabel` is false - Updated `BaseInputTemplate`, `CheckboxesWidget`, `SelectWidget` and `TextareaWidget` to hide `label` when `displayLabel` and `label` are falsy - Updated test snapshots due to fixed bugs - Updated the `widget` documentation for the new `displayLabel` prop - Updated the `CHANGELOG.md` file accordingly
heath-freenome · Mar 22, 2023 · 75b89d2 · 75b89d2
1 parent 353cce8
commit 75b89d2
Show file tree

Hide file tree

Showing 65 changed files with 598 additions and 328 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -21,14 +21,57 @@ should change the heading of the (upcoming) version to include a major version b
 ## @rjsf/antd
 
 - Added the ability to use a tooltip for a description
+- Updated `ObjectFieldTemplate` to hide the titles and descriptions when `displayLabel` is true (including globally), fixing #3231
+- Updated `CheckboxWidget` to show the `description` appropriately, fixing #2791
+
+## @rjsf/bootstrap-4
+
+- Updated `ObjectFieldTemplate` to hide the titles and descriptions when `displayLabel` is true (including globally), fixing #3231
+- Updated `CheckboxWidget` to show the `description` appropriately, fixing #2791
+
+## @rjsf/chakra-ui
+
+- Fix: MUI radio widget initializes as uncontrolled when schema has no default value, fixing [#3511](https://github.com/rjsf-team/react-jsonschema-form/issues/3511)
+- Updated `ObjectFieldTemplate` to hide the titles and descriptions when `displayLabel` is true (including globally), fixing #3231
+- Updated `CheckboxesWidget`, `CheckboxWidget`, `RadioWidget` and `SelectWidget` to hide labels when `displayLabel` is true (including globally)
+- Updated `CheckboxWidget` to show the `description` appropriately, fixing #2791
 
 ## @rjsf/core
 
 - Updated `FileWidget` to show a preview of images and a download link for non-images when the `filePreview` options is set to true in the `UiSchema`
+- Updated `ArrayField`, `BooleanField`, `MultiSelectField` and `StringField` to pass `label` (read from `uiSchema.title` || `schema.title` || `name`) and `displayLabel` down to all of the `Widgets` they render, fixing #827, #2636, #2399 and #3531
+- Updated `ObjectField`, `ObjectFieldTemplate`, `ArrayFieldDescriptionTemplate`, `ArrayFieldTitleTemplate` and `CheckboxWidget` to hide the titles and descriptions when `displayLabel` is true (including globally), fixing #3231
+
+## @rjsf/fluent-ui
+
+- Updated `FieldTemplate` and `ObjectFieldTemplate` to hide the titles and descriptions when `displayLabel` is true (including globally), fixing #3231
+- Updated `BaseInputTemplate`, `CheckboxesWidget`, `CheckboxWidget`, `ColorWidget`, `DateWidget`, `RadioWidget`, `RangeWidget`, `SelectWidget` and `UpDownWidget` to hide labels when `displayLabel` is true (including globally)
+- Updated `CheckboxWidget` to show the `description` appropriately, fixing #2791
+
+## @rjsf/material-ui
+
+- Fix: MUI radio widget initializes as uncontrolled when schema has no default value, fixing [#3511](https://github.com/rjsf-team/react-jsonschema-form/issues/3511)
+- Updated `ObjectFieldTemplate` to hide the titles and descriptions when `displayLabel` is true (including globally), fixing #3231
+- Updated `BaseInputTemplate`, `CheckboxesWidget`, `CheckboxWidget`, `RadioWidget`, `RangeWidget` and `SelectWidget` to hide labels when `displayLabel` is true (including globally)
+- Updated `CheckboxWidget` to show the `description` appropriately, fixing #2791
+
+## @rjsf/mui
+
+- Fix: MUI radio widget initializes as uncontrolled when schema has no default value, fixing [#3511](https://github.com/rjsf-team/react-jsonschema-form/issues/3511)
+- Updated `ObjectFieldTemplate` to hide the titles and descriptions when `displayLabel` is true (including globally), fixing #3231
+- Updated `BaseInputTemplate`, `CheckboxesWidget`, `CheckboxWidget`, `RadioWidget`, `RangeWidget` and `SelectWidget` to hide labels when `displayLabel` is true (including globally)
+- Updated `CheckboxWidget` to show the `description` appropriately, fixing #2791
+
+## @rjsf/semantic-ui
+- 
+- Updated `ObjectFieldTemplate` to hide the titles and descriptions when `displayLabel` is true (including globally), fixing #3231
+- Updated `BaseInputTemplate`, `CheckboxesWidget`, `CheckboxWidget`, `SelectWidget` and `TextareaWidget` to hide labels when `displayLabel` is true (including globally)
+- Updated `CheckboxWidget` to show the `description` appropriately, fixing #2791
 
 ## @rjsf/utils
 
 - Updated the `UiSchema` to support the optional `filePreview?: boolean` option and to add a new `TranslatableString.PreviewLabel` to the `enums`
+- Updated the `WidgetProps` to add an optional `displayLabel?: boolean` field to better support hiding labels
 
 ## @rjsf/validator-ajv8
 
@@ -38,18 +81,7 @@ should change the heading of the (upcoming) version to include a major version b
 
 - Added a new `AntD Customization` documentation with references to it in the `form-props` and `uiSchema` documentation
 - Updated the `uiSchema` documentation to add the `filePreview` option
-
-## @rjsf/chakra-ui
-
-- Fix: MUI radio widget initializes as uncontrolled when schema has no default value, fixing [#3511](https://github.com/rjsf-team/react-jsonschema-form/issues/3511)
-
-## @rjsf/material-ui
-
-- Fix: MUI radio widget initializes as uncontrolled when schema has no default value, fixing [#3511](https://github.com/rjsf-team/react-jsonschema-form/issues/3511)
-
-## @rjsf/mui
-
-- Fix: MUI radio widget initializes as uncontrolled when schema has no default value, fixing [#3511](https://github.com/rjsf-team/react-jsonschema-form/issues/3511)
+- Updated the `widgets` documentation to add the new `displayLabel` optional prop
 
 # 5.3.1
 

diff --git a/packages/antd/src/templates/ArrayFieldTemplate/index.tsx b/packages/antd/src/templates/ArrayFieldTemplate/index.tsx
@@ -93,7 +93,7 @@ export default function ArrayFieldTemplate<
               {(uiOptions.description || schema.description) && (
                 <Col span={24} style={DESCRIPTION_COL_STYLE}>
                   <ArrayFieldDescriptionTemplate
-                    description={uiOptions.description || schema.description || ''}
+                    description={uiOptions.description || schema.description}
                     idSchema={idSchema}
                     schema={schema}
                     uiSchema={uiSchema}

diff --git a/packages/antd/src/templates/ObjectFieldTemplate/index.tsx b/packages/antd/src/templates/ObjectFieldTemplate/index.tsx
@@ -120,23 +120,23 @@ export default function ObjectFieldTemplate<
         return (
           <fieldset id={idSchema.$id}>
             <Row gutter={rowGutter}>
-              {(uiOptions.title || title) && (
+              {title && (
                 <Col className={labelColClassName} span={24}>
                   <TitleFieldTemplate
                     id={titleId<T>(idSchema)}
-                    title={uiOptions.title || title}
+                    title={title}
                     required={required}
                     schema={schema}
                     uiSchema={uiSchema}
                     registry={registry}
                   />
                 </Col>
               )}
-              {(uiOptions.description || description) && (
+              {description && (
                 <Col span={24} style={DESCRIPTION_COL_STYLE}>
                   <DescriptionFieldTemplate
                     id={descriptionId<T>(idSchema)}
-                    description={uiOptions.description || description!}
+                    description={description}
                     schema={schema}
                     uiSchema={uiSchema}
                     registry={registry}

diff --git a/packages/antd/src/widgets/CheckboxWidget/index.tsx b/packages/antd/src/widgets/CheckboxWidget/index.tsx
@@ -2,6 +2,8 @@ import { FocusEvent } from 'react';
 import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
 import {
   ariaDescribedByIds,
+  descriptionId,
+  getTemplate,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
@@ -19,8 +21,29 @@ export default function CheckboxWidget<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
 >(props: WidgetProps<T, S, F>) {
-  const { autofocus, disabled, formContext, id, label, onBlur, onChange, onFocus, readonly, value } = props;
+  const {
+    autofocus,
+    disabled,
+    formContext,
+    id,
+    label,
+    displayLabel = true,
+    onBlur,
+    onChange,
+    onFocus,
+    readonly,
+    value,
+    registry,
+    options,
+    schema,
+    uiSchema,
+  } = props;
   const { readonlyAsDisabled = true } = formContext as GenericObjectType;
+  const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
+    'DescriptionFieldTemplate',
+    registry,
+    options
+  );
 
   const handleChange = ({ target }: CheckboxChangeEvent) => onChange(target.checked);
 
@@ -34,19 +57,33 @@ export default function CheckboxWidget<
     onBlur: !readonly ? handleBlur : undefined,
     onFocus: !readonly ? handleFocus : undefined,
   };
+  const description = options.description ?? schema.description;
 
   return (
-    <Checkbox
-      autoFocus={autofocus}
-      checked={typeof value === 'undefined' ? false : value}
-      disabled={disabled || (readonlyAsDisabled && readonly)}
-      id={id}
-      name={id}
-      onChange={!readonly ? handleChange : undefined}
-      {...extraProps}
-      aria-describedby={ariaDescribedByIds<T>(id)}
-    >
-      {label}
-    </Checkbox>
+    <>
+      {displayLabel && !!description && (
+        <div>
+          <DescriptionFieldTemplate
+            id={descriptionId<T>(id)}
+            description={description}
+            schema={schema}
+            uiSchema={uiSchema}
+            registry={registry}
+          />
+        </div>
+      )}
+      <Checkbox
+        autoFocus={autofocus}
+        checked={typeof value === 'undefined' ? false : value}
+        disabled={disabled || (readonlyAsDisabled && readonly)}
+        id={id}
+        name={id}
+        onChange={!readonly ? handleChange : undefined}
+        {...extraProps}
+        aria-describedby={ariaDescribedByIds<T>(id)}
+      >
+        {displayLabel ? label : ''}
+      </Checkbox>
+    </>
   );
 }
diff --git a/packages/bootstrap-4/src/CheckboxWidget/CheckboxWidget.tsx b/packages/bootstrap-4/src/CheckboxWidget/CheckboxWidget.tsx
@@ -1,6 +1,8 @@
 import { FocusEvent } from 'react';
 import {
   ariaDescribedByIds,
+  descriptionId,
+  getTemplate,
   WidgetProps,
   schemaRequiresTrueValue,
   StrictRJSFSchema,
@@ -14,26 +16,55 @@ export default function CheckboxWidget<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any
 >(props: WidgetProps<T, S, F>) {
-  const { id, value, disabled, readonly, label, schema, autofocus, onChange, onBlur, onFocus } = props;
+  const {
+    id,
+    value,
+    disabled,
+    readonly,
+    label,
+    displayLabel = true,
+    schema,
+    autofocus,
+    options,
+    onChange,
+    onBlur,
+    onFocus,
+    registry,
+    uiSchema,
+  } = props;
   // Because an unchecked checkbox will cause html5 validation to fail, only add
   // the "required" attribute if the field value must be "true", due to the
   // "const" or "enum" keywords
   const required = schemaRequiresTrueValue<S>(schema);
+  const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
+    'DescriptionFieldTemplate',
+    registry,
+    options
+  );
 
   const _onChange = ({ target: { checked } }: FocusEvent<HTMLInputElement>) => onChange(checked);
   const _onBlur = ({ target: { checked } }: FocusEvent<HTMLInputElement>) => onBlur(id, checked);
   const _onFocus = ({ target: { checked } }: FocusEvent<HTMLInputElement>) => onFocus(id, checked);
 
-  const desc = label || schema.description;
+  const description = options.description || schema.description;
   return (
     <Form.Group
       className={`checkbox ${disabled || readonly ? 'disabled' : ''}`}
       aria-describedby={ariaDescribedByIds<T>(id)}
     >
+      {displayLabel && !!description && (
+        <DescriptionFieldTemplate
+          id={descriptionId<T>(id)}
+          description={description}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
       <Form.Check
         id={id}
         name={id}
-        label={desc}
+        label={displayLabel && !!label ? label : undefined}
         checked={typeof value === 'undefined' ? false : value}
         required={required}
         disabled={disabled || readonly}

diff --git a/packages/bootstrap-4/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx b/packages/bootstrap-4/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
@@ -45,20 +45,20 @@ export default function ObjectFieldTemplate<
   } = registry.templates;
   return (
     <>
-      {(uiOptions.title || title) && (
+      {title && (
         <TitleFieldTemplate
           id={titleId<T>(idSchema)}
-          title={uiOptions.title || title}
+          title={title}
           required={required}
           schema={schema}
           uiSchema={uiSchema}
           registry={registry}
         />
       )}
-      {(uiOptions.description || description) && (
+      {description && (
         <DescriptionFieldTemplate
           id={descriptionId<T>(idSchema)}
-          description={uiOptions.description || description!}
+          description={description}
           schema={schema}
           uiSchema={uiSchema}
           registry={registry}

diff --git a/packages/bootstrap-4/src/RangeWidget/RangeWidget.tsx b/packages/bootstrap-4/src/RangeWidget/RangeWidget.tsx
@@ -3,10 +3,10 @@ import { FormContextType, getTemplate, RJSFSchema, StrictRJSFSchema, WidgetProps
 export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: WidgetProps<T, S, F>
 ) {
-  const { value, label, options, registry } = props;
+  const { value, label, displayLabel = true, options, registry } = props;
   const BaseInputTemplate = getTemplate<'BaseInputTemplate', T, S, F>('BaseInputTemplate', registry, options);
   return (
-    <BaseInputTemplate {...props} extraProps={label}>
+    <BaseInputTemplate {...props} extraProps={displayLabel ? label : undefined}>
       <span className='range-view'>{value}</span>
     </BaseInputTemplate>
   );

diff --git a/packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx b/packages/chakra-ui/src/BaseInputTemplate/BaseInputTemplate.tsx
@@ -21,6 +21,7 @@ export default function BaseInputTemplate<
     type,
     value,
     label,
+    displayLabel = true,
     schema,
     uiSchema,
     onChange,
@@ -34,19 +35,15 @@ export default function BaseInputTemplate<
     autofocus,
     placeholder,
     disabled,
-    registry,
   } = props;
   const inputProps = getInputProps<T, S, F>(schema, type, options);
   const chakraProps = getChakra({ uiSchema });
-  const { schemaUtils } = registry;
 
   const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
     onChange(value === '' ? options.emptyValue : value);
   const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement>) => onBlur(id, value);
   const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement>) => onFocus(id, value);
 
-  const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
-
   return (
     <FormControl
       mb={1}
@@ -56,11 +53,11 @@ export default function BaseInputTemplate<
       isReadOnly={readonly}
       isInvalid={rawErrors && rawErrors.length > 0}
     >
-      {displayLabel ? (
+      {displayLabel && !!label && (
         <FormLabel htmlFor={id} id={`${id}-label`}>
-          {label || schema.title}
+          {label}
         </FormLabel>
-      ) : null}
+      )}
       <Input
         id={id}
         name={id}