From bc63dd8a369051213c2b1e7397c16e013219b56c Mon Sep 17 00:00:00 2001 From: Boris Kirov Date: Tue, 20 Sep 2022 15:49:39 +0200 Subject: [PATCH 1/5] Beta icon and content added for icon types usage --- src-docs/src/views/badge/beta_badge.js | 4 +-- src-docs/src/views/icon/icon_example.js | 7 +++- src-docs/src/views/icon/icons.js | 1 + .../src/views/key_pad_menu/key_pad_beta.js | 3 +- src/components/icon/assets/beta.tsx | 35 +++++++++++++++++++ src/components/icon/icon.tsx | 1 + src/components/icon/svgs/beta.svg | 3 ++ 7 files changed, 50 insertions(+), 4 deletions(-) create mode 100644 src/components/icon/assets/beta.tsx create mode 100644 src/components/icon/svgs/beta.svg diff --git a/src-docs/src/views/badge/beta_badge.js b/src-docs/src/views/badge/beta_badge.js index 6d4de70c49d..9db3c717b9b 100644 --- a/src-docs/src/views/badge/beta_badge.js +++ b/src-docs/src/views/badge/beta_badge.js @@ -21,9 +21,9 @@ export default () => ( tooltipContent="This module is not GA. Please help us by reporting any bugs." />   - +   - +     diff --git a/src-docs/src/views/icon/icon_example.js b/src-docs/src/views/icon/icon_example.js index c8e66dd0ba1..c1877943f6d 100644 --- a/src-docs/src/views/icon/icon_example.js +++ b/src-docs/src/views/icon/icon_example.js @@ -78,7 +78,9 @@ export const IconExample = {

Glyphs are small, monochromatic icons that typically should always use the default size of{' '} - size="m". + size="m". They are names + according to the icon's appereance or the action they represent. For + example, star, play etc.

If you would like to contribute to our growing list of glyphs, you @@ -126,6 +128,9 @@ export const IconExample = { title: 'Apps', text: (

+ App logos are logos for Elastic Apps, and can contain multiple colors. + Normally the Elastic Design team creates those icons. They are not + meant to be used outside of Elastic, because they represent our apps. App logos are usually displayed at 32x32 or above and can contain multiple colors.

diff --git a/src-docs/src/views/icon/icons.js b/src-docs/src/views/icon/icons.js index 940daaa7861..eb6a8f267f3 100644 --- a/src-docs/src/views/icon/icons.js +++ b/src-docs/src/views/icon/icons.js @@ -28,6 +28,7 @@ export const iconTypes = [ 'beaker', 'bell', 'bellSlash', + 'beta', 'bolt', 'boxesHorizontal', 'boxesVertical', diff --git a/src-docs/src/views/key_pad_menu/key_pad_beta.js b/src-docs/src/views/key_pad_menu/key_pad_beta.js index 05fc9789457..12b6001e63f 100644 --- a/src-docs/src/views/key_pad_menu/key_pad_beta.js +++ b/src-docs/src/views/key_pad_menu/key_pad_beta.js @@ -13,9 +13,10 @@ export default () => ( diff --git a/src/components/icon/assets/beta.tsx b/src/components/icon/assets/beta.tsx new file mode 100644 index 00000000000..32a71051c54 --- /dev/null +++ b/src/components/icon/assets/beta.tsx @@ -0,0 +1,35 @@ +/* + * 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 EuiIconBeta = ({ + title, + titleId, + ...props +}: React.SVGProps & SVGRProps) => ( + + {title ? {title} : null} + + +); + +export const icon = EuiIconBeta; diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx index ac4d8e1a5ce..2f56cb4174c 100644 --- a/src/components/icon/icon.tsx +++ b/src/components/icon/icon.tsx @@ -53,6 +53,7 @@ const typeToPathMap = { beaker: 'beaker', bell: 'bell', bellSlash: 'bellSlash', + beta: 'beta', bolt: 'bolt', boxesHorizontal: 'boxes_horizontal', boxesVertical: 'boxes_vertical', diff --git a/src/components/icon/svgs/beta.svg b/src/components/icon/svgs/beta.svg new file mode 100644 index 00000000000..f916703105e --- /dev/null +++ b/src/components/icon/svgs/beta.svg @@ -0,0 +1,3 @@ + + + From ccbadab67f65792b4978faab08797d4dc1f06465 Mon Sep 17 00:00:00 2001 From: Boris Kirov Date: Tue, 20 Sep 2022 15:54:33 +0200 Subject: [PATCH 2/5] beta badge icon and content updates --- src-docs/src/views/icon/icon_example.js | 4 ++-- .../icon/__snapshots__/icon.test.tsx.snap | 18 ++++++++++++++++++ 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/icon/icon_example.js b/src-docs/src/views/icon/icon_example.js index c1877943f6d..0c1bdd91814 100644 --- a/src-docs/src/views/icon/icon_example.js +++ b/src-docs/src/views/icon/icon_example.js @@ -78,8 +78,8 @@ export const IconExample = {

Glyphs are small, monochromatic icons that typically should always use the default size of{' '} - size="m". They are names - according to the icon's appereance or the action they represent. For + size="m". They are named + according to the their appereance or the action they represent. For example, star, play etc.

diff --git a/src/components/icon/__snapshots__/icon.test.tsx.snap b/src/components/icon/__snapshots__/icon.test.tsx.snap index 696386a4788..fa8aa7107fe 100644 --- a/src/components/icon/__snapshots__/icon.test.tsx.snap +++ b/src/components/icon/__snapshots__/icon.test.tsx.snap @@ -965,6 +965,24 @@ exports[`EuiIcon props type bellSlash is rendered 1`] = ` `; +exports[`EuiIcon props type beta is rendered 1`] = ` + +`; + exports[`EuiIcon props type bolt is rendered 1`] = `

If you would like to contribute to our growing list of glyphs, you can follow{' '} - + these guidelines . From 654a8b393d7263b2aafeeacc6c87f17bba9cbdbb Mon Sep 17 00:00:00 2001 From: Elizabet Oliveira Date: Tue, 20 Sep 2022 16:52:06 +0100 Subject: [PATCH 5/5] Fixing text typos --- src-docs/src/views/icon/icon_example.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/icon/icon_example.js b/src-docs/src/views/icon/icon_example.js index 73ddce233a7..f547bf4a374 100644 --- a/src-docs/src/views/icon/icon_example.js +++ b/src-docs/src/views/icon/icon_example.js @@ -79,8 +79,8 @@ export const IconExample = { Glyphs are small, monochromatic icons that typically should always use the default size of{' '} size="m". They are named - according to the their appereance or the action they represent. For - example, star, play etc. + according to their appearance or the action they represent. For + example, star, play, etc.

If you would like to contribute to our growing list of glyphs, you