add help for groups and correct adding group

scm-ui-components/packages/ui-components/src/forms/Textarea.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,
   placeholder?: SelectItem[],
   value?: string,
-  onChange: string => void
+  onChange: string => void,
+  helpText?: string
 };
 
 class Textarea extends React.Component<Props> {
@@ -28,13 +30,26 @@ class Textarea 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 { placeholder, value } = this.props;
 
     return (
       <div className="field">
         {this.renderLabel()}
-        <div className="control">
+        <div className="field is-grouped">
+        <div className="control is-expanded">
           <textarea
             className="textarea"
             ref={input => {
@@ -45,6 +60,8 @@ class Textarea extends React.Component<Props> {
             value={value}
           />
         </div>
+          {this.renderHelp()}
+        </div>
       </div>
     );
   }