[Maps] move symbol style property to top of UI (#39534) (#39549)

* [Maps] move symbol style property to top of UI

* fix jest tests

docs/maps/vector-style-properties.asciidoc

@@ -8,18 +8,23 @@ Point, polygon, and line features support different styling properties.
 [[point-style-properties]]
 ==== Point style properties
 
+You can symbolize Point features as *Circle markers* or *Icons*.
+
+Use *Circle marker* to symbolize Points as circles.
+
 *Fill color*:: The fill color of the point features.
 
 *Border color*:: The border color of the point features.
-Only applies when the point feature is symbolized as a circle.
 
 *Border width*:: The border width of the point features.
-Only applies when the point feature is symbolized as a circle.
 
-*Symbol*:: Specify whether to symbolize the point as a circle or icon.
+*Symbol size*:: The radius of the symbol size, in pixels.
+
+Use *Icon* to symbolize Points as icons.
+
+*Fill color*:: The fill color of the point features.
 
 *Symbol orientation*:: The symbol orientation rotating the icon clockwise.
-Only applies when the point feature is symbolized as an icon.
 
 *Symbol size*:: The radius of the symbol size, in pixels.
 

x-pack/legacy/plugins/maps/public/shared/layers/styles/components/vector/__snapshots__/vector_style_symbol_editor.test.js.snap

@@ -5,7 +5,7 @@ exports[`Should render icon select when symbolized as Icon 1`] = `
   describedByIds={Array []}
   fullWidth={false}
   hasEmptyLabelSpace={false}
-  label="Symbol"
+  label="Symbol type"
   labelType="label"
 >
   <EuiSelect
@@ -17,7 +17,7 @@ exports[`Should render icon select when symbolized as Icon 1`] = `
     options={
       Array [
         Object {
-          "text": "circle",
+          "text": "circle marker",
           "value": "circle",
         },
         Object {
@@ -67,7 +67,7 @@ exports[`Should render symbol select when symbolized as Circle 1`] = `
   describedByIds={Array []}
   fullWidth={false}
   hasEmptyLabelSpace={false}
-  label="Symbol"
+  label="Symbol type"
   labelType="label"
 >
   <EuiSelect
@@ -79,7 +79,7 @@ exports[`Should render symbol select when symbolized as Circle 1`] = `
     options={
       Array [
         Object {
-          "text": "circle",
+          "text": "circle marker",
           "value": "circle",
         },
         Object {

x-pack/legacy/plugins/maps/public/shared/layers/styles/components/vector/vector_style_editor.js

@@ -175,13 +175,6 @@ export class VectorStyleEditor extends Component {
     return (
       <Fragment>
 
-        {this._renderFillColor()}
-        <EuiSpacer size="m" />
-
-        {lineColor}
-
-        {lineWidth}
-
         <VectorStyleSymbolEditor
           styleOptions={this.props.styleProperties.symbol.options}
           handlePropertyChange={this.props.handlePropertyChange}
@@ -189,6 +182,13 @@ export class VectorStyleEditor extends Component {
           isDarkMode={chrome.getUiSettingsClient().get('theme:darkMode', false)}
         />
 
+        {this._renderFillColor()}
+        <EuiSpacer size="m" />
+
+        {lineColor}
+
+        {lineWidth}
+
         {iconOrientation}
 
         {this._renderSymbolSize()}

x-pack/legacy/plugins/maps/public/shared/layers/styles/components/vector/vector_style_symbol_editor.js

@@ -23,7 +23,7 @@ const SYMBOLIZE_AS_OPTIONS = [
   {
     value: SYMBOLIZE_AS_CIRCLE,
     text: i18n.translate('xpack.maps.vector.symbolAs.circleLabel', {
-      defaultMessage: 'circle'
+      defaultMessage: 'circle marker'
     })
   },
   {
@@ -123,7 +123,7 @@ export function VectorStyleSymbolEditor({ styleOptions, handlePropertyChange, sy
   return (
     <EuiFormRow
       label={i18n.translate('xpack.maps.vector.symbolLabel', {
-        defaultMessage: 'Symbol'
+        defaultMessage: 'Symbol type'
       })}
     >
       {renderFormRowContent()}