[Maps] Apply styles to icon SVGs in legend via descendent selectors (#…

…129255) (cherry picked from commit 7b64a54)
elastic · Apr 8, 2022 · c069a28 · c069a28
1 parent c5e953a
commit c069a28
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 25 deletions.
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/__snapshots__/symbol_utils.test.js.snap b/x-pack/plugins/maps/public/classes/styles/vector/__snapshots__/symbol_utils.test.js.snap
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/legend/symbol_icon.tsx b/x-pack/plugins/maps/public/classes/styles/vector/components/legend/symbol_icon.tsx
@@ -7,7 +7,7 @@
 
 import React, { Component, CSSProperties } from 'react';
 // @ts-expect-error
-import { CUSTOM_ICON_PREFIX_SDF, getSymbolSvg, styleSvg, buildSrcUrl } from '../../symbol_utils';
+import { styleSvg, buildSrcUrl } from '../../symbol_utils';
 
 interface Props {
   symbolId: string;

diff --git a/x-pack/plugins/maps/public/classes/styles/vector/symbol_utils.js b/x-pack/plugins/maps/public/classes/styles/vector/symbol_utils.js
@@ -106,15 +106,17 @@ export function buildSrcUrl(svgString) {
 
 export async function styleSvg(svgString, fill, stroke) {
   const svgXml = await parseXmlString(svgString);
-  let style = '';
-  if (fill) {
-    style += `fill:${fill};`;
-  }
-  if (stroke) {
-    style += `stroke:${stroke};`;
-    style += `stroke-width:1;`;
-  }
-  if (style) svgXml.svg.$.style = style;
+
+  // Elements nested under svg root may define style attribute
+  // Wildcard descendent selector provides more specificity to ensure root svg style attribute is applied instead of children style attributes
+  svgXml.svg.style = `
+    svg * {
+      ${fill ? `fill: ${fill}` : '#000'} !important;
+      ${stroke ? `stroke: ${stroke}` : '#000'} !important;
+      stroke-width: 1 !important;
+      vector-effect: non-scaling-stroke !important;
+    }
+  `;
   const builder = new xml2js.Builder();
   return builder.buildObject(svgXml);
 }

diff --git a/x-pack/plugins/maps/public/classes/styles/vector/symbol_utils.test.js b/x-pack/plugins/maps/public/classes/styles/vector/symbol_utils.test.js
@@ -20,26 +20,33 @@ describe('styleSvg', () => {
     const unstyledSvgString =
       '<svg version="1.1" width="11px" height="11px" viewBox="0 0 11 11"><path/></svg>';
     const styledSvg = await styleSvg(unstyledSvgString);
-    expect(styledSvg.split('\n')[1]).toBe(
-      '<svg version="1.1" width="11px" height="11px" viewBox="0 0 11 11">'
-    );
+    expect(styledSvg).toMatchSnapshot();
   });
 
   it('Should add fill style property to svg element', async () => {
     const unstyledSvgString =
       '<svg version="1.1" width="11px" height="11px" viewBox="0 0 11 11"><path/></svg>';
     const styledSvg = await styleSvg(unstyledSvgString, 'red');
-    expect(styledSvg.split('\n')[1]).toBe(
-      '<svg version="1.1" width="11px" height="11px" viewBox="0 0 11 11" style="fill:red;">'
-    );
+    expect(styledSvg).toMatchSnapshot();
   });
 
   it('Should add stroke and stroke-wdth style properties to svg element', async () => {
     const unstyledSvgString =
       '<svg version="1.1" width="11px" height="11px" viewBox="0 0 11 11"><path/></svg>';
     const styledSvg = await styleSvg(unstyledSvgString, 'red', 'white');
-    expect(styledSvg.split('\n')[1]).toBe(
-      '<svg version="1.1" width="11px" height="11px" viewBox="0 0 11 11" style="fill:red;stroke:white;stroke-width:1;">'
-    );
+    expect(styledSvg).toMatchSnapshot();
+  });
+
+  it('Should override any inherent fill and stroke styles in SVGs', async () => {
+    const unstyledSvgString = `
+      <svg version="1.1" id="square-11" xmlns="http://www.w3.org/2000/svg" width="11px" height="11px" viewBox="0 0 11 11">
+          <g>
+              <path style="fill: #54B399; stroke: #C57127" d="M9,10H2c-0.5523,0-1-0.4477-1-1V2c0-0.5523,0.4477-1,1-1h7c0.5523,0,1,0.4477,1,1v7C10,9.5523,9.5523,10,9,10z" />
+          </g>
+      </svg>
+    `;
+
+    const styledSvg = await styleSvg(unstyledSvgString, 'blue', 'black');
+    expect(styledSvg).toMatchSnapshot();
   });
 });
diff --git a/x-pack/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx b/x-pack/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
@@ -74,6 +74,12 @@ export function MapSettingsPanel({
 
       <div className="mapLayerPanel__body">
         <div className="mapLayerPanel__bodyOverflow">
+          <CustomIconsPanel
+            customIcons={customIcons}
+            updateCustomIcons={updateCustomIcons}
+            deleteCustomIcon={deleteCustomIcon}
+          />
+          <EuiSpacer size="s" />
           <DisplayPanel settings={settings} updateMapSetting={updateMapSetting} />
           <EuiSpacer size="s" />
           <NavigationPanel
@@ -84,12 +90,6 @@ export function MapSettingsPanel({
           />
           <EuiSpacer size="s" />
           <SpatialFiltersPanel settings={settings} updateMapSetting={updateMapSetting} />
-          <EuiSpacer size="s" />
-          <CustomIconsPanel
-            customIcons={customIcons}
-            updateCustomIcons={updateCustomIcons}
-            deleteCustomIcon={deleteCustomIcon}
-          />
         </div>
       </div>