From 8dddbbda0823c5cfb34bc3ba95f6ddc0b4b13833 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bed=C5=99ich=20Schindler?= <bedrich.schindler@gmail.com>
Date: Thu, 30 May 2024 11:06:33 +0200
Subject: [PATCH] Allow form fields' `label` to accept any node (#526)

---
 src/components/CheckboxField/CheckboxField.jsx   | 2 +-
 src/components/CheckboxField/README.md           | 3 +++
 src/components/FileInputField/FileInputField.jsx | 4 ++--
 src/components/FileInputField/README.md          | 3 +++
 src/components/InputGroup/InputGroup.jsx         | 2 +-
 src/components/Radio/README.md                   | 3 +++
 src/components/Radio/Radio.jsx                   | 2 +-
 src/components/SelectField/README.md             | 3 +++
 src/components/SelectField/SelectField.jsx       | 2 +-
 src/components/TextArea/README.md                | 3 +++
 src/components/TextArea/TextArea.jsx             | 2 +-
 src/components/TextField/README.md               | 3 +++
 src/components/TextField/TextField.jsx           | 2 +-
 src/components/Toggle/README.md                  | 3 +++
 src/components/Toggle/Toggle.jsx                 | 2 +-
 15 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/components/CheckboxField/CheckboxField.jsx b/src/components/CheckboxField/CheckboxField.jsx
index 33d4fc18..8e531b10 100644
--- a/src/components/CheckboxField/CheckboxField.jsx
+++ b/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.
    */
diff --git a/src/components/CheckboxField/README.md b/src/components/CheckboxField/README.md
index 5b793c22..03abd789 100644
--- a/src/components/CheckboxField/README.md
+++ b/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.
 
diff --git a/src/components/FileInputField/FileInputField.jsx b/src/components/FileInputField/FileInputField.jsx
index dfddfb36..103f1d15 100644
--- a/src/components/FileInputField/FileInputField.jsx
+++ b/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.
    *
diff --git a/src/components/FileInputField/README.md b/src/components/FileInputField/README.md
index cc2ada30..be96559d 100644
--- a/src/components/FileInputField/README.md
+++ b/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.
 
diff --git a/src/components/InputGroup/InputGroup.jsx b/src/components/InputGroup/InputGroup.jsx
index e68eb9bd..191476b4 100644
--- a/src/components/InputGroup/InputGroup.jsx
+++ b/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.
    *
diff --git a/src/components/Radio/README.md b/src/components/Radio/README.md
index e0a9a382..62732904 100644
--- a/src/components/Radio/README.md
+++ b/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.
 
diff --git a/src/components/Radio/Radio.jsx b/src/components/Radio/Radio.jsx
index b1fb853f..cdf21b33 100644
--- a/src/components/Radio/Radio.jsx
+++ b/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.
    *
diff --git a/src/components/SelectField/README.md b/src/components/SelectField/README.md
index e1a5f23b..a53ec790 100644
--- a/src/components/SelectField/README.md
+++ b/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.
diff --git a/src/components/SelectField/SelectField.jsx b/src/components/SelectField/SelectField.jsx
index d1cd1c34..6ff4d590 100644
--- a/src/components/SelectField/SelectField.jsx
+++ b/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.
    *
diff --git a/src/components/TextArea/README.md b/src/components/TextArea/README.md
index 27055a87..24ac15a4 100644
--- a/src/components/TextArea/README.md
+++ b/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.
diff --git a/src/components/TextArea/TextArea.jsx b/src/components/TextArea/TextArea.jsx
index f1c11ebe..3f8af742 100644
--- a/src/components/TextArea/TextArea.jsx
+++ b/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.
    *
diff --git a/src/components/TextField/README.md b/src/components/TextField/README.md
index af547a89..24b1a8f7 100644
--- a/src/components/TextField/README.md
+++ b/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.
 
diff --git a/src/components/TextField/TextField.jsx b/src/components/TextField/TextField.jsx
index c3967256..f246405e 100644
--- a/src/components/TextField/TextField.jsx
+++ b/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.
    *
diff --git a/src/components/Toggle/README.md b/src/components/Toggle/README.md
index f51e512f..80505ca5 100644
--- a/src/components/Toggle/README.md
+++ b/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.
 
diff --git a/src/components/Toggle/Toggle.jsx b/src/components/Toggle/Toggle.jsx
index 9af911a9..e5ddf27a 100644
--- a/src/components/Toggle/Toggle.jsx
+++ b/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.
    */