Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 9 commits into from
Apr 8, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
406c49a
Apply styles to icon SVGs via descendent selectors
nickpeihl Apr 1, 2022
01b0b9e
Move custom icons to top of map settings panel
nickpeihl Apr 1, 2022
b6216ac
Merge branch 'main' into custom-icons-legend-fix
nickpeihl Apr 1, 2022
2a6283b
[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…
kibanamachine Apr 1, 2022
526d01e
Merge branch 'main' of https://github.com/elastic/kibana into custom-…
nickpeihl Apr 5, 2022
8cb8a11
Override fill and stroke styles on descendants
nickpeihl Apr 5, 2022
7617d9b
Merge branch 'custom-icons-legend-fix' of https://github.com/nickpeih…
nickpeihl Apr 5, 2022
c53ed15
[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…
kibanamachine Apr 5, 2022
a80af08
Merge branch 'main' into custom-icons-legend-fix
kibanamachine Apr 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 63 additions & 0 deletions x-pack/plugins/maps/public/classes/styles/vector/__snapshots__/symbol_utils.test.js.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion x-pack/plugins/maps/public/classes/styles/vector/components/legend/symbol_icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
20 changes: 11 additions & 9 deletions x-pack/plugins/maps/public/classes/styles/vector/symbol_utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
25 changes: 16 additions & 9 deletions x-pack/plugins/maps/public/classes/styles/vector/symbol_utils.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
});
});
12 changes: 6 additions & 6 deletions x-pack/plugins/maps/public/connected_components/map_settings_panel/map_settings_panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>

Expand Down