[EuiIcon] Add beta glyph (#6250)

* Beta icon and content added for icon types usage * beta badge icon and content updates * Adding CL * Fixing `creating-icons.md` link * Fixing text typos Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co>
elastic · Sep 21, 2022 · bc232d2 · bc232d2
1 parent 9dd7bfc
commit bc232d2
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 5 deletions.
diff --git 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."
         />
         &emsp;
-        <EuiBetaBadge label="B" color={item} />
+        <EuiBetaBadge label="Beta" color={item} iconType="beta" />
         &emsp;
-        <EuiBetaBadge size="s" label="B" color={item} />
+        <EuiBetaBadge size="s" label="Beta" color={item} iconType="beta" />
         &emsp;
         <EuiBetaBadge label="Lab" color={item} iconType="beaker" />
         &emsp;

diff --git a/src-docs/src/views/icon/icon_example.js b/src-docs/src/views/icon/icon_example.js
@@ -78,12 +78,14 @@ export const IconExample = {
           <p>
             Glyphs are small, monochromatic icons that typically should always
             use the default size of{' '}
-            <EuiCode language="js">size=&quot;m&quot;</EuiCode>.
+            <EuiCode language="js">size=&quot;m&quot;</EuiCode>. They are named
+            according to their appearance or the action they represent. For
+            example, <EuiCode>star</EuiCode>, <EuiCode>play</EuiCode>, etc.
           </p>
           <p>
             If you would like to contribute to our growing list of glyphs, you
             can follow{' '}
-            <EuiLink to="https://github.com/elastic/eui/blob/main/wiki/creating-icons.md">
+            <EuiLink href="https://github.com/elastic/eui/blob/main/wiki/creating-icons.md">
               these guidelines
             </EuiLink>
             .
@@ -126,6 +128,9 @@ export const IconExample = {
       title: 'Apps',
       text: (
         <p>
+          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 <EuiCode>32x32</EuiCode> or above
           and can contain multiple colors.
         </p>

diff --git 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
@@ -13,9 +13,10 @@ export default () => (
     </EuiKeyPadMenuItem>
 
     <EuiKeyPadMenuItem
-      label="Single letter"
+      label="Icon"
       betaBadgeLabel="Beta"
       betaBadgeTooltipContent="This module is not GA. Please help us by reporting any bugs."
+      betaBadgeIconType="beta"
     >
       <EuiIcon type="editorBold" size="l" />
     </EuiKeyPadMenuItem>

diff --git 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`] = `
 </svg>
 `;
 
+exports[`EuiIcon props type beta is rendered 1`] = `
+<svg
+  aria-hidden="true"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
+  data-icon-type="beta"
+  data-is-loaded="true"
+  height="16"
+  role="img"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M8 6.394h1.03c.72 0 1.283.153 1.688.459a2.2 2.2 0 01.813 1.163c.138.47.165.952.083 1.447-.1.597-.33 1.135-.69 1.616a3.95 3.95 0 01-1.333 1.137 3.689 3.689 0 01-1.735.418c-.381 0-.747-.07-1.097-.212-.35-.144-.636-.417-.86-.818l-.082.041.33-2.018c-.055.337-.024.647.092.932.12.285.32.513.598.685.281.171.634.257 1.06.257a2.54 2.54 0 002.075-1.03c.226-.308.369-.645.427-1.008a1.929 1.929 0 00-.072-.973 1.524 1.524 0 00-.536-.752c-.25-.196-.57-.293-.957-.293H7.825L8 6.395zm1.359-4.591c.49 0 .913.079 1.266.237a2.258 2.258 0 011.303 1.528c.082.33.094.668.036 1.014-.069.433-.25.864-.54 1.293-.29.425-.684.78-1.185 1.065-.497.282-1.096.422-1.796.422h-.597l.175-1.05h.576a2.182 2.182 0 001.812-.89c.192-.265.312-.544.36-.84.08-.473-.036-.866-.344-1.178-.31-.313-.726-.469-1.251-.469-.35 0-.683.072-.999.216a2.256 2.256 0 00-.793.603 1.852 1.852 0 00-.412.89l-1.78 10.81H3.973l1.782-10.81a3.17 3.17 0 01.648-1.457c.34-.429.765-.767 1.277-1.014a3.827 3.827 0 011.678-.37z"
+  />
+</svg>
+`;
+
 exports[`EuiIcon props type bolt is rendered 1`] = `
 <svg
   aria-hidden="true"

diff --git a/src/components/icon/assets/beta.tsx 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<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="M8 6.394h1.03c.72 0 1.283.153 1.688.459a2.2 2.2 0 01.813 1.163c.138.47.165.952.083 1.447-.1.597-.33 1.135-.69 1.616a3.95 3.95 0 01-1.333 1.137 3.689 3.689 0 01-1.735.418c-.381 0-.747-.07-1.097-.212-.35-.144-.636-.417-.86-.818l-.082.041.33-2.018c-.055.337-.024.647.092.932.12.285.32.513.598.685.281.171.634.257 1.06.257a2.54 2.54 0 002.075-1.03c.226-.308.369-.645.427-1.008a1.929 1.929 0 00-.072-.973 1.524 1.524 0 00-.536-.752c-.25-.196-.57-.293-.957-.293H7.825L8 6.395zm1.359-4.591c.49 0 .913.079 1.266.237a2.258 2.258 0 011.303 1.528c.082.33.094.668.036 1.014-.069.433-.25.864-.54 1.293-.29.425-.684.78-1.185 1.065-.497.282-1.096.422-1.796.422h-.597l.175-1.05h.576a2.182 2.182 0 001.812-.89c.192-.265.312-.544.36-.84.08-.473-.036-.866-.344-1.178-.31-.313-.726-.469-1.251-.469-.35 0-.683.072-.999.216a2.256 2.256 0 00-.793.603 1.852 1.852 0 00-.412.89l-1.78 10.81H3.973l1.782-10.81a3.17 3.17 0 01.648-1.457c.34-.429.765-.767 1.277-1.014a3.827 3.827 0 011.678-.37z" />
+  </svg>
+);
+
+export const icon = EuiIconBeta;
diff --git a/src/components/icon/icon_map.ts b/src/components/icon/icon_map.ts
@@ -30,6 +30,7 @@ export 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
diff --git a/upcoming_changelogs/6250.md b/upcoming_changelogs/6250.md
@@ -0,0 +1 @@
+- Added `beta` glyph to `EuiIcon`