[EuiIcon] Add Sparse Vector Token, Update Dense Vector Token (#7282)

Co-authored-by: Cee Chen <[email protected]>

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 () => (

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"

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;

src/components/icon/assets/tokenDenseVector.tsx → 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;

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',
 };

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"

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',
+  },
 };

upcoming_changelogs/7282.md

@@ -0,0 +1 @@
+- Added `tokenVectorSparse` token and updated `tokenDenseVector` token (now named `tokenVectorDense`).