[Icon] Update Observability app icons (#2430)

* Replaced the `infraApp` icon with a new `metricsApp` icon. * Replaced the `loggingApp` icon with a new `logsApp` icon * Updated example icon references
elastic · Oct 16, 2019 · 1154905 · 1154905
1 parent 5f1a4be
commit 1154905
Show file tree

Hide file tree

Showing 13 changed files with 96 additions and 104 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added new updated `infraApp` and `logsApp` icons. ([#2430](https://github.com/elastic/eui/pull/2430))
+
 **Bug fixes**
 
 - Fixed missing misc. button and link type definition exports ([#2434](https://github.com/elastic/eui/pull/2434))

diff --git a/src-docs/src/views/icon/apps.js b/src-docs/src/views/icon/apps.js
@@ -41,9 +41,9 @@ const iconTypes = [
   'indexManagementApp',
   'indexPatternApp',
   'indexRollupApp',
-  'infraApp',
+  'metricsApp',
   'lensApp',
-  'loggingApp',
+  'logsApp',
   'machineLearningApp',
   'managementApp',
   'metricbeatApp',

diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js
@@ -79,7 +79,7 @@ export default class extends Component {
             {
               label: 'My logs',
               href: '#/layout/nav-drawer',
-              iconType: 'loggingApp',
+              iconType: 'logsApp',
               'aria-label': 'This is an alternate aria-label',
               extraAction: faveExtraAction,
             },
@@ -107,7 +107,7 @@ export default class extends Component {
             {
               label: 'My logs',
               href: '#/layout/nav-drawer',
-              iconType: 'loggingApp',
+              iconType: 'logsApp',
               extraAction: {
                 color: 'subdued',
                 iconType: 'starFilled',
@@ -183,15 +183,15 @@ export default class extends Component {
         extraAction: { ...pinExtraActionFn('APM') },
       },
       {
-        label: 'Infrastructure',
+        label: 'Metrics',
         href: '#/layout/nav-drawer',
-        iconType: 'infraApp',
+        iconType: 'metricsApp',
         extraAction: { ...pinExtraActionFn('Infrastructure') },
       },
       {
-        label: 'Log viewer',
+        label: 'Logs',
         href: '#/layout/nav-drawer',
-        iconType: 'loggingApp',
+        iconType: 'logsApp',
         extraAction: { ...pinExtraActionFn('Log viewer') },
       },
       {

diff --git a/src/components/icon/__snapshots__/icon.test.tsx.snap b/src/components/icon/__snapshots__/icon.test.tsx.snap
@@ -2448,28 +2448,6 @@ exports[`EuiIcon props type indexSettings is rendered 1`] = `
 </svg>
 `;
 
-exports[`EuiIcon props type infraApp is rendered 1`] = `
-<svg
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
-  focusable="false"
-  height="32"
-  viewBox="0 0 32 32"
-  width="32"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    class="euiIcon__fillSecondary"
-    d="M12.594 18.424h3.875v1.939h-3.875zM12.594 26.182h3.875v1.939h-3.875z"
-  />
-  <path
-    d="M8.719 14.545V32H31V14.545H8.719zm20.343 1.94v5.818H10.657v-5.818h18.407zM10.657 30.06v-5.819h18.407v5.819H10.655z"
-  />
-  <path
-    d="M27.648 12.606a8.499 8.499 0 0 0-4.398-3.879 8.983 8.983 0 0 0-8.903-7.81 8.983 8.983 0 0 0-8.903 7.81 8.553 8.553 0 0 0-5.353 8.645 8.55 8.55 0 0 0 6.69 7.656V23.03a6.612 6.612 0 0 1-4.845-6.293 6.613 6.613 0 0 1 4.69-6.41l.64-.194v-.669a7.046 7.046 0 0 1 7.023-6.527 7.046 7.046 0 0 1 7.024 6.527v.67l.639.193a6.587 6.587 0 0 1 3.4 2.28h2.296z"
-  />
-</svg>
-`;
-
 exports[`EuiIcon props type inputOutput is rendered 1`] = `
 <svg
   class="euiIcon euiIcon--medium euiIcon-isLoaded"
@@ -2723,25 +2701,6 @@ exports[`EuiIcon props type lockOpen is rendered 1`] = `
 </svg>
 `;
 
-exports[`EuiIcon props type loggingApp is rendered 1`] = `
-<svg
-  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
-  focusable="false"
-  height="32"
-  viewBox="0 0 32 32"
-  width="32"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    class="euiIcon__fillSecondary"
-    d="M9 18h12v2H9zM9 13h12v2H9zM9 8h12v2H9z"
-  />
-  <path
-    d="M28 1H8a4 4 0 0 0-4 4v19H0v3a4 4 0 0 0 4 4h18a4 4 0 0 0 4-4V8h6V5a4 4 0 0 0-4-4zM4 29a2 2 0 0 1-2-2v-1h16v1a4 4 0 0 0 .54 2H4zm18 0a2 2 0 0 1-2-2v-3H6V5a2 2 0 0 1 2-2h16.56A4 4 0 0 0 24 5v22a2 2 0 0 1-2 2zm8-23h-4V5a2 2 0 1 1 4 0v1z"
-  />
-</svg>
-`;
-
 exports[`EuiIcon props type logoAPM is rendered 1`] = `
 <svg
   class="euiIcon euiIcon--medium euiIcon-isLoaded"
@@ -4699,6 +4658,25 @@ exports[`EuiIcon props type logoWindows is rendered 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon props type logsApp is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  focusable="false"
+  height="32"
+  viewBox="0 0 32 32"
+  width="32"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M1 8c3.983 0 7.732 1.013 11.001 2.797v2.312A20.887 20.887 0 0 0 2 10.023v11.025c4.85.462 9.27 4.183 9.955 8.691l.035.261H12v2h-1.938l-.018-1.236c-.116-4.015-4.336-7.631-8.793-7.76L0 22.986V8h1zm13-8h1c9.28 0 16.825 7.437 16.997 16.677L32 17v15h-2V17c0-7.84-6.014-14.274-13.68-14.943L16 2.033v7.681l-2-1.143V0h1-1z"
+  />
+  <path
+    class="euiIcon__fillSecondary"
+    d="M26.997 30.636L27.009 32H14V11.305l1.483.82c6.994 3.861 11.382 10.735 11.514 18.51zm-2.048-1.04C24.505 23.556 21.205 18.2 16 14.771V30h8.974l-.025-.404z"
+  />
+</svg>
+`;
+
 exports[`EuiIcon props type logstashFilter is rendered 1`] = `
 <svg
   class="euiIcon euiIcon--medium euiIcon-isLoaded"
@@ -4958,6 +4936,25 @@ exports[`EuiIcon props type metricbeatApp is rendered 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon props type metricsApp is rendered 1`] = `
+<svg
+  class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
+  focusable="false"
+  height="32"
+  viewBox="0 0 32 32"
+  width="32"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M30 19.092v12.88H2v-5.386l6.747-6.747.708.708c.236.236.48.463.733.68L4 27.414v2.558h24v-8.91c.186-.166.369-.339.546-.516L30 19.092zm-20.85-3.19A10.955 10.955 0 0 1 8 11C8 4.925 12.925 0 19 0s11 4.925 11 11c0 1.76-.414 3.425-1.15 4.9l-1.51-1.51A8.973 8.973 0 0 0 28 11a9 9 0 1 0-17.34 3.391l-1.51 1.51z"
+  />
+  <path
+    class="euiIcon__fillSecondary"
+    d="M19 20a8.96 8.96 0 0 0 5.618-1.968l-4.202-4.204a2 2 0 0 0-2.828 0l-4.205 4.205A8.96 8.96 0 0 0 19 20zm-2.826-7.586a4 4 0 0 1 5.656 0l5.656 5.657-.707.707A10.967 10.967 0 0 1 19 22a10.967 10.967 0 0 1-7.778-3.221l-.707-.707 5.659-5.658z"
+  />
+</svg>
+`;
+
 exports[`EuiIcon props type minusInCircle is rendered 1`] = `
 <svg
   class="euiIcon euiIcon--medium euiIcon-isLoaded"

diff --git a/src/components/icon/assets/app_infra.js b/src/components/icon/assets/app_infra.js
diff --git a/src/components/icon/assets/app_infra.svg b/src/components/icon/assets/app_infra.svg
diff --git a/src/components/icon/assets/app_logging.js b/src/components/icon/assets/app_logging.js
diff --git a/src/components/icon/assets/app_logging.svg b/src/components/icon/assets/app_logging.svg
diff --git a/src/components/icon/assets/app_logs.js b/src/components/icon/assets/app_logs.js
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const EuiIconAppLogs = props => (
+  <svg
+    width={32}
+    height={32}
+    viewBox="0 0 32 32"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}>
+    <path d="M1 8c3.983 0 7.732 1.013 11.001 2.797v2.312A20.887 20.887 0 0 0 2 10.023v11.025c4.85.462 9.27 4.183 9.955 8.691l.035.261H12v2h-1.938l-.018-1.236c-.116-4.015-4.336-7.631-8.793-7.76L0 22.986V8h1zm13-8h1c9.28 0 16.825 7.437 16.997 16.677L32 17v15h-2V17c0-7.84-6.014-14.274-13.68-14.943L16 2.033v7.681l-2-1.143V0h1-1z" />
+    <path
+      className="euiIcon__fillSecondary"
+      d="M26.997 30.636L27.009 32H14V11.305l1.483.82c6.994 3.861 11.382 10.735 11.514 18.51zm-2.048-1.04C24.505 23.556 21.205 18.2 16 14.771V30h8.974l-.025-.404z"
+    />
+  </svg>
+);
+
+export const icon = EuiIconAppLogs;
diff --git a/src/components/icon/assets/app_logs.svg b/src/components/icon/assets/app_logs.svg
diff --git a/src/components/icon/assets/app_metrics.js b/src/components/icon/assets/app_metrics.js
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const EuiIconAppMetrics = props => (
+  <svg
+    width={32}
+    height={32}
+    viewBox="0 0 32 32"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}>
+    <path d="M30 19.092v12.88H2v-5.386l6.747-6.747.708.708c.236.236.48.463.733.68L4 27.414v2.558h24v-8.91c.186-.166.369-.339.546-.516L30 19.092zm-20.85-3.19A10.955 10.955 0 0 1 8 11C8 4.925 12.925 0 19 0s11 4.925 11 11c0 1.76-.414 3.425-1.15 4.9l-1.51-1.51A8.973 8.973 0 0 0 28 11a9 9 0 1 0-17.34 3.391l-1.51 1.51z" />
+    <path
+      className="euiIcon__fillSecondary"
+      d="M19 20a8.96 8.96 0 0 0 5.618-1.968l-4.202-4.204a2 2 0 0 0-2.828 0l-4.205 4.205A8.96 8.96 0 0 0 19 20zm-2.826-7.586a4 4 0 0 1 5.656 0l5.656 5.657-.707.707A10.967 10.967 0 0 1 19 22a10.967 10.967 0 0 1-7.778-3.221l-.707-.707 5.659-5.658z"
+    />
+  </svg>
+);
+
+export const icon = EuiIconAppMetrics;
diff --git a/src/components/icon/assets/app_metrics.svg b/src/components/icon/assets/app_metrics.svg
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
@@ -143,7 +143,7 @@ const typeToPathMap = {
   indexPatternApp: 'app_index_pattern',
   indexRollupApp: 'app_index_rollup',
   indexSettings: 'index_settings',
-  infraApp: 'app_infra',
+  metricsApp: 'app_metrics',
   inputOutput: 'inputOutput',
   inspect: 'inspect',
   invert: 'invert',
@@ -160,7 +160,7 @@ const typeToPathMap = {
   listAdd: 'list_add',
   lock: 'lock',
   lockOpen: 'lockOpen',
-  loggingApp: 'app_logging',
+  logsApp: 'app_logs',
   logoAerospike: 'logo_aerospike',
   logoApache: 'logo_apache',
   logoAPM: 'logo_apm',