Show description for boolean fields (rjsf-team#498)

Author: Reggino

playground/samples/widgets.js

@@ -26,15 +26,18 @@ module.exports = {
  properties: {
  default: {
  type: "boolean",
- title: "checkbox (default)"
+ title: "checkbox (default)",
+ description: "This is the checkbox-description"
  },
  radio: {
  type: "boolean",
- title: "radio buttons"
+ title: "radio buttons",
+ description: "This is the radio-description"
  },
  select: {
  type: "boolean",
- title: "select box"
+ title: "select box",
+ description: "This is the select-description"
  }
  }
  },

src/components/widgets/CheckboxWidget.js

@@ -1,5 +1,5 @@
 import React, {PropTypes} from "react";
-
+import DescriptionField from "../fields/DescriptionField.js";
 
 function CheckboxWidget({
  schema,
@@ -13,6 +13,7 @@ function CheckboxWidget({
 }) {
  return (
  <div className={`checkbox ${disabled ? "disabled" : ""}`}>
+ { schema.description && <DescriptionField description={ schema.description }/> }
  <label>
  <input type="checkbox"
  id={id}

test/BooleanField_test.js

@@ -47,6 +47,16 @@ describe("BooleanField", () => {
  .to.have.length.of(1);
  });
 
+ it("should render a description", () => {
+ const {node} = createFormComponent({schema: {
+ type: "boolean",
+ description: "my description"
+ }});
+
+ const description = node.querySelector(".field-description");
+ expect(description.textContent).eql("my description");
+ });
+
  it("should assign a default value", () => {
  const {node} = createFormComponent({schema: {
  type: "boolean",