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.

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

Icon Additions for Upcoming Lens Features #4779

Merged
merged 7 commits into from
May 5, 2021
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
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
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
- Added `iconProps` prop to `EuiListGroupItem` ([#4760](https://github.com/elastic/eui/pull/4760))
- Added `i18ntokens.json` to published package ([#4771](https://github.com/elastic/eui/pull/4771))
- Replaced `highlight.js` with `prism.js`/`refractor` for code syntax highlighting in `EuiCodeBlock` ([#4638](https://github.com/elastic/eui/pull/4638))
- Added `color`, `continuityAbove`, `continuityAboveBelow`, `continuityBelow`, `continuityWithin`, `eraser`, `fullScreenExit`, `function`, `percent`, `wordWrap`, and `wordWrapDisabled` glyphs to `EuiIcon` ([#4779](https://github.com/elastic/eui/pull/4779))

**Bug fixes**

Expand Down
12 changes: 12 additions & 0 deletions src-docs/src/views/icon/icons.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,13 @@ export const iconTypes = [
'cloudDrizzle',
'cloudStormy',
'cloudSunny',
'color',
'compute',
'console',
'continuityAbove',
'continuityAboveBelow',
'continuityBelow',
'continuityWithin',
'controlsHorizontal',
'controlsVertical',
'copy',
Expand All @@ -62,6 +67,7 @@ export const iconTypes = [
'email',
'empty',
'eql',
'eraser',
'exit',
'expand',
'expandMini',
Expand All @@ -79,6 +85,8 @@ export const iconTypes = [
'folderExclamation',
'folderOpen',
'fullScreen',
'fullScreenExit',
'function',
'gear',
'glasses',
'globe',
Expand Down Expand Up @@ -147,6 +155,7 @@ export const iconTypes = [
'partial',
'pause',
'pencil',
'percent',
'pin',
'pinFilled',
'play',
Expand Down Expand Up @@ -185,6 +194,7 @@ export const iconTypes = [
'stats',
'stop',
'stopFilled',
'stopSlash',
'storage',
'string',
'submodule',
Expand Down Expand Up @@ -224,6 +234,8 @@ export const iconTypes = [
'visTimelion',
'visVega',
'visVisualBuilder',
'wordWrap',
'wordWrapDisabled',
'wrench',
];

Expand Down
202 changes: 202 additions & 0 deletions src/components/icon/__snapshots__/icon.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -1197,6 +1197,23 @@ exports[`EuiIcon props type codeApp is rendered 1`] = `
</svg>
`;

exports[`EuiIcon props type color is rendered 1`] = `
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiIcon-isLoaded"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13 11c1.334 1.393 2 2.435 2 3.125C15 15.161 14.105 16 13 16c-1.104 0-2-.84-2-1.875 0-.69.667-1.732 2-3.125zM5.857.15l6.34 6.45.016.02.324.321a1.5 1.5 0 01.11 2.006l-.103.114-4.474 4.513a1.5 1.5 0 01-2.123.008L1.464 9.06a1.5 1.5 0 01.007-2.12l4.472-4.45c.145-.146.313-.254.492-.327L5.144.85a.5.5 0 01.713-.7zm1.496 3.049a.5.5 0 00-.705 0L2.177 7.65a.498.498 0 00-.148.35h9.95a.498.498 0 00-.148-.35L7.353 3.2z"
/>
</svg>
`;

exports[`EuiIcon props type compute is rendered 1`] = `
<svg
aria-hidden="true"
Expand Down Expand Up @@ -1262,6 +1279,74 @@ exports[`EuiIcon props type consoleApp is rendered 1`] = `
</svg>
`;

exports[`EuiIcon props type continuityAbove is rendered 1`] = `
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiIcon-isLoaded"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.5 3a.5.5 0 00-.5.5v9a.5.5 0 001 0v-9a.5.5 0 00-.5-.5zm3 0a.5.5 0 00-.5.5v9a.5.5 0 001 0V9h6v1.5a.5.5 0 00.82.384l3-2.5a.5.5 0 000-.768l-3-2.5A.5.5 0 0011 5.5V7H5V3.5a.5.5 0 00-.5-.5z"
/>
</svg>
`;

exports[`EuiIcon props type continuityAboveBelow is rendered 1`] = `
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiIcon-isLoaded"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.5 3a.5.5 0 01.5.5v9a.5.5 0 01-1 0V9H4v1.5a.5.5 0 01-.82.384l-3-2.5a.5.5 0 010-.768l3-2.5A.5.5 0 014 5.5V7h2V3.5a.5.5 0 01.5-.5zm3 0a.5.5 0 00-.5.5v9a.5.5 0 001 0V9h2v1.5a.5.5 0 00.82.384l3-2.5a.5.5 0 000-.768l-3-2.5A.5.5 0 0012 5.5V7h-2V3.5a.5.5 0 00-.5-.5z"
/>
</svg>
`;

exports[`EuiIcon props type continuityBelow is rendered 1`] = `
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiIcon-isLoaded"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.5 3a.5.5 0 01.5.5v9a.5.5 0 01-1 0V9H5v1.5a.5.5 0 01-.82.384l-3-2.5a.5.5 0 010-.768l3-2.5A.5.5 0 015 5.5V7h6V3.5a.5.5 0 01.5-.5zm3 0a.5.5 0 01.5.5v9a.5.5 0 01-1 0v-9a.5.5 0 01.5-.5z"
/>
</svg>
`;

exports[`EuiIcon props type continuityWithin is rendered 1`] = `
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiIcon-isLoaded"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M.5 3a.5.5 0 00-.5.5v9a.5.5 0 001 0v-9A.5.5 0 00.5 3zm14.5.5a.5.5 0 011 0v9a.5.5 0 01-1 0v-9zm-4.712 1.547a.5.5 0 01.532.069l3 2.5a.5.5 0 010 .768l-3 2.5A.5.5 0 0110 10.5V9H6v1.5a.5.5 0 01-.82.384l-3-2.5a.5.5 0 010-.768l3-2.5A.5.5 0 016 5.5V7h4V5.5a.5.5 0 01.288-.453z"
/>
</svg>
`;

exports[`EuiIcon props type controlsHorizontal is rendered 1`] = `
<svg
aria-hidden="true"
Expand Down Expand Up @@ -2275,6 +2360,27 @@ exports[`EuiIcon props type eql is rendered 1`] = `
</svg>
`;

exports[`EuiIcon props type eraser is rendered 1`] = `
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiIcon-isLoaded"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.5 5.086a2 2 0 010 2.828L9.414 13H11.5a.5.5 0 110 1H3.414A2 2 0 012 13.414l-.5-.5a2 2 0 010-2.828L9.086 2.5a2 2 0 012.828 0L14.5 5.086zm-6.207 7.621a1 1 0 01-.707.293H3.414a1 1 0 01-.707-.293l-.5-.5a1 1 0 010-1.414l3.44-3.44 4 4-1.354 1.354zM7 6l1-1h5l.793.793a.996.996 0 01.159.207H7zm5-2l-.793-.793a1 1 0 00-1.414 0L9 4h3zM6.707 7h7.245a.996.996 0 01-.16.207L13 8H7.707l-1-1zM12 9H8.707l1.646 1.646L12 9z"
fill-rule="evenodd"
/>
<path
d="M13.5 13a.5.5 0 100 1h1a.5.5 0 100-1h-1zm-1-1a.5.5 0 100-1 .5.5 0 000 1zm2.5-1.5a.5.5 0 11-1 0 .5.5 0 011 0z"
/>
</svg>
`;

exports[`EuiIcon props type exit is rendered 1`] = `
<svg
aria-hidden="true"
Expand Down Expand Up @@ -2591,6 +2697,40 @@ exports[`EuiIcon props type fullScreen is rendered 1`] = `
</svg>
`;

exports[`EuiIcon props type fullScreenExit is rendered 1`] = `
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiIcon-isLoaded"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 7V3h1v3h3v1H9zM7 7H3V6h3V3h1v4zm2 2h4v1h-3v3H9V9zM7 9v4H6v-3H3V9h4zM0 1.994C0 .893.895 0 1.994 0h12.012C15.107 0 16 .895 16 1.994v12.012A1.995 1.995 0 0114.006 16H1.994A1.995 1.995 0 010 14.006V1.994zm1 0v12.012c0 .548.446.994.994.994h12.012a.995.995 0 00.994-.994V1.994A.995.995 0 0014.006 1H1.994A.995.995 0 001 1.994z"
/>
</svg>
`;

exports[`EuiIcon props type function is rendered 1`] = `
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiIcon-isLoaded"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13 2.226v2.218c-.359-.143-.845-.218-1.315-.218-1.059 0-1.631.519-1.802 1.565l-.168.937h2.798v2.159H9.41l-.313 1.674C8.696 12.987 7.261 14 4.785 14c-.718 0-1.35-.092-1.785-.251v-2.243c.418.176.905.268 1.383.268 1.008 0 1.546-.435 1.725-1.523l.24-1.364H3.787V6.728h2.812l.288-1.264C7.286 3.071 8.662 2 11.352 2c.598 0 1.306.1 1.648.226z"
/>
</svg>
`;

exports[`EuiIcon props type gear is rendered 1`] = `
<svg
aria-hidden="true"
Expand Down Expand Up @@ -6612,6 +6752,31 @@ exports[`EuiIcon props type pencil is rendered 1`] = `
</svg>
`;

exports[`EuiIcon props type percent is rendered 1`] = `
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiIcon-isLoaded"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5 8c1.105 0 2-1.12 2-2.5S6.105 3 5 3 3 4.12 3 5.5 3.895 8 5 8zm0-1c.356 0 1-.452 1-1.5S5.356 4 5 4s-1 .452-1 1.5S4.644 7 5 7z"
fill-rule="evenodd"
/>
<path
d="M10.5 3H12L5.5 13H4l6.5-10z"
/>
<path
d="M13 10.5c0 1.38-.895 2.5-2 2.5s-2-1.12-2-2.5S9.895 8 11 8s2 1.12 2 2.5zm-1 0c0 1.048-.644 1.5-1 1.5s-1-.452-1-1.5.644-1.5 1-1.5 1 .452 1 1.5z"
fill-rule="evenodd"
/>
</svg>
`;

exports[`EuiIcon props type pin is rendered 1`] = `
<svg
aria-hidden="true"
Expand Down Expand Up @@ -9313,6 +9478,43 @@ exports[`EuiIcon props type watchesApp is rendered 1`] = `
</svg>
`;

exports[`EuiIcon props type wordWrap is rendered 1`] = `
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiIcon-isLoaded"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2 3h12v1H2V3zm0 8h6v1H2v-1z"
/>
<path
d="M2 7h9.5v.5V7h.039l.083.005a2.958 2.958 0 011.102.298c.309.154.633.394.88.763.248.373.396.847.396 1.434 0 .588-.148 1.061-.396 1.434a2.257 2.257 0 01-.88.763 2.957 2.957 0 01-1.185.302h-.025l-.009.001h-.003s-.002 0-.002-.5v.5H11v1l-2-1.5 2-1.5v1h.506l.044-.003a1.959 1.959 0 00.726-.195c.191-.095.367-.23.495-.423.127-.19.229-.466.229-.879s-.102-.689-.229-.879a1.256 1.256 0 00-.495-.424 1.958 1.958 0 00-.77-.197H2V7z"
/>
</svg>
`;

exports[`EuiIcon props type wordWrapDisabled is rendered 1`] = `
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiIcon-isLoaded"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 3.5L12 2v1H2v1h10v1l2-1.5zM12 9V8H2V7h10V6l2 1.5L12 9zm0 3v1l2-1.5-2-1.5v1H2v1h10z"
/>
</svg>
`;

exports[`EuiIcon props type workplaceSearchApp is rendered 1`] = `
<svg
aria-hidden="true"
Expand Down
16 changes: 16 additions & 0 deletions src/components/icon/assets/color.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import * as React from 'react';

const EuiIconColor = ({ title, titleId, ...props }) => (
<svg
width={16}
height={16}
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}>
{title ? <title id={titleId}>{title}</title> : null}
<path d="M13 11c1.334 1.393 2 2.435 2 3.125C15 15.161 14.105 16 13 16c-1.104 0-2-.84-2-1.875 0-.69.667-1.732 2-3.125zM5.857.15l6.34 6.45.016.02.324.321a1.5 1.5 0 01.11 2.006l-.103.114-4.474 4.513a1.5 1.5 0 01-2.123.008L1.464 9.06a1.5 1.5 0 01.007-2.12l4.472-4.45c.145-.146.313-.254.492-.327L5.144.85a.5.5 0 01.713-.7zm1.496 3.049a.5.5 0 00-.705 0L2.177 7.65a.498.498 0 00-.148.35h9.95a.498.498 0 00-.148-.35L7.353 3.2z" />
</svg>
);

export const icon = EuiIconColor;
3 changes: 3 additions & 0 deletions src/components/icon/assets/color.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions src/components/icon/assets/continuityAbove.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import * as React from 'react';

const EuiIconContinuityAbove = ({ title, titleId, ...props }) => (
<svg
width={16}
height={16}
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}>
{title ? <title id={titleId}>{title}</title> : null}
<path d="M1.5 3a.5.5 0 00-.5.5v9a.5.5 0 001 0v-9a.5.5 0 00-.5-.5zm3 0a.5.5 0 00-.5.5v9a.5.5 0 001 0V9h6v1.5a.5.5 0 00.82.384l3-2.5a.5.5 0 000-.768l-3-2.5A.5.5 0 0011 5.5V7H5V3.5a.5.5 0 00-.5-.5z" />
</svg>
);

export const icon = EuiIconContinuityAbove;
3 changes: 3 additions & 0 deletions src/components/icon/assets/continuityAbove.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions src/components/icon/assets/continuityAboveBelow.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import * as React from 'react';

const EuiIconContinuityAboveBelow = ({ title, titleId, ...props }) => (
<svg
width={16}
height={16}
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}>
{title ? <title id={titleId}>{title}</title> : null}
<path d="M6.5 3a.5.5 0 01.5.5v9a.5.5 0 01-1 0V9H4v1.5a.5.5 0 01-.82.384l-3-2.5a.5.5 0 010-.768l3-2.5A.5.5 0 014 5.5V7h2V3.5a.5.5 0 01.5-.5zm3 0a.5.5 0 00-.5.5v9a.5.5 0 001 0V9h2v1.5a.5.5 0 00.82.384l3-2.5a.5.5 0 000-.768l-3-2.5A.5.5 0 0012 5.5V7h-2V3.5a.5.5 0 00-.5-.5z" />
</svg>
);

export const icon = EuiIconContinuityAboveBelow;
3 changes: 3 additions & 0 deletions src/components/icon/assets/continuityAboveBelow.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions src/components/icon/assets/continuityBelow.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import * as React from 'react';

const EuiIconContinuityBelow = ({ title, titleId, ...props }) => (
<svg
width={16}
height={16}
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}>
{title ? <title id={titleId}>{title}</title> : null}
<path d="M11.5 3a.5.5 0 01.5.5v9a.5.5 0 01-1 0V9H5v1.5a.5.5 0 01-.82.384l-3-2.5a.5.5 0 010-.768l3-2.5A.5.5 0 015 5.5V7h6V3.5a.5.5 0 01.5-.5zm3 0a.5.5 0 01.5.5v9a.5.5 0 01-1 0v-9a.5.5 0 01.5-.5z" />
</svg>
);

export const icon = EuiIconContinuityBelow;
3 changes: 3 additions & 0 deletions src/components/icon/assets/continuityBelow.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading