Retina tweaks, re-names, eui-ify

CHANGELOG.md

@@ -5,7 +5,7 @@
 - Added TypeScript definition for `EuiFormControlLayout` ([#2086](https://github.com/elastic/eui/pull/2086))
 - Changed SASS mixin `euiOverflowShadow()` to use `mask-image` instead of `box-shadow` ([#2088](https://github.com/elastic/eui/pull/2088))
 - Added SASS mixin and CSS utility `euiYScrollWithShadows` ([#2088](https://github.com/elastic/eui/pull/2088))
-- Added new icons `cloud drizzle`, `cloud stormy`, `cloud sunny`, `documents`, `edit	`, `training` and `video player` ([#2102](https://github.com/elastic/eui/pull/2102))
+- Added `cloudDrizzle`, `cloudStormy`, `cloudSunny`, `documents`, `documentEdit`, `training` and `videoPlayer` glyphs to `EuiIcon` ([#2102](https://github.com/elastic/eui/pull/2102))
 
 **Bug fixes**
 

src-docs/src/views/icon/icons.js

@@ -58,9 +58,9 @@ const iconTypes = [
   'cut',
   'database',
   'document',
+  'documentEdit',
   'documents',
   'dot',
-  'edit',
   'email',
   'empty',
   'exit',

src/components/icon/__snapshots__/icon.test.tsx.snap

@@ -1049,17 +1049,9 @@ exports[`EuiIcon props type cloudDrizzle is rendered 1`] = `
   width="16"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <g
-    fill="#000"
-    fill-rule="nonzero"
-  >
-    <path
-      d="M6.348 3.761A3.995 3.995 0 0 1 8 7a.5.5 0 0 1-1 0 3 3 0 1 0-4.878 2.34.5.5 0 0 1-.627.779 4 4 0 0 1 3.973-6.84 5.502 5.502 0 0 1 10.096 4.37.5.5 0 1 1-.92-.39 4.5 4.5 0 0 0-8.296-3.497z"
-    />
-    <path
-      d="M4.739 8.696l-1.466 1.792a.5.5 0 0 0 .774.633L5.513 9.33a.5.5 0 1 0-.774-.633zm-3.12 3.647l-1.506 1.84a.5.5 0 1 0 .774.634l1.505-1.84a.5.5 0 1 0-.774-.634zm7.62-3.647l-1.466 1.792a.5.5 0 0 0 .774.633l1.466-1.792a.5.5 0 0 0-.774-.633zm-3.12 3.647l-1.506 1.84a.5.5 0 1 0 .774.634l1.505-1.84a.5.5 0 1 0-.774-.634zm7.62-3.647l-1.466 1.792a.5.5 0 1 0 .774.633l1.466-1.792a.5.5 0 0 0-.774-.633zm-3.12 3.647l-1.506 1.84a.5.5 0 1 0 .774.634l1.505-1.84a.5.5 0 1 0-.774-.634z"
-    />
-  </g>
+  <path
+    d="M6.348 3.761A3.995 3.995 0 0 1 8 7a.5.5 0 0 1-1 0 3 3 0 1 0-4.878 2.34.5.5 0 0 1-.627.779 4 4 0 0 1 3.973-6.84 5.502 5.502 0 0 1 10.096 4.37.5.5 0 1 1-.92-.39 4.5 4.5 0 0 0-8.296-3.497zm-1.61 4.935a.5.5 0 1 1 .775.633l-1.466 1.792a.5.5 0 1 1-.774-.633l1.466-1.792zm-3.12 3.647a.5.5 0 0 1 .774.634l-1.505 1.84a.5.5 0 0 1-.774-.634l1.505-1.84zm7.62-3.647a.5.5 0 0 1 .775.633l-1.466 1.792a.5.5 0 1 1-.774-.633l1.466-1.792zm-3.12 3.647a.5.5 0 0 1 .774.634l-1.505 1.84a.5.5 0 0 1-.774-.634l1.505-1.84zm7.62-3.647a.5.5 0 1 1 .775.633l-1.466 1.792a.5.5 0 1 1-.774-.633l1.466-1.792zm-3.12 3.647a.5.5 0 0 1 .774.634l-1.505 1.84a.5.5 0 0 1-.774-.634l1.505-1.84z"
+  />
 </svg>
 `;
 
@@ -1072,17 +1064,9 @@ exports[`EuiIcon props type cloudStormy is rendered 1`] = `
   width="16"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <g
-    fill="#000"
-    fill-rule="nonzero"
-  >
-    <path
-      d="M5 12a.5.5 0 0 1-.343-.864l4.25-4c.454-.428 1.124.195.731.68L7.05 11H9.5a.5.5 0 0 1 .32.885l-4.822 4c-.484.402-1.116-.275-.681-.73L7.331 12H5z"
-    />
-    <path
-      d="M6.348 3.761c.562.408 1.018.96 1.31 1.617a.5.5 0 1 1-.915.406 3 3 0 1 0-3.579 4.098.5.5 0 1 1-.277.96 4.001 4.001 0 1 1 2.58-7.564 5.5 5.5 0 1 1 6.127 7.613.5.5 0 1 1-.198-.98 4.502 4.502 0 1 0-5.048-6.15zm-4.55 8.362l-1.685 2.06a.5.5 0 1 0 .774.634l1.686-2.06a.5.5 0 0 0-.774-.634zm10 0l-1.685 2.06a.5.5 0 1 0 .774.634l1.686-2.06a.5.5 0 1 0-.774-.634z"
-    />
-  </g>
+  <path
+    d="M9.6 11c.669.002.794.67.36 1.003l-4.68 3.882c-.457.378-1.053-.26-.643-.689l3.08-3.193A5411.7 5411.7 0 0 1 5.113 12c-.668-.001-.793-.669-.36-1.003l4.68-3.881c.458-.379 1.053.26.643.688l-3.08 3.193L9.6 11zM5.5 3.28a5.5 5.5 0 1 1 7.003 7.357.5.5 0 1 1-.36-.934 4.5 4.5 0 1 0-5.797-5.856c.36.338.654.749.86 1.214a.47.47 0 1 1-.86.382 2.824 2.824 0 1 0-3.368 3.858.47.47 0 1 1-.261.904 3.766 3.766 0 1 1 2.429-7.12l.354.195z"
+  />
 </svg>
 `;
 
@@ -1096,7 +1080,7 @@ exports[`EuiIcon props type cloudSunny is rendered 1`] = `
   xmlns="http://www.w3.org/2000/svg"
 >
   <path
-    d="M10.746 5.005A5.5 5.5 0 0 1 10.5 16H4a4 4 0 0 1-1.61-7.663A4.473 4.473 0 0 1 2.029 7H.5a.5.5 0 0 1 0-1h1.527a4.479 4.479 0 0 1 .957-2.309L1.646 2.354a.5.5 0 1 1 .708-.708L3.69 2.984A4.479 4.479 0 0 1 6 2.027V.5a.5.5 0 0 1 1 0v1.528a4.493 4.493 0 0 1 2.309.956l1.337-1.338a.5.5 0 0 1 .708.708L10.016 3.69c.311.388.56.831.73 1.314zM9.69 5.06a3.5 3.5 0 1 0-6.33 2.991 4.029 4.029 0 0 1 2.106.228 5.505 5.505 0 0 1 4.224-3.219zM4 15h6.5a4.5 4.5 0 1 0-4.152-6.239A3.995 3.995 0 0 1 8 12a.5.5 0 1 1-1 0 3 3 0 1 0-3 3z"
+    d="M10.746 5.005A5.5 5.5 0 0 1 10.5 16H4a4 4 0 0 1-1.61-7.663A4.473 4.473 0 0 1 2.029 7H.5a.5.5 0 0 1 0-1h1.527a4.479 4.479 0 0 1 .957-2.309L1.646 2.354a.5.5 0 1 1 .708-.708L3.69 2.984A4.479 4.479 0 0 1 6 2.027V.5a.5.5 0 0 1 1 0v1.528a4.493 4.493 0 0 1 2.309.956l1.337-1.338a.5.5 0 0 1 .708.708L10.016 3.69c.311.388.56.831.73 1.314zM4 15h6.5a4.5 4.5 0 1 0-4.152-6.239A3.995 3.995 0 0 1 8 12a.5.5 0 1 1-1 0 3 3 0 1 0-3 3zm5.691-9.94a3.5 3.5 0 1 0-6.33 2.991 4.029 4.029 0 0 1 2.106.227 5.505 5.505 0 0 1 4.224-3.219z"
   />
 </svg>
 `;
@@ -1534,7 +1518,7 @@ exports[`EuiIcon props type document is rendered 1`] = `
 </svg>
 `;
 
-exports[`EuiIcon props type documents is rendered 1`] = `
+exports[`EuiIcon props type documentEdit is rendered 1`] = `
 <svg
   class="euiIcon euiIcon--medium euiIcon-isLoaded"
   focusable="false"
@@ -1543,21 +1527,13 @@ exports[`EuiIcon props type documents is rendered 1`] = `
   width="16"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <g
-    fill="#000"
-    fill-rule="nonzero"
-  >
-    <path
-      d="M8 1H2v11h10V5H8.5a.5.5 0 0 1-.5-.5V1zm1 0v3h3L9 1zM1 1a1 1 0 0 1 1-1h7a1 1 0 0 1 .707.293l3 3A1 1 0 0 1 13 4v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V1z"
-    />
-    <path
-      d="M4.5 8h5a.5.5 0 0 0 0-1h-5a.5.5 0 0 0 0 1zm0 2h5a.5.5 0 0 0 0-1h-5a.5.5 0 0 0 0 1zM6 16h9a1 1 0 0 0 1-1V6a.5.5 0 1 0-1 0v9H6a.5.5 0 1 0 0 1z"
-    />
-  </g>
+  <path
+    d="M8.505 8.995l6.453-6.44-1.5-1.5-6.453 6.44 1.5 1.5zM12.968.19c.258-.238.657-.26.91 0l1.928 1.929a.642.642 0 0 1 0 .909l-6.78 6.784A.641.641 0 0 1 8.57 10H6.643A.643.643 0 0 1 6 9.357V7.43c0-.17.067-.335.188-.455L12.968.19zM4.5 13a.5.5 0 1 1 0-1h7a.5.5 0 1 1 0 1h-7zm4-12a.5.5 0 0 1 0 1H2v13h12V7.5a.5.5 0 1 1 1 0V15a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6.5z"
+  />
 </svg>
 `;
 
-exports[`EuiIcon props type dot is rendered 1`] = `
+exports[`EuiIcon props type documents is rendered 1`] = `
 <svg
   class="euiIcon euiIcon--medium euiIcon-isLoaded"
   focusable="false"
@@ -1566,21 +1542,13 @@ exports[`EuiIcon props type dot is rendered 1`] = `
   width="16"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <defs>
-    <circle
-      cx="8"
-      cy="8"
-      id="dot-a"
-      r="4"
-    />
-  </defs>
-  <use
-    href="#dot-a"
+  <path
+    d="M8.8 0c.274 0 .537.113.726.312l3.2 3.428c.176.186.274.433.274.689V13a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h6.8zM12 5H8.5a.5.5 0 0 1-.5-.5V1H2v12h10V5zm-7.5 6a.5.5 0 1 1 0-1h5a.5.5 0 1 1 0 1h-5zm0-3a.5.5 0 0 1 0-1h5a.5.5 0 1 1 0 1h-5zm1 8a.5.5 0 1 1 0-1H14V6.5a.5.5 0 1 1 1 0V15a1 1 0 0 1-1 1H5.5z"
   />
 </svg>
 `;
 
-exports[`EuiIcon props type edit is rendered 1`] = `
+exports[`EuiIcon props type dot is rendered 1`] = `
 <svg
   class="euiIcon euiIcon--medium euiIcon-isLoaded"
   focusable="false"
@@ -1589,26 +1557,17 @@ exports[`EuiIcon props type edit is rendered 1`] = `
   width="16"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <g
-    fill="#343741"
-    fill-rule="nonzero"
-    id="icon-blog-16-ink"
-    stroke="none"
-    stroke-width="1"
-  >
-    <path
-      d="M7 6.293V9h2.707l5.44-5.44a1.5 1.5 0 0 0 0-2.12L14.56.853a1.5 1.5 0 0 0-2.122 0L7 6.293zm1 .414l5.146-5.146a.5.5 0 0 1 .708 0l.585.585a.5.5 0 0 1 0 .708L9.293 8H8V6.707z"
-      id="Path-7"
-    />
-    <path
-      d="M4 13h8v-1H4z"
-      id="Path-9"
-    />
-    <path
-      d="M14 15H2V2h7V1H1v15h14V7h-1z"
-      id="Path-8"
+  <defs>
+    <circle
+      cx="8"
+      cy="8"
+      id="dot-a"
+      r="4"
     />
-  </g>
+  </defs>
+  <use
+    href="#dot-a"
+  />
 </svg>
 `;
 
@@ -6749,20 +6708,9 @@ exports[`EuiIcon props type training is rendered 1`] = `
   width="16"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <g
-    fill="#000"
-    fill-rule="nonzero"
-  >
-    <path
-      d="M1 11V1h11v2.5a.5.5 0 1 0 1 0v-3a.5.5 0 0 0-.5-.5H.5a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h5a.5.5 0 1 0 0-1H1z"
-    />
-    <path
-      d="M16 14v1.5a.5.5 0 1 1-1 0V14c0-1.724-1.276-3-3-3-.91 0-1.298-.02-1.805-.122-1.25-.254-2.333-1-3.585-2.566a.5.5 0 1 1 .78-.624c.9 1.124 1.653 1.74 2.434 2.043a2.5 2.5 0 1 1 3.86.616C15.075 10.961 16 12.332 16 14zm-2.5-5.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0z"
-    />
-    <path
-      d="M9 15.5V14c0-.851.134-1.357.721-2.007a.5.5 0 0 0-.742-.67C8.194 12.191 8 12.923 8 14v1.5a.5.5 0 1 0 1 0zM5.958 5.772L3.89 3.188a.5.5 0 1 0-.78.624l2.067 2.585a.5.5 0 1 0 .781-.625z"
-    />
-  </g>
+  <path
+    d="M10.386 9.836a2.5 2.5 0 1 1 3.611.667C15.212 11.173 16 12.46 16 14v1.5a.5.5 0 1 1-1 0V14c0-1.724-1.276-3-3-3-.91 0-1.298-.02-1.805-.122-1.25-.254-2.333-1-3.585-2.566a.5.5 0 1 1 .78-.624c.9 1.124 1.653 1.74 2.434 2.043.155.052.345.083.562.105zm1.785.128c.083.01.167.021.251.034L12.5 10a1.5 1.5 0 1 0-.33-.036zM9.78 11.97a.5.5 0 0 1 .5.5c0 .076-.047.226-.05.231-.179.38-.23.774-.23 1.302v1.5a.5.5 0 1 1-1 0v-1.5c0-.657.072-1.186.307-1.696a.5.5 0 0 1 .473-.337zM5.958 5.772a.5.5 0 0 1-.78.625L3.11 3.812a.5.5 0 1 1 .78-.624l2.068 2.584zM1 11h5.5a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5V.5A.5.5 0 0 1 .5 0h12a.5.5 0 0 1 .5.5v3a.5.5 0 1 1-1 0V1H1v10z"
+  />
 </svg>
 `;
 
@@ -6890,17 +6838,9 @@ exports[`EuiIcon props type videoPlayer is rendered 1`] = `
   width="16"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <g
-    fill="#000"
-    fill-rule="nonzero"
-  >
-    <path
-      d="M15 4V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zm0 1H1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5zM2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z"
-    />
-    <path
-      d="M2.5 3h1a.5.5 0 0 0 0-1h-1a.5.5 0 0 0 0 1zm3 0h1a.5.5 0 0 0 0-1h-1a.5.5 0 0 0 0 1zM5 7.6v5a.5.5 0 0 0 .724.447l5-2.5a.5.5 0 0 0 0-.894l-5-2.5A.5.5 0 0 0 5 7.6zm4.382 2.5L6 11.791V8.409L9.382 10.1z"
-    />
-  </g>
+  <path
+    d="M0 1.994C0 .893.895 0 1.994 0h12.012C15.107 0 16 .895 16 1.994v12.012A1.995 1.995 0 0 1 14.006 16H1.994A1.995 1.995 0 0 1 0 14.006V1.994zm1 0v12.012c0 .548.446.994.994.994h12.012a.995.995 0 0 0 .994-.994V1.994A.995.995 0 0 0 14.006 1H1.994A.995.995 0 0 0 1 1.994zM1 4h14v1H1V4zm1.5-1a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1h-1zm3 0a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1h-1zm4.947 6.106a1 1 0 0 1 0 1.788l-3 2A1 1 0 0 1 6 12V8a1 1 0 0 1 1.447-.894l3 2zM10 10L7 8v4l3-2z"
+  />
 </svg>
 `;
 

src/components/icon/assets/cloudDrizzle.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const EuiIconCloudDrizzle = props => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}>
+    <path d="M6.348 3.761A3.995 3.995 0 0 1 8 7a.5.5 0 0 1-1 0 3 3 0 1 0-4.878 2.34.5.5 0 0 1-.627.779 4 4 0 0 1 3.973-6.84 5.502 5.502 0 0 1 10.096 4.37.5.5 0 1 1-.92-.39 4.5 4.5 0 0 0-8.296-3.497zm-1.61 4.935a.5.5 0 1 1 .775.633l-1.466 1.792a.5.5 0 1 1-.774-.633l1.466-1.792zm-3.12 3.647a.5.5 0 0 1 .774.634l-1.505 1.84a.5.5 0 0 1-.774-.634l1.505-1.84zm7.62-3.647a.5.5 0 0 1 .775.633l-1.466 1.792a.5.5 0 1 1-.774-.633l1.466-1.792zm-3.12 3.647a.5.5 0 0 1 .774.634l-1.505 1.84a.5.5 0 0 1-.774-.634l1.505-1.84zm7.62-3.647a.5.5 0 1 1 .775.633l-1.466 1.792a.5.5 0 1 1-.774-.633l1.466-1.792zm-3.12 3.647a.5.5 0 0 1 .774.634l-1.505 1.84a.5.5 0 0 1-.774-.634l1.505-1.84z" />
+  </svg>
+);
+
+export const icon = EuiIconCloudDrizzle;