Default value indicators

Author: dmt0

src/components/fields/ColorPicker.js

@@ -33,7 +33,7 @@ export class UnconnectedColorPicker extends Component {
     }
 
     return (
-      <Field {...this.props}>
+      <Field {...this.props} noDefaultIndicator={this.props.noDefaultIndicator}>
         <ColorPickerWidget
           selectedColor={this.props.fullValue}
           onColorChange={this.props.updatePlot}
@@ -48,6 +48,7 @@ UnconnectedColorPicker.propTypes = {
   updatePlot: PropTypes.func,
   handleEmpty: PropTypes.bool,
   defaultColor: PropTypes.string,
+  noDefaultIndicator: PropTypes.bool,
   ...Field.propTypes,
 };
 

src/components/fields/Field.js

@@ -5,6 +5,7 @@ import classnames from 'classnames';
 import {bem} from 'lib';
 import {getMultiValueText} from 'lib/constants';
 import {CloseIcon} from 'plotly-icons';
+import nestedProperty from 'plotly.js/src/lib/nested_property';
 
 export class FieldDelete extends Component {
   render() {
@@ -29,9 +30,10 @@ class Field extends Component {
       extraComponent,
       fieldContainerClassName,
       labelWidth,
+      noDefaultIndicator,
     } = this.props;
 
-    const {localize: _} = this.context;
+    const {localize: _, container, attr} = this.context;
 
     let fieldClass;
     if (!label) {
@@ -53,8 +55,14 @@ class Field extends Component {
       [fieldContainerClassName]: Boolean(fieldContainerClassName),
     });
 
+    const isDefaultValue = attr && nestedProperty(container, attr).get() !== undefined; // eslint-disable-line no-undefined
+    const defaultIndicatorClassName = classnames('field__default-indicator', {
+      'field__default-indicator__is-default': Boolean(isDefaultValue),
+    });
+
     return (
       <div className={containerClassName}>
+        {!noDefaultIndicator && <div className={defaultIndicatorClassName} />}
         {label ? (
           <div
             className={bem('field', 'title')}
@@ -106,13 +114,15 @@ Field.propTypes = {
   children: PropTypes.node,
   extraComponent: PropTypes.any,
   fieldContainerClassName: PropTypes.string,
+  noDefaultIndicator: PropTypes.bool,
 };
 
 Field.contextTypes = {
   localize: PropTypes.func,
   description: PropTypes.string,
   attr: PropTypes.string,
   showFieldTooltips: PropTypes.bool,
+  container: PropTypes.object,
 };
 
 Field.defaultProps = {

src/components/fields/MarkerColor.js

@@ -112,6 +112,7 @@ class UnconnectedMarkerColor extends Component {
         setColorScale={this.setColorScale}
         onConstantColorOptionChange={this.onConstantColorOptionChange}
         parentSelectedConstantColorOption={this.state.selectedConstantColorOption}
+        noDefaultIndicator
       />
     );
   }
@@ -125,7 +126,7 @@ class UnconnectedMarkerColor extends Component {
         (this.props.container.marker.colorsrc &&
           this.props.container.marker.colorsrc === MULTI_VALUED));
     return (
-      <Field multiValued={multiValued}>
+      <Field multiValued={multiValued} noDefaultIndicator>
         <DataSelector suppressMultiValuedMessage attr="marker.color" />
         {this.props.container.marker &&
         this.props.container.marker.colorscale === MULTI_VALUED ? null : (
@@ -159,11 +160,11 @@ class UnconnectedMarkerColor extends Component {
       return (
         <>
           <Field {...this.props} attr={attr}>
-            <Field multiValued={this.isMultiValued() && !this.state.type}>
+            <Field multiValued={this.isMultiValued() && !this.state.type} noDefaultIndicator>
               <RadioBlocks options={options} activeOption={type} onOptionChange={this.setType} />
 
               {!type ? null : (
-                <Info>
+                <Info noDefaultIndicator>
                   {type === 'constant'
                     ? _('All points in a trace are colored in the same color.')
                     : _('Each point in a trace is colored according to data.')}

src/components/fields/MarkerSize.js

@@ -77,6 +77,7 @@ class UnconnectedMarkerSize extends Component {
             attr="marker.size"
             updatePlot={this.setValue}
             fullValue={value.constant}
+            noDefaultIndicator
           />
         ) : multiValued ? null : (
           <DataSelector suppressMultiValuedMessage attr="marker.size" updatePlot={this.setValue} />

src/components/fields/MultiColorPicker.js

@@ -90,7 +90,11 @@ class UnconnectedMultiColorPicker extends Component {
 
     if (this.context.traceIndexes.length > 1) {
       return (
-        <Field {...this.props} suppressMultiValuedMessage>
+        <Field
+          {...this.props}
+          suppressMultiValuedMessage
+          noDefaultIndicator={this.props.noDefaultIndicator}
+        >
           <RadioBlocks
             options={constantOptions}
             activeOption={selectedConstantColorOption}
@@ -100,9 +104,11 @@ class UnconnectedMultiColorPicker extends Component {
                 : value => this.setState({selectedConstantColorOption: value})
             }
           />
-          <Info>{selectedConstantColorOption === 'single' ? singleMessage : multiMessage}</Info>
+          <Info noDefaultIndicator>
+            {selectedConstantColorOption === 'single' ? singleMessage : multiMessage}
+          </Info>
           {selectedConstantColorOption === 'single' ? (
-            <ColorPicker attr={this.props.attr} updatePlot={this.setColor} />
+            <ColorPicker attr={this.props.attr} updatePlot={this.setColor} noDefaultIndicator />
           ) : (
             <CustomColorscalePicker
               suppressMultiValuedMessage
@@ -117,7 +123,12 @@ class UnconnectedMultiColorPicker extends Component {
     }
 
     return (
-      <ColorPicker attr={this.props.attr} updatePlot={this.setColor} label={this.props.label} />
+      <ColorPicker
+        attr={this.props.attr}
+        updatePlot={this.setColor}
+        label={this.props.label}
+        noDefaultIndicator={this.props.noDefaultIndicator}
+      />
     );
   }
 }
@@ -132,6 +143,7 @@ UnconnectedMultiColorPicker.propTypes = {
   messageKeyWordSingle: PropTypes.string,
   messageKeyWordPlural: PropTypes.string,
   tracesToColor: PropTypes.array,
+  noDefaultIndicator: PropTypes.bool,
   ...Field.propTypes,
 };
 

src/components/fields/Numeric.js

@@ -14,7 +14,7 @@ export class UnconnectedNumeric extends Component {
     }
 
     return (
-      <Field {...this.props}>
+      <Field {...this.props} noDefaultIndicator={this.props.noDefaultIndicator}>
         <NumericInput
           value={fullValue}
           defaultValue={this.props.defaultValue}
@@ -44,6 +44,7 @@ UnconnectedNumeric.propTypes = {
   step: PropTypes.number,
   stepmode: PropTypes.string,
   updatePlot: PropTypes.func,
+  noDefaultIndicator: PropTypes.bool,
   ...Field.propTypes,
 };
 

src/styles/components/fields/_field.scss

@@ -11,6 +11,15 @@
   padding: var(--spacing-quarter-unit) 0;
   width: 100%;
   position: relative;
+  &__default-indicator {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: var(--spacing-quarter-unit);
+    &__is-default {
+      background-color: $color-cornflower;
+    }
+  }
   &__no-title {
     width: 100%;
     padding: 0 var(--spacing-half-unit);