[Emotion] Convert EuiToken (#6067)

* Removing token `rectangle` * Small color fix * Putting rectangle shape back. Moving custom colors to style tag. * Better comments. Better custom example. Renaming a few variables. * Deleting `*.scss` files * Adding new example with a `glyph`. Adding required logic for `EuiIcon` size. * Replacing last custom example with `faceHappy` icon * Adding `customColor` to `className` * Putting `customColor` or `tokenColor` at the end of the class name * Better comment * Again. :P Better prop comment. * Trying to enhance comments * Centering `EuiIconTokenStruct`. Fix border-radius for xs size * Fix `xs` `rectangle` shape * Adding `CL` * Adding `shouldRenderCustomStyles` * Removed styling variables * Removed unused key * Remove need for lodash `defaults` * Updated `iconSize` with `logicalSizeCSS` * Adding `logicalCSS` for width * Addressing PR review * Passing the fill prop to `getTokenColor` * Adding `rectangle` shape back to type `TokenShape` * Converting examples to `.tsx` Co-authored-by: Constance Chen <constance.chen.3@gmail.com>
elastic · Jul 29, 2022 · fd38ef3 · fd38ef3
1 parent af5590e
commit fd38ef3
Show file tree

Hide file tree

Showing 23 changed files with 416 additions and 446 deletions.
diff --git a/src-docs/src/views/icon/custom_tokens.js → src-docs/src/views/icon/custom_tokens.tsx b/src-docs/src/views/icon/custom_tokens.js → src-docs/src/views/icon/custom_tokens.tsx
@@ -59,7 +59,7 @@ export default () => (
           iconType="tokenStruct"
           size="m"
           shape="circle"
-          color="#FF0000"
+          color="#b9f6c8"
         />
       </EuiSplitPanel.Inner>
       <EuiSplitPanel.Inner paddingSize="none" color="subdued">
@@ -70,20 +70,40 @@ export default () => (
           paddingSize="m"
         >
           {
-            '<EuiToken iconType="tokenStruct" size="m" shape="circle" color="#FF0000" />'
+            '<EuiToken iconType="tokenStruct" size="m" shape="circle" color="#b9f6c8" />'
           }
         </EuiCodeBlock>
       </EuiSplitPanel.Inner>
     </EuiSplitPanel.Outer>
     <EuiSpacer />
+    <EuiSplitPanel.Outer hasShadow={false} hasBorder={true} direction="row">
+      <EuiSplitPanel.Inner
+        className="eui-textCenter"
+        grow={false}
+        style={{ minWidth: 96 }}
+      >
+        <EuiToken iconType="faceHappy" />
+      </EuiSplitPanel.Inner>
+      <EuiSplitPanel.Inner paddingSize="none" color="subdued">
+        <EuiCodeBlock
+          language="html"
+          isCopyable
+          transparentBackground
+          paddingSize="m"
+        >
+          {'<EuiToken iconType="faceHappy"  />'}
+        </EuiCodeBlock>
+      </EuiSplitPanel.Inner>
+    </EuiSplitPanel.Outer>
+    <EuiSpacer />
     <EuiSplitPanel.Outer hasShadow={false} hasBorder={true} direction="row">
       <EuiSplitPanel.Inner
         className="eui-textCenter"
         grow={false}
         style={{ minWidth: 96 }}
       >
         <EuiToken
-          iconType="faceNeutral"
+          iconType="faceHappy"
           size="l"
           color="euiColorVis7"
           shape="rectangle"
@@ -98,7 +118,7 @@ export default () => (
           paddingSize="m"
         >
           {
-            '<EuiToken iconType="faceNeutral" size="l" color="euiColorVis7" shape="rectangle" fill="dark" />'
+            '<EuiToken iconType="faceHappy" size="l" color="euiColorVis7" shape="rectangle" fill="dark" />'
           }
         </EuiCodeBlock>
       </EuiSplitPanel.Inner>

diff --git a/src-docs/src/views/icon/icon_example.js b/src-docs/src/views/icon/icon_example.js
@@ -162,11 +162,11 @@ export const IconExample = {
       demo: <Tokens />,
     },
     {
+      title: 'Custom tokens',
       wrapText: false,
       text: (
         <>
           <EuiText>
-            <h3>Custom tokens</h3>
             <p>
               By default, an <EuiCode>iconType</EuiCode> with the token prefix
               (i.e. those listed above) will have predefined styles. However,

diff --git a/src-docs/src/views/icon/tokens.js → src-docs/src/views/icon/tokens.tsx b/src-docs/src/views/icon/tokens.js → src-docs/src/views/icon/tokens.tsx
@@ -10,7 +10,9 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
-const tokens = [
+import type { EuiTokenMapType } from '../../../../src/components/token/token_map';
+
+const tokens: EuiTokenMapType[] = [
   'tokenAlias',
   'tokenAnnotation',
   'tokenArray',

diff --git a/src-docs/src/views/theme/_json/eui_theme_dark.json b/src-docs/src/views/theme/_json/eui_theme_dark.json
@@ -249,54 +249,6 @@
     "warning": "#f3d371",
     "danger": "#f86b63"
   },
-  "euiTokenGrayColor": "#535966",
-  "euiTokenTypes": {
-    "euiColorVis0": {
-      "graphic": "#54b399",
-      "behindText": "#6dccb1"
-    },
-    "euiColorVis1": {
-      "graphic": "#6092c0",
-      "behindText": "#79aad9"
-    },
-    "euiColorVis2": {
-      "graphic": "#d36086",
-      "behindText": "#ee789d"
-    },
-    "euiColorVis3": {
-      "graphic": "#9170b8",
-      "behindText": "#a987d1"
-    },
-    "euiColorVis4": {
-      "graphic": "#ca8eae",
-      "behindText": "#e4a6c7"
-    },
-    "euiColorVis5": {
-      "graphic": "#d6bf57",
-      "behindText": "#f1d86f"
-    },
-    "euiColorVis6": {
-      "graphic": "#b9a888",
-      "behindText": "#d2c0a0"
-    },
-    "euiColorVis7": {
-      "graphic": "#da8b45",
-      "behindText": "#f5a35c"
-    },
-    "euiColorVis8": {
-      "graphic": "#aa6556",
-      "behindText": "#c47c6c"
-    },
-    "euiColorVis9": {
-      "graphic": "#e7664c",
-      "behindText": "#ff7e62"
-    },
-    "gray": {
-      "graphic": "#535966",
-      "behindText": "#535966"
-    }
-  },
-  "euiTokenTypeKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9', 'gray'",
   "euiPopoverArrowSize": "12px",
   "euiContrastRatioText": 4.5,
   "euiContrastRatioGraphic": 3,

diff --git a/src-docs/src/views/theme/_json/eui_theme_light.json b/src-docs/src/views/theme/_json/eui_theme_light.json
@@ -249,54 +249,6 @@
     "warning": "#fec514",
     "danger": "#bd271e"
   },
-  "euiTokenGrayColor": "#69707d",
-  "euiTokenTypes": {
-    "euiColorVis0": {
-      "graphic": "#54b399",
-      "behindText": "#6dccb1"
-    },
-    "euiColorVis1": {
-      "graphic": "#6092c0",
-      "behindText": "#79aad9"
-    },
-    "euiColorVis2": {
-      "graphic": "#d36086",
-      "behindText": "#ee789d"
-    },
-    "euiColorVis3": {
-      "graphic": "#9170b8",
-      "behindText": "#a987d1"
-    },
-    "euiColorVis4": {
-      "graphic": "#ca8eae",
-      "behindText": "#e4a6c7"
-    },
-    "euiColorVis5": {
-      "graphic": "#d6bf57",
-      "behindText": "#f1d86f"
-    },
-    "euiColorVis6": {
-      "graphic": "#b9a888",
-      "behindText": "#d2c0a0"
-    },
-    "euiColorVis7": {
-      "graphic": "#da8b45",
-      "behindText": "#f5a35c"
-    },
-    "euiColorVis8": {
-      "graphic": "#aa6556",
-      "behindText": "#c47c6c"
-    },
-    "euiColorVis9": {
-      "graphic": "#e7664c",
-      "behindText": "#ff7e62"
-    },
-    "gray": {
-      "graphic": "#69707d",
-      "behindText": "#69707d"
-    }
-  },
-  "euiTokenTypeKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9', 'gray'",
   "euiPopoverArrowSize": "12px",
   "euiContrastRatioText": 4.5,
   "euiContrastRatioGraphic": 3,

diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
@@ -111,7 +111,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
                 class="euiFlexItem euiFlexItem--flexGrowZero"
               >
                 <span
-                  class="euiToken euiToken--euiColorVis0 euiToken--square euiToken--light euiToken--small"
+                  class="euiToken emotion-euiToken-square-light-s-euiColorVis0"
                 >
                   <span
                     data-euiicon-type="tokenNumber"

diff --git a/src/components/icon/__snapshots__/icon.test.tsx.snap b/src/components/icon/__snapshots__/icon.test.tsx.snap
@@ -10357,7 +10357,7 @@ exports[`EuiIcon props type tokenStruct is rendered 1`] = `
   xmlns="http://www.w3.org/2000/svg"
 >
   <path
-    d="M4.336 4.667h2.667v2.666H4.336V4.667zm0 4h2.667v2.666H4.336V8.667zm4-4h2.667v2.666H8.336V4.667zm0 4h2.667v2.666H8.336V8.667zM3.003 3.333v9.334h9.333V3.333H3.003zm0-1.333h9.333c.737 0 1.334.597 1.334 1.333v9.334c0 .736-.597 1.333-1.334 1.333H3.003a1.333 1.333 0 01-1.333-1.333V3.333C1.67 2.597 2.267 2 3.003 2z"
+    d="M4.667 4.667h2.666v2.666H4.667V4.667zm0 4h2.666v2.666H4.667V8.667zm4-4h2.666v2.666H8.667V4.667zm0 4h2.666v2.666H8.667V8.667zM3.333 3.333v9.334h9.334V3.333H3.333zm0-1.333h9.334C13.403 2 14 2.597 14 3.333v9.334c0 .736-.597 1.333-1.333 1.333H3.333A1.333 1.333 0 012 12.667V3.333C2 2.597 2.597 2 3.333 2z"
     fill-rule="evenodd"
   />
 </svg>

diff --git a/src/components/icon/assets/tokenStruct.tsx b/src/components/icon/assets/tokenStruct.tsx
@@ -30,7 +30,7 @@ const EuiIconTokenStruct = ({
     {title ? <title id={titleId}>{title}</title> : null}
     <path
       fillRule="evenodd"
-      d="M4.336 4.667h2.667v2.666H4.336V4.667zm0 4h2.667v2.666H4.336V8.667zm4-4h2.667v2.666H8.336V4.667zm0 4h2.667v2.666H8.336V8.667zM3.003 3.333v9.334h9.333V3.333H3.003zm0-1.333h9.333c.737 0 1.334.597 1.334 1.333v9.334c0 .736-.597 1.333-1.334 1.333H3.003a1.333 1.333 0 01-1.333-1.333V3.333C1.67 2.597 2.267 2 3.003 2z"
+      d="M4.667 4.667h2.666v2.666H4.667V4.667zm0 4h2.666v2.666H4.667V8.667zm4-4h2.666v2.666H8.667V4.667zm0 4h2.666v2.666H8.667V8.667zM3.333 3.333v9.334h9.334V3.333H3.333zm0-1.333h9.334C13.403 2 14 2.597 14 3.333v9.334c0 .736-.597 1.333-1.333 1.333H3.333A1.333 1.333 0 012 12.667V3.333C2 2.597 2.597 2 3.333 2z"
     />
   </svg>
 );

diff --git a/src/components/icon/svgs/tokens/tokenStruct.svg b/src/components/icon/svgs/tokens/tokenStruct.svg
diff --git a/src/components/index.scss b/src/components/index.scss
@@ -39,6 +39,5 @@
 @import 'suggest/index';
 @import 'table/index';
 @import 'tabs/index';
-@import 'token/index';
 @import 'tool_tip/index';
 @import 'tour/index';