fix bouncing help icons on mobiles devices

scm-ui-components/packages/ui-components/src/Help.js

@@ -1,39 +1,33 @@
 //@flow
 import React from "react";
 import injectSheet from "react-jss";
-import classNames from "classnames";
+import Tooltip from './Tooltip';
+import HelpIcon from './HelpIcon';
 
 const styles = {
-  img: {
+  tooltip: {
-    display: "block"
+    display: "inline-block",
-  },
+    paddingLeft: "3px"
-  q: {
-    float: "left",
-    paddingLeft: "3px",
-    float: "right"
   }
 };
 
 type Props = {
   message: string,
   classes: any
-};
+}
 
 class Help extends React.Component<Props> {
+
   render() {
     const { message, classes } = this.props;
-    const multiline = message.length > 60 ? "is-tooltip-multiline" : "";
     return (
-      <div
+      <Tooltip className={classes.tooltip} message={message}>
-        className={classNames("tooltip is-tooltip-right", multiline, classes.q)}
+        <HelpIcon />
-        data-tooltip={message}
+      </Tooltip>
-      >
-        <i
-          className={classNames("fa fa-question has-text-info", classes.img)}
-        />
-      </div>
     );
   }
+
 }
 
 export default injectSheet(styles)(Help);
+

scm-ui-components/packages/ui-components/src/HelpIcon.js

@@ -0,0 +1,14 @@
+//@flow
+import React from "react";
+import classNames from "classnames";
+
+type Props = {
+};
+
+class HelpIcon extends React.Component<Props> {
+  render() {
+    return <i className={classNames("fa fa-question has-text-info")} />
+  }
+}
+
+export default HelpIcon;

scm-ui-components/packages/ui-components/src/LabelWithHelpIcon.js

@@ -1,46 +0,0 @@
-//@flow
-import React from "react";
-import { Help } from "./index";
-
-type Props = {
-  label: string,
-  helpText?: string
-};
-
-class LabelWithHelpIcon extends React.Component<Props> {
-  renderLabel = () => {
-    const label = this.props.label;
-    if (label) {
-      return <label className="label">{label}</label>;
-    }
-    return "";
-  };
-
-  renderHelp = () => {
-    const helpText = this.props.helpText;
-    if (helpText) {
-      return (
-        <div className="control columns is-vcentered">
-          <Help message={helpText} />
-        </div>
-      );
-    } else return null;
-  };
-
-  renderLabelWithHelpIcon = () => {
-    if (this.props.label) {
-      return (
-        <div className="field is-grouped">
-          <div className="control">{this.renderLabel()}</div>
-          {this.renderHelp()}
-        </div>
-      );
-    } else return null;
-  };
-
-  render() {
-    return this.renderLabelWithHelpIcon();
-  }
-}
-
-export default LabelWithHelpIcon;

scm-ui-components/packages/ui-components/src/Tooltip.js

@@ -0,0 +1,26 @@
+//@flow
+import * as React from "react";
+import classNames from "classnames";
+
+type Props = {
+  message: string,
+  className: string,
+  children: React.Node
+};
+
+class Tooltip extends React.Component<Props> {
+  render() {
+    const { className, message, children } = this.props;
+    const multiline = message.length > 60 ? "is-tooltip-multiline" : "";
+    return (
+      <div
+        className={classNames("tooltip", "is-tooltip-right", multiline, className)}
+        data-tooltip={message}
+      >
+        {children}
+      </div>
+    );
+  }
+}
+
+export default Tooltip;

scm-ui-components/packages/ui-components/src/forms/Checkbox.js

@@ -10,7 +10,9 @@ type Props = {
   disabled?: boolean,
   helpText?: string
 };
+
 class Checkbox extends React.Component<Props> {
+
   onCheckboxChange = (event: SyntheticInputEvent<HTMLInputElement>) => {
     if (this.props.onChange) {
       this.props.onChange(event.target.checked, this.props.name);
@@ -20,12 +22,8 @@ class Checkbox extends React.Component<Props> {
   renderHelp = () => {
     const helpText = this.props.helpText;
     if (helpText) {
-      return (
+      return <Help message={helpText} />;
-        <div className="control columns is-vcentered">
+    }
-          <Help message={helpText} />
-        </div>
-      );
-    } else return null;
   };
 
   render() {
@@ -39,10 +37,11 @@ class Checkbox extends React.Component<Props> {
               onChange={this.onCheckboxChange}
               disabled={this.props.disabled}
             />
+            {" "}
             {this.props.label}
+            {this.renderHelp()}
           </label>
         </div>
-        {this.renderHelp()}
       </div>
     );
   }

scm-ui-components/packages/ui-components/src/forms/InputField.js

@@ -1,7 +1,7 @@
 //@flow
 import React from "react";
 import classNames from "classnames";
-import { LabelWithHelpIcon } from "../index";
+import LabelWithHelpIcon from "./LabelWithHelpIcon";
 
 type Props = {
   label?: string,

scm-ui-components/packages/ui-components/src/forms/LabelWithHelpIcon.js

@@ -0,0 +1,37 @@
+//@flow
+import React from "react";
+import Help from '../Help';
+
+type Props = {
+  label?: string,
+  helpText?: string
+};
+
+class LabelWithHelpIcon extends React.Component<Props> {
+
+  renderHelp() {
+    const { helpText } = this.props;
+    if (helpText) {
+      return (
+        <Help message={helpText} />
+      );
+    }
+  }
+
+  render() {
+    const {label } = this.props;
+
+    if (label) {
+      const help = this.renderHelp();
+      return (
+        <label className="label">
+          {label} { help }
+        </label>
+      );
+    }
+
+    return "";
+  }
+}
+
+export default LabelWithHelpIcon;

scm-ui-components/packages/ui-components/src/forms/Select.js

@@ -1,7 +1,7 @@
 //@flow
 import React from "react";
 import classNames from "classnames";
-import { LabelWithHelpIcon } from "../index";
+import LabelWithHelpIcon from "./LabelWithHelpIcon";
 
 export type SelectItem = {
   value: string,

scm-ui-components/packages/ui-components/src/forms/Textarea.js

@@ -1,6 +1,6 @@
 //@flow
 import React from "react";
-import { LabelWithHelpIcon } from "../index";
+import LabelWithHelpIcon from "./LabelWithHelpIcon";
 
 export type SelectItem = {
   value: string,

scm-ui-components/packages/ui-components/src/forms/index.js

@@ -5,4 +5,5 @@ export { default as Checkbox } from "./Checkbox.js";
 export { default as InputField } from "./InputField.js";
 export { default as Select } from "./Select.js";
 export { default as Textarea } from "./Textarea.js";
+export { default as LabelWithHelpIcon } from "./LabelWithHelpIcon";
 

scm-ui-components/packages/ui-components/src/index.js

@@ -17,8 +17,9 @@ export { default as Notification } from "./Notification.js";
 export { default as Paginator } from "./Paginator.js";
 export { default as LinkPaginator } from "./LinkPaginator.js";
 export { default as ProtectedRoute } from "./ProtectedRoute.js";
-export { default as Help } from "./Help.js";
+export { default as Help } from "./Help";
-export { default as LabelWithHelpIcon } from "./LabelWithHelpIcon.js";
+export { default as HelpIcon } from "./HelpIcon";
+export { default as Tooltip } from "./Tooltip";
 export { getPageFromMatch } from "./urls";
 
 export { apiClient, NOT_FOUND_ERROR, UNAUTHORIZED_ERROR } from "./apiclient.js";