From 18677bbcd0bd82a40ae1cf0d58938fe536b11bc3 Mon Sep 17 00:00:00 2001
From: dmt0 <dmitry@plot.ly>
Date: Thu, 11 Apr 2019 23:55:16 -0400
Subject: [PATCH 1/3] Default value indicators

---
 src/components/fields/ColorPicker.js      |  3 ++-
 src/components/fields/Field.js            | 12 +++++++++++-
 src/components/fields/MarkerColor.js      |  7 ++++---
 src/components/fields/MarkerSize.js       |  1 +
 src/components/fields/MultiColorPicker.js | 20 ++++++++++++++++----
 src/components/fields/Numeric.js          |  3 ++-
 src/styles/components/fields/_field.scss  |  9 +++++++++
 7 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/src/components/fields/ColorPicker.js b/src/components/fields/ColorPicker.js
index f14303b83..717fb808a 100644
--- a/src/components/fields/ColorPicker.js
+++ b/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,
 };
 
diff --git a/src/components/fields/Field.js b/src/components/fields/Field.js
index adb4bc902..d78c92d31 100644
--- a/src/components/fields/Field.js
+++ b/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,6 +114,7 @@ Field.propTypes = {
   children: PropTypes.node,
   extraComponent: PropTypes.any,
   fieldContainerClassName: PropTypes.string,
+  noDefaultIndicator: PropTypes.bool,
 };
 
 Field.contextTypes = {
@@ -113,6 +122,7 @@ Field.contextTypes = {
   description: PropTypes.string,
   attr: PropTypes.string,
   showFieldTooltips: PropTypes.bool,
+  container: PropTypes.object,
 };
 
 Field.defaultProps = {
diff --git a/src/components/fields/MarkerColor.js b/src/components/fields/MarkerColor.js
index ea657e50f..3304039ca 100644
--- a/src/components/fields/MarkerColor.js
+++ b/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.')}
diff --git a/src/components/fields/MarkerSize.js b/src/components/fields/MarkerSize.js
index def878e00..8ec86cc0a 100644
--- a/src/components/fields/MarkerSize.js
+++ b/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} />
diff --git a/src/components/fields/MultiColorPicker.js b/src/components/fields/MultiColorPicker.js
index d5d6657fd..b2739d555 100644
--- a/src/components/fields/MultiColorPicker.js
+++ b/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,
 };
 
diff --git a/src/components/fields/Numeric.js b/src/components/fields/Numeric.js
index f3a991298..e67e2cd79 100644
--- a/src/components/fields/Numeric.js
+++ b/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,
 };
 
diff --git a/src/styles/components/fields/_field.scss b/src/styles/components/fields/_field.scss
index 5250aa280..f67ebe62a 100644
--- a/src/styles/components/fields/_field.scss
+++ b/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);

From c59cf671f74afdf97a2eb51ac48f0817ba8f2ce0 Mon Sep 17 00:00:00 2001
From: dmt0 <dmitry@plot.ly>
Date: Fri, 12 Apr 2019 00:28:03 -0400
Subject: [PATCH 2/3] Cleanup

---
 src/components/fields/Dropdown.js          | 2 +-
 src/components/fields/LocationSelector.js  | 1 +
 src/components/fields/MarkerColor.js       | 3 ++-
 src/components/fields/MarkerSize.js        | 7 ++++++-
 src/components/fields/Radio.js             | 2 +-
 src/components/fields/TextPosition.js      | 9 +++++++--
 src/components/fields/UpdateMenuButtons.js | 7 ++++++-
 7 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/components/fields/Dropdown.js b/src/components/fields/Dropdown.js
