From 786f28ce01f64f95eb5326b221c72ffd187bf1d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maren=20S=C3=BCwer?= <maren.suewer@cloudogu.com>
Date: Tue, 2 Oct 2018 09:52:39 +0200
Subject: [PATCH] add help to select

---
 .../ui-components/src/forms/Select.js         | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/scm-ui-components/packages/ui-components/src/forms/Select.js b/scm-ui-components/packages/ui-components/src/forms/Select.js
index 184359cc11..ad8077d5bf 100644
--- a/scm-ui-components/packages/ui-components/src/forms/Select.js
+++ b/scm-ui-components/packages/ui-components/src/forms/Select.js
@@ -1,5 +1,6 @@
 //@flow
 import React from "react";
+import {Help} from "../index";
 
 export type SelectItem = {
   value: string,
@@ -10,7 +11,8 @@ type Props = {
   label?: string,
   options: SelectItem[],
   value?: SelectItem,
-  onChange: string => void
+  onChange: string => void,
+  helpText?: string
 };
 
 class Select extends React.Component<Props> {
@@ -36,12 +38,25 @@ class Select extends React.Component<Props> {
     return "";
   };
 
+  renderHelp = () => {
+    const helpText = this.props.helpText;
+    if(helpText){
+      return (
+        <div className="control columns is-vcentered">
+          <Help message={helpText} />
+        </div>);
+    }
+    else
+      return null;
+  };
+
   render() {
     const { options, value } = this.props;
 
     return (
       <div className="field">
         {this.renderLabel()}
+        <div className="field is-grouped">
         <div className="control select">
           <select
             ref={input => {
@@ -59,6 +74,8 @@ class Select extends React.Component<Props> {
             })}
           </select>
         </div>
+          {this.renderHelp()}
+        </div>
       </div>
     );
   }