Add help tips to labels to explain what their icon means [#85]

src/js/components/PropertyPicker.react.js

@@ -12,6 +12,7 @@ const React = require('react');
 const classNames = require('classnames');
 const DateTimeFormatPicker = require('./DateTimeFormatPicker.react.js');
 const SelectorPicker = require('./SelectorPicker.react.js');
+const LabelIcon = require('./common/LabelIcon.react.js');
 import type { RuleProperty } from '../models/RuleProperty';
 import RulePropertyTypes from '../models/RulePropertyTypes';
 import RuleActions from '../data/RuleActions';
@@ -124,11 +125,11 @@ class PropertyPicker extends React.Component<Props> {
       >
         <label>
           {RulePropertyUtils.isValid(this.props.property) ? (
-            <span>✔</span>
+            <LabelIcon valid />
           ) : this.props.property.definition.required ? (
-            <span>✘</span>
+            <LabelIcon required />
           ) : (
-            <span>•</span>
+            <LabelIcon />
           )}{' '}
           {this.props.property.definition.displayName}
         </label>

src/js/components/RulePicker.react.js

@@ -11,6 +11,7 @@
 const React = require('react');
 const PropertyPicker = require('./PropertyPicker.react.js');
 const SelectorPicker = require('./SelectorPicker.react');
+const LabelIcon = require('./common/LabelIcon.react.js');
 const classNames = require('classnames');
 const RuleActions = require('../data/RuleActions');
 
@@ -88,7 +89,7 @@ class RulePicker extends React.Component<Props, State> {
             })}
           >
             <label>
-              {this.props.rule.selector != '' ? <span>✔</span> : <span>✘</span>}{' '}
+              {this.props.rule.selector != '' ? <LabelIcon valid /> : <LabelIcon required />}{' '}
               Selector
             </label>
             <SelectorPicker {...this.props} field={this.props.rule} />

src/js/components/common/LabelIcon.react.js

@@ -0,0 +1,29 @@
+/**
+ * Copyright 2017-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import React from 'react';
+
+const LabelIcon = ({ required, valid }) => {
+  let icon = '•';
+  let tooltip = 'Field is optional';
+  if (required) {
+    icon = '✘';
+    tooltip = 'Field is required';
+  }
+  if (valid) {
+    icon = '✔';
+    tooltip = 'Field is valid';
+  }
+  return (
+    <span data-tooltip={tooltip} data-position="bottom left">{icon}</span>
+  );
+}
+
+module.exports = LabelIcon;