From 3373acf3db924bbff9228b0807b9277c03a39e37 Mon Sep 17 00:00:00 2001
From: Tobias Westfeld <tobias.westfeld@eshaker.de>
Date: Mon, 19 Aug 2019 14:17:49 +0200
Subject: [PATCH 1/2] feat(web): document renderLabel-prop for Dropdowns

---
 content/docs/list-components/MultiDropdownList.md  | 9 +++++++++
 content/docs/list-components/SingleDropdownList.md | 9 +++++++++
 2 files changed, 18 insertions(+)

diff --git a/content/docs/list-components/MultiDropdownList.md b/content/docs/list-components/MultiDropdownList.md
index 95fa569d5..4e2a7285f 100644
--- a/content/docs/list-components/MultiDropdownList.md
+++ b/content/docs/list-components/MultiDropdownList.md
@@ -200,6 +200,15 @@ Or you can also use render function as children
     ```js
     renderNoResults={() => <p>No Results Found!</p>}
     ```
+- **renderLabel** `Function` [optional]
+  can be used to change the label of the dropdown. Useful for adding highlighting/styling to or translating the label.
+  ```js
+  renderLabel={(items) => Object.values(items).map((item) => (
+    <div>
+      <MyTranslationComponent key={item} />
+    </div>
+  ))}  
+  ```
 - **onChange** `function` [optional]
     is a callback function which accepts component's current **value** as a parameter. It is called when you are using the `value` prop and the component's value changes. This prop is used to implement the [controlled component](https://reactjs.org/docs/forms.html#controlled-components) behavior.
 - **onError** `Function` [optional]
diff --git a/content/docs/list-components/SingleDropdownList.md b/content/docs/list-components/SingleDropdownList.md
index 552ed7c0a..36fa3116f 100644
--- a/content/docs/list-components/SingleDropdownList.md
+++ b/content/docs/list-components/SingleDropdownList.md
@@ -194,6 +194,15 @@ Or you can also use render function as children
     ```js
     renderNoResults={() => <p>No Results Found!</p>}
     ```
+- **renderLabel** `Function` [optional]
+  can be used to change the label of the dropdown. Useful for adding highlighting/styling to or translating the label.
+  ```js
+  renderLabel={(item) => (
+    <div>
+      <MyTranslationComponent key={item ? item : 'placeholder'} />
+    </div>
+  )}  
+  ```
 - **onChange** `function` [optional]
     is a callback function which accepts component's current **value** as a parameter. It is called when you are using the `value` prop and the component's value changes. This prop is used to implement the [controlled component](https://reactjs.org/docs/forms.html#controlled-components) behavior.
 - **onError** `Function` [optional]

From 1b63a6cc18c80d0391b4ddd7c0099e7bd9d882e5 Mon Sep 17 00:00:00 2001
From: Tobias Westfeld <tobias.westfeld@eshaker.de>
Date: Tue, 20 Aug 2019 15:00:22 +0200
Subject: [PATCH 2/2] feat(web): document renderLabel-prop for DropdownRanges

---
 content/docs/range-components/MultiDropdownRange.md  | 9 +++++++++
 content/docs/range-components/SingleDropdownRange.md | 9 +++++++++
 2 files changed, 18 insertions(+)

diff --git a/content/docs/range-components/MultiDropdownRange.md b/content/docs/range-components/MultiDropdownRange.md
index 42898e9f6..75c52654c 100644
--- a/content/docs/range-components/MultiDropdownRange.md
+++ b/content/docs/range-components/MultiDropdownRange.md
@@ -91,6 +91,15 @@ Example uses:
     An optional label to display for the component in the global selected filters view. This is only applicable if `showFilter` is enabled. Default value used here is `componentId`.
 - **URLParams** `Boolean` [optional]
     enable creating a URL query string parameter based on the selected value of the list. This is useful for sharing URLs with the component state. Defaults to `false`.
+- **renderLabel** `Function` [optional]
+  can be used to change the label of the dropdown. Useful for adding highlighting/styling to or translating the label.
+  ```js
+  renderLabel={(items) => Object.values(items).map((item) => (
+    <div>
+      <MyTranslationComponent key={item} />
+    </div>
+  ))}  
+  ```
 
 ## Demo
 
diff --git a/content/docs/range-components/SingleDropdownRange.md b/content/docs/range-components/SingleDropdownRange.md
index f563cdae2..0e6967b7a 100644
--- a/content/docs/range-components/SingleDropdownRange.md
+++ b/content/docs/range-components/SingleDropdownRange.md
@@ -91,6 +91,15 @@ Example uses:
     An optional label to display for the component in the global selected filters view. This is only applicable if `showFilter` is enabled. Default value used here is `componentId`.
 - **URLParams** `Boolean` [optional]
     enable creating a URL query string parameter based on the selected value of the list. This is useful for sharing URLs with the component state. Defaults to `false`.
+- **renderLabel** `Function` [optional]
+  can be used to change the label of the dropdown. Useful for adding highlighting/styling to or translating the label.
+  ```js
+  renderLabel={(item) => (
+    <div>
+      <MyTranslationComponent key={item ? item : 'placeholder'} />
+    </div>
+  )}  
+  ```
 
 ## Demo