Allow form fields' label to accept any node (#526)

src/components/CheckboxField/CheckboxField.jsx

@@ -114,7 +114,7 @@ CheckboxField.propTypes = {
   /**
    * Checkbox field label.
    */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
   /**
    * Placement of the label relative to the input.
    */

src/components/CheckboxField/README.md

@@ -45,6 +45,9 @@ See [API](#api) for all available options.
   send me any emails” which would mean that the user needs to turn the
   checkbox **on** in order for something **not** to happen.
 
+- **Use text labels** unless it is necessary to wrap text label into
+  Popover-like to component to provide additional info about the field.
+
 - Only make the CheckboxField's label invisible when there is **another visual
   clue** to guide users through toggling the input.
 

src/components/FileInputField/FileInputField.jsx

@@ -123,9 +123,9 @@ FileInputField.propTypes = {
    */
   isLabelVisible: PropTypes.bool,
   /**
-   * Text field label.
+   * File input field label.
    */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
   /**
    * Layout of the field.
    *

src/components/FileInputField/README.md

@@ -27,6 +27,9 @@ See [API](#api) for all available options.
   polite phrases like _Please attach your file here_. Short labels will help
   your users accomplish their task faster.
 
+- **Use text labels** unless it is necessary to wrap text label into
+  Popover-like to component to provide additional info about the field.
+
 - Only make the FileInputField's label invisible when there is **another visual
   clue** to guide users through filling the input.
 

src/components/InputGroup/InputGroup.jsx

@@ -151,7 +151,7 @@ InputGroup.propTypes = {
   /**
    * Input group label.
    */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
   /**
    * Layout of the group.
    *

src/components/Radio/README.md

@@ -56,6 +56,9 @@ See [API](#api) for all available options.
   polite phrases like _Please select your favourite fruit_. Short labels will
   help your users accomplish their task faster.
 
+- **Use text labels** unless it is necessary to wrap text label into
+  Popover-like to component to provide additional info about the field.
+
 - Only make the Radio's label invisible when there is **another visual
   clue** to guide users through filling the input.
 

src/components/Radio/Radio.jsx

@@ -157,7 +157,7 @@ Radio.propTypes = {
   /**
    * Label of the group of options.
    */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
   /**
    * Layout of the field.
    *

src/components/SelectField/README.md

@@ -56,6 +56,9 @@ See [API](#api) for all available options.
   polite phrases like _Please select your favourite fruit_. Short labels will
   help your users accomplish their task faster.
 
+- **Use text labels** unless it is necessary to wrap text label into
+  Popover-like to component to provide additional info about the field.
+
 - Only make the SelectField's label invisible when there is **another visual
   clue** to guide users through filling the input. Using the first option as
   label is not recommended either — it disappears once user makes their choice.

src/components/SelectField/SelectField.jsx

@@ -182,7 +182,7 @@ SelectField.propTypes = {
   /**
    * Select field label.
    */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
   /**
    * Layout of the field.
    *

src/components/TextArea/README.md

@@ -24,6 +24,9 @@ See [API](#api) for all available options.
   polite phrases like _Please enter your message_. Short labels will help your
   users accomplish their task faster.
 
+- **Use text labels** unless it is necessary to wrap text label into
+  Popover-like to component to provide additional info about the field.
+
 - Only make the TextArea's label invisible when there is **another visual
   clue** to guide users through filling the input. Using the first option as
   label is not recommended either — it disappears once user makes their choice.

src/components/TextArea/TextArea.jsx

@@ -132,7 +132,7 @@ TextArea.propTypes = {
   /**
    * Text field label.
    */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
   /**
    * Layout of the field.
    *

src/components/TextField/README.md

@@ -36,6 +36,9 @@ See [API](#api) for all available options.
   polite phrases like _Please enter your first name_. Short labels will help
   your users accomplish their task faster.
 
+- **Use text labels** unless it is necessary to wrap text label into
+  Popover-like to component to provide additional info about the field.
+
 - Only make the TextField's label invisible when there is **another visual
   clue** to guide users through filling the input.
 

src/components/TextField/TextField.jsx

@@ -156,7 +156,7 @@ TextField.propTypes = {
   /**
    * Text field label.
    */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
   /**
    * Layout of the field.
    *

src/components/Toggle/README.md

@@ -39,6 +39,9 @@ See [API](#api) for all available options.
   me any emails” which would mean that the user needs to turn the toggle **on**
   in order for something **not** to happen.
 
+- **Use text labels** unless it is necessary to wrap text label into
+  Popover-like to component to provide additional info about the field.
+
 - Only make the Toggle's label invisible when there is **another visual clue**
   to guide users through using the input.
 

src/components/Toggle/Toggle.jsx

@@ -114,7 +114,7 @@ Toggle.propTypes = {
   /**
    * Toggle label.
    */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
   /**
    * Placement of the label relative to the input.
    */