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.

Sign up for GitHub

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

Docs for EuiIcon new abilities #1889

Merged
merged 4 commits into from
May 1, 2019
Merged

Docs for EuiIcon new abilities #1889

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
806a67b
EuiIcon docs
snide Apr 26, 2019
6ce323c
move docs to bottom, clean up examples
snide Apr 30, 2019
4fcdfe6
more snippets and docs
snide Apr 30, 2019
29c669b
feedback
snide May 1, 2019
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
3 changes: 2 additions & 1 deletion src-docs/src/components/guide_components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,8 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
.guideDemo__icon {
text-align: center;

svg {
svg,
img {
margin-bottom: $euiSizeS;
}
}
Expand Down
14 changes: 14 additions & 0 deletions src-docs/src/images/custom.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 20 additions & 9 deletions src-docs/src/views/icon/apps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
EuiIcon,
EuiPanel,
EuiText,
EuiCopy,
} from '../../../../src/components';

const iconTypes = [
Expand Down Expand Up @@ -62,15 +63,25 @@ export default () => (
key={iconType}
style={{ width: '200px' }}
>
<EuiPanel>
<EuiIcon
type={iconType}
size="xl"
/>
<EuiText size="s">
<p>{iconType}</p>
</EuiText>
</EuiPanel>
<EuiCopy
textToCopy={iconType}
afterMessage={`${iconType} copied`}
>
{(copy) => (
<EuiPanel
onClick={copy}
className="eui-textCenter"
>
<EuiIcon
type={iconType}
size="xl"
/>
<EuiText size="s">
<p>{iconType}</p>
</EuiText>
</EuiPanel>
)}
</EuiCopy>
</EuiFlexItem>
))
}
Expand Down
105 changes: 89 additions & 16 deletions src-docs/src/views/icon/icon_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import {
EuiIcon,
EuiToken,
EuiLink,
EuiText,
EuiSpacer,
} from '../../../../src/components';

