Skip to content

Commit 18677bb

Browse files
committed
Default value indicators
1 parent c2ddc6e commit 18677bb

File tree

7 files changed

+45
-10
lines changed

7 files changed

+45
-10
lines changed

src/components/fields/ColorPicker.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export class UnconnectedColorPicker extends Component {
3333
}
3434

3535
return (
36-
<Field {...this.props}>
36+
<Field {...this.props} noDefaultIndicator={this.props.noDefaultIndicator}>
3737
<ColorPickerWidget
3838
selectedColor={this.props.fullValue}
3939
onColorChange={this.props.updatePlot}
@@ -48,6 +48,7 @@ UnconnectedColorPicker.propTypes = {
4848
updatePlot: PropTypes.func,
4949
handleEmpty: PropTypes.bool,
5050
defaultColor: PropTypes.string,
51+
noDefaultIndicator: PropTypes.bool,
5152
...Field.propTypes,
5253
};
5354

src/components/fields/Field.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import classnames from 'classnames';
55
import {bem} from 'lib';
66
import {getMultiValueText} from 'lib/constants';
77
import {CloseIcon} from 'plotly-icons';
8+
import nestedProperty from 'plotly.js/src/lib/nested_property';
89

910
export class FieldDelete extends Component {
1011
render() {
@@ -29,9 +30,10 @@ class Field extends Component {
2930
extraComponent,
3031
fieldContainerClassName,
3132
labelWidth,
33+
noDefaultIndicator,
3234
} = this.props;
3335

34-
const {localize: _} = this.context;
36+
const {localize: _, container, attr} = this.context;
3537

3638
let fieldClass;
3739
if (!label) {
@@ -53,8 +55,14 @@ class Field extends Component {
5355
[fieldContainerClassName]: Boolean(fieldContainerClassName),
5456
});
5557

58+
const isDefaultValue = attr && nestedProperty(container, attr).get() !== undefined; // eslint-disable-line no-undefined
59+
const defaultIndicatorClassName = classnames('field__default-indicator', {
60+
'field__default-indicator__is-default': Boolean(isDefaultValue),
61+
});
62+
5663
return (
5764
<div className={containerClassName}>
65+
{!noDefaultIndicator && <div className={defaultIndicatorClassName} />}
5866
{label ? (
5967
<div
6068
className={bem('field', 'title')}
@@ -106,13 +114,15 @@ Field.propTypes = {
106114
children: PropTypes.node,
107115
extraComponent: PropTypes.any,
108116
fieldContainerClassName: PropTypes.string,
117+
noDefaultIndicator: PropTypes.bool,
109118
};
110119

111120
Field.contextTypes = {
112121
localize: PropTypes.func,
113122
description: PropTypes.string,
114123
attr: PropTypes.string,
115124
showFieldTooltips: PropTypes.bool,
125+
container: PropTypes.object,
116126
};
117127

118128
Field.defaultProps = {

src/components/fields/MarkerColor.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ class UnconnectedMarkerColor extends Component {
112112
setColorScale={this.setColorScale}
113113
onConstantColorOptionChange={this.onConstantColorOptionChange}
114114
parentSelectedConstantColorOption={this.state.selectedConstantColorOption}
115+
noDefaultIndicator
115116
/>
116117
);
117118
}
@@ -125,7 +126,7 @@ class UnconnectedMarkerColor extends Component {
125126
(this.props.container.marker.colorsrc &&
126127
this.props.container.marker.colorsrc === MULTI_VALUED));
127128
return (
128-
<Field multiValued={multiValued}>
129+
<Field multiValued={multiValued} noDefaultIndicator>
129130
<DataSelector suppressMultiValuedMessage attr="marker.color" />
130131
{this.props.container.marker &&
131132
this.props.container.marker.colorscale === MULTI_VALUED ? null : (
@@ -159,11 +160,11 @@ class UnconnectedMarkerColor extends Component {
159160
return (
160161
<>
161162
<Field {...this.props} attr={attr}>
162-
<Field multiValued={this.isMultiValued() && !this.state.type}>
163+
<Field multiValued={this.isMultiValued() && !this.state.type} noDefaultIndicator>
163164
<RadioBlocks options={options} activeOption={type} onOptionChange={this.setType} />
164165

165166
{!type ? null : (
166-
<Info>
167+
<Info noDefaultIndicator>
167168
{type === 'constant'
168169
? _('All points in a trace are colored in the same color.')
169170
: _('Each point in a trace is colored according to data.')}

src/components/fields/MarkerSize.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ class UnconnectedMarkerSize extends Component {
7777
attr="marker.size"
7878
updatePlot={this.setValue}
7979
fullValue={value.constant}
80+
noDefaultIndicator
8081
/>
8182
) : multiValued ? null : (
8283
<DataSelector suppressMultiValuedMessage attr="marker.size" updatePlot={this.setValue} />

src/components/fields/MultiColorPicker.js

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,11 @@ class UnconnectedMultiColorPicker extends Component {
9090

9191
if (this.context.traceIndexes.length > 1) {
9292
return (
93-
<Field {...this.props} suppressMultiValuedMessage>
93+
<Field
94+
{...this.props}
95+
suppressMultiValuedMessage
96+
noDefaultIndicator={this.props.noDefaultIndicator}
97+
>
9498
<RadioBlocks
9599
options={constantOptions}
96100
activeOption={selectedConstantColorOption}
@@ -100,9 +104,11 @@ class UnconnectedMultiColorPicker extends Component {
100104
: value => this.setState({selectedConstantColorOption: value})
101105
}
102106
/>
103-
<Info>{selectedConstantColorOption === 'single' ? singleMessage : multiMessage}</Info>
107+
<Info noDefaultIndicator>
108+
{selectedConstantColorOption === 'single' ? singleMessage : multiMessage}
109+
</Info>
104110
{selectedConstantColorOption === 'single' ? (
105-
<ColorPicker attr={this.props.attr} updatePlot={this.setColor} />
111+
<ColorPicker attr={this.props.attr} updatePlot={this.setColor} noDefaultIndicator />
106112
) : (
107113
<CustomColorscalePicker
108114
suppressMultiValuedMessage
@@ -117,7 +123,12 @@ class UnconnectedMultiColorPicker extends Component {
117123
}
118124

119125
return (
120-
<ColorPicker attr={this.props.attr} updatePlot={this.setColor} label={this.props.label} />
126+
<ColorPicker
127+
attr={this.props.attr}
128+
updatePlot={this.setColor}
129+
label={this.props.label}
130+
noDefaultIndicator={this.props.noDefaultIndicator}
131+
/>
121132
);
122133
}
123134
}
@@ -132,6 +143,7 @@ UnconnectedMultiColorPicker.propTypes = {
132143
messageKeyWordSingle: PropTypes.string,
133144
messageKeyWordPlural: PropTypes.string,
134145
tracesToColor: PropTypes.array,
146+
noDefaultIndicator: PropTypes.bool,
135147
...Field.propTypes,
136148
};
137149

src/components/fields/Numeric.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export class UnconnectedNumeric extends Component {
1414
}
1515

1616
return (
17-
<Field {...this.props}>
17+
<Field {...this.props} noDefaultIndicator={this.props.noDefaultIndicator}>
1818
<NumericInput
1919
value={fullValue}
2020
defaultValue={this.props.defaultValue}
@@ -44,6 +44,7 @@ UnconnectedNumeric.propTypes = {
4444
step: PropTypes.number,
4545
stepmode: PropTypes.string,
4646
updatePlot: PropTypes.func,
47+
noDefaultIndicator: PropTypes.bool,
4748
...Field.propTypes,
4849
};
4950

src/styles/components/fields/_field.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,15 @@
1111
padding: var(--spacing-quarter-unit) 0;
1212
width: 100%;
1313
position: relative;
14+
&__default-indicator {
15+
position: absolute;
16+
top: 0;
17+
height: 100%;
18+
width: var(--spacing-quarter-unit);
19+
&__is-default {
20+
background-color: $color-cornflower;
21+
}
22+
}
1423
&__no-title {
1524
width: 100%;
1625
padding: 0 var(--spacing-half-unit);

0 commit comments

Comments
 (0)