From 5eda3bfedb20cb884f09804b51e9a75826645042 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Tue, 18 Feb 2020 15:29:17 -0500
Subject: [PATCH 1/6] boilerplate

---
 .../components/color/color_map_select.js      | 59 ++++++++++++--
 .../components/color/dynamic_color_form.js    | 76 ++++++++++++++-----
 .../properties/dynamic_color_property.test.js | 27 +++++++
 3 files changed, 135 insertions(+), 27 deletions(-)

diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
index e8d5754ef4206..8d487fe7f5e20 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
@@ -6,10 +6,11 @@
 
 import React, { Component, Fragment } from 'react';
 
-import { EuiSuperSelect, EuiSpacer } from '@elastic/eui';
+import { EuiSuperSelect, EuiSpacer, EuiSelect, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { ColorStopsOrdinal } from './color_stops_ordinal';
 import { COLOR_MAP_TYPE } from '../../../../../../common/constants';
 import { ColorStopsCategorical } from './color_stops_categorical';
+import { i18n } from '@kbn/i18n';
 
 const CUSTOM_COLOR_MAP = 'CUSTOM_COLOR_MAP';
 
@@ -27,6 +28,45 @@ export class ColorMapSelect extends Component {
     };
   }
 
+  _renderColorMapToggle() {
+    if (!this.props.showColorMapTypeToggle) {
+      return null;
+    }
+    const options = [
+      {
+        value: COLOR_MAP_TYPE.ORDINAL,
+        text: i18n.translate('xpack.maps.styles.dynamicColorSelect.quantitativeLabel', {
+          defaultMessage: 'Quantitative',
+        }),
+      },
+      {
+        value: COLOR_MAP_TYPE.CATEGORICAL,
+        text: i18n.translate('xpack.maps.styles.dynamicColorSelect.qualitativeLavel', {
+          defaultMessage: 'Qualitative',
+        }),
+      },
+    ];
+
+    const selectedValue = this.props.styleProperty.isOrdinal()
+      ? COLOR_MAP_TYPE.ORDINAL
+      : COLOR_MAP_TYPE.CATEGORICAL;
+
+    return (
+      <EuiSelect
+        options={options}
+        value={selectedValue}
+        onChange={this.props.onColorMapTypeChange}
+        aria-label={i18n.translate(
+          'xpack.maps.styles.dynamicColorSelect.qualitativeOrQuantitativeAriaLabel',
+          {
+            defaultMessage: 'Select to style by gradient or color palette',
+          }
+        )}
+        compressed
+      />
+    );
+  }
+
   _onColorMapSelect = selectedValue => {
     const useCustomColorMap = selectedValue === CUSTOM_COLOR_MAP;
     this.props.onChange({
@@ -100,12 +140,17 @@ export class ColorMapSelect extends Component {
 
     return (
       <Fragment>
-        <EuiSuperSelect
-          options={colorMapOptionsWithCustom}
-          onChange={this._onColorMapSelect}
-          valueOfSelected={valueOfSelected}
-          hasDividers={true}
-        />
+        <EuiFlexGroup>
+          <EuiFlexItem>{this._renderColorMapToggle()}</EuiFlexItem>
+          <EuiFlexItem>
+            <EuiSuperSelect
+              options={colorMapOptionsWithCustom}
+              onChange={this._onColorMapSelect}
+              valueOfSelected={valueOfSelected}
+              hasDividers={true}
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
         {this._renderColorStopsInput()}
       </Fragment>
     );
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
index af5e5b37f5467..04ba358fb7bf3 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
@@ -13,6 +13,12 @@ import { CATEGORICAL_DATA_TYPES, COLOR_MAP_TYPE } from '../../../../../../common
 import { COLOR_GRADIENTS, COLOR_PALETTES } from '../../../color_utils';
 import { i18n } from '@kbn/i18n';
 
+function getDefaultColorMapType(fieldType) {
+  return CATEGORICAL_DATA_TYPES.includes(fieldType)
+    ? COLOR_MAP_TYPE.CATEGORICAL
+    : COLOR_MAP_TYPE.ORDINAL;
+}
+
 export function DynamicColorForm({
   fields,
   onDynamicStyleChange,
@@ -40,21 +46,47 @@ export function DynamicColorForm({
   };
 
   const onFieldChange = async ({ field }) => {
-    const { name, origin, type } = field;
+    const { name, origin, type: fieldType } = field;
+    const defaultColorMapType = getDefaultColorMapType(fieldType);
     onDynamicStyleChange(styleProperty.getStyleName(), {
       ...styleOptions,
       field: { name, origin },
-      type: CATEGORICAL_DATA_TYPES.includes(type)
-        ? COLOR_MAP_TYPE.CATEGORICAL
-        : COLOR_MAP_TYPE.ORDINAL,
+      type: defaultColorMapType,
+    });
+  };
+
+  const onColorMapTypeChange = async e => {
+    const colorMapType = e.target.value;
+    onDynamicStyleChange(styleProperty.getStyleName(), {
+      ...styleOptions,
+      type: colorMapType,
+    });
+  };
+
+  const getField = () => {
+    const fieldName = styleProperty.getFieldName();
+    if (!fieldName) {
+      return null;
+    }
+
+    return fields.find(field => {
+      return field.name === fieldName;
     });
   };
 
   const renderColorMapSelect = () => {
-    if (!styleOptions.field || !styleOptions.field.name) {
+    // if (!styleOptions.field || !styleOptions.field.name) {
+    //   return null;
+    // }
+
+    const field = getField();
+
+    if (!field) {
       return null;
     }
 
+    const showColorMapTypeToggle = !CATEGORICAL_DATA_TYPES.includes(field.type);
+
     if (styleProperty.isOrdinal()) {
       return (
         <ColorMapSelect
@@ -63,29 +95,33 @@ export function DynamicColorForm({
             defaultMessage: 'Custom color ramp',
           })}
           onChange={onColorMapSelect}
+          onColorMapTypeChange={onColorMapTypeChange}
           colorMapType={COLOR_MAP_TYPE.ORDINAL}
           color={styleOptions.color}
           customColorMap={styleOptions.customColorRamp}
           useCustomColorMap={_.get(styleOptions, 'useCustomColorRamp', false)}
           styleProperty={styleProperty}
+          showColorMapTypeToggle={showColorMapTypeToggle}
+        />
+      );
+    } else if (styleProperty.isCategorical()) {
+      return (
+        <ColorMapSelect
+          colorMapOptions={COLOR_PALETTES}
+          customOptionLabel={i18n.translate('xpack.maps.style.customColorPaletteLabel', {
+            defaultMessage: 'Custom color palette',
+          })}
+          onColorMapTypeChange={onColorMapTypeChange}
+          onChange={onColorMapSelect}
+          colorMapType={COLOR_MAP_TYPE.CATEGORICAL}
+          color={styleOptions.colorCategory}
+          customColorMap={styleOptions.customColorPalette}
+          useCustomColorMap={_.get(styleOptions, 'useCustomColorPalette', false)}
+          styleProperty={styleProperty}
+          showColorMapTypeToggle={showColorMapTypeToggle}
         />
       );
     }
-
-    return (
-      <ColorMapSelect
-        colorMapOptions={COLOR_PALETTES}
-        customOptionLabel={i18n.translate('xpack.maps.style.customColorPaletteLabel', {
-          defaultMessage: 'Custom color palette',
-        })}
-        onChange={onColorMapSelect}
-        colorMapType={COLOR_MAP_TYPE.CATEGORICAL}
-        color={styleOptions.colorCategory}
-        customColorMap={styleOptions.customColorPalette}
-        useCustomColorMap={_.get(styleOptions, 'useCustomColorPalette', false)}
-        styleProperty={styleProperty}
-      />
-    );
   };
 
   return (
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js
index 6b08fc2a105c3..7a03d8a7bed20 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/properties/dynamic_color_property.test.js
@@ -222,3 +222,30 @@ test('Should pluck the categorical style-meta from fieldmeta', async () => {
     ],
   });
 });
+
+test('Should read out ordinal/categorical correctly', async () => {
+  const categoricalColorStyle = makeProperty({
+    type: COLOR_MAP_TYPE.CATEGORICAL,
+    colorCategory: 'palette_0',
+    getCategoricalFieldMeta,
+  });
+
+  expect(categoricalColorStyle.isOrdinal()).toEqual(false);
+  expect(categoricalColorStyle.isCategorical()).toEqual(true);
+
+  const ordinalColorStyle = makeProperty({
+    type: undefined,
+    color: 'Blues',
+  });
+
+  expect(ordinalColorStyle.isOrdinal()).toEqual(true);
+  expect(ordinalColorStyle.isCategorical()).toEqual(false);
+
+  const ordinalColorStyle2 = makeProperty({
+    type: COLOR_MAP_TYPE.ORDINAL,
+    colorCategory: 'palette_0',
+  });
+
+  expect(ordinalColorStyle2.isOrdinal()).toEqual(true);
+  expect(ordinalColorStyle2.isCategorical()).toEqual(false);
+});

From 4d0dde5ed9444c99d990661ff8eeec5350b76540 Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Tue, 18 Feb 2020 16:20:26 -0500
Subject: [PATCH 2/6] styling

---
 .../components/color/color_map_select.js      | 52 ++++++++++++-------
 1 file changed, 34 insertions(+), 18 deletions(-)

diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
index 8d487fe7f5e20..3a40ac0ffc3d4 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
@@ -6,7 +6,7 @@
 
 import React, { Component, Fragment } from 'react';
 
-import { EuiSuperSelect, EuiSpacer, EuiSelect, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiSpacer, EuiSelect, EuiSuperSelect, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { ColorStopsOrdinal } from './color_stops_ordinal';
 import { COLOR_MAP_TYPE } from '../../../../../../common/constants';
 import { ColorStopsCategorical } from './color_stops_categorical';
@@ -29,9 +29,6 @@ export class ColorMapSelect extends Component {
   }
 
   _renderColorMapToggle() {
-    if (!this.props.showColorMapTypeToggle) {
-      return null;
-    }
     const options = [
       {
         value: COLOR_MAP_TYPE.ORDINAL,
@@ -91,10 +88,6 @@ export class ColorMapSelect extends Component {
   };
 
   _renderColorStopsInput() {
-    if (!this.props.useCustomColorMap) {
-      return null;
-    }
-
     if (this.props.colorMapType === COLOR_MAP_TYPE.ORDINAL) {
       return (
         <Fragment>
@@ -120,7 +113,7 @@ export class ColorMapSelect extends Component {
     );
   }
 
-  render() {
+  _renderColorMapSelections() {
     const colorMapOptionsWithCustom = [
       {
         value: CUSTOM_COLOR_MAP,
@@ -138,20 +131,43 @@ export class ColorMapSelect extends Component {
         : '';
     }
 
+    let toggle;
+    if (this.props.showColorMapTypeToggle) {
+      toggle = <EuiFlexItem>{this._renderColorMapToggle()}</EuiFlexItem>;
+    } else {
+      toggle = <Fragment />;
+    }
+
     return (
       <Fragment>
-        <EuiFlexGroup>
-          <EuiFlexItem>{this._renderColorMapToggle()}</EuiFlexItem>
+        {toggle}
+        <EuiFlexItem>
+          <EuiSuperSelect
+            options={colorMapOptionsWithCustom}
+            onChange={this._onColorMapSelect}
+            valueOfSelected={valueOfSelected}
+            hasDividers={true}
+          />
+        </EuiFlexItem>
+      </Fragment>
+    );
+  }
+
+  render() {
+    return (
+      <Fragment>
+        <EuiFlexGroup gutterSize={'none'} direction={'column'}>
+          <EuiFlexItem>
+            <EuiFlexGroup gutterSize={'xs'} justifyContent="spaceBetween">
+              {this._renderColorMapSelections()}
+            </EuiFlexGroup>
+          </EuiFlexItem>
           <EuiFlexItem>
-            <EuiSuperSelect
-              options={colorMapOptionsWithCustom}
-              onChange={this._onColorMapSelect}
-              valueOfSelected={valueOfSelected}
-              hasDividers={true}
-            />
+            <EuiFlexGroup gutterSize={'xs'}>
+              <EuiFlexItem>{this._renderColorStopsInput()}</EuiFlexItem>
+            </EuiFlexGroup>
           </EuiFlexItem>
         </EuiFlexGroup>
-        {this._renderColorStopsInput()}
       </Fragment>
     );
   }

From 8adb584ddc3397e70dbc614cfdf376025d42e88c Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Tue, 18 Feb 2020 16:23:58 -0500
Subject: [PATCH 3/6] fix

---
 .../layers/styles/vector/components/color/color_map_select.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
index 3a40ac0ffc3d4..cd5a799f27128 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
@@ -88,6 +88,10 @@ export class ColorMapSelect extends Component {
   };
 
   _renderColorStopsInput() {
+    if (!this.props.useCustomColorMap) {
+      return null;
+    }
+
     if (this.props.colorMapType === COLOR_MAP_TYPE.ORDINAL) {
       return (
         <Fragment>

From 69de1b826d00b8df5564bdd4e6d78e8ece067aca Mon Sep 17 00:00:00 2001
From: Thomas Neirynck <thomas@elastic.co>
Date: Thu, 20 Feb 2020 11:39:28 -0500
Subject: [PATCH 4/6] remove cruft

---
 .../styles/vector/components/color/dynamic_color_form.js     | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
index 04ba358fb7bf3..1d53fc05f9dec 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
@@ -75,12 +75,7 @@ export function DynamicColorForm({
   };
 
   const renderColorMapSelect = () => {
-    // if (!styleOptions.field || !styleOptions.field.name) {
-    //   return null;
-    // }
-
     const field = getField();
-
     if (!field) {
       return null;
     }

From c96a65e5e2a367a6be22670509489b63cd1c4271 Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Thu, 20 Feb 2020 16:56:30 +0000
Subject: [PATCH 5/6] Improving color map select styles

---
 .../components/color/color_map_select.js      | 50 ++++++++-----------
 1 file changed, 20 insertions(+), 30 deletions(-)

diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
index 3a40ac0ffc3d4..c87a3e22f0c10 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
@@ -90,26 +90,20 @@ export class ColorMapSelect extends Component {
   _renderColorStopsInput() {
     if (this.props.colorMapType === COLOR_MAP_TYPE.ORDINAL) {
       return (
-        <Fragment>
-          <EuiSpacer size="s" />
-          <ColorStopsOrdinal
-            colorStops={this.state.customColorMap}
-            onChange={this._onCustomColorMapChange}
-          />
-        </Fragment>
+        <ColorStopsOrdinal
+          colorStops={this.state.customColorMap}
+          onChange={this._onCustomColorMapChange}
+        />
       );
     }
 
     return (
-      <Fragment>
-        <EuiSpacer size="s" />
-        <ColorStopsCategorical
-          colorStops={this.state.customColorMap}
-          field={this.props.styleProperty.getField()}
-          getValueSuggestions={this.props.styleProperty.getValueSuggestions}
-          onChange={this._onCustomColorMapChange}
-        />
-      </Fragment>
+      <ColorStopsCategorical
+        colorStops={this.state.customColorMap}
+        field={this.props.styleProperty.getField()}
+        getValueSuggestions={this.props.styleProperty.getValueSuggestions}
+        onChange={this._onCustomColorMapChange}
+      />
     );
   }
 
@@ -133,40 +127,36 @@ export class ColorMapSelect extends Component {
 
     let toggle;
     if (this.props.showColorMapTypeToggle) {
-      toggle = <EuiFlexItem>{this._renderColorMapToggle()}</EuiFlexItem>;
+      toggle = <EuiFlexItem grow={false}>{this._renderColorMapToggle()}</EuiFlexItem>;
     } else {
       toggle = <Fragment />;
     }
 
     return (
-      <Fragment>
+      <EuiFlexGroup gutterSize={'none'}>
         {toggle}
         <EuiFlexItem>
           <EuiSuperSelect
+            compressed
             options={colorMapOptionsWithCustom}
             onChange={this._onColorMapSelect}
             valueOfSelected={valueOfSelected}
             hasDividers={true}
           />
         </EuiFlexItem>
-      </Fragment>
+      </EuiFlexGroup>
     );
   }
 
   render() {
     return (
       <Fragment>
-        <EuiFlexGroup gutterSize={'none'} direction={'column'}>
-          <EuiFlexItem>
-            <EuiFlexGroup gutterSize={'xs'} justifyContent="spaceBetween">
-              {this._renderColorMapSelections()}
-            </EuiFlexGroup>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiFlexGroup gutterSize={'xs'}>
-              <EuiFlexItem>{this._renderColorStopsInput()}</EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexItem>
+        {this._renderColorMapSelections()}
+
+        <EuiSpacer size="s" />
+
+        <EuiFlexGroup>
+          <EuiFlexItem>{this._renderColorStopsInput()}</EuiFlexItem>
         </EuiFlexGroup>
       </Fragment>
     );

From 64c865027ee00241ef500f97a8010b06ab8411ee Mon Sep 17 00:00:00 2001
From: miukimiu <elizabet.oliveira@elastic.co>
Date: Fri, 21 Feb 2020 19:12:12 +0000
Subject: [PATCH 6/6] Improving styles

---
 .../layer_panel/_index.scss                   |  3 +-
 .../style_settings/_style_settings.scss       |  3 ++
 .../style_settings/style_settings.js          |  2 +-
 .../vector/components/color/_color_stops.scss | 21 ---------
 .../components/color/color_map_select.js      |  8 +++-
 .../vector/components/color/color_stops.js    | 44 ++++++++++++-------
 .../components/color/dynamic_color_form.js    |  6 ++-
 .../components/color/static_color_form.js     |  6 ++-
 .../components/label/dynamic_label_form.js    |  6 ++-
 .../components/label/static_label_form.js     |  6 ++-
 .../orientation/dynamic_orientation_form.js   |  6 ++-
 .../orientation/static_orientation_form.js    |  6 ++-
 .../components/size/dynamic_size_form.js      |  6 ++-
 .../components/size/static_size_form.js       |  6 ++-
 .../vector/components/style_prop_editor.js    |  6 ++-
 .../components/symbol/dynamic_icon_form.js    |  6 ++-
 .../vector/components/symbol/icon_select.js   |  1 +
 .../components/symbol/static_icon_form.js     |  6 ++-
 18 files changed, 85 insertions(+), 63 deletions(-)
 create mode 100644 x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/_style_settings.scss

diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/_index.scss b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/_index.scss
index b219f59476ce9..fd074edf032fa 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/_index.scss
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/_index.scss
@@ -1,3 +1,4 @@
 @import './layer_panel';
 @import './filter_editor/filter_editor';
-@import './join_editor/resources/join';
\ No newline at end of file
+@import './join_editor/resources/join';
+@import './style_settings/style_settings';
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/_style_settings.scss b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/_style_settings.scss
new file mode 100644
index 0000000000000..c671368552440
--- /dev/null
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/_style_settings.scss
@@ -0,0 +1,3 @@
+.mapStyleSettings__fixedBox {
+    width: 120px;
+}
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/style_settings.js b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/style_settings.js
index 2857065f04c70..69cf51fb29c0d 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/style_settings.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/layer_panel/style_settings/style_settings.js
@@ -21,7 +21,7 @@ export function StyleSettings({ layer, updateStyleDescriptor }) {
 
   return (
     <Fragment>
-      <EuiPanel>
+      <EuiPanel className="mapStyleSettings">
         <EuiFlexGroup>
           <EuiFlexItem>
             <EuiTitle size="xs">
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/_color_stops.scss b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/_color_stops.scss
index 001ca0685d0e9..519e97f4b30cd 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/_color_stops.scss
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/_color_stops.scss
@@ -1,6 +1,5 @@
 .mapColorStop {
   position: relative;
-  padding-right: $euiSizeXL + $euiSizeS;
 
   & + & {
     margin-top: $euiSizeS;
@@ -17,23 +16,3 @@
   }
 }
 
-.mapColorStop__icons {
-  flex-shrink: 0;
-  display: none;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  margin-right: -$euiSizeS;
-  margin-top: -$euiSizeM;
-}
-
-@keyframes mapColorStopBecomeVisible {
-
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
index eb6bb35cc0c14..f71bd52210cd7 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_map_select.js
@@ -131,13 +131,17 @@ export class ColorMapSelect extends Component {
 
     let toggle;
     if (this.props.showColorMapTypeToggle) {
-      toggle = <EuiFlexItem grow={false}>{this._renderColorMapToggle()}</EuiFlexItem>;
+      toggle = (
+        <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+          {this._renderColorMapToggle()}
+        </EuiFlexItem>
+      );
     } else {
       toggle = <Fragment />;
     }
 
     return (
-      <EuiFlexGroup gutterSize={'none'}>
+      <EuiFlexGroup gutterSize="xs">
         {toggle}
         <EuiFlexItem>
           <EuiSuperSelect
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js
index 47c2d037e0c79..509e8f89c0c04 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/color_stops.js
@@ -11,6 +11,18 @@ import { i18n } from '@kbn/i18n';
 import { EuiButtonIcon, EuiColorPicker, EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
 
 function getColorStopRow({ index, errors, stopInput, colorInput, deleteButton, onAdd }) {
+  const colorPickerButtons = (
+    <div className="mapColorStop__icons">
+      {deleteButton}
+      <EuiButtonIcon
+        iconType="plusInCircle"
+        color="primary"
+        aria-label="Add"
+        title="Add"
+        onClick={onAdd}
+      />
+    </div>
+  );
   return (
     <EuiFormRow
       key={index}
@@ -19,22 +31,19 @@ function getColorStopRow({ index, errors, stopInput, colorInput, deleteButton, o
       error={errors}
       display="rowCompressed"
     >
-      <div>
-        <EuiFlexGroup responsive={false} alignItems="center" gutterSize="xs">
-          <EuiFlexItem>{stopInput}</EuiFlexItem>
-          <EuiFlexItem>{colorInput}</EuiFlexItem>
-        </EuiFlexGroup>
-        <div className="mapColorStop__icons">
-          {deleteButton}
-          <EuiButtonIcon
-            iconType="plusInCircle"
-            color="primary"
-            aria-label="Add"
-            title="Add"
-            onClick={onAdd}
+      <EuiFlexGroup alignItems="center" gutterSize="xs">
+        <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+          {stopInput}
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiColorPicker
+            onChange={colorInput.onColorChange}
+            color={colorInput.color}
+            compressed
+            append={colorPickerButtons}
           />
-        </div>
-      </div>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiFormRow>
   );
 }
@@ -87,7 +96,10 @@ export const ColorStops = ({
             defaultMessage: 'Color must provide a valid hex value',
           })
         : undefined,
-      colorInput: <EuiColorPicker onChange={onColorChange} color={color} compressed />,
+      colorInput: {
+        onColorChange: onColorChange,
+        color: color,
+      },
     };
   }
 
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
index 1d53fc05f9dec..673f84c04bd4c 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/dynamic_color_form.js
@@ -121,8 +121,10 @@ export function DynamicColorForm({
 
   return (
     <Fragment>
-      <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-        <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+      <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+        <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+          {staticDynamicSelect}
+        </EuiFlexItem>
         <EuiFlexItem>
           <FieldSelect
             fields={fields}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/static_color_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/static_color_form.js
index 48befa1ca74c0..ab1634a53a966 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/static_color_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/color/static_color_form.js
@@ -18,8 +18,10 @@ export function StaticColorForm({
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <EuiColorPicker
           onChange={onColorChange}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js
index 7ad541efe0ab7..0c9011b811f38 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/dynamic_label_form.js
@@ -21,8 +21,10 @@ export function DynamicLabelForm({
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <FieldSelect
           fields={fields}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/static_label_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/static_label_form.js
index 721487b5d8ff0..3b7145fdfc884 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/static_label_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/label/static_label_form.js
@@ -14,8 +14,10 @@ export function StaticLabelForm({ onStaticStyleChange, staticDynamicSelect, styl
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <EuiFieldText
           placeholder={i18n.translate('xpack.maps.styles.staticLabel.valuePlaceholder', {
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_form.js
index df0ae6513f8ed..5879e94991054 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/dynamic_orientation_form.js
@@ -24,8 +24,10 @@ export function DynamicOrientationForm({
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <FieldSelect
           fields={fields}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/static_orientation_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/static_orientation_form.js
index 8c4418f95e1d2..b28743f426262 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/static_orientation_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/orientation/static_orientation_form.js
@@ -14,8 +14,10 @@ export function StaticOrientationForm({ onStaticStyleChange, staticDynamicSelect
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <ValidatedRange
           min={0}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_form.js
index 141a941017790..4918c2d906eef 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/dynamic_size_form.js
@@ -44,8 +44,10 @@ export function DynamicSizeForm({
 
   return (
     <Fragment>
-      <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-        <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+      <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+        <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+          {staticDynamicSelect}
+        </EuiFlexItem>
         <EuiFlexItem>
           <FieldSelect
             fields={fields}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/static_size_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/static_size_form.js
index d8fe1322db3e3..90e540cc6802a 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/static_size_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/size/static_size_form.js
@@ -15,8 +15,10 @@ export function StaticSizeForm({ onStaticStyleChange, staticDynamicSelect, style
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <ValidatedRange
           min={0}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_prop_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_prop_editor.js
index f1180a3a56494..b9f04711286c9 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_prop_editor.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/style_prop_editor.js
@@ -97,8 +97,10 @@ export class StylePropEditor extends Component {
         anchorClassName="mapStyleFormDisabledTooltip"
         content={getDisabledByMessage(this.props.disabledBy)}
       >
-        <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-          <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+        <EuiFlexGroup gutterSize="xs">
+          <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+            {staticDynamicSelect}
+          </EuiFlexItem>
           <EuiFlexItem>
             <EuiFieldText compressed disabled />
           </EuiFlexItem>
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js
index afa11daf45217..9065102dc8bd7 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/dynamic_icon_form.js
@@ -53,8 +53,10 @@ export function DynamicIconForm({
 
   return (
     <Fragment>
-      <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-        <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+      <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+        <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+          {staticDynamicSelect}
+        </EuiFlexItem>
         <EuiFlexItem>
           <FieldSelect
             fields={fields}
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/icon_select.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/icon_select.js
index 68f7a30b22862..41cba1b76d97a 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/icon_select.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/icon_select.js
@@ -128,6 +128,7 @@ export class IconSelect extends Component {
         closePopover={this._closePopover}
         anchorPosition="downLeft"
         panelPaddingSize="s"
+        display="block"
       >
         <EuiFocusTrap clickOutsideDisables={true}>{this._renderIconSelectable()}</EuiFocusTrap>
       </EuiPopover>
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/static_icon_form.js b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/static_icon_form.js
index b20d8f2eba162..9b00b2fe38d7b 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/static_icon_form.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/vector/components/symbol/static_icon_form.js
@@ -20,8 +20,10 @@ export function StaticIconForm({
   };
 
   return (
-    <EuiFlexGroup gutterSize="none" justifyContent="flexEnd">
-      <EuiFlexItem grow={false}>{staticDynamicSelect}</EuiFlexItem>
+    <EuiFlexGroup gutterSize="xs" justifyContent="flexEnd">
+      <EuiFlexItem grow={false} className="mapStyleSettings__fixedBox">
+        {staticDynamicSelect}
+      </EuiFlexItem>
       <EuiFlexItem>
         <IconSelect
           isDarkMode={isDarkMode}