const iconHtmlWarning = () => (
Expand All @@ -25,33 +27,93 @@ const iconsHtml = renderToHtml(iconHtmlWarning);

import Icons from './icons';
const iconsSource = require('!!raw-loader!./icons');
const iconsSnippet = `<EuiIcon type="alert" />`;

import Tokens from './tokens';
const tokensSource = require('!!raw-loader!./tokens');
const tokensSnippet = `<EuiToken type="tokenAnnotation" />

<EuiToken
iconType="visMapCoordinate"
displayOptions={{
color: 'tokenTint05',
shape: 'circle',
}}
/>

<EuiToken
iconType="tokenElement"
size="l"
displayOptions={{
color: 'tokenTint07',
shape: 'rectangle',
hideBorder: true
}}
/>`;


import Apps from './apps';
const appsSource = require('!!raw-loader!./apps');
const appsSnippet = `<EuiIcon type="addDataApp" size="xl" />`;

import Ml from './ml';
const mlSource = require('!!raw-loader!./ml');
const mlSnippet = `<EuiIcon type="dataVisualizer" size="xl" />`;

import Logos from './logos';
const logosSource = require('!!raw-loader!./logos');
const logosSnippet = `<EuiIcon type="logoElasticsearch" size="xl" />`;

import LogosThird from './logos_third';
const logosThirdSource = require('!!raw-loader!./logos_third');
const logosThirdSnippet = `<EuiIcon type="logoApache" size="xl" />`;

import IconSizes from './icon_sizes';
const iconSizesSource = require('!!raw-loader!./icon_sizes');
const iconSizesSnippet = `<EuiIcon type="logoElasticStack" size="xl" />`;

import IconColors from './icon_colors';
const iconColorsSource = require('!!raw-loader!./icon_colors');
const iconColorsSnippet = `// Colors can be used on glyphs

<EuiIcon type="brush" color="primary" />

<EuiIcon type="brush" color="#F98510" />`;

import Accessibility from './accessibility';
const accessibilitySource = require('!!raw-loader!./accessibility');

import IconTypes from './icon_types';
const iconTypesSource = require('!!raw-loader!./icon_types');
const iconTypesSnippet = `<EuiIcon type="logoElastic" size="xl" />

<EuiIcon type={reactSVGElement} size="xl" />

<EuiIcon type="https://upload.wikimedia.org/wikipedia/commons/9/9f/Vimlogo.svg" size="xl" />

<EuiButton iconType={reactSVGElement}>Works in other components too</EuiButton>
`;

export const IconExample = {
title: 'Icons',
intro: (
<div>
<EuiText>
<p>
<EuiCode>EuiIcon</EuiCode> is a handy component for using our
custom icons and logos. The <EuiCode>type</EuiCode> prop accepts either
an enumerated name from one of the sets below, or can alternatively accept a
location to a custom SVG asset, or lastly a React Element.
</p>
<p>
When using custom SVGs please <strong>remove all fill attributes</strong> on the SVG and
utilize the CSS helpers if you have complex logos that need to work with theming.
</p>
</EuiText>
<EuiSpacer />
</div>

),
sections: [{
source: [{
type: GuideSectionTypes.JS,
Expand All @@ -60,29 +122,18 @@ export const IconExample = {
type: GuideSectionTypes.HTML,
code: iconsHtml,
}],
title: 'Glyphs',
text: (
<div>
<p>
<EuiCode>EuiIcon</EuiCode> can build out an icon from our SVG
icon library. Icons are resized and recolored through a
CSS <EuiCode>Fill</EuiCode> declaration.
</p>
<p>
New icons should be placed in
the <EuiCode>/icons/assets/</EuiCode> folder on
a <EuiCode>16x16</EuiCode> empty canvas.
Icons in the general set should be monochromatic and the code
itself <strong>should not contain any fill attributes</strong>. Use the SVGO plugin
for Sketch when exporting to compress / clean your SVG of junk.
</p>
<p>
Note: <EuiCode>guideDemo__icon</EuiCode> styling is applied on the
below grid for documentation presentation only. Do not copy
this class into production.
Glyphs are small, monochromatic icons that typically should always use the default size
of <EuiCode>size=&quot;m&quot;</EuiCode>. They tend to be pixel perfect and don&apos;t
scale very well into larger sizes.
</p>
</div>
),
props: { EuiIcon },
snippet: iconsSnippet,
demo: <Icons />,
}, {
title: 'Apps',
Expand All @@ -99,6 +150,7 @@ export const IconExample = {
and can contain multiple colors.
</p>
),
snippet: appsSnippet,
demo: <Apps />,
}, {
title: 'Tokens',
Expand Down Expand Up @@ -130,6 +182,7 @@ export const IconExample = {
</div>
),
props: { EuiToken },
snippet: tokensSnippet,
demo: <Tokens />,
}, {
title: 'Machine learning icons',
Expand All @@ -146,6 +199,7 @@ export const IconExample = {
Again, these are made for <EuiCode>32x32</EuiCode>.
</p>
),
snippet: mlSnippet,
demo: <Ml />,
}, {
title: 'Elastic logos',
Expand All @@ -162,6 +216,7 @@ export const IconExample = {
portions of the SVGs to handle flipping colors for dark mode.
</p>
),
snippet: logosSnippet,
demo: <Logos />,
}, {
title: 'Third party logos',
Expand All @@ -172,6 +227,7 @@ export const IconExample = {
type: GuideSectionTypes.HTML,
code: iconsHtml,
}],
snippet: logosThirdSnippet,
demo: <LogosThird />,
}, {
title: 'Sizes',
Expand All @@ -188,6 +244,7 @@ export const IconExample = {
Medium is the default, and will output a <EuiCode>16x16</EuiCode> icon.
</p>
),
snippet: iconSizesSnippet,
demo: <IconSizes />,
}, {
title: 'Colors',
Expand All @@ -209,6 +266,7 @@ export const IconExample = {
unless the custom color is initiated by the user (like as a graph color).
</p>
),
snippet: iconColorsSnippet,
demo: <IconColors />,
}, {
title: 'Accessibility',
Expand All @@ -225,5 +283,20 @@ export const IconExample = {
</p>
),
demo: <Accessibility />,
}, {
title: 'Custom SVGs',
text: (
<p>The <EuiCode>type</EuiCode> prop can accept a valid enum, string or React SVG Element.</p>
),
source: [{
type: GuideSectionTypes.JS,
code: iconTypesSource,
}, {
type: GuideSectionTypes.HTML,
code: iconsHtml,
}],
props: { EuiIcon },
snippet: iconTypesSnippet,
demo: <IconTypes />,
}],
};
83 changes: 83 additions & 0 deletions src-docs/src/views/icon/icon_types.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import React from 'react';

import {
EuiFlexGrid,
EuiFlexGroup,
EuiFlexItem,
EuiIcon,
EuiPanel,
EuiText,
EuiCode,
EuiSpacer,
EuiButton,
} from '../../../../src/components';

import reactSvg from '../../images/custom.svg';


export default () => (
<div>
<EuiFlexGrid columns={4}>
<EuiFlexItem
className="guideDemo__icon"
style={{ width: '200px' }}
>
<EuiPanel>
<EuiIcon
type="logoElastic"
size="xl"
/>
<EuiText size="s">
<p>logoElastic</p>
</EuiText>
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem
className="guideDemo__icon"
style={{ width: '200px' }}
>
<EuiPanel>
<EuiIcon
type="https://upload.wikimedia.org/wikipedia/commons/9/9f/Vimlogo.svg"
size="xl"
/>
<EuiText size="s">
<p>http://some.svg</p>
</EuiText>
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem
className="guideDemo__icon"
style={{ width: '200px' }}
>
<EuiPanel>
<EuiIcon
type={reactSvg}
size="xl"
/>
<EuiText size="s">
<p>{`{reactSvg}`}</p>
</EuiText>
</EuiPanel>
</EuiFlexItem>
</EuiFlexGrid>

<EuiSpacer />

<EuiText>
<p>Any component that utlizes <EuiCode>EuiIcon</EuiCode> can use custom SVGs as well</p>
</EuiText>

<EuiSpacer />

<EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiButton iconType="https://upload.wikimedia.org/wikipedia/commons/9/9f/Vimlogo.svg">http://some.svg</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton iconType={reactSvg}>{`{reactSvg}`}</EuiButton>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like these are throwing console errors:

Screen Shot 2019-05-01 at 11 07 40 AM

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, forgot to mention yesterday that @chandlerprall is working on this part.

</EuiFlexItem>
</EuiFlexGroup>

</div>
);
Loading