From 869874d0aa92bf1898d4a450c012b7bfffe52bd8 Mon Sep 17 00:00:00 2001
From: Michael Marcialis <michael.marcialis@elastic.co>
Date: Mon, 16 Oct 2023 12:08:51 -0400
Subject: [PATCH] [EuiIcon] Add Sparse Vector Token, Update Dense Vector Token
 (#7282)

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
---
 src-docs/src/views/icon/tokens.tsx            |  3 +-
 .../icon/__snapshots__/icon.test.tsx.snap     | 56 ++++++++++++++++++-
 .../icon/assets/tokenVectorDense.tsx          | 36 ++++++++++++
 ...nDenseVector.tsx => tokenVectorSparse.tsx} |  8 ++-
 src/components/icon/icon_map.ts               |  4 +-
 .../icon/svgs/tokens/tokenDenseVector.svg     |  3 -
 .../icon/svgs/tokens/tokenVectorDense.svg     |  5 ++
 .../icon/svgs/tokens/tokenVectorSparse.svg    |  5 ++
 .../token/__snapshots__/token.test.tsx.snap   | 22 +++++++-
 src/components/token/token_map.ts             | 22 ++++++--
 upcoming_changelogs/7282.md                   |  1 +
 11 files changed, 149 insertions(+), 16 deletions(-)
 create mode 100644 src/components/icon/assets/tokenVectorDense.tsx
 rename src/components/icon/assets/{tokenDenseVector.tsx => tokenVectorSparse.tsx} (66%)
 delete mode 100644 src/components/icon/svgs/tokens/tokenDenseVector.svg
 create mode 100644 src/components/icon/svgs/tokens/tokenVectorDense.svg
 create mode 100644 src/components/icon/svgs/tokens/tokenVectorSparse.svg
 create mode 100644 upcoming_changelogs/7282.md

