Repository: mozilla-services/react-jsonschema-form
Pull request #587 (2017-05-23 10:53:54)

Added possibility to change title and description by ui:schema.
### Reasons for making this change
Added possibility to change title and description of field using ui:schema.

### Checklist

* [x] **I'm updating documentation**
  - [x] I've checked the rendering of the Markdown text I've added
  - [x] If I'm adding a new section, I've updated the Table of Content
* [x] **I'm adding or updating code**
  - [x] I've added and/or updated tests
  - [x] I've updated docs if needed
  - [x] I've run `npm run cs-format` on my branch to conform my code to [prettier](https://github.com/prettier/prettier) coding style
* [x] **I'm adding a new feature**
  - [x] I've updated the playground with an example use of the feature


n1k0: Title and description are part of the JSONSchema spec, why would one want to duplicate the source for these information?
stepek: This is no duplication of data, because main purpose is add possibility to change title and description, (for e.g. locale settings); if ui:title is not setted, user will see jsonschema title.
n1k0: Ok I could see use cases for people using generated schemas or things like that. Could you please add tests and update docs for this patch? Thanks.
stepek: @n1k0 Done

Patch:
diff --git a/README.md b/README.md
index 09b0ad744..29dec165c 100644
--- a/README.md
+++ b/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`.
diff --git a/playground/samples/simple.js b/playground/samples/simple.js
index e2e11b2b1..f30e10430 100644
--- a/playground/samples/simple.js
+++ b/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",
diff --git a/src/components/fields/SchemaField.js b/src/components/fields/SchemaField.js
index 2a4443b05..f4f69dd5c 100644
--- a/src/components/fields/SchemaField.js
+++ b/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 patch:
diff --git a/test/uiSchema_test.js b/test/uiSchema_test.js
index fe85e3696..50d5a020d 100644
--- a/test/uiSchema_test.js
+++ b/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> };