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

src/js/components/PropertyPicker.react.js

@@ -12,6 +12,9 @@ const React = require('react');
 const classNames = require('classnames');
 const DateTimeFormatPicker = require('./DateTimeFormatPicker.react.js');
 const SelectorPicker = require('./SelectorPicker.react.js');
+const LabelIconOptional = require('./common/LabelIcon/LabelIconOptional.react.js');
+const LabelIconRequired = require('./common/LabelIcon/LabelIconRequired.react.js');
+const LabelIconValid = require('./common/LabelIcon/LabelIconValid.react.js');
 import type { RuleProperty } from '../models/RuleProperty';
 import RulePropertyTypes from '../models/RulePropertyTypes';
 import RuleActions from '../data/RuleActions';
@@ -103,7 +106,7 @@ class PropertyPicker extends React.Component<Props> {
 
     const propertyClass =
       'property-' + this.props.property.definition.name.replace('.', '-');
-
+    const labelDisplayName = this.props.property.definition.displayName;
     return (
       <div
         className={classNames({
@@ -122,16 +125,13 @@ 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>
-          )}{' '}
-          {this.props.property.definition.displayName}
-        </label>
+        {RulePropertyUtils.isValid(this.props.property) ? (
+          <LabelIconValid>{labelDisplayName}</LabelIconValid>
+        ) : this.props.property.definition.required ? (
+          <LabelIconRequired>{labelDisplayName}</LabelIconRequired>
+        ) : (
+          <LabelIconOptional>{labelDisplayName}</LabelIconOptional>
+        )}{' '}
         <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,8 @@
 const React = require('react');
 const PropertyPicker = require('./PropertyPicker.react.js');
 const SelectorPicker = require('./SelectorPicker.react');
+const LabelIconRequired = require('./common/LabelIcon/LabelIconRequired.react.js');
+const LabelIconValid = require('./common/LabelIcon/LabelIconValid.react.js');
 const classNames = require('classnames');
 const RuleActions = require('../data/RuleActions');
 
@@ -21,7 +23,7 @@ import { RuleUtils } from '../utils/RuleUtils';
 type Props = BaseProps & { rule: Rule };
 
 type State = {
-  collapsed: boolean
+  collapsed: boolean,
 };
 
 class RulePicker extends React.Component<Props, State> {
@@ -47,7 +49,7 @@ class RulePicker extends React.Component<Props, State> {
     const toggler = this.state.collapsed
       ? '\u25B6' // right triangle
       : '\u25BC'; // down triangle
-
+    const label = 'Selector';
     return (
       <div
         className={classNames({
@@ -87,10 +89,11 @@ class RulePicker extends React.Component<Props, State> {
               valid: this.props.rule.selector != '',
             })}
           >
-            <label>
-              {this.props.rule.selector != '' ? <span>✔</span> : <span>✘</span>}{' '}
-              Selector
-            </label>
+            {this.props.rule.selector != '' ? (
+              <LabelIconValid>{label}</LabelIconValid>
+            ) : (
+              <LabelIconRequired>{label}</LabelIconRequired>
+            )}
             <SelectorPicker {...this.props} field={this.props.rule} />
           </div>
           {this.props.rule.properties

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

@@ -0,0 +1,37 @@
+/**
+ * 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';
+
+export type BaseProps = {
+  children: string,
+  position?: string,
+};
+
+type Props = BaseProps & {
+  icon?: string,
+  tooltip?: string,
+};
+
+const LabelIcon = ({
+  children,
+  icon,
+  tooltip,
+  position = 'bottom left',
+}: Props) => (
+  <label>
+    <span data-tooltip={tooltip} data-position={position}>
+      {icon}
+    </span>
+    {` ${children}`}
+  </label>
+);
+
+module.exports = LabelIcon;

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

@@ -0,0 +1,21 @@
+/**
+ * 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 = require('./LabelIcon.react.js');
+import type { BaseProps as Props } from './LabelIcon.react.js';
+
+const LabelIconOptional = ({ children, position }: Props) => (
+  <LabelIcon icon="•" tooltip="Field is optional" position={position}>
+    {children}
+  </LabelIcon>
+);
+
+module.exports = LabelIconOptional;

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

@@ -0,0 +1,21 @@
+/**
+ * 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 = require('./LabelIcon.react.js');
+import type { BaseProps as Props } from './LabelIcon.react.js';
+
+const LabelIconRequired = ({ children, position }: Props) => (
+  <LabelIcon icon="✘" tooltip="Field is required" position={position}>
+    {children}
+  </LabelIcon>
+);
+
+module.exports = LabelIconRequired;

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

@@ -0,0 +1,21 @@
+/**
+ * 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 = require('./LabelIcon.react.js');
+import type { BaseProps as Props } from './LabelIcon.react.js';
+
+const LabelIconValid = ({ children, position }: Props) => (
+  <LabelIcon icon="✔" tooltip="Field is valid" position={position}>
+    {children}
+  </LabelIcon>
+);
+
+module.exports = LabelIconValid;