diff --git a/src-docs/src/views/icon/tokens.tsx b/src-docs/src/views/icon/tokens.tsx
index beaad629f09..b11f2a44b61 100644
--- a/src-docs/src/views/icon/tokens.tsx
+++ b/src-docs/src/views/icon/tokens.tsx
@@ -22,7 +22,6 @@ const tokens: EuiTokenMapType[] = [
   'tokenCompletionSuggester',
   'tokenConstant',
   'tokenDate',
-  'tokenDenseVector',
   'tokenElement',
   'tokenEnum',
   'tokenEnumMember',
@@ -66,6 +65,8 @@ const tokens: EuiTokenMapType[] = [
   'tokenText',
   'tokenTokenCount',
   'tokenVariable',
+  'tokenVectorDense',
+  'tokenVectorSparse',
 ];
 
 export default () => (
diff --git a/src/components/icon/__snapshots__/icon.test.tsx.snap b/src/components/icon/__snapshots__/icon.test.tsx.snap
index 430ad7993c8..d3d2d347700 100644
--- a/src/components/icon/__snapshots__/icon.test.tsx.snap
+++ b/src/components/icon/__snapshots__/icon.test.tsx.snap
@@ -9675,7 +9675,13 @@ exports[`EuiIcon props type tokenDenseVector is rendered 1`] = `
   xmlns="http://www.w3.org/2000/svg"
 >
   <path
-    d="M4.154 12V4h2.713v1.14H5.658v5.72h1.21V12H4.153Zm7.692-8v8H9.133v-1.14h1.209V5.14h-1.21V4h2.714Z"
+    d="M2 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H3v10h1.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5v-11Z"
+  />
+  <path
+    d="M6 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm0 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm4-7a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm2-5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+  />
+  <path
+    d="M13.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V3h-1.5a.5.5 0 0 1 0-1h2Z"
   />
 </svg>
 `;
@@ -10501,6 +10507,54 @@ exports[`EuiIcon props type tokenVariable is rendered 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon props type tokenVectorDense is rendered 1`] = `
+<svg
+  aria-hidden="true"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
+  data-icon-type="tokenVectorDense"
+  data-is-loaded="true"
+  height="16"
+  role="img"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M2 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H3v10h1.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5v-11Z"
+  />
+  <path
+    d="M6 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm0 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm4-7a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm2-5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+  />
+  <path
+    d="M13.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V3h-1.5a.5.5 0 0 1 0-1h2Z"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenVectorSparse is rendered 1`] = `
+<svg
+  aria-hidden="true"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
+  data-icon-type="tokenVectorSparse"
+  data-is-loaded="true"
+  height="16"
+  role="img"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M2 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H3v10h1.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5v-11ZM8 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm0 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+  />
+  <path
+    d="M6 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm5 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+  />
+  <path
+    d="M13.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V3h-1.5a.5.5 0 0 1 0-1h2Z"
+  />
+</svg>
+`;
+
 exports[`EuiIcon props type training is rendered 1`] = `
 <svg
   aria-hidden="true"
diff --git a/src/components/icon/assets/tokenVectorDense.tsx b/src/components/icon/assets/tokenVectorDense.tsx
new file mode 100644
index 00000000000..f0cdc9f9570
--- /dev/null
+++ b/src/components/icon/assets/tokenVectorDense.tsx
@@ -0,0 +1,36 @@
+/*
+ * 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 EuiIconTokenVectorDense = ({
+  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="M2 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H3v10h1.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5v-11Z" />
+    <path d="M6 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm0 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm4-7a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm2-5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" />
+    <path d="M13.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V3h-1.5a.5.5 0 0 1 0-1h2Z" />
+  </svg>
+);
+export const icon = EuiIconTokenVectorDense;
diff --git a/src/components/icon/assets/tokenDenseVector.tsx b/src/components/icon/assets/tokenVectorSparse.tsx
similarity index 66%
rename from src/components/icon/assets/tokenDenseVector.tsx
rename to src/components/icon/assets/tokenVectorSparse.tsx
index 928303a39eb..f1e2a713b7b 100644
--- a/src/components/icon/assets/tokenDenseVector.tsx
+++ b/src/components/icon/assets/tokenVectorSparse.tsx
@@ -14,7 +14,7 @@ interface SVGRProps {
   title?: string;
   titleId?: string;
 }
-const EuiIconTokenDenseVector = ({
+const EuiIconTokenVectorSparse = ({
   title,
   titleId,
   ...props
@@ -28,7 +28,9 @@ const EuiIconTokenDenseVector = ({
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <path d="M4.154 12V4h2.713v1.14H5.658v5.72h1.21V12H4.153Zm7.692-8v8H9.133v-1.14h1.209V5.14h-1.21V4h2.714Z" />
+    <path d="M2 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H3v10h1.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5v-11ZM8 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm0 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" />
+    <path d="M6 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm5 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" />
+    <path d="M13.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V3h-1.5a.5.5 0 0 1 0-1h2Z" />
   </svg>
 );
-export const icon = EuiIconTokenDenseVector;
+export const icon = EuiIconTokenVectorSparse;
diff --git a/src/components/icon/icon_map.ts b/src/components/icon/icon_map.ts
index 8595347bc36..28c68c74f49 100644
--- a/src/components/icon/icon_map.ts
+++ b/src/components/icon/icon_map.ts
@@ -444,7 +444,6 @@ export const typeToPathMap = {
   tokenCompletionSuggester: 'tokenCompletionSuggester',
   tokenConstant: 'tokenConstant',
   tokenDate: 'tokenDate',
-  tokenDenseVector: 'tokenDenseVector',
   tokenElement: 'tokenElement',
   tokenEnum: 'tokenEnum',
   tokenEnumMember: 'tokenEnumMember',
@@ -488,4 +487,7 @@ export const typeToPathMap = {
   tokenText: 'tokenText',
   tokenTokenCount: 'tokenTokenCount',
   tokenVariable: 'tokenVariable',
+  tokenVectorDense: 'tokenVectorDense',
+  tokenDenseVector: 'tokenVectorDense', // NOTE: This is an undocumented alias for `tokenVectorDense`, added for legacy compatability
+  tokenVectorSparse: 'tokenVectorSparse',
 };
diff --git a/src/components/icon/svgs/tokens/tokenDenseVector.svg b/src/components/icon/svgs/tokens/tokenDenseVector.svg
deleted file mode 100644
index 66cbdf88904..00000000000
--- a/src/components/icon/svgs/tokens/tokenDenseVector.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path d="M4.1539 12V4H6.86711V5.13923H5.65807V10.8608H6.86711V12H4.1539ZM11.8461 4V12H9.13288V10.8608H10.3419V5.13923H9.13288V4H11.8461Z" />
-</svg>
diff --git a/src/components/icon/svgs/tokens/tokenVectorDense.svg b/src/components/icon/svgs/tokens/tokenVectorDense.svg
new file mode 100644
index 00000000000..883e56bcf02
--- /dev/null
+++ b/src/components/icon/svgs/tokens/tokenVectorDense.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M2 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H3v10h1.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5v-11Z"/>
+  <path d="M6 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm0 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm4-7a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm2-5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
+  <path d="M13.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V3h-1.5a.5.5 0 0 1 0-1h2Z"/>
+</svg>
diff --git a/src/components/icon/svgs/tokens/tokenVectorSparse.svg b/src/components/icon/svgs/tokens/tokenVectorSparse.svg
new file mode 100644
index 00000000000..f2296572cf0
--- /dev/null
+++ b/src/components/icon/svgs/tokens/tokenVectorSparse.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M2 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H3v10h1.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5v-11ZM8 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm0 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
+  <path d="M6 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm5 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
+  <path d="M13.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V3h-1.5a.5.5 0 0 1 0-1h2Z"/>
+</svg>
diff --git a/src/components/token/__snapshots__/token.test.tsx.snap b/src/components/token/__snapshots__/token.test.tsx.snap
index b776fbd354e..83caf2c1e79 100644
--- a/src/components/token/__snapshots__/token.test.tsx.snap
+++ b/src/components/token/__snapshots__/token.test.tsx.snap
@@ -256,7 +256,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenDate is rendered 1`] =
 
 exports[`EuiToken props iconType as EuiTokenMapType tokenDenseVector is rendered 1`] = `
 <span
-  class="euiToken emotion-euiToken-square-light-s-euiColorVis2"
+  class="euiToken emotion-euiToken-square-light-s-euiColorVis5"
 >
   <span
     data-euiicon-type="tokenDenseVector"
@@ -694,6 +694,26 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenVariable is rendered 1`
 </span>
 `;
 
+exports[`EuiToken props iconType as EuiTokenMapType tokenVectorDense is rendered 1`] = `
+<span
+  class="euiToken emotion-euiToken-square-light-s-euiColorVis5"
+>
+  <span
+    data-euiicon-type="tokenVectorDense"
+  />
+</span>
+`;
+
+exports[`EuiToken props iconType as EuiTokenMapType tokenVectorSparse is rendered 1`] = `
+<span
+  class="euiToken emotion-euiToken-square-light-s-euiColorVis1"
+>
+  <span
+    data-euiicon-type="tokenVectorSparse"
+  />
+</span>
+`;
+
 exports[`EuiToken props shape circle is rendered 1`] = `
 <span
   class="euiToken emotion-euiToken-circle-light-s-gray"
