Merge pull request elastic#10 from cchaos/maps-more-compressed/vector…

…-styles Maps more compressed -- Vector styles
elizabetdev · Sep 26, 2019 · 8ebd19d · 8ebd19d
2 parents fee0699 + 9ed2601
commit 8ebd19d
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 91 deletions.
diff --git a/...lic/layers/styles/components/vector/__snapshots__/vector_style_symbol_editor.test.js.snap b/...lic/layers/styles/components/vector/__snapshots__/vector_style_symbol_editor.test.js.snap
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/_color_stops.scss b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/color/_color_stops.scss
@@ -1,6 +1,6 @@
 .mapColorStop {
   position: relative;
-  padding-right: $euiSizeXL + $euiSizeXS;
+  padding-right: $euiSizeXL + $euiSizeS;
 
   & + & {
     margin-top: $euiSizeS;

diff --git a/...s/maps/public/layers/styles/components/vector/orientation/static_orientation_selection.js b/...s/maps/public/layers/styles/components/vector/orientation/static_orientation_selection.js
@@ -23,6 +23,7 @@ export function StaticOrientationSelection({ onChange, styleOptions }) {
       showInput
       showLabels
       compressed
+      append="°"
     />
   );
 }

diff --git a/...ck/legacy/plugins/maps/public/layers/styles/components/vector/size/size_range_selector.js b/...ck/legacy/plugins/maps/public/layers/styles/components/vector/size/size_range_selector.js
@@ -8,6 +8,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ValidatedDualRange } from 'ui/validated_range';
 import { DEFAULT_MIN_SIZE, DEFAULT_MAX_SIZE } from '../../../vector_style_defaults';
+import { i18n } from '@kbn/i18n';
 
 export function SizeRangeSelector({ minSize, maxSize, onChange, ...rest }) {
   const onSizeChange = ([min, max]) => {
@@ -23,10 +24,14 @@ export function SizeRangeSelector({ minSize, maxSize, onChange, ...rest }) {
       max={DEFAULT_MAX_SIZE}
       step={1}
       value={[minSize, maxSize]}
-      showInput
+      showInput="inputWithPopover"
       showRange
       onChange={onSizeChange}
       allowEmptyRange={false}
+      append={i18n.translate('xpack.maps.vector.dualSize.unitLabel', {
+        defaultMessage: 'px',
+        description: 'Shorthand for pixel',
+      })}
       {...rest}
     />
   );

diff --git a/.../legacy/plugins/maps/public/layers/styles/components/vector/size/static_size_selection.js b/.../legacy/plugins/maps/public/layers/styles/components/vector/size/static_size_selection.js
@@ -8,6 +8,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { staticSizeShape } from '../style_option_shapes';
 import { ValidatedRange } from '../../../../../components/validated_range';
+import { i18n } from '@kbn/i18n';
 
 export function StaticSizeSelection({ onChange, styleOptions }) {
   const onSizeChange = size => {
@@ -23,6 +24,10 @@ export function StaticSizeSelection({ onChange, styleOptions }) {
       showInput
       showLabels
       compressed
+      append={i18n.translate('xpack.maps.vector.size.unitLabel', {
+        defaultMessage: 'px',
+        description: 'Shorthand for pixel',
+      })}
     />
   );
 }

diff --git a/.../legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.js b/.../legacy/plugins/maps/public/layers/styles/components/vector/vector_style_symbol_editor.js
@@ -10,7 +10,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
-  EuiSelect,
+  EuiButtonGroup,
   EuiSpacer,
   EuiComboBox,
 } from '@elastic/eui';
@@ -21,14 +21,14 @@ import { SymbolIcon } from './legend/symbol_icon';
 
 const SYMBOLIZE_AS_OPTIONS = [
   {
-    value: SYMBOLIZE_AS_CIRCLE,
-    text: i18n.translate('xpack.maps.vector.symbolAs.circleLabel', {
+    id: SYMBOLIZE_AS_CIRCLE,
+    label: i18n.translate('xpack.maps.vector.symbolAs.circleLabel', {
       defaultMessage: 'circle marker',
     }),
   },
   {
-    value: SYMBOLIZE_AS_ICON,
-    text: i18n.translate('xpack.maps.vector.symbolAs.IconLabel', {
+    id: SYMBOLIZE_AS_ICON,
+    label: i18n.translate('xpack.maps.vector.symbolAs.IconLabel', {
       defaultMessage: 'icon',
     }),
   },
@@ -41,26 +41,27 @@ export function VectorStyleSymbolEditor({
   isDarkMode,
 }) {
   const renderSymbolizeAsSelect = () => {
-    const selectedOption = SYMBOLIZE_AS_OPTIONS.find(({ value }) => {
-      return value === styleOptions.symbolizeAs;
+    const selectedOption = SYMBOLIZE_AS_OPTIONS.find(({ id }) => {
+      return id === styleOptions.symbolizeAs;
     });
 
-    const onSymbolizeAsChange = e => {
+    const onSymbolizeAsChange = optionId => {
       const styleDescriptor = {
         options: {
           ...styleOptions,
-          symbolizeAs: e.target.value,
+          symbolizeAs: optionId,
         },
       };
       handlePropertyChange('symbol', styleDescriptor);
     };
 
     return (
-      <EuiSelect
+      <EuiButtonGroup
+        buttonSize="compressed"
         options={SYMBOLIZE_AS_OPTIONS}
-        value={selectedOption ? selectedOption.value : undefined}
+        idSelected={selectedOption ? selectedOption.id : undefined}
         onChange={onSymbolizeAsChange}
-        compressed
+        isFullWidth
       />
     );
   };
@@ -113,28 +114,23 @@ export function VectorStyleSymbolEditor({
     );
   };
 
-  const renderFormRowContent = () => {
-    if (styleOptions.symbolizeAs === SYMBOLIZE_AS_CIRCLE) {
-      return renderSymbolizeAsSelect();
-    }
-
-    return (
-      <Fragment>
+  return (
+    <Fragment>
+      <EuiFormRow
+        label={i18n.translate('xpack.maps.vector.symbolLabel', {
+          defaultMessage: 'Symbol type',
+        })}
+        display="columnCompressed"
+      >
         {renderSymbolizeAsSelect()}
-        <EuiSpacer size="s" />
-        {renderSymbolSelect()}
-      </Fragment>
-    );
-  };
+      </EuiFormRow>
 
-  return (
-    <EuiFormRow
-      label={i18n.translate('xpack.maps.vector.symbolLabel', {
-        defaultMessage: 'Symbol type',
-      })}
-      display="rowCompressed"
-    >
-      {renderFormRowContent()}
-    </EuiFormRow>
+      {styleOptions.symbolizeAs !== SYMBOLIZE_AS_CIRCLE && (
+        <Fragment>
+          <EuiSpacer size="s" />
+          {renderSymbolSelect()}
+        </Fragment>
+      )}
+    </Fragment>
   );
 }