index 1bbdda58f..cf0610b43 100644
--- a/src/components/fields/Dropdown.js
+++ b/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}
diff --git a/src/components/fields/LocationSelector.js b/src/components/fields/LocationSelector.js
index 20f2b7aad..65e334dfc 100644
--- a/src/components/fields/LocationSelector.js
+++ b/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' ? (
diff --git a/src/components/fields/MarkerColor.js b/src/components/fields/MarkerColor.js
index 3304039ca..6102009db 100644
--- a/src/components/fields/MarkerColor.js
+++ b/src/components/fields/MarkerColor.js
@@ -127,7 +127,7 @@ class UnconnectedMarkerColor extends Component {
           this.props.container.marker.colorsrc === MULTI_VALUED));
     return (
       <Field multiValued={multiValued} noDefaultIndicator>
-        <DataSelector suppressMultiValuedMessage attr="marker.color" />
+        <DataSelector suppressMultiValuedMessage attr="marker.color" noDefaultIndicator />
         {this.props.container.marker &&
         this.props.container.marker.colorscale === MULTI_VALUED ? null : (
           <ColorscalePicker
@@ -135,6 +135,7 @@ class UnconnectedMarkerColor extends Component {
             attr="marker.colorscale"
             updatePlot={this.setColorScale}
             colorscale={this.state.colorscale}
+            noDefaultIndicator
           />
         )}
       </Field>
diff --git a/src/components/fields/MarkerSize.js b/src/components/fields/MarkerSize.js
index 8ec86cc0a..c6bc1bf77 100644
--- a/src/components/fields/MarkerSize.js
+++ b/src/components/fields/MarkerSize.js
@@ -80,7 +80,12 @@ class UnconnectedMarkerSize extends Component {
             noDefaultIndicator
           />
         ) : multiValued ? null : (
-          <DataSelector suppressMultiValuedMessage attr="marker.size" updatePlot={this.setValue} />
+          <DataSelector
+            suppressMultiValuedMessage
+            attr="marker.size"
+            updatePlot={this.setValue}
+            noDefaultIndicator
+          />
         )}
       </Field>
     );
diff --git a/src/components/fields/Radio.js b/src/components/fields/Radio.js
index ccf63f9c7..e55006f9d 100644
--- a/src/components/fields/Radio.js
+++ b/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}
diff --git a/src/components/fields/TextPosition.js b/src/components/fields/TextPosition.js
index 0542c7888..ad3d636ee 100644
--- a/src/components/fields/TextPosition.js
+++ b/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
+          />
         </>
       ) : (
         <>
diff --git a/src/components/fields/UpdateMenuButtons.js b/src/components/fields/UpdateMenuButtons.js
index 3edf503b5..8d9611f15 100644
--- a/src/components/fields/UpdateMenuButtons.js
+++ b/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>
     );
   }

From 5600b1b9b4002fdadda6ba16046efafa74dfb8f4 Mon Sep 17 00:00:00 2001
From: dmt0 <dmitry@plot.ly>
Date: Thu, 12 Sep 2019 11:38:06 -0400
Subject: [PATCH 3/3] Clear fields

---
 src/components/fields/Field.js           |  5 ++++-
 src/styles/components/fields/_field.scss | 20 ++++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/components/fields/Field.js b/src/components/fields/Field.js
index d78c92d31..48aadc78d 100644
--- a/src/components/fields/Field.js
+++ b/src/components/fields/Field.js
@@ -62,7 +62,10 @@ class Field extends Component {
 
     return (
       <div className={containerClassName}>
-        {!noDefaultIndicator && <div className={defaultIndicatorClassName} />}
+        {!noDefaultIndicator && (
+          <div onHover={this.setState({showClear: true})} className={defaultIndicatorClassName} />
+        )}
+        {!noDefaultIndicator && <div className="field__default-indicator__clear" />}
         {label ? (
           <div
             className={bem('field', 'title')}
diff --git a/src/styles/components/fields/_field.scss b/src/styles/components/fields/_field.scss
index f67ebe62a..ff080a886 100644
--- a/src/styles/components/fields/_field.scss
+++ b/src/styles/components/fields/_field.scss
@@ -16,9 +16,29 @@
     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%;