diff --git a/src/components/token/token_map.ts b/src/components/token/token_map.ts
index 522e06f2a83..cc369296548 100644
--- a/src/components/token/token_map.ts
+++ b/src/components/token/token_map.ts
@@ -18,7 +18,6 @@ export type EuiTokenMapType =
   | 'tokenCompletionSuggester'
   | 'tokenConstant'
   | 'tokenDate'
-  | 'tokenDenseVector'
   | 'tokenElement'
   | 'tokenEnum'
   | 'tokenEnumMember'
@@ -61,7 +60,10 @@ export type EuiTokenMapType =
   | 'tokenTag'
   | 'tokenText'
   | 'tokenTokenCount'
-  | 'tokenVariable';
+  | 'tokenVariable'
+  | 'tokenVectorDense'
+  | 'tokenDenseVector' // NOTE: This is an undocumented alias for `tokenVectorDense`, added for legacy compatability
+  | 'tokenVectorSparse';
 
 /**
  * Most of the style combinations for tokens are semi-arbitrary. However, there was an effort
@@ -108,10 +110,6 @@ export const TOKEN_MAP: {
     shape: 'square',
     color: 'euiColorVis6',
   },
-  tokenDenseVector: {
-    shape: 'square',
-    color: 'euiColorVis2',
-  },
   tokenElement: {
     shape: 'square',
     color: 'euiColorVis3',
@@ -284,4 +282,16 @@ export const TOKEN_MAP: {
     shape: 'circle',
     color: 'euiColorVis7',
   },
+  tokenVectorDense: {
+    shape: 'square',
+    color: 'euiColorVis5',
+  },
+  tokenDenseVector: {
+    shape: 'square',
+    color: 'euiColorVis5',
+  },
+  tokenVectorSparse: {
+    shape: 'square',
+    color: 'euiColorVis1',
+  },
 };
diff --git a/upcoming_changelogs/7282.md b/upcoming_changelogs/7282.md
new file mode 100644
index 00000000000..fa263d33861
--- /dev/null
+++ b/upcoming_changelogs/7282.md
@@ -0,0 +1 @@
+- Added `tokenVectorSparse` token and updated `tokenDenseVector` token (now named `tokenVectorDense`).
\ No newline at end of file