[Maps] 7.9 design improvements (#71563)

elizabetdev · elasticmachine · elizabetdev · commit 2f445a0875f5 · 2020-07-14T16:01:27.000+01:00
* Design improvements

* more improvements

* Updated snapshots

* Removing unecessary flex item

* Updated snapshot

* Addressing pr review

Co-authored-by: Elastic Machine &lt;elasticmachine@users.noreply.github.com&gt;
diff --git a/x-pack/plugins/maps/public/classes/sources/ems_tms_source/ems_base_map_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/ems_tms_source/ems_base_map_layer_wizard.tsx
@@ -5,6 +5,7 @@
  */
 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { EuiPanel } from '@elastic/eui';
 import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_registry';
 // @ts-ignore
 import { EMSTMSSource, sourceTitle } from './ems_tms_source';
@@ -32,7 +33,11 @@ export const emsBaseMapLayerWizardConfig: LayerWizard = {
       previewLayers([layerDescriptor]);
     };
 
-    return <TileServiceSelect onTileSelect={onSourceConfigChange} />;
+    return (
+      <EuiPanel>
+        <TileServiceSelect onTileSelect={onSourceConfigChange} />
+      </EuiPanel>
+    );
   },
   title: sourceTitle,
 };
diff --git a/x-pack/plugins/maps/public/classes/sources/ems_tms_source/tile_service_select.js b/x-pack/plugins/maps/public/classes/sources/ems_tms_source/tile_service_select.js
@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { EuiSelect, EuiFormRow, EuiPanel } from '@elastic/eui';
+import { EuiSelect, EuiFormRow } from '@elastic/eui';
 
 import { getEmsTmsServices } from '../../../meta';
 import { getEmsUnavailableMessage } from '../../../components/ems_unavailable_message';
@@ -71,25 +71,23 @@ export class TileServiceSelect extends React.Component {
     }
 
     return (
-      <EuiPanel>
-        <EuiFormRow
-          label={i18n.translate('xpack.maps.source.emsTile.label', {
-            defaultMessage: 'Tile service',
-          })}
-          helpText={helpText}
-          display="columnCompressed"
-        >
-          <EuiSelect
-            hasNoInitialSelection={!selectedId}
-            value={selectedId}
-            options={this.state.emsTmsOptions}
-            onChange={this._onChange}
-            isLoading={!this.state.hasLoaded}
-            disabled={this.state.hasLoaded && this.state.emsTmsOptions.length === 0}
-            compressed
-          />
-        </EuiFormRow>
-      </EuiPanel>
+      <EuiFormRow
+        label={i18n.translate('xpack.maps.source.emsTile.label', {
+          defaultMessage: 'Tile service',
+        })}
+        helpText={helpText}
+        display="columnCompressed"
+      >
+        <EuiSelect
+          hasNoInitialSelection={!selectedId}
+          value={selectedId}
+          options={this.state.emsTmsOptions}
+          onChange={this._onChange}
+          isLoading={!this.state.hasLoaded}
+          disabled={this.state.hasLoaded && this.state.emsTmsOptions.length === 0}
+          compressed
+        />
+      </EuiFormRow>
     );
   }
 }
diff --git a/x-pack/plugins/maps/public/classes/sources/ems_tms_source/update_source_editor.js b/x-pack/plugins/maps/public/classes/sources/ems_tms_source/update_source_editor.js
@@ -26,9 +26,7 @@ export function UpdateSourceEditor({ onChange, config }) {
             />
           </h5>
         </EuiTitle>
-
         <EuiSpacer size="m" />
-
         <TileServiceSelect onTileSelect={_onTileSelect} config={config} />
       </EuiPanel>
 
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/color/color_map_select.js b/x-pack/plugins/maps/public/classes/styles/vector/components/color/color_map_select.js
@@ -161,7 +161,7 @@ export class ColorMapSelect extends Component {
 
     return (
       <Fragment>
-        <EuiFlexGroup gutterSize={'none'}>
+        <EuiFlexGroup gutterSize={'xs'}>
           {toggle}
           <EuiFlexItem>
             <EuiColorPalettePicker
diff --git a/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/__snapshots__/layer_wizard_select.test.tsx.snap b/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/__snapshots__/layer_wizard_select.test.tsx.snap
diff --git a/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/layer_wizard_select.tsx b/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/layer_wizard_select.tsx
@@ -115,7 +115,7 @@ export class LayerWizardSelect extends Component<Props, State> {
     });
 
     return (
-      <EuiFacetGroup layout="horizontal">
+      <EuiFacetGroup layout="horizontal" gutterSize="s">
         <EuiFacetButton
           key="all"
           isSelected={!this.state.selectedCategory}
@@ -154,6 +154,7 @@ export class LayerWizardSelect extends Component<Props, State> {
           <EuiFlexItem key={layerWizard.title}>
             <EuiCard
               title={layerWizard.title}
+              titleSize="xs"
               icon={icon}
               onClick={onClick}
               description={layerWizard.description}
@@ -166,6 +167,7 @@ export class LayerWizardSelect extends Component<Props, State> {
     return (
       <>
         {this._renderCategoryFacets()}
+
         <EuiSpacer size="s" />
         <EuiFlexGrid columns={2} gutterSize="m">
           {wizardCards}
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/__snapshots__/join_editor.test.tsx.snap b/x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/__snapshots__/join_editor.test.tsx.snap
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/join_editor.tsx b/x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/join_editor.tsx
@@ -85,7 +85,7 @@ export function JoinEditor({ joins, layer, onChange, leftJoinFields, layerDispla
           <EuiButtonEmpty
             onClick={addJoin}
             size="xs"
-            iconType="plusInCircle"
+            iconType="plusInCircleFilled"
             aria-label={i18n.translate('xpack.maps.layerPanel.joinEditor.addJoinAriaLabel', {
               defaultMessage: 'Add join',
             })}
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/resources/_join.scss b/x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/resources/_join.scss
@@ -2,7 +2,7 @@
   position: relative;
   background: tintOrShade($euiColorLightShade, 85%, 0);
   border-radius: $euiBorderRadius;
-  padding: $euiSizeXS;
+  padding: $euiSizeS $euiSizeXS;
 
   .mapJoinItem__inner {
     @include euiScrollBar;
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/resources/join.js b/x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/resources/join.js
@@ -148,13 +148,15 @@ export class Join extends Component {
         </EuiFlexItem>
       );
       globalFilterCheckbox = (
-        <GlobalFilterCheckbox
-          applyGlobalQuery={right.applyGlobalQuery}
-          setApplyGlobalQuery={this._onApplyGlobalQueryChange}
-          label={i18n.translate('xpack.maps.layerPanel.join.applyGlobalQueryCheckboxLabel', {
-            defaultMessage: `Apply global filter to join`,
-          })}
-        />
+        <EuiFlexItem>
+          <GlobalFilterCheckbox
+            applyGlobalQuery={right.applyGlobalQuery}
+            setApplyGlobalQuery={this._onApplyGlobalQueryChange}
+            label={i18n.translate('xpack.maps.layerPanel.join.applyGlobalQueryCheckboxLabel', {
+              defaultMessage: `Apply global filter to join`,
+            })}
+          />
+        </EuiFlexItem>
       );
     }
 
