fix: Reimplement #2537 so that ui:label is respected for array desc…

…ription and title (#3191)

Fix #2535 by reimplementing #2537. Also fixes #3176 by passing uiSchema and schema to the description and title templates.
- In `@rjsf/utils`, updated the props for the description and title templates to add `schema`
  - Also made the `title` and `description` for the array field description and title props as optional
- In all of the themes, ensured that the `schema` is now passed to the all the calls to the description and title templates
  - With the exception of the `antd` theme, removed the logic for conditionally rendering the `ArrayFieldDescriptionTemplate` since that template already handles the condition
  - Deleted the tests for `DescriptionField` and `TitleField` in the `bootstrap-4` theme because they broke, and are redundant anyway given the other tests
- In `@rjsf/core`, updated the `ArrayFieldDescriptionTemplate` and `ArrayFieldTitleTemplate` to not render the template when `ui:label` is false
  - Updated the tests to verify this change
- Updated the `custom-templates.md` file to document the new `schema` prop and add the `uiSchema` prop docs where missing
- Updated the `contributing.md` file to improve developer documentation
- Updated the `CHANGELOG.md` file accordingly

CHANGELOG.md

@@ -18,28 +18,56 @@ should change the heading of the (upcoming) version to include a major version b
 # 5.0.0-beta.11
 
 ## @rjsf/antd
-- Updated `FieldTemplate` to no longer render additional, unnecessary white space for fields that have empty `help` and `extra` information, fixing [#3147](https://github.com/rjsf-team/react-jsonschema-form/issues/3174)  
+- Updated `FieldTemplate` to no longer render additional, unnecessary white space for fields that have empty `help` and `extra` information, fixing [#3147](https://github.com/rjsf-team/react-jsonschema-form/issues/3174)
+- Updated `ArrayFieldTemplate` to always render `ArrayFieldDescriptionTemplate` since that template deals with the optional `description`
+- Pass the `schema` into the `ArrayFieldDescriptionTemplate`, `ArrayFieldTitleTemplate`, `DescriptionFieldTemplate` and `TitleFieldTemplate`, fixing [#3176](https://github.com/rjsf-team/react-jsonschema-form/issues/3176)
 
 ## @rjsf/bootstrap-4
 - Make label generation consistent with other themes by refactoring the code into the `FieldTemplate` instead of having the widgets implementing the label, fixing [#2007](https://github.com/rjsf-team/react-jsonschema-form/issues/2007)
+- Updated `ArrayFieldTemplate` to always render `ArrayFieldDescriptionTemplate` since that template deals with the optional `description`
+- Pass the `schema` into the `ArrayFieldDescriptionTemplate`, `ArrayFieldTitleTemplate`, `DescriptionFieldTemplate` and `TitleFieldTemplate`, fixing [#3176](https://github.com/rjsf-team/react-jsonschema-form/issues/3176)
 
 ## @rjsf/chakra-ui
 - Added support for `chakra-react-select` v4, fixing [#3152](https://github.com/rjsf-team/react-jsonschema-form/issues/3152)
 - In `SelectWidget` use `Select` from `chakra-react-select` for both single- and multiple-choice select
 - In `SelectWidget` multiple-choice select display label rather than value for selected items
+- Updated `ArrayFieldTemplate` to always render `ArrayFieldDescriptionTemplate` since that template deals with the optional `description`
+- Pass the `schema` into the `ArrayFieldDescriptionTemplate`, `ArrayFieldTitleTemplate`, `DescriptionFieldTemplate` and `TitleFieldTemplate`, fixing [#3176](https://github.com/rjsf-team/react-jsonschema-form/issues/3176)
 
 ## @rjsf/core
 - Extended `Form.onChange` to optionally return the `id` of the field that caused the change, fixing [#2768](https://github.com/rjsf-team/react-jsonschema-form/issues/2768)
 - Fixed a regression in earlier v5 beta versions where additional properties could not be added when `additionalProperties` was `true` ([#3719](https://github.com/rjsf-team/react-jsonschema-form/pull/3719)).
 - Fixed a regression in v5 beta version where BooleanField was altering readonly props ([#3188](https://github.com/rjsf-team/react-jsonschema-form/pull/3188).
--
+- Updated `ArrayFieldDescriptionTemplate` and `ArrayFieldTitleTemplate` to not render content when `ui:label` is false, fixing [#2535](https://github.com/rjsf-team/react-jsonschema-form/issues/2535)
+- Updated `ArrayFieldTemplate` to always render `ArrayFieldDescriptionTemplate` since that template deals with the optional `description`
+- Pass the `schema` into the `ArrayFieldDescriptionTemplate`, `ArrayFieldTitleTemplate`, `DescriptionFieldTemplate` and `TitleFieldTemplate`, fixing [#3176](https://github.com/rjsf-team/react-jsonschema-form/issues/3176)
+
+## @rjsf/fluent-ui
+- Updated `ArrayFieldTemplate` to always render `ArrayFieldDescriptionTemplate` since that template deals with the optional `description`
+- Pass the `schema` into the `ArrayFieldDescriptionTemplate`, `ArrayFieldTitleTemplate`, `DescriptionFieldTemplate` and `TitleFieldTemplate`, fixing [#3176](https://github.com/rjsf-team/react-jsonschema-form/issues/3176)
+
+## @rjsf/material-ui
+- Updated `ArrayFieldTemplate` to always render `ArrayFieldDescriptionTemplate` since that template deals with the optional `description`
+- Pass the `schema` into the `ArrayFieldDescriptionTemplate`, `ArrayFieldTitleTemplate`, `DescriptionFieldTemplate` and `TitleFieldTemplate`, fixing [#3176](https://github.com/rjsf-team/react-jsonschema-form/issues/3176)
+
+## @rjsf/mui
+- Updated `ArrayFieldTemplate` to always render `ArrayFieldDescriptionTemplate` since that template deals with the optional `description`
+- Pass the `schema` into the `ArrayFieldDescriptionTemplate`, `ArrayFieldTitleTemplate`, `DescriptionFieldTemplate` and `TitleFieldTemplate`, fixing [#3176](https://github.com/rjsf-team/react-jsonschema-form/issues/3176)
+
+## @rjsf/semantic-ui
+- Updated `ArrayFieldTemplate` to always render `ArrayFieldDescriptionTemplate` since that template deals with the optional `description`
+- Pass the `schema` into the `ArrayFieldDescriptionTemplate`, `ArrayFieldTitleTemplate`, `DescriptionFieldTemplate` and `TitleFieldTemplate`, fixing [#3176](https://github.com/rjsf-team/react-jsonschema-form/issues/3176)
+
 ## @rjsf/utils
 - Updated the `onChange` prop on `FieldProps` and `FieldTemplateProps` to add an optional `id` parameter to the callback.
+- Updated the `DescriptionFieldProps` and `TitleFieldProps` to add a new required `schema` prop. Also updated the `ArrayFieldDescriptionTemplate` and `ArrayFieldTitleTemplate` to make `description` and `title` optional while pulling all the other props but `id` from the associated type.
 
 ## Dev / docs / playground
 - Added an error boundary to prevent the entire app from crashing when an error is thrown by Form. See [#3164](https://github.com/rjsf-team/react-jsonschema-form/pull/3164) for closed issues.
 - Updated the playground to log the `id` of the field being changed on the `onChange` handler
-- Updated `form-props.md` file to describe the new `id` parameter being returned by the `Form.onChange` handler
+- Updated `form-props.md` to describe the new `id` parameter being returned by the `Form.onChange` handler
+- Updated `custom-templates.md` to add the new `schema` prop to the `ArrayFieldDescriptionTemplate`, `ArrayFieldTitleTemplate`, `DescriptionFieldTemplate` and `TitleFieldTemplate` documentation
+- Updated the `contributing.md` to describe setting up the `husky` precommit hooks for the first time `git clone` of the repo; Also added guidance for developing on underpowered computers; Finally discussed code-coverage requirements for some packages.
 
 # 5.0.0-beta.10
 

docs/advanced-customization/custom-templates.md

@@ -169,6 +169,7 @@ The following props are passed to each `ArrayFieldDescriptionTemplate`:
 
 - `description`: The description of the array field being rendered.
 - `idSchema`: The idSchema of the array field in the hierarchy.
+- `schema`: The schema object for this array field.
 - `uiSchema`: The uiSchema object for this array field.
 - `registry`: The `registry` object.
 
@@ -264,6 +265,7 @@ The following props are passed to each `ArrayFieldTitleTemplate`:
 
 - `title`: The title of the array field being rendered.
 - `idSchema`: The idSchema of the array field in the hierarchy.
+- `schema`: The schema object for this array field.
 - `uiSchema`: The uiSchema object for this array field.
 - `required`: A boolean value stating if the field is required
 - `registry`: The `registry` object.
@@ -405,6 +407,8 @@ The following props are passed to the `DescriptionFieldTemplate`:
 
 - `description`: The description of the field being rendered.
 - `id`: The id of the field in the hierarchy.
+- `schema`: The schema object for the field.
+- `uiSchema`: The uiSchema object for the field.
 - `registry`: The `registry` object.
 
 ## ErrorListTemplate
@@ -709,7 +713,8 @@ The following props are passed to each `TitleFieldTemplate`:
 
 - `id`: The id of the field in the hierarchy.
 - `title`: The title of the field being rendered.
-- `uiSchema`: The uiSchema object for this field.
+- `schema`: The schema object for the field.
+- `uiSchema`: The uiSchema object for the field.
 - `required`: A boolean value stating if the field is required
 - `registry`: The `registry` object.
 

docs/contributing.md

@@ -12,13 +12,24 @@ npm start
 
 All packages will be live-built, and a live development server showcasing components with hot reload enabled will then run at [localhost:8080](http://localhost:8080).
 
+### First time step
+
+If this is the first time you have cloned the repo, run the `npm run prepare` script that will set up `husky` to provide a git precommit hook that will format and lint any code you have added to a PR.
+
+### Optional development process
+With the large number of packages, sometimes running `npm run build` or `npm start` from the root directory will overwhelm an underpowered computer.
+If that is the situation for you, you can instead use `npm run build-serial` to build the packages one at a time instead of all at once.
+Also, if you are only working on one package, you can `npm run build` and `npm run test` from within the subdirectory.
+Finally, you can simply `npm start` inside of the `playground` directory to test changes if you have already built all of your packages, without needing to watch all of the packages via the root directory `npm start`.
+
 ## Cloud builds
 
 When building in environments with limited memory, such as Netlify, it's recommended to use `npm run build-serial` that builds the packages serially. 
 
 ## Coding style
 
-All the JavaScript code in this project conforms to the [prettier](https://github.com/prettier/prettier) coding style. Code is automatically prettified upon commit using precommit hooks.
+All the JavaScript/Typescript code in this project conforms to the [prettier](https://github.com/prettier/prettier) coding style.
+Code is automatically prettified upon commit using precommit hooks, assuming you followed the `First time step` above.
 
 ## Documentation
 
@@ -39,9 +50,14 @@ npm test
 
 ### Code coverage
 
-Code coverage reports are currently available only for the `@rjsf/core` package. They are generated using [nyc](https://github.com/istanbuljs/nyc) each time the `npm test-coverage` script is run.
+Code coverage reports are currently available only for the `@rjsf/core` theme package.
+They are generated using [nyc](https://github.com/istanbuljs/nyc) each time the `npm test-coverage` script is run.
 The full report can be seen by opening `./coverage/lcov-report/index.html`.
 
+#### Utils and validator-ajvX code coverage
+
+100% code coverage is required by the `@rjsf/utils` and `@rjsf/validator-ajv6` and `@rjsf/validator-ajv8` tests.
+If you make changes to those libraries, you will have to maintain that coverage, otherwise the tests will fail.
 
 ## Releasing
 

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

@@ -72,23 +72,23 @@ const ArrayFieldTemplate = ({
               idSchema={idSchema}
               required={required}
               title={uiOptions.title || title}
+              schema={schema}
               uiSchema={uiSchema}
               registry={registry}
             />
           </Col>
         )}
-
         {(uiOptions.description || schema.description) && (
           <Col span={24} style={DESCRIPTION_COL_STYLE}>
             <ArrayFieldDescriptionTemplate
               description={uiOptions.description || schema.description || ""}
               idSchema={idSchema}
+              schema={schema}
               uiSchema={uiSchema}
               registry={registry}
             />
           </Col>
         )}
-
         <Col className="row array-item-list" span={24}>
           {items &&
             items.map(({ key, ...itemProps }) => (

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

@@ -122,6 +122,7 @@ const ObjectFieldTemplate = ({
               id={`${idSchema.$id}-title`}
               required={required}
               title={uiOptions.title || title}
+              schema={schema}
               uiSchema={uiSchema}
               registry={registry}
             />
@@ -132,6 +133,8 @@ const ObjectFieldTemplate = ({
             <DescriptionFieldTemplate
               description={uiOptions.description || description!}
               id={`${idSchema.$id}-description`}
+              schema={schema}
+              uiSchema={uiSchema}
               registry={registry}
             />
           </Col>

packages/bootstrap-4/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -51,18 +51,18 @@ const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
           <ArrayFieldTitleTemplate
             idSchema={idSchema}
             title={uiOptions.title || title}
+            schema={schema}
             uiSchema={uiSchema}
             required={required}
             registry={registry}
           />
-          {(uiOptions.description || schema.description) && (
-            <ArrayFieldDescriptionTemplate
-              idSchema={idSchema}
-              description={(uiOptions.description || schema.description)!}
-              uiSchema={uiSchema}
-              registry={registry}
-            />
-          )}
+          <ArrayFieldDescriptionTemplate
+            idSchema={idSchema}
+            description={uiOptions.description || schema.description}
+            schema={schema}
+            uiSchema={uiSchema}
+            registry={registry}
+          />
           <Container
             fluid
             key={`array-item-list-${idSchema.$id}`}

packages/bootstrap-4/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -47,14 +47,17 @@ const ObjectFieldTemplate = ({
           id={`${idSchema.$id}-title`}
           title={uiOptions.title || title}
           required={required}
-          registry={registry}
+          schema={schema}
           uiSchema={uiSchema}
+          registry={registry}
         />
       )}
       {(uiOptions.description || description) && (
         <DescriptionFieldTemplate
           id={`${idSchema.$id}-description`}
           description={uiOptions.description || description!}
+          schema={schema}
+          uiSchema={uiSchema}
           registry={registry}
         />
       )}

packages/chakra-ui/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -47,18 +47,18 @@ const ArrayFieldTemplate = (props: ArrayFieldTemplateProps) => {
       <ArrayFieldTitleTemplate
         idSchema={idSchema}
         title={uiOptions.title || title}
+        schema={schema}
         uiSchema={uiSchema}
         required={required}
         registry={registry}
       />
-      {(uiOptions.description || schema.description) && (
-        <ArrayFieldDescriptionTemplate
-          idSchema={idSchema}
-          description={(uiOptions.description || schema.description)!}
-          uiSchema={uiSchema}
-          registry={registry}
-        />
-      )}
+      <ArrayFieldDescriptionTemplate
+        idSchema={idSchema}
+        description={uiOptions.description || schema.description}
+        schema={schema}
+        uiSchema={uiSchema}
+        registry={registry}
+      />
       <Grid key={`array-item-list-${idSchema.$id}`}>
         <GridItem>
           {items.length > 0 &&

packages/chakra-ui/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -45,6 +45,7 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
           id={`${idSchema.$id}-title`}
           title={uiOptions.title || title}
           required={required}
+          schema={schema}
           uiSchema={uiSchema}
           registry={registry}
         />
@@ -53,6 +54,8 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
         <DescriptionFieldTemplate
           id={`${idSchema.$id}-description`}
           description={uiOptions.description || description!}
+          schema={schema}
+          uiSchema={uiSchema}
           registry={registry}
         />
       )}

packages/core/src/components/fields/SchemaField.tsx

@@ -264,6 +264,8 @@ function SchemaFieldRender<T, F>(props: FieldProps<T, F>) {
       <DescriptionFieldTemplate
         id={`${id}__description`}
         description={description}
+        schema={schema}
+        uiSchema={uiSchema}
         registry={registry}
       />
     ),

packages/core/src/components/templates/ArrayFieldDescriptionTemplate.tsx

@@ -13,11 +13,12 @@ import {
 export default function ArrayFieldDescriptionTemplate<T = any, F = any>(
   props: ArrayFieldDescriptionProps
 ) {
-  const { idSchema, description, registry, uiSchema } = props;
-  if (!description) {
+  const { idSchema, description, registry, schema, uiSchema } = props;
+  const options = getUiOptions<T, F>(uiSchema);
+  const { label: displayLabel = true } = options;
+  if (!description || !displayLabel) {
     return null;
   }
-  const options = getUiOptions<T, F>(uiSchema);
   const DescriptionFieldTemplate = getTemplate<
     "DescriptionFieldTemplate",
     T,
@@ -28,6 +29,8 @@ export default function ArrayFieldDescriptionTemplate<T = any, F = any>(
     <DescriptionFieldTemplate
       id={id}
       description={description}
+      schema={schema}
+      uiSchema={uiSchema}
       registry={registry}
     />
   );