[EuiIcon] Add checklist glyph (#5705)

elastic · Mar 14, 2022 · 9ec0147 · 9ec0147
1 parent d6b5111
commit 9ec0147
Show file tree

Hide file tree

Showing 9 changed files with 74 additions and 50 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## [`main`](https://github.com/elastic/eui/tree/main)
 
 - Updated `testenv` mock for `EuiIcon` to render `aria-label` as text ([#5709](https://github.com/elastic/eui/pull/5709))
+- Added `editorChecklist` glyph to `EuiIcon` ([#5705](https://github.com/elastic/eui/pull/5705))
 
 **Breaking changes**
 

diff --git a/src-docs/src/views/icon/editor.js b/src-docs/src/views/icon/editor.js
@@ -13,6 +13,7 @@ const iconTypes = [
   'editorAlignLeft',
   'editorAlignRight',
   'editorBold',
+  'editorChecklist',
   'editorCodeBlock',
   'editorComment',
   'editorDistributeHorizontal',

diff --git a/src/components/icon/__snapshots__/icon.test.tsx.snap b/src/components/icon/__snapshots__/icon.test.tsx.snap
@@ -2109,6 +2109,25 @@ exports[`EuiIcon props type editorBold is rendered 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon props type editorChecklist is rendered 1`] = `
+<svg
+  aria-hidden="true"
+  class="euiIcon euiIcon--medium euiIcon-isLoaded"
+  data-icon-type="editorChecklist"
+  fill="none"
+  focusable="false"
+  height="16"
+  role="img"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M4.597 3a.411.411 0 00-.299.132l-1.85 1.993-.756-.7a.412.412 0 00-.28-.124.42.42 0 00-.292.098.333.333 0 00-.12.257.335.335 0 00.127.254l1.064.982A.418.418 0 002.488 6a.411.411 0 00.288-.126L4.904 3.58a.328.328 0 00.095-.25.337.337 0 00-.126-.238A.421.421 0 004.597 3zm-.299 4.132A.411.411 0 014.597 7a.421.421 0 01.276.093c.076.062.12.147.126.238a.328.328 0 01-.095.25L2.776 9.874a.411.411 0 01-.288.126.418.418 0 01-.297-.108L1.127 8.91A.335.335 0 011 8.656a.333.333 0 01.12-.257.42.42 0 01.292-.098c.108.005.21.05.28.123l.757.701 1.849-1.993zM4.597 11a.411.411 0 00-.299.132l-1.85 1.993-.756-.7a.412.412 0 00-.28-.124.421.421 0 00-.292.098.333.333 0 00-.12.257.335.335 0 00.127.254l1.064.982a.418.418 0 00.297.108.411.411 0 00.288-.126l2.128-2.293a.328.328 0 00.095-.25.337.337 0 00-.126-.238.421.421 0 00-.276-.093zM6.5 4a.5.5 0 000 1h7a.5.5 0 000-1h-7zM6 8.5a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm.5 3.5a.5.5 0 000 1h7a.5.5 0 000-1h-7z"
+  />
+</svg>
+`;
+
 exports[`EuiIcon props type editorCodeBlock is rendered 1`] = `
 <svg
   aria-hidden="true"

diff --git a/src/components/icon/assets/editor_checklist.tsx b/src/components/icon/assets/editor_checklist.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';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+
+const EuiIconEditorChecklist = ({
+  title,
+  titleId,
+  ...props
+}: React.SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    fill="none"
+    viewBox="0 0 16 16"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M4.597 3a.411.411 0 00-.299.132l-1.85 1.993-.756-.7a.412.412 0 00-.28-.124.42.42 0 00-.292.098.333.333 0 00-.12.257.335.335 0 00.127.254l1.064.982A.418.418 0 002.488 6a.411.411 0 00.288-.126L4.904 3.58a.328.328 0 00.095-.25.337.337 0 00-.126-.238A.421.421 0 004.597 3zm-.299 4.132A.411.411 0 014.597 7a.421.421 0 01.276.093c.076.062.12.147.126.238a.328.328 0 01-.095.25L2.776 9.874a.411.411 0 01-.288.126.418.418 0 01-.297-.108L1.127 8.91A.335.335 0 011 8.656a.333.333 0 01.12-.257.42.42 0 01.292-.098c.108.005.21.05.28.123l.757.701 1.849-1.993zM4.597 11a.411.411 0 00-.299.132l-1.85 1.993-.756-.7a.412.412 0 00-.28-.124.421.421 0 00-.292.098.333.333 0 00-.12.257.335.335 0 00.127.254l1.064.982a.418.418 0 00.297.108.411.411 0 00.288-.126l2.128-2.293a.328.328 0 00.095-.25.337.337 0 00-.126-.238.421.421 0 00-.276-.093zM6.5 4a.5.5 0 000 1h7a.5.5 0 000-1h-7zM6 8.5a.5.5 0 01.5-.5h7a.5.5 0 010 1h-7a.5.5 0 01-.5-.5zm.5 3.5a.5.5 0 000 1h7a.5.5 0 000-1h-7z" />
+  </svg>
+);
+
+export const icon = EuiIconEditorChecklist;
diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
@@ -104,6 +104,7 @@ const typeToPathMap = {
   editorAlignLeft: 'editor_align_left',
   editorAlignRight: 'editor_align_right',
   editorBold: 'editor_bold',
+  editorChecklist: 'editor_checklist',
   editorCodeBlock: 'editor_code_block',
   editorComment: 'editor_comment',
   editorDistributeHorizontal: 'editorDistributeHorizontal',

diff --git a/src/components/icon/svgs/editor_checklist.svg b/src/components/icon/svgs/editor_checklist.svg
diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -410,7 +410,7 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
               <EuiButtonIcon
                 aria-label="Task list"
                 color="text"
-                iconType={[Function]}
+                iconType="editorChecklist"
                 isDisabled={false}
                 onBlur={[Function]}
                 onClick={[Function]}
@@ -429,13 +429,13 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
                     className="euiButtonIcon__icon"
                     color="inherit"
                     size="m"
-                    type={[Function]}
+                    type="editorChecklist"
                   >
                     <span
                       aria-hidden="true"
                       className="euiButtonIcon__icon"
                       color="inherit"
-                      data-euiicon-type="MarkdownCheckmark"
+                      data-euiicon-type="editorChecklist"
                       size="m"
                     />
                   </EuiIcon>
@@ -1236,7 +1236,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
             aria-hidden="true"
             class="euiButtonIcon__icon"
             color="inherit"
-            data-euiicon-type="MarkdownCheckmark"
+            data-euiicon-type="editorChecklist"
           />
         </button>
       </span>
@@ -1761,7 +1761,7 @@ exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = `
               <EuiButtonIcon
                 aria-label="Task list"
                 color="text"
-                iconType={[Function]}
+                iconType="editorChecklist"
                 isDisabled={false}
                 onBlur={[Function]}
                 onClick={[Function]}
@@ -1780,13 +1780,13 @@ exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = `
                     className="euiButtonIcon__icon"
                     color="inherit"
                     size="m"
-                    type={[Function]}
+                    type="editorChecklist"
                   >
                     <span
                       aria-hidden="true"
                       className="euiButtonIcon__icon"
                       color="inherit"
-                      data-euiicon-type="MarkdownCheckmark"
+                      data-euiicon-type="editorChecklist"
                       size="m"
                     />
                   </EuiIcon>
@@ -3528,7 +3528,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
             aria-hidden="true"
             class="euiButtonIcon__icon"
             color="inherit"
-            data-euiicon-type="MarkdownCheckmark"
+            data-euiicon-type="editorChecklist"
           />
         </button>
       </span>
@@ -3762,7 +3762,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
             aria-hidden="true"
             class="euiButtonIcon__icon"
             color="inherit"
-            data-euiicon-type="MarkdownCheckmark"
+            data-euiicon-type="editorChecklist"
           />
         </button>
       </span>
@@ -3996,7 +3996,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
             aria-hidden="true"
             class="euiButtonIcon__icon"
             color="inherit"
-            data-euiicon-type="MarkdownCheckmark"
+            data-euiicon-type="editorChecklist"
           />
         </button>
       </span>
@@ -4230,7 +4230,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
             aria-hidden="true"
             class="euiButtonIcon__icon"
             color="inherit"
-            data-euiicon-type="MarkdownCheckmark"
+            data-euiicon-type="editorChecklist"
           />
         </button>
       </span>
@@ -4469,7 +4469,7 @@ exports[`EuiMarkdownEditor props readOnly is set to true 1`] = `
             aria-hidden="true"
             class="euiButtonIcon__icon"
             color="inherit"
-            data-euiicon-type="MarkdownCheckmark"
+            data-euiicon-type="editorChecklist"
           />
         </button>
       </span>

diff --git a/src/components/markdown_editor/icons/markdown_checkmark.tsx b/src/components/markdown_editor/icons/markdown_checkmark.tsx
diff --git a/src/components/markdown_editor/markdown_editor_toolbar.tsx b/src/components/markdown_editor/markdown_editor_toolbar.tsx
@@ -21,8 +21,6 @@ import { MARKDOWN_MODE, MODE_VIEWING } from './markdown_modes';
 import { EuiMarkdownEditorUiPlugin } from './markdown_types';
 import { EuiMarkdownContext } from './markdown_context';
 import MarkdownActions from './markdown_actions';
-// @ts-ignore a react svg
-import MarkdownCheckmarkIcon from './icons/markdown_checkmark';
 
 export type EuiMarkdownEditorToolbarProps = HTMLAttributes<HTMLDivElement> &
   CommonProps & {
@@ -65,7 +63,7 @@ const listButtons = [
     id: 'mdTl',
     label: 'Task list',
     name: 'tl',
-    iconType: MarkdownCheckmarkIcon,
+    iconType: 'editorChecklist',
   },
 ];