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';
@@ -122,16 +123,12 @@ class PropertyPicker extends React.Component<Props> {
           [propertyClass]: true,
         })}
       >
-        <label>
-          {RulePropertyUtils.isValid(this.props.property) ? (
-            <span>✔</span>
-          ) : this.props.property.definition.required ? (
-            <span>✘</span>
-          ) : (
-            <span>•</span>
-          )}{' '}
+        <LabelIcon
+          valid={RulePropertyUtils.isValid(this.props.property)}
+          required={this.props.property.definition.required}
+        >
           {this.props.property.definition.displayName}
-        </label>
+        </LabelIcon>
         <label className="sub-label selector-label">Selector</label>
         <SelectorPicker {...this.props} field={this.props.property} />
         {attributePicker}

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');
 
@@ -47,7 +48,7 @@ class RulePicker extends React.Component<Props, State> {
     const toggler = this.state.collapsed
       ? '\u25B6' // right triangle
       : '\u25BC'; // down triangle
-
+    const hasSelector = this.props.rule.selector != '';
     return (
       <div
         className={classNames({
@@ -87,10 +88,9 @@ class RulePicker extends React.Component<Props, State> {
               valid: this.props.rule.selector != '',
             })}
           >
-            <label>
-              {this.props.rule.selector != '' ? <span>✔</span> : <span>✘</span>}{' '}
+            <LabelIcon valid={hasSelector} required={!hasSelector}>
               Selector
-            </label>
+            </LabelIcon>
             <SelectorPicker {...this.props} field={this.props.rule} />
           </div>
           {this.props.rule.properties

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

@@ -0,0 +1,38 @@
+/**
+ * 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';
+
+interface Props {
+  children: string;
+  required: ?boolean;
+  valid: ?boolean;
+}
+
+const LabelIcon = ({ children, required = false, valid = false }: Props) => {
+  let icon = '•';
+  let tooltip = 'Field is optional';
+  if (required) {
+    icon = '✘';
+    tooltip = 'Field is required';
+  }
+  if (valid) {
+    icon = '✔';
+    tooltip = 'Field is valid';
+  }
+  return (
+    <label>
+      <span data-tooltip={tooltip} data-position="bottom left">{icon}</span>
+      {` ${children}`}
+    </label>
+  );
+}
+
+module.exports = LabelIcon;