From 9ec0147f8e5a9efc06252ff3ed331c78ffd6e944 Mon Sep 17 00:00:00 2001 From: Andrea Del Rio Date: Mon, 14 Mar 2022 13:23:45 -0700 Subject: [PATCH] [EuiIcon] Add checklist glyph (#5705) --- CHANGELOG.md | 1 + src-docs/src/views/icon/editor.js | 1 + .../icon/__snapshots__/icon.test.tsx.snap | 19 ++++++++++ .../icon/assets/editor_checklist.tsx | 36 +++++++++++++++++++ src/components/icon/icon.tsx | 1 + src/components/icon/svgs/editor_checklist.svg | 3 ++ .../markdown_editor.test.tsx.snap | 24 ++++++------- .../icons/markdown_checkmark.tsx | 35 ------------------ .../markdown_editor_toolbar.tsx | 4 +-- 9 files changed, 74 insertions(+), 50 deletions(-) create mode 100644 src/components/icon/assets/editor_checklist.tsx create mode 100644 src/components/icon/svgs/editor_checklist.svg delete mode 100644 src/components/markdown_editor/icons/markdown_checkmark.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 2d75c6b1491..ff85b8023d4 100644 --- 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 index 2b81c971cc5..be4adfd129c 100644 --- 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 index a843dadc200..0a7bc91d411 100644 --- 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`] = ` `; +exports[`EuiIcon props type editorChecklist is rendered 1`] = ` + +`; + exports[`EuiIcon props type editorCodeBlock is rendered 1`] = ` @@ -1761,7 +1761,7 @@ exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = ` @@ -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" /> @@ -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" /> @@ -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" /> @@ -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" /> diff --git a/src/components/markdown_editor/icons/markdown_checkmark.tsx b/src/components/markdown_editor/icons/markdown_checkmark.tsx deleted file mode 100644 index 3ca438f43b6..00000000000 --- a/src/components/markdown_editor/icons/markdown_checkmark.tsx +++ /dev/null @@ -1,35 +0,0 @@ -/* - * 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. - */ - -import React from 'react'; - -interface SVGRProps { - title?: string; - titleId?: string; -} - -const MarkdownCheckmark = ({ - title, - titleId, - ...props -}: React.SVGProps & SVGRProps) => ( - - {title ? {title} : null} - - -); - -export default MarkdownCheckmark; diff --git a/src/components/markdown_editor/markdown_editor_toolbar.tsx b/src/components/markdown_editor/markdown_editor_toolbar.tsx index 28257cfb53b..f3842f2de0a 100644 --- 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 & CommonProps & { @@ -65,7 +63,7 @@ const listButtons = [ id: 'mdTl', label: 'Task list', name: 'tl', - iconType: MarkdownCheckmarkIcon, + iconType: 'editorChecklist', }, ];