Skip to content

Restored uiSchema.classNames with deprecation warning #3041

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 26 additions & 1 deletion docs/5.x upgrade guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
10 changes: 9 additions & 1 deletion packages/core/src/components/fields/SchemaField.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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);
}
Expand Down
14 changes: 13 additions & 1 deletion packages/core/test/uiSchema_test.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,9 @@ describe("uiSchema", () => {
bar: {
type: "string",
},
baz: {
type: "string",
},
},
};

Expand All @@ -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;
});
});

Expand Down