feat(web): document renderLabel-prop for Dropdowns

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]

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]

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
 

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