Restored uiSchema.classNames with deprecation warning (rjsf-team#3041)

* Restored uiSchema.classNames with deprecation warning
- Updated `SchemaField` to restore support for `uiSchema.classNames` with big fat deprecation warning
- Updated the existing `classNames` test to verify restored code and deprecation warning
- NOTE: Will fix up the documentation in the other PR

* - Responded to reviewer feedback

* - Adjusted warning message

* - Responded to reviewer feedback and updated migration guide

Author: heath-freenome

docs/5.x upgrade guide.md

@@ -262,8 +262,33 @@ From v5, the child fields will correctly use the parent id when generating its o
 
 ##### Non-standard `enumNames` property
 
-`enumNames` is a non-standard JSON Schema field that was deprecated in version 5. `enumNames` could be included in the schema to apply labels that differed from an enumeration value. This behavior can still be accomplished with `oneOf` or `anyOf` containing `const` values, so this behavior may be removed from a future major version of RJSF. For more information, see [#532](https://github.com/rjsf-team/react-jsonschema-form/issues/532).
+`enumNames` is a non-standard JSON Schema field that was deprecated in version 5.
+`enumNames` could be included in the schema to apply labels that differed from an enumeration value.
+This behavior can still be accomplished with `oneOf` or `anyOf` containing `const` values, so `enumNames` support may be removed from a future major version of RJSF.
+For more information, see [#532](https://github.com/rjsf-team/react-jsonschema-form/issues/532).
 
+##### uiSchema.classNames
+
+In versions previous to 5, `uiSchema.classNames` was the only property that did not require the `ui:` prefix.
+Additionally, it did not support being added into the `ui:options` object.
+This was fixed in version 5 to be consistent with all the other properties in the `uiSchema`, so the `uiSchema.classNames` support may be removed from a future major version of RJSF.
+
+If you are using `classNames` as follows, simply add the `ui:` prefix to it to remove the deprecation warning that will be displayed for each `uiSchema.classNames` you have:
+
+```jsx
+// This uiSchema will log a deprecation warning to the console
+const uiSchema = {
+  title: {
+    "classNames": "myClass" 
+  }
+};
+// This uiSchema will not
+const uiSchema = {
+  title: {
+    "ui:classNames": "myClass"
+  }
+};
+```
 
 ### `@rjsf/material-ui` BREAKING CHANGES
 

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

@@ -209,7 +209,7 @@ function SchemaFieldRender<T, F>(props: FieldProps<T, F>) {
 
   const { __errors, ...fieldErrorSchema } = errorSchema || {};
   // See #439: uiSchema: Don't pass consumed class names to child components
-  const fieldUiSchema = omit(uiSchema, ["ui:classNames"]);
+  const fieldUiSchema = omit(uiSchema, ["ui:classNames", "classNames"]);
   if ("ui:options" in fieldUiSchema) {
     fieldUiSchema["ui:options"] = omit(fieldUiSchema["ui:options"], [
       "classNames",
@@ -255,6 +255,14 @@ function SchemaFieldRender<T, F>(props: FieldProps<T, F>) {
   if (!hideError && errors && errors.length > 0) {
     classNames.push("field-error has-error has-danger");
   }
+  if (uiSchema?.classNames) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        "'uiSchema.classNames' is deprecated and may be removed in a major release; Use 'ui:classNames' instead."
+      );
+    }
+    classNames.push(uiSchema.classNames);
+  }
   if (uiOptions.classNames) {
     classNames.push(uiOptions.classNames);
   }

packages/core/test/uiSchema_test.js

@@ -31,6 +31,9 @@ describe("uiSchema", () => {
         bar: {
           type: "string",
         },
+        baz: {
+          type: "string",
+        },
       },
     };
 
@@ -43,15 +46,24 @@ describe("uiSchema", () => {
           classNames: "class-for-bar another-for-bar",
         },
       },
+      baz: {
+        classNames: "class-for-baz",
+      },
     };
 
     it("should apply custom class names to target widgets", () => {
+      sandbox.stub(console, "warn");
+
       const { node } = createFormComponent({ schema, uiSchema });
-      const [foo, bar] = node.querySelectorAll(".field-string");
+      const [foo, bar, baz] = node.querySelectorAll(".field-string");
 
       expect(foo.classList.contains("class-for-foo")).eql(true);
       expect(bar.classList.contains("class-for-bar")).eql(true);
       expect(bar.classList.contains("another-for-bar")).eql(true);
+      expect(baz.classList.contains("class-for-baz")).eql(true);
+      expect(
+        console.warn.calledWithMatch(/'uiSchema.classNames' is deprecated/)
+      ).to.be.true;
     });
   });