Default value indicators

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/Dropdown.js

@@ -12,7 +12,7 @@ export class UnconnectedDropdown extends Component {
     }
 
     return (
-      <Field {...this.props}>
+      <Field {...this.props} noDefaultIndicator={this.props.noDefaultIndicator}>
         <DropdownWidget
           backgroundDark={this.props.backgroundDark}
           options={this.props.options}

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,17 @@ 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 onHover={this.setState({showClear: true})} className={defaultIndicatorClassName} />
+        )}
+        {!noDefaultIndicator && <div className="field__default-indicator__clear" />}
         {label ? (
           <div
             className={bem('field', 'title')}
@@ -106,13 +117,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/LocationSelector.js

@@ -102,6 +102,7 @@ class UnconnectedLocationSelector extends Component {
             fullValue={mode}
             updatePlot={this.setMode}
             attr={this.props.attr}
+            noDefaultIndicator
           />
         </Field>
         {mode === 'latlon' ? (

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,15 +126,16 @@ class UnconnectedMarkerColor extends Component {
         (this.props.container.marker.colorsrc &&
           this.props.container.marker.colorsrc === MULTI_VALUED));
     return (
-      <Field multiValued={multiValued}>
-        <DataSelector suppressMultiValuedMessage attr="marker.color" />
+      <Field multiValued={multiValued} noDefaultIndicator>
+        <DataSelector suppressMultiValuedMessage attr="marker.color" noDefaultIndicator />
         {this.props.container.marker &&
         this.props.container.marker.colorscale === MULTI_VALUED ? null : (
           <ColorscalePicker
             suppressMultiValuedMessage
             attr="marker.colorscale"
             updatePlot={this.setColorScale}
             colorscale={this.state.colorscale}
+            noDefaultIndicator
           />
         )}
       </Field>
@@ -159,11 +161,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,9 +77,15 @@ class UnconnectedMarkerSize extends Component {
             attr="marker.size"
             updatePlot={this.setValue}
             fullValue={value.constant}
+            noDefaultIndicator
           />
         ) : multiValued ? null : (
-          <DataSelector suppressMultiValuedMessage attr="marker.size" updatePlot={this.setValue} />
+          <DataSelector
+            suppressMultiValuedMessage
+            attr="marker.size"
+            updatePlot={this.setValue}
+            noDefaultIndicator
+          />
         )}
       </Field>
     );

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/components/fields/Radio.js

@@ -7,7 +7,7 @@ import {connectToContainer} from 'lib';
 export class UnconnectedRadio extends Component {
   render() {
     return (
-      <Field {...this.props}>
+      <Field {...this.props} noDefaultIndicator={this.props.noDefaultIndicator}>
         <RadioBlocks
           options={this.props.options}
           activeOption={this.props.fullValue}

src/components/fields/TextPosition.js

@@ -24,12 +24,17 @@ export class UnconnectedTextPosition extends Component {
     const control =
       this.state.posType === 'simple' ? (
         <>
-          <Info>
+          <Info noDefaultIndicator>
             {_(
               'This will position all text values on the plot according to the selected position.'
             )}
           </Info>
-          <Dropdown options={this.props.options} attr="textposition" clearable={false} />
+          <Dropdown
+            options={this.props.options}
+            attr="textposition"
+            clearable={false}
+            noDefaultIndicator
+          />
         </>
       ) : (
         <>

src/components/fields/UpdateMenuButtons.js

@@ -25,6 +25,7 @@ class UpdateMenuButtons extends Component {
         updatePlot={index => this.setState({currentButtonIndex: index})}
         clearable={false}
         fullValue={this.state.currentButtonIndex}
+        noDefaultIndicator
       />
     );
   }
@@ -33,7 +34,11 @@ class UpdateMenuButtons extends Component {
     return (
       <Field>
         {this.renderDropdown()}
-        <TextEditor attr={`buttons[${this.state.currentButtonIndex}].label`} richTextOnly />
+        <TextEditor
+          attr={`buttons[${this.state.currentButtonIndex}].label`}
+          richTextOnly
+          noDefaultIndicator
+        />
       </Field>
     );
   }

src/styles/components/fields/_field.scss

@@ -11,6 +11,35 @@
   padding: var(--spacing-quarter-unit) 0;
   width: 100%;
   position: relative;
+  &__default-indicator {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: var(--spacing-quarter-unit);
+    z-index: 2;
+    &__is-default {
+      background-color: $color-cornflower;
+    }
+    &__clear {
+      position: absolute;
+      display: flex;
+      width: 15px;
+      height: 100%;
+      top: 0;
+      left: var(--spacing-quarter-unit);
+      border-radius: 0 50% 50% 0;
+      background-color: $color-cornflower;
+      z-index: 1;
+      &::before {
+        content: '\00D7';
+        font-size: 20px;
+        font-weight: 600;
+        color: white;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
   &__no-title {
     width: 100%;
     padding: 0 var(--spacing-half-unit);