Added possibility to change title and description by ui:schema. (rjsf-team#587)

Author: stepek

README.md

@@ -45,6 +45,8 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) i
  - [Autogenerated widget ids](#autogenerated-widget-ids)
  - [Form action buttons](#form-action-buttons)
  - [Help texts](#help-texts)
+ - [Title texts](#title-texts)
+ - [Description texts](#description-texts)
  - [Auto focus](#auto-focus)
  - [Textarea rows option](#textarea-rows-option)
  - [Placeholders](#placeholders)
@@ -640,6 +642,30 @@ const uiSchema = {
 
 Help texts work for any kind of field at any level, and will always be rendered immediately below the field component widget(s), but after contextualized errors, if any.
 
+### Title texts
+
+Sometimes it's convenient to change title a field; this is the purpose of the `ui:title` uiSchema directive:
+
+```js
+const schema = {type: "string"};
+const uiSchema = {
+ "ui:widget": "password",
+ "ui:title": "Your password"
+};
+```
+
+### Description texts
+
+Sometimes it's convenient to change description a field; this is the purpose of the `ui:description` uiSchema directive:
+
+```js
+const schema = {type: "string"};
+const uiSchema = {
+ "ui:widget": "password",
+ "ui:description": "The best password"
+};
+```
+
 ### Auto focus
 
 If you want to focus on a text input or textarea input/on a widget automatically, just set `ui:autofocus` uiSchema directive to `true`.

playground/samples/simple.js

@@ -40,6 +40,8 @@ module.exports = {
  },
  age: {
  "ui:widget": "updown",
+ "ui:title": "Age of person",
+ "ui:description": "(earthian year)",
  },
  bio: {
  "ui:widget": "textarea",

src/components/fields/SchemaField.js

@@ -191,8 +191,12 @@ function SchemaFieldRender(props) {
 
  const { type } = schema;
  const id = idSchema.$id;
- const label = props.schema.title || schema.title || name;
- const description = props.schema.description || schema.description;
+ const label =
+ uiSchema["ui:title"] || props.schema.title || schema.title || name;
+ const description =
+ uiSchema["ui:description"] ||
+ props.schema.description ||
+ schema.description;
  const errors = __errors;
  const help = uiSchema["ui:help"];
  const hidden = uiSchema["ui:widget"] === "hidden";

test/uiSchema_test.js

@@ -355,6 +355,28 @@ describe("uiSchema", () => {
  });
  });
 
+ describe("ui:title", () => {
+ it("should render the provided title text", () => {
+ const schema = { type: "string" };
+ const uiSchema = { "ui:title": "plop" };
+
+ const { node } = createFormComponent({ schema, uiSchema });
+
+ expect(node.querySelector("label.control-label").textContent).eql("plop");
+ });
+ });
+
+ describe("ui:description", () => {
+ it("should render the provided description text", () => {
+ const schema = { type: "string" };
+ const uiSchema = { "ui:description": "plop" };
+
+ const { node } = createFormComponent({ schema, uiSchema });
+
+ expect(node.querySelector("p.field-description").textContent).eql("plop");
+ });
+ });
+
  it("should accept a react element as help", () => {
  const schema = { type: "string" };
  const uiSchema = { "ui:help": <b>plop</b> };