Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiIcon] Add beta glyph #6250

Merged
merged 6 commits into from
Sep 21, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src-docs/src/views/badge/beta_badge.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ export default () => (
tooltipContent="This module is not GA. Please help us by reporting any bugs."
/>
 
<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;
Expand Down
9 changes: 7 additions & 2 deletions src-docs/src/views/icon/icon_example.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
.
Expand Down Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions src-docs/src/views/icon/icons.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export const iconTypes = [
'beaker',
'bell',
'bellSlash',
'beta',
'bolt',
'boxesHorizontal',
'boxesVertical',
Expand Down
3 changes: 2 additions & 1 deletion src-docs/src/views/key_pad_menu/key_pad_beta.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
18 changes: 18 additions & 0 deletions src/components/icon/__snapshots__/icon.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
35 changes: 35 additions & 0 deletions src/components/icon/assets/beta.tsx
Original file line number Diff line number Diff line change
@@ -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;
1 change: 1 addition & 0 deletions src/components/icon/icon_map.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export const typeToPathMap = {
beaker: 'beaker',
bell: 'bell',
bellSlash: 'bellSlash',
beta: 'beta',
bolt: 'bolt',
boxesHorizontal: 'boxes_horizontal',
boxesVertical: 'boxes_vertical',
Expand Down
3 changes: 3 additions & 0 deletions src/components/icon/svgs/beta.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions upcoming_changelogs/6250.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Added `beta` glyph to `EuiIcon`