[Maps] More compressed forms

x-pack/legacy/plugins/maps/public/components/_index.scss

@@ -2,6 +2,26 @@
   margin-bottom: $euiSizeS;
 }
 
+.mapMetricEditorPanel__metricEditor {
+  padding: $euiSizeM 0;
+  border-top:  $euiBorderThin;
+
+  &:first-child {
+    padding-top: 0;
+    border-top: none;
+  }
+
+  &:last-child {
+    margin-bottom: $euiSizeM;
+    border-bottom: 1px solid $euiColorLightShade;
+  }
+}
+
+.mapMetricEditorPanel__metricRemoveButton {
+  padding-top: $euiSizeM;
+  text-align: right;
+}
+
 .mapGeometryFilter__geoFieldSuperSelect {
   height: $euiSizeL * 2;
 }

x-pack/legacy/plugins/maps/public/components/geometry_filter_form.js

@@ -16,6 +16,7 @@ import {
   EuiButton,
   EuiSelect,
   EuiSpacer,
+  EuiTextAlign,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ES_GEO_FIELD_TYPE, ES_SPATIAL_RELATIONS } from '../../common/constants';
@@ -154,8 +155,6 @@ export class GeometryFilterForm extends Component {
     });
     return (
       <EuiForm className={this.props.className}>
-        <EuiSpacer size="s" />
-
         <EuiFormRow
           label={i18n.translate('xpack.maps.geometryFilterForm.geometryLabelLabel', {
             defaultMessage: 'Geometry label',
@@ -190,14 +189,18 @@ export class GeometryFilterForm extends Component {
 
         {this._renderRelationInput()}
 
-        <EuiButton
-          size="s"
-          fill
-          onClick={this._onSubmit}
-          isDisabled={!this.state.geometryLabel || !this.state.geoFieldTag}
-        >
-          {this.props.buttonLabel}
-        </EuiButton>
+        <EuiSpacer size="m" />
+
+        <EuiTextAlign textAlign="right">
+          <EuiButton
+            size="s"
+            fill
+            onClick={this._onSubmit}
+            isDisabled={!this.state.geometryLabel || !this.state.geoFieldTag}
+          >
+            {this.props.buttonLabel}
+          </EuiButton>
+        </EuiTextAlign>
       </EuiForm>
     );
   }

x-pack/legacy/plugins/maps/public/components/metric_editor.js

@@ -43,7 +43,7 @@ export function MetricEditor({ fields, metricsFilter, metric, onChange, removeBu
         label={i18n.translate('xpack.maps.metricsEditor.selectFieldLabel', {
           defaultMessage: 'Field',
         })}
-        display="rowCompressed"
+        display="columnCompressed"
       >
         <SingleFieldSelect
           placeholder={i18n.translate('xpack.maps.metricsEditor.selectFieldPlaceholder', {
@@ -67,7 +67,7 @@ export function MetricEditor({ fields, metricsFilter, metric, onChange, removeBu
         label={i18n.translate('xpack.maps.metricsEditor.customLabel', {
           defaultMessage: 'Custom label',
         })}
-        display="rowCompressed"
+        display="columnCompressed"
       >
         <EuiFieldText
           onChange={onLabelChange}
@@ -84,8 +84,7 @@ export function MetricEditor({ fields, metricsFilter, metric, onChange, removeBu
         label={i18n.translate('xpack.maps.metricsEditor.aggregationLabel', {
           defaultMessage: 'Aggregation',
         })}
-        labelAppend={removeButton}
-        display="rowCompressed"
+        display="columnCompressed"
       >
         <MetricSelect
           onChange={onAggChange}
@@ -96,8 +95,8 @@ export function MetricEditor({ fields, metricsFilter, metric, onChange, removeBu
       </EuiFormRow>
 
       {fieldSelect}
-
       {labelInput}
+      {removeButton}
     </Fragment>
   );
 }

x-pack/legacy/plugins/maps/public/components/metrics_editor.js

@@ -8,7 +8,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EuiButtonIcon, EuiButtonEmpty, EuiPanel, EuiSpacer, EuiTextAlign } from '@elastic/eui';
+import { EuiButtonEmpty, EuiSpacer, EuiTextAlign } from '@elastic/eui';
 import { MetricEditor } from './metric_editor';
 
 export function MetricsEditor({ fields, metrics, onChange, allowMultipleMetrics, metricsFilter }) {
@@ -25,31 +25,34 @@ export function MetricsEditor({ fields, metrics, onChange, allowMultipleMetrics,
       let removeButton;
       if (index > 0) {
         removeButton = (
-          <EuiButtonIcon
-            iconType="trash"
-            size="s"
-            iconSize="s"
-            color="danger"
-            aria-label={i18n.translate('xpack.maps.metricsEditor.deleteMetricAriaLabel', {
-              defaultMessage: 'Delete metric',
-            })}
-            title={i18n.translate('xpack.maps.metricsEditor.deleteMetricButtonLabel', {
-              defaultMessage: 'Delete metric',
-            })}
-            onClick={onRemove}
-          />
+          <div className="mapMetricEditorPanel__metricRemoveButton">
+            <EuiButtonEmpty
+              iconType="trash"
+              size="xs"
+              color="danger"
+              onClick={onRemove}
+              aria-label={i18n.translate('xpack.maps.metricsEditor.deleteMetricAriaLabel', {
+                defaultMessage: 'Delete metric',
+              })}
+            >
+              <FormattedMessage
+                id="xpack.maps.metricsEditor.deleteMetricButtonLabel"
+                defaultMessage="Delete metric"
+              />
+            </EuiButtonEmpty>
+          </div>
         );
       }
       return (
-        <EuiPanel key={index} className="mapMetricEditorPanel" paddingSize="s">
+        <div key={index} className="mapMetricEditorPanel__metricEditor">
           <MetricEditor
             onChange={onMetricChange}
             metric={metric}
             fields={fields}
             metricsFilter={metricsFilter}
             removeButton={removeButton}
           />
-        </EuiPanel>
+        </div>
       );
     });
   }
@@ -80,7 +83,7 @@ export function MetricsEditor({ fields, metrics, onChange, allowMultipleMetrics,
 
   return (
     <Fragment>
-      {renderMetrics()}
+      <div className="mapMapLayerPanel__metrics">{renderMetrics()}</div>
 
       {renderAddMetricButton()}
     </Fragment>

x-pack/legacy/plugins/maps/public/connected_components/layer_panel/_index.scss

@@ -1,3 +1,3 @@
 @import './layer_panel';
 @import './filter_editor/filter_editor';
-@import './join_editor/resources/join';
+@import './join_editor/resources/join';