Skip to content
This repository has been archived by the owner on Apr 20, 2023. It is now read-only.

Commit

Permalink
Add help tips to labels to explain what their icon means [#85]
Browse files Browse the repository at this point in the history
  • Loading branch information
nataliemt committed Feb 26, 2021
1 parent d8250f7 commit 182b85f
Show file tree
Hide file tree
Showing 6 changed files with 120 additions and 17 deletions.
22 changes: 11 additions & 11 deletions src/js/components/PropertyPicker.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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({
Expand All @@ -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}
Expand Down
15 changes: 9 additions & 6 deletions src/js/components/RulePicker.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand All @@ -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> {
Expand All @@ -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({
Expand Down Expand Up @@ -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
Expand Down
37 changes: 37 additions & 0 deletions src/js/components/common/LabelIcon/LabelIcon.react.js
Original file line number Diff line number Diff line change
@@ -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;
21 changes: 21 additions & 0 deletions src/js/components/common/LabelIcon/LabelIconOptional.react.js
Original file line number Diff line number Diff line change
@@ -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;
21 changes: 21 additions & 0 deletions src/js/components/common/LabelIcon/LabelIconRequired.react.js
Original file line number Diff line number Diff line change
@@ -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;
21 changes: 21 additions & 0 deletions src/js/components/common/LabelIcon/LabelIconValid.react.js
Original file line number Diff line number Diff line change
@@ -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;

0 comments on commit 182b85f

Please sign in to comment.