Icon Additions for Upcoming Lens Features (#4779)

* added icons for upcoming lens features * update snapshots * added PR link to changelog * shift eraser icon right 1px * update snapshots * update changelog
elastic · May 5, 2021 · 9521692 · 9521692
1 parent 37f65a9
commit 9521692
Show file tree

Hide file tree

Showing 26 changed files with 448 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `textTransform` property to `schemaDetectors` prop of `EuiDataGrid`([#4752](https://github.com/elastic/eui/pull/4752))
+- Added `color`, `continuityAbove`, `continuityAboveBelow`, `continuityBelow`, `continuityWithin`, `eraser`, `fullScreenExit`, `function`, `percent`, `wordWrap`, and `wordWrapDisabled` glyphs to `EuiIcon` ([#4779](https://github.com/elastic/eui/pull/4779))
 
 ## [`33.0.0`](https://github.com/elastic/eui/tree/v33.0.0)
 

diff --git a/src-docs/src/views/icon/icons.js b/src-docs/src/views/icon/icons.js
@@ -42,8 +42,13 @@ export const iconTypes = [
   'cloudDrizzle',
   'cloudStormy',
   'cloudSunny',
+  'color',
   'compute',
   'console',
+  'continuityAbove',
+  'continuityAboveBelow',
+  'continuityBelow',
+  'continuityWithin',
   'controlsHorizontal',
   'controlsVertical',
   'copy',
@@ -62,6 +67,7 @@ export const iconTypes = [
   'email',
   'empty',
   'eql',
+  'eraser',
   'exit',
   'expand',
   'expandMini',
@@ -79,6 +85,8 @@ export const iconTypes = [
   'folderExclamation',
   'folderOpen',
   'fullScreen',
+  'fullScreenExit',
+  'function',
   'gear',
   'glasses',
   'globe',
@@ -147,6 +155,7 @@ export const iconTypes = [
   'partial',
   'pause',
   'pencil',
+  'percent',
   'pin',
   'pinFilled',
   'play',
@@ -185,6 +194,7 @@ export const iconTypes = [
   'stats',
   'stop',
   'stopFilled',
+  'stopSlash',
   'storage',
   'string',
   'submodule',
@@ -224,6 +234,8 @@ export const iconTypes = [
   'visTimelion',
   'visVega',
   'visVisualBuilder',
+  'wordWrap',
+  'wordWrapDisabled',
   'wrench',
 ];
 

diff --git a/src/components/icon/__snapshots__/icon.test.tsx.snap b/src/components/icon/__snapshots__/icon.test.tsx.snap
@@ -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"
@@ -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"
@@ -2275,6 +2360,26 @@ 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="M2.648 9.937l7.29-7.288a2.21 2.21 0 013.124 0l2.29 2.288a2.21 2.21 0 010 3.126L10.413 13H12.5a.5.5 0 010 1H4.501a2.21 2.21 0 01-1.563-.647l.707-.707c.227.226.535.354.856.354h4.005a1.21 1.21 0 00.848-.354l1.292-1.293-4-4-3.29 3.291a1.21 1.21 0 000 1.712l.29.29-.708.707-.29-.29a2.21 2.21 0 010-3.126zM8 6h6.89a1.208 1.208 0 00-.246-.356L14 5H9L8 6zm2-2h3l-.645-.644a1.21 1.21 0 00-1.71 0L10 4zm4.89 3H7.708l1 1H14l.644-.644A1.22 1.22 0 0014.891 7zM9.708 9l1.646 1.646L13 9H9.707z"
+  />
+  <path
+    d="M14 11.5a.5.5 0 11-1 0 .5.5 0 011 0zm1.5-.5a.5.5 0 100-1 .5.5 0 000 1zm-1 2a.5.5 0 000 1h1a.5.5 0 000-1h-1z"
+  />
+</svg>
+`;
+
 exports[`EuiIcon props type exit is rendered 1`] = `
 <svg
   aria-hidden="true"
@@ -2591,6 +2696,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"
@@ -6612,6 +6751,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"
@@ -9313,6 +9477,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"

diff --git a/src/components/icon/assets/color.js b/src/components/icon/assets/color.js
@@ -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;
diff --git a/src/components/icon/assets/color.svg b/src/components/icon/assets/color.svg
diff --git a/src/components/icon/assets/continuityAbove.js b/src/components/icon/assets/continuityAbove.js
@@ -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;
diff --git a/src/components/icon/assets/continuityAbove.svg b/src/components/icon/assets/continuityAbove.svg
diff --git a/src/components/icon/assets/continuityAboveBelow.js b/src/components/icon/assets/continuityAboveBelow.js
@@ -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;
diff --git a/src/components/icon/assets/continuityAboveBelow.svg b/src/components/icon/assets/continuityAboveBelow.svg
diff --git a/src/components/icon/assets/continuityBelow.js b/src/components/icon/assets/continuityBelow.js
@@ -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;
diff --git a/src/components/icon/assets/continuityBelow.svg b/src/components/icon/assets/continuityBelow.svg