[EuiToken] Update tokenKeyword and rename old tokenKeyword as `to…

…kenTag` (#5251)
elastic · Oct 14, 2021 · cd938f2 · cd938f2
1 parent c92914a
commit cd938f2
Show file tree

Hide file tree

Showing 10 changed files with 98 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,10 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `39.1.1`.
+- Updated `tokenKeyword` to match the definition of keyword field type ([#5251](https://github.com/elastic/eui/pull/5251))
+
+**Breaking changes**
+
+- Renamed `tokenKeyword` icon to `tokenTag` in `EuiToken` ([#5251](https://github.com/elastic/eui/pull/5251))
 
 ## [`39.1.1`](https://github.com/elastic/eui/tree/v39.1.1)
 

diff --git a/src-docs/src/views/icon/tokens.js b/src-docs/src/views/icon/tokens.js
@@ -55,6 +55,7 @@ const tokens = [
   'tokenRankFeature',
   'tokenRankFeatures',
   'tokenKeyword',
+  'tokenTag',
   'tokenCompletionSuggester',
   'tokenDenseVector',
   'tokenText',

diff --git a/src/components/icon/__snapshots__/icon.test.tsx.snap b/src/components/icon/__snapshots__/icon.test.tsx.snap
@@ -8641,12 +8641,7 @@ exports[`EuiIcon props type tokenKeyword is rendered 1`] = `
   xmlns="http://www.w3.org/2000/svg"
 >
   <path
-    d="M5.75 7.375a.25.25 0 00-.25.25v.75c0 .138.112.25.25.25h3.5a.25.25 0 00.25-.25v-.75a.25.25 0 00-.25-.25h-3.5z"
-  />
-  <path
-    clip-rule="evenodd"
-    d="M3 5a1 1 0 011-1h5.989a1 1 0 01.825.436l2.05 3a1 1 0 010 1.128l-2.05 3A1 1 0 019.99 12H4a1 1 0 01-1-1V5zm1.25.75a.5.5 0 01.5-.5h4.745a.5.5 0 01.405.206l1.636 2.25a.5.5 0 010 .588L9.9 10.544a.5.5 0 01-.405.206H4.75a.5.5 0 01-.5-.5v-4.5z"
-    fill-rule="evenodd"
+    d="M10.33 10.28c-.12.04-.29.07-.42.07-.23 0-.43-.08-.53-.3l-.63-1.34 2.32-2.81H9.3L7.76 7.93h-.09L8.22 4H6.59l-1.05 7.5h1.63l.27-1.94h.1l.43 1.12c.27.71.74.92 1.33.92.23 0 .6-.04.86-.11l.17-1.21z"
   />
 </svg>
 `;
@@ -9038,6 +9033,28 @@ exports[`EuiIcon props type tokenSymbol is rendered 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon props type tokenTag is rendered 1`] = `
+<svg
+  aria-hidden="true"
+  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  focusable="false"
+  height="16"
+  role="img"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M5.75 7.375a.25.25 0 00-.25.25v.75c0 .138.112.25.25.25h3.5a.25.25 0 00.25-.25v-.75a.25.25 0 00-.25-.25h-3.5z"
+  />
+  <path
+    clip-rule="evenodd"
+    d="M3 5a1 1 0 011-1h5.989a1 1 0 01.825.436l2.05 3a1 1 0 010 1.128l-2.05 3A1 1 0 019.99 12H4a1 1 0 01-1-1V5zm1.25.75a.5.5 0 01.5-.5h4.745a.5.5 0 01.405.206l1.636 2.25a.5.5 0 010 .588L9.9 10.544a.5.5 0 01-.405.206H4.75a.5.5 0 01-.5-.5v-4.5z"
+    fill-rule="evenodd"
+  />
+</svg>
+`;
+
 exports[`EuiIcon props type tokenText is rendered 1`] = `
 <svg
   aria-hidden="true"

diff --git a/src/components/icon/assets/tokenKeyword.tsx b/src/components/icon/assets/tokenKeyword.tsx
@@ -20,20 +20,15 @@ const EuiIconTokenKeyword = ({
   ...props
 }: React.SVGProps<SVGSVGElement> & SVGRProps) => (
   <svg
+    xmlns="http://www.w3.org/2000/svg"
     width={16}
     height={16}
     viewBox="0 0 16 16"
-    xmlns="http://www.w3.org/2000/svg"
     aria-labelledby={titleId}
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <path d="M5.75 7.375a.25.25 0 00-.25.25v.75c0 .138.112.25.25.25h3.5a.25.25 0 00.25-.25v-.75a.25.25 0 00-.25-.25h-3.5z" />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M3 5a1 1 0 011-1h5.989a1 1 0 01.825.436l2.05 3a1 1 0 010 1.128l-2.05 3A1 1 0 019.99 12H4a1 1 0 01-1-1V5zm1.25.75a.5.5 0 01.5-.5h4.745a.5.5 0 01.405.206l1.636 2.25a.5.5 0 010 .588L9.9 10.544a.5.5 0 01-.405.206H4.75a.5.5 0 01-.5-.5v-4.5z"
-    />
+    <path d="M10.33 10.28c-.12.04-.29.07-.42.07-.23 0-.43-.08-.53-.3l-.63-1.34 2.32-2.81H9.3L7.76 7.93h-.09L8.22 4H6.59l-1.05 7.5h1.63l.27-1.94h.1l.43 1.12c.27.71.74.92 1.33.92.23 0 .6-.04.86-.11l.17-1.21z" />
   </svg>
 );
 

diff --git a/src/components/icon/assets/tokenTag.tsx b/src/components/icon/assets/tokenTag.tsx
@@ -0,0 +1,40 @@
+/*
+ * 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';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+
+const EuiIconTokenTag = ({
+  title,
+  titleId,
+  ...props
+}: React.SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M5.75 7.375a.25.25 0 00-.25.25v.75c0 .138.112.25.25.25h3.5a.25.25 0 00.25-.25v-.75a.25.25 0 00-.25-.25h-3.5z" />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3 5a1 1 0 011-1h5.989a1 1 0 01.825.436l2.05 3a1 1 0 010 1.128l-2.05 3A1 1 0 019.99 12H4a1 1 0 01-1-1V5zm1.25.75a.5.5 0 01.5-.5h4.745a.5.5 0 01.405.206l1.636 2.25a.5.5 0 010 .588L9.9 10.544a.5.5 0 01-.405.206H4.75a.5.5 0 01-.5-.5v-4.5z"
+    />
+  </svg>
+);
+
+export const icon = EuiIconTokenTag;
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
@@ -442,6 +442,7 @@ const typeToPathMap = {
   tokenRankFeature: 'tokenRankFeature',
   tokenRankFeatures: 'tokenRankFeatures',
   tokenKeyword: 'tokenKeyword',
+  tokenTag: 'tokenTag',
   tokenCompletionSuggester: 'tokenCompletionSuggester',
   tokenDenseVector: 'tokenDenseVector',
   tokenText: 'tokenText',

diff --git a/src/components/icon/svgs/tokens/tokenKeyword.svg b/src/components/icon/svgs/tokens/tokenKeyword.svg
diff --git a/src/components/icon/svgs/tokens/tokenTag.svg b/src/components/icon/svgs/tokens/tokenTag.svg
diff --git a/src/components/token/__snapshots__/token.test.tsx.snap b/src/components/token/__snapshots__/token.test.tsx.snap
@@ -415,7 +415,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenKey is rendered 1`] = `
 
 exports[`EuiToken props iconType as EuiTokenMapType tokenKeyword is rendered 1`] = `
 <span
-  class="euiToken euiToken--euiColorVis9 euiToken--square euiToken--light euiToken--small"
+  class="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small"
 >
   <span
     data-euiicon-type="tokenKeyword"
@@ -633,6 +633,16 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenSymbol is rendered 1`]
 </span>
 `;
 
+exports[`EuiToken props iconType as EuiTokenMapType tokenTag is rendered 1`] = `
+<span
+  class="euiToken euiToken--euiColorVis9 euiToken--square euiToken--light euiToken--small"
+>
+  <span
+    data-euiicon-type="tokenTag"
+  />
+</span>
+`;
+
 exports[`EuiToken props iconType as EuiTokenMapType tokenText is rendered 1`] = `
 <span
   class="euiToken euiToken--euiColorVis3 euiToken--square euiToken--light euiToken--small"

diff --git a/src/components/token/token_map.ts b/src/components/token/token_map.ts
@@ -53,6 +53,7 @@ export type EuiTokenMapType =
   | 'tokenRankFeature'
   | 'tokenRankFeatures'
   | 'tokenKeyword'
+  | 'tokenTag'
   | 'tokenCompletionSuggester'
   | 'tokenDenseVector'
   | 'tokenText'
@@ -244,10 +245,14 @@ export const TOKEN_MAP: {
     shape: 'square',
     color: 'euiColorVis3',
   },
-  tokenKeyword: {
+  tokenTag: {
     shape: 'square',
     color: 'euiColorVis9',
   },
+  tokenKeyword: {
+    shape: 'square',
+    color: 'euiColorVis1',
+  },
   tokenCompletionSuggester: {
     shape: 'square',
     color: 'euiColorVis1',