New/Updated Icon Glyphs & Tokens

changelogs/upcoming/7727.md

@@ -0,0 +1 @@
+- Added/updated `clickLeft`, `clickRight`, `clockCounter`, `error`, `errorFilled`, `warningFilled`, `tokenDimension`, `tokenMetricCounter`, and `tokenMetricGauge` icon glyphs and tokens.

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

@@ -43,7 +43,10 @@ export const iconTypes = [
   'check',
   'checkInCircleFilled',
   'cheer',
+  'clickLeft',
+  'clickRight',
   'clock',
+  'clockCounter',
   'cloudDrizzle',
   'cloudStormy',
   'cloudSunny',
@@ -83,6 +86,7 @@ export const iconTypes = [
   'eql',
   'eraser',
   'error',
+  'errorFilled',
   'esqlVis',
   'exit',
   'expand',
@@ -295,6 +299,7 @@ export const iconTypes = [
   'visVega',
   'visVisualBuilder',
   'warning',
+  'warningFilled',
   'wordWrap',
   'wordWrapDisabled',
   'wrench',

src-docs/src/views/icon/tokens.tsx

@@ -22,6 +22,7 @@ const tokens: EuiTokenMapType[] = [
   'tokenCompletionSuggester',
   'tokenConstant',
   'tokenDate',
+  'tokenDimension',
   'tokenElement',
   'tokenEnum',
   'tokenEnumMember',

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

@@ -1353,6 +1353,56 @@ exports[`EuiIcon props type classificationJob is rendered 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon props type clickLeft is rendered 1`] = `
+<svg
+  aria-hidden="true"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
+  data-icon-type="clickLeft"
+  data-is-loaded="true"
+  height="16"
+  role="img"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M5 .5a.5.5 0 0 0-1 0v1a.5.5 0 0 0 1 0v-1Zm-3.146.646a.5.5 0 1 0-.708.708l1 1a.5.5 0 1 0 .708-.708l-1-1Z"
+  />
+  <path
+    d="M13 7A5 5 0 0 0 3 7v4a5 5 0 0 0 10 0V7Zm-1 0a4 4 0 0 0-4-4v5a1 1 0 0 1-1 1H4v2a4 4 0 0 0 8 0V7Z"
+    fill-rule="evenodd"
+  />
+  <path
+    d="M0 4.5A.5.5 0 0 1 .5 4h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5Z"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type clickRight is rendered 1`] = `
+<svg
+  aria-hidden="true"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
+  data-icon-type="clickRight"
+  data-is-loaded="true"
+  height="16"
+  role="img"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M11 .5a.5.5 0 0 1 1 0v1a.5.5 0 0 1-1 0v-1Zm3.146.646a.5.5 0 0 1 .708.708l-1 1a.5.5 0 0 1-.708-.708l1-1Z"
+  />
+  <path
+    d="M3 7a5 5 0 0 1 10 0v4a5 5 0 0 1-10 0V7Zm1 0a4 4 0 0 1 4-4v5a1 1 0 0 0 1 1h3v2a4 4 0 0 1-8 0V7Z"
+    fill-rule="evenodd"
+  />
+  <path
+    d="M16 4.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .5-.5Z"
+  />
+</svg>
+`;
+
 exports[`EuiIcon props type clock is rendered 1`] = `
 <svg
   aria-hidden="true"
@@ -1372,6 +1422,27 @@ exports[`EuiIcon props type clock is rendered 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon props type clockCounter is rendered 1`] = `
+<svg
+  aria-hidden="true"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
+  data-icon-type="clockCounter"
+  data-is-loaded="true"
+  height="16"
+  role="img"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M11.39 3.61a5.5 5.5 0 0 0-7.78 7.78l.562.56v-1.622a.5.5 0 0 1 1 0v2.829a.5.5 0 0 1-.5.5H1.843a.5.5 0 0 1 0-1h1.621l-.56-.56A6.5 6.5 0 1 1 7.5 14a.5.5 0 0 1 0-1 5.5 5.5 0 0 0 3.89-9.39Z"
+  />
+  <path
+    d="M7.5 3a.5.5 0 0 1 .5.5V7h2.5a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5Z"
+  />
+</svg>
+`;
+
 exports[`EuiIcon props type cloudDrizzle is rendered 1`] = `
 <svg
   aria-hidden="true"
@@ -2934,6 +3005,28 @@ exports[`EuiIcon props type error is rendered 1`] = `
   viewBox="0 0 16 16"
   width="16"
   xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M4.854 5.146a.5.5 0 1 0-.708.708L6.793 8.5l-2.647 2.646a.5.5 0 0 0 .708.708L7.5 9.207l2.646 2.647a.5.5 0 0 0 .708-.708L8.207 8.5l2.647-2.646a.5.5 0 0 0-.708-.708L7.5 7.793 4.854 5.146Z"
+  />
+  <path
+    d="M5 1a1 1 0 0 0-.707.293l-4 4A1 1 0 0 0 0 6v5a1 1 0 0 0 .293.707l4 4A1 1 0 0 0 5 16h5a1 1 0 0 0 .707-.293l4-4A1 1 0 0 0 15 11V6a1 1 0 0 0-.293-.707l-4-4A1 1 0 0 0 10 1H5Zm5 1H5L1 6v5l4 4h5l4-4V6l-4-4Z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type errorFilled is rendered 1`] = `
+<svg
+  aria-hidden="true"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
+  data-icon-type="errorFilled"
+  data-is-loaded="true"
+  height="16"
+  role="img"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
 >
   <path
     d="M10 1a1 1 0 0 1 .707.293l4 4A1 1 0 0 1 15 6v5a1 1 0 0 1-.293.707l-4 4A1 1 0 0 1 10 16H5a1 1 0 0 1-.707-.293l-4-4A1 1 0 0 1 0 11V6a1 1 0 0 1 .293-.707l4-4A1 1 0 0 1 5 1h5ZM4.146 5.146a.5.5 0 0 1 .708 0L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708.708L8.207 8.5l2.647 2.646a.5.5 0 0 1-.708.708L7.5 9.207l-2.646 2.647a.5.5 0 0 1-.708-.708L6.793 8.5 4.146 5.854a.5.5 0 0 1 0-.708Z"
@@ -9827,6 +9920,28 @@ exports[`EuiIcon props type tokenDenseVector is rendered 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon props type tokenDimension is rendered 1`] = `
+<svg
+  aria-hidden="true"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
+  data-icon-type="tokenDimension"
+  data-is-loaded="true"
+  height="16"
+  role="img"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M12 10.5a.5.5 0 0 0-1 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 0-1H12v-.5Z"
+  />
+  <path
+    d="M3 12h3.078c.728 0 1.37-.127 1.924-.383a3.5 3.5 0 1 0 2.053-3.306c.005-.101.008-.205.008-.311 0-.833-.165-1.548-.493-2.145A3.309 3.309 0 0 0 8.18 4.48C7.58 4.16 6.87 4 6.047 4H3v8Zm6.787-2.321A2.5 2.5 0 0 0 11.5 14a2.5 2.5 0 1 0-1.713-4.321ZM6 10.156h-.828V5.844h.766c.416 0 .768.064 1.054.191.29.128.508.348.656.66.151.313.227.748.227 1.305 0 .557-.074.992-.223 1.305a1.29 1.29 0 0 1-.64.66c-.279.127-.616.191-1.012.191Z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
 exports[`EuiIcon props type tokenElement is rendered 1`] = `
 <svg
   aria-hidden="true"
@@ -10159,7 +10274,11 @@ exports[`EuiIcon props type tokenMetricCounter is rendered 1`] = `
   xmlns="http://www.w3.org/2000/svg"
 >
   <path
-    d="M11 3a1 1 0 0 0-1 1v1H9a1 1 0 0 0 0 2h1v1a1 1 0 1 0 2 0V7h1a1 1 0 1 0 0-2h-1V4a1 1 0 0 0-1-1ZM5 7a1 1 0 0 0-1 1v1H3a1 1 0 0 0 0 2h1v1a1 1 0 1 0 2 0v-1h1a1 1 0 1 0 0-2H6V8a1 1 0 0 0-1-1Z"
+    d="M12 10.5a.5.5 0 0 0-1 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 0-1H12v-.5Z"
+  />
+  <path
+    d="M8 3h4v5.035A3.5 3.5 0 1 1 8.337 13H2V9h3V6h3V3Zm1.05 9a2.5 2.5 0 1 1 4.902-1 2.5 2.5 0 0 1-4.902 1ZM11 8.035a3.49 3.49 0 0 0-2 1.016V4h2v4.035ZM8 12H6V7h2v5Zm-3 0v-2H3v2h2Z"
+    fill-rule="evenodd"
   />
 </svg>
 `;
@@ -10177,7 +10296,11 @@ exports[`EuiIcon props type tokenMetricGauge is rendered 1`] = `
   xmlns="http://www.w3.org/2000/svg"
 >
   <path
-    d="M5 4h-.5a.5.5 0 0 1 0-1h1a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1 0-1H5v-2h-.5a.5.5 0 0 1 0-1H5V7h-.5a.5.5 0 0 1 0-1H5V4Zm3 1a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H8Z"
+    d="M12 10.5a.5.5 0 0 0-1 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 0-1H12v-.5Z"
+  />
+  <path
+    d="M6 3H2v10h6.337A3.5 3.5 0 1 0 12 8.035V5H8v2H6V3Zm5 5.035V6H9v3.05a3.49 3.49 0 0 1 2-1.015ZM9 11.5a2.5 2.5 0 1 1 5.002 0A2.5 2.5 0 0 1 9 11.5ZM8 8H6v4h2V8ZM5 4H3v8h2V4Z"
+    fill-rule="evenodd"
   />
 </svg>
 `;
@@ -11441,6 +11564,25 @@ exports[`EuiIcon props type warning is rendered 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon props type warningFilled is rendered 1`] = `
+<svg
+  aria-hidden="true"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
+  data-icon-type="warningFilled"
+  data-is-loaded="true"
+  height="16"
+  role="img"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M8 1a1 1 0 0 1 .864.496l7 12A1 1 0 0 1 15 15H1a1 1 0 0 1-.864-1.504l7-12A1 1 0 0 1 8 1Zm.9 4.995-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995a.905.905 0 1 1 1.8 0ZM8 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
 exports[`EuiIcon props type watchesApp is rendered 1`] = `
 <svg
   aria-hidden="true"

src/components/icon/assets/clickLeft.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import type { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const EuiIconClickLeft = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M5 .5a.5.5 0 0 0-1 0v1a.5.5 0 0 0 1 0v-1Zm-3.146.646a.5.5 0 1 0-.708.708l1 1a.5.5 0 1 0 .708-.708l-1-1Z" />
+    <path
+      fillRule="evenodd"
+      d="M13 7A5 5 0 0 0 3 7v4a5 5 0 0 0 10 0V7Zm-1 0a4 4 0 0 0-4-4v5a1 1 0 0 1-1 1H4v2a4 4 0 0 0 8 0V7Z"
+    />
+    <path d="M0 4.5A.5.5 0 0 1 .5 4h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5Z" />
+  </svg>
+);
+export const icon = EuiIconClickLeft;

src/components/icon/assets/clickRight.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import type { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const EuiIconClickRight = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M11 .5a.5.5 0 0 1 1 0v1a.5.5 0 0 1-1 0v-1Zm3.146.646a.5.5 0 0 1 .708.708l-1 1a.5.5 0 0 1-.708-.708l1-1Z" />
+    <path
+      fillRule="evenodd"
+      d="M3 7a5 5 0 0 1 10 0v4a5 5 0 0 1-10 0V7Zm1 0a4 4 0 0 1 4-4v5a1 1 0 0 0 1 1h3v2a4 4 0 0 1-8 0V7Z"
+    />
+    <path d="M16 4.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .5-.5Z" />
+  </svg>
+);
+export const icon = EuiIconClickRight;

src/components/icon/assets/clockCounter.tsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import type { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const EuiIconClockCounter = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M11.39 3.61a5.5 5.5 0 0 0-7.78 7.78l.562.56v-1.622a.5.5 0 0 1 1 0v2.829a.5.5 0 0 1-.5.5H1.843a.5.5 0 0 1 0-1h1.621l-.56-.56A6.5 6.5 0 1 1 7.5 14a.5.5 0 0 1 0-1 5.5 5.5 0 0 0 3.89-9.39Z" />
+    <path d="M7.5 3a.5.5 0 0 1 .5.5V7h2.5a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5Z" />
+  </svg>
+);
+export const icon = EuiIconClockCounter;

src/components/icon/assets/error.tsx

@@ -28,9 +28,10 @@ const EuiIconError = ({
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M4.854 5.146a.5.5 0 1 0-.708.708L6.793 8.5l-2.647 2.646a.5.5 0 0 0 .708.708L7.5 9.207l2.646 2.647a.5.5 0 0 0 .708-.708L8.207 8.5l2.647-2.646a.5.5 0 0 0-.708-.708L7.5 7.793 4.854 5.146Z" />
     <path
       fillRule="evenodd"
-      d="M10 1a1 1 0 0 1 .707.293l4 4A1 1 0 0 1 15 6v5a1 1 0 0 1-.293.707l-4 4A1 1 0 0 1 10 16H5a1 1 0 0 1-.707-.293l-4-4A1 1 0 0 1 0 11V6a1 1 0 0 1 .293-.707l4-4A1 1 0 0 1 5 1h5ZM4.146 5.146a.5.5 0 0 1 .708 0L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708.708L8.207 8.5l2.647 2.646a.5.5 0 0 1-.708.708L7.5 9.207l-2.646 2.647a.5.5 0 0 1-.708-.708L6.793 8.5 4.146 5.854a.5.5 0 0 1 0-.708Z"
+      d="M5 1a1 1 0 0 0-.707.293l-4 4A1 1 0 0 0 0 6v5a1 1 0 0 0 .293.707l4 4A1 1 0 0 0 5 16h5a1 1 0 0 0 .707-.293l4-4A1 1 0 0 0 15 11V6a1 1 0 0 0-.293-.707l-4-4A1 1 0 0 0 10 1H5Zm5 1H5L1 6v5l4 4h5l4-4V6l-4-4Z"
     />
   </svg>
 );

src/components/icon/assets/errorFilled.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import type { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const EuiIconErrorFilled = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      fillRule="evenodd"
+      d="M10 1a1 1 0 0 1 .707.293l4 4A1 1 0 0 1 15 6v5a1 1 0 0 1-.293.707l-4 4A1 1 0 0 1 10 16H5a1 1 0 0 1-.707-.293l-4-4A1 1 0 0 1 0 11V6a1 1 0 0 1 .293-.707l4-4A1 1 0 0 1 5 1h5ZM4.146 5.146a.5.5 0 0 1 .708 0L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708.708L8.207 8.5l2.647 2.646a.5.5 0 0 1-.708.708L7.5 9.207l-2.646 2.647a.5.5 0 0 1-.708-.708L6.793 8.5 4.146 5.854a.5.5 0 0 1 0-.708Z"
+    />
+  </svg>
+);
+export const icon = EuiIconErrorFilled;