From 182b85fb2d34120b4486ea5f3cb0c9dba0abaa4f Mon Sep 17 00:00:00 2001 From: Natalie Takahashi Date: Tue, 23 Feb 2021 11:38:53 -0300 Subject: [PATCH] Add help tips to labels to explain what their icon means [#85] --- src/js/components/PropertyPicker.react.js | 22 +++++------ src/js/components/RulePicker.react.js | 15 +++++--- .../common/LabelIcon/LabelIcon.react.js | 37 +++++++++++++++++++ .../LabelIcon/LabelIconOptional.react.js | 21 +++++++++++ .../LabelIcon/LabelIconRequired.react.js | 21 +++++++++++ .../common/LabelIcon/LabelIconValid.react.js | 21 +++++++++++ 6 files changed, 120 insertions(+), 17 deletions(-) create mode 100644 src/js/components/common/LabelIcon/LabelIcon.react.js create mode 100644 src/js/components/common/LabelIcon/LabelIconOptional.react.js create mode 100644 src/js/components/common/LabelIcon/LabelIconRequired.react.js create mode 100644 src/js/components/common/LabelIcon/LabelIconValid.react.js diff --git a/src/js/components/PropertyPicker.react.js b/src/js/components/PropertyPicker.react.js index e7a20ea..bf556e2 100644 --- a/src/js/components/PropertyPicker.react.js +++ b/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 { const propertyClass = 'property-' + this.props.property.definition.name.replace('.', '-'); - + const labelDisplayName = this.props.property.definition.displayName; return (
{ [propertyClass]: true, })} > - + {RulePropertyUtils.isValid(this.props.property) ? ( + {labelDisplayName} + ) : this.props.property.definition.required ? ( + {labelDisplayName} + ) : ( + {labelDisplayName} + )}{' '} {attributePicker} diff --git a/src/js/components/RulePicker.react.js b/src/js/components/RulePicker.react.js index 7b58323..8aa5a3d 100644 --- a/src/js/components/RulePicker.react.js +++ b/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 { @@ -47,7 +49,7 @@ class RulePicker extends React.Component { const toggler = this.state.collapsed ? '\u25B6' // right triangle : '\u25BC'; // down triangle - + const label = 'Selector'; return (
{ valid: this.props.rule.selector != '', })} > - + {this.props.rule.selector != '' ? ( + {label} + ) : ( + {label} + )}
{this.props.rule.properties diff --git a/src/js/components/common/LabelIcon/LabelIcon.react.js b/src/js/components/common/LabelIcon/LabelIcon.react.js new file mode 100644 index 0000000..d9e6dd7 --- /dev/null +++ b/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) => ( + +); + +module.exports = LabelIcon; diff --git a/src/js/components/common/LabelIcon/LabelIconOptional.react.js b/src/js/components/common/LabelIcon/LabelIconOptional.react.js new file mode 100644 index 0000000..48f2b48 --- /dev/null +++ b/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) => ( + + {children} + +); + +module.exports = LabelIconOptional; diff --git a/src/js/components/common/LabelIcon/LabelIconRequired.react.js b/src/js/components/common/LabelIcon/LabelIconRequired.react.js new file mode 100644 index 0000000..42502b4 --- /dev/null +++ b/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) => ( + + {children} + +); + +module.exports = LabelIconRequired; diff --git a/src/js/components/common/LabelIcon/LabelIconValid.react.js b/src/js/components/common/LabelIcon/LabelIconValid.react.js new file mode 100644 index 0000000..b6d626f --- /dev/null +++ b/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) => ( + + {children} + +); + +module.exports = LabelIconValid;