Skip to content

Commit

Permalink
Add new icons (#2102)
Browse files Browse the repository at this point in the history 
* Add new icons

update changelog

Per PR review - Update new icons to icon design specs

* retina tweaks, renames, euify

* re-shape cloud
  • Loading branch information
@claracruz @ryankeairns
claracruz authored and ryankeairns committed Jul 16, 2019
1 parent c056b4b commit 364b14b
Show file tree
Hide file tree
Showing 18 changed files with 239 additions and 0 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
- Added TypeScript definition for `EuiFormControlLayout` ([#2086](https://github.com/elastic/eui/pull/2086))
- Changed SASS mixin `euiOverflowShadow()` to use `mask-image` instead of `box-shadow` ([#2088](https://github.com/elastic/eui/pull/2088))
- Added SASS mixin and CSS utility `euiYScrollWithShadows` ([#2088](https://github.com/elastic/eui/pull/2088))
- Added `cloudDrizzle`, `cloudStormy`, `cloudSunny`, `documents`, `documentEdit`, `training` and `videoPlayer` glyphs to `EuiIcon` ([#2102](https://github.com/elastic/eui/pull/2102))
- Added `display` prop to `EuiPopover` ([#2112](https://github.com/elastic/eui/pull/2112))

**Bug fixes**
Expand Down
7 changes: 7 additions & 0 deletions src-docs/src/views/icon/icons.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@ const iconTypes = [
'check',
'checkInCircleFilled',
'clock',
'cloudDrizzle',
'cloudStormy',
'cloudSunny',
'compute',
'console',
'controlsHorizontal',
Expand All @@ -55,6 +58,8 @@ const iconTypes = [
'cut',
'database',
'document',
'documentEdit',
'documents',
'dot',
'email',
'empty',
Expand Down Expand Up @@ -161,9 +166,11 @@ const iconTypes = [
'tag',
'tear',
'temperature',
'training',
'trash',
'user',
'vector',
'videoPlayer',
'visArea',
'visBarHorizontal',
'visBarVertical',
Expand Down
105 changes: 105 additions & 0 deletions src/components/icon/__snapshots__/icon.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1040,6 +1040,51 @@ exports[`EuiIcon props type clock is rendered 1`] = `
</svg>
`;

exports[`EuiIcon props type cloudDrizzle is rendered 1`] = `
<svg
class="euiIcon euiIcon--medium euiIcon-isLoaded"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.348 3.761A3.995 3.995 0 0 1 8 7a.5.5 0 0 1-1 0 3 3 0 1 0-4.878 2.34.5.5 0 0 1-.627.779 4 4 0 0 1 3.973-6.84 5.502 5.502 0 0 1 10.096 4.37.5.5 0 1 1-.92-.39 4.5 4.5 0 0 0-8.296-3.497zm-1.61 4.935a.5.5 0 1 1 .775.633l-1.466 1.792a.5.5 0 1 1-.774-.633l1.466-1.792zm-3.12 3.647a.5.5 0 0 1 .774.634l-1.505 1.84a.5.5 0 0 1-.774-.634l1.505-1.84zm7.62-3.647a.5.5 0 0 1 .775.633l-1.466 1.792a.5.5 0 1 1-.774-.633l1.466-1.792zm-3.12 3.647a.5.5 0 0 1 .774.634l-1.505 1.84a.5.5 0 0 1-.774-.634l1.505-1.84zm7.62-3.647a.5.5 0 1 1 .775.633l-1.466 1.792a.5.5 0 1 1-.774-.633l1.466-1.792zm-3.12 3.647a.5.5 0 0 1 .774.634l-1.505 1.84a.5.5 0 0 1-.774-.634l1.505-1.84z"
/>
</svg>
`;

exports[`EuiIcon props type cloudStormy is rendered 1`] = `
<svg
class="euiIcon euiIcon--medium euiIcon-isLoaded"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.421 4.93a.5.5 0 0 1-.87.49 3 3 0 1 0-4.43 3.918.5.5 0 0 1-.626.78 4 4 0 0 1 3.973-6.84l.032.018V3.28a5.5 5.5 0 1 1 7.003 7.357.5.5 0 1 1-.36-.934 4.5 4.5 0 1 0-5.77-5.923c.42.31.778.701 1.05 1.15h-.002zM9.6 11c.669.002.794.67.36 1.003l-4.68 3.882c-.457.378-1.053-.26-.643-.689l3.08-3.193A5411.7 5411.7 0 0 1 5.113 12c-.668-.001-.793-.669-.36-1.003l4.68-3.881c.458-.379 1.053.26.643.688l-3.08 3.193L9.6 11z"
/>
</svg>
`;

exports[`EuiIcon props type cloudSunny is rendered 1`] = `
<svg
class="euiIcon euiIcon--medium euiIcon-isLoaded"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.746 5.005A5.5 5.5 0 0 1 10.5 16H4a4 4 0 0 1-1.61-7.663A4.473 4.473 0 0 1 2.029 7H.5a.5.5 0 0 1 0-1h1.527a4.479 4.479 0 0 1 .957-2.309L1.646 2.354a.5.5 0 1 1 .708-.708L3.69 2.984A4.479 4.479 0 0 1 6 2.027V.5a.5.5 0 0 1 1 0v1.528a4.493 4.493 0 0 1 2.309.956l1.337-1.338a.5.5 0 0 1 .708.708L10.016 3.69c.311.388.56.831.73 1.314zM4 15h6.5a4.5 4.5 0 1 0-4.152-6.239A3.995 3.995 0 0 1 8 12a.5.5 0 1 1-1 0 3 3 0 1 0-3 3zm5.691-9.94a3.5 3.5 0 1 0-6.33 2.991 4.029 4.029 0 0 1 2.106.227 5.505 5.505 0 0 1 4.224-3.219z"
/>
</svg>
`;

exports[`EuiIcon props type codeApp is rendered 1`] = `
<svg
class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
Expand Down Expand Up @@ -1473,6 +1518,36 @@ exports[`EuiIcon props type document is rendered 1`] = `
</svg>
`;

exports[`EuiIcon props type documentEdit is rendered 1`] = `
<svg
class="euiIcon euiIcon--medium euiIcon-isLoaded"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.505 8.995l6.453-6.44-1.5-1.5-6.453 6.44 1.5 1.5zM12.968.19c.258-.238.657-.26.91 0l1.928 1.929a.642.642 0 0 1 0 .909l-6.78 6.784A.641.641 0 0 1 8.57 10H6.643A.643.643 0 0 1 6 9.357V7.43c0-.17.067-.335.188-.455L12.968.19zM4.5 13a.5.5 0 1 1 0-1h7a.5.5 0 1 1 0 1h-7zm4-12a.5.5 0 0 1 0 1H2v13h12V7.5a.5.5 0 1 1 1 0V15a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6.5z"
/>
</svg>
`;

exports[`EuiIcon props type documents is rendered 1`] = `
<svg
class="euiIcon euiIcon--medium euiIcon-isLoaded"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.8 0c.274 0 .537.113.726.312l3.2 3.428c.176.186.274.433.274.689V13a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h6.8zM12 5H8.5a.5.5 0 0 1-.5-.5V1H2v12h10V5zm-7.5 6a.5.5 0 1 1 0-1h5a.5.5 0 1 1 0 1h-5zm0-3a.5.5 0 0 1 0-1h5a.5.5 0 1 1 0 1h-5zm1 8a.5.5 0 1 1 0-1H14V6.5a.5.5 0 1 1 1 0V15a1 1 0 0 1-1 1H5.5z"
/>
</svg>
`;

exports[`EuiIcon props type dot is rendered 1`] = `
<svg
class="euiIcon euiIcon--medium euiIcon-isLoaded"
Expand Down Expand Up @@ -6704,6 +6779,21 @@ exports[`EuiIcon props type tokenVariable is rendered 1`] = `
</svg>
`;

exports[`EuiIcon props type training is rendered 1`] = `
<svg
class="euiIcon euiIcon--medium euiIcon-isLoaded"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.386 9.836a2.5 2.5 0 1 1 3.611.667C15.212 11.173 16 12.46 16 14v1.5a.5.5 0 1 1-1 0V14c0-1.724-1.276-3-3-3-.91 0-1.298-.02-1.805-.122-1.25-.254-2.333-1-3.585-2.566a.5.5 0 1 1 .78-.624c.9 1.124 1.653 1.74 2.434 2.043.155.052.345.083.562.105zm1.785.128c.083.01.167.021.251.034L12.5 10a1.5 1.5 0 1 0-.33-.036zM9.78 11.97a.5.5 0 0 1 .5.5c0 .076-.047.226-.05.231-.179.38-.23.774-.23 1.302v1.5a.5.5 0 1 1-1 0v-1.5c0-.657.072-1.186.307-1.696a.5.5 0 0 1 .473-.337zM5.958 5.772a.5.5 0 0 1-.78.625L3.11 3.812a.5.5 0 1 1 .78-.624l2.068 2.584zM1 11h5.5a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5V.5A.5.5 0 0 1 .5 0h12a.5.5 0 0 1 .5.5v3a.5.5 0 1 1-1 0V1H1v10z"
/>
</svg>
`;

exports[`EuiIcon props type trash is rendered 1`] = `
<svg
class="euiIcon euiIcon--medium euiIcon-isLoaded"
Expand Down Expand Up @@ -6819,6 +6909,21 @@ exports[`EuiIcon props type vector is rendered 1`] = `
</svg>
`;

exports[`EuiIcon props type videoPlayer is rendered 1`] = `
<svg
class="euiIcon euiIcon--medium euiIcon-isLoaded"
focusable="false"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 1.994C0 .893.895 0 1.994 0h12.012C15.107 0 16 .895 16 1.994v12.012A1.995 1.995 0 0 1 14.006 16H1.994A1.995 1.995 0 0 1 0 14.006V1.994zm1 0v12.012c0 .548.446.994.994.994h12.012a.995.995 0 0 0 .994-.994V1.994A.995.995 0 0 0 14.006 1H1.994A.995.995 0 0 0 1 1.994zM1 4h14v1H1V4zm1.5-1a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1h-1zm3 0a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1h-1zm4.947 6.106a1 1 0 0 1 0 1.788l-3 2A1 1 0 0 1 6 12V8a1 1 0 0 1 1.447-.894l3 2zM10 10L7 8v4l3-2z"
/>
</svg>
`;

exports[`EuiIcon props type visArea is rendered 1`] = `
<svg
class="euiIcon euiIcon--medium euiIcon-isLoaded"
Expand Down
14 changes: 14 additions & 0 deletions src/components/icon/assets/cloudDrizzle.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from 'react';

const EuiIconCloudDrizzle = props => (
<svg
width={16}
height={16}
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
{...props}>
<path d="M6.348 3.761A3.995 3.995 0 0 1 8 7a.5.5 0 0 1-1 0 3 3 0 1 0-4.878 2.34.5.5 0 0 1-.627.779 4 4 0 0 1 3.973-6.84 5.502 5.502 0 0 1 10.096 4.37.5.5 0 1 1-.92-.39 4.5 4.5 0 0 0-8.296-3.497zm-1.61 4.935a.5.5 0 1 1 .775.633l-1.466 1.792a.5.5 0 1 1-.774-.633l1.466-1.792zm-3.12 3.647a.5.5 0 0 1 .774.634l-1.505 1.84a.5.5 0 0 1-.774-.634l1.505-1.84zm7.62-3.647a.5.5 0 0 1 .775.633l-1.466 1.792a.5.5 0 1 1-.774-.633l1.466-1.792zm-3.12 3.647a.5.5 0 0 1 .774.634l-1.505 1.84a.5.5 0 0 1-.774-.634l1.505-1.84zm7.62-3.647a.5.5 0 1 1 .775.633l-1.466 1.792a.5.5 0 1 1-.774-.633l1.466-1.792zm-3.12 3.647a.5.5 0 0 1 .774.634l-1.505 1.84a.5.5 0 0 1-.774-.634l1.505-1.84z" />
</svg>
);

export const icon = EuiIconCloudDrizzle;
3 changes: 3 additions & 0 deletions src/components/icon/assets/cloudDrizzle.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions src/components/icon/assets/cloudStormy.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from 'react';

const EuiIconCloudStormy = props => (
<svg
width={16}
height={16}
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
{...props}>
<path d="M7.421 4.93a.5.5 0 0 1-.87.49 3 3 0 1 0-4.43 3.918.5.5 0 0 1-.626.78 4 4 0 0 1 3.973-6.84l.032.018V3.28a5.5 5.5 0 1 1 7.003 7.357.5.5 0 1 1-.36-.934 4.5 4.5 0 1 0-5.77-5.923c.42.31.778.701 1.05 1.15h-.002zM9.6 11c.669.002.794.67.36 1.003l-4.68 3.882c-.457.378-1.053-.26-.643-.689l3.08-3.193A5411.7 5411.7 0 0 1 5.113 12c-.668-.001-.793-.669-.36-1.003l4.68-3.881c.458-.379 1.053.26.643.688l-3.08 3.193L9.6 11z" />
</svg>
);

export const icon = EuiIconCloudStormy;
3 changes: 3 additions & 0 deletions src/components/icon/assets/cloudStormy.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions src/components/icon/assets/cloudSunny.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from 'react';

const EuiIconCloudSunny = props => (
<svg
width={16}
height={16}
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
{...props}>
<path d="M10.746 5.005A5.5 5.5 0 0 1 10.5 16H4a4 4 0 0 1-1.61-7.663A4.473 4.473 0 0 1 2.029 7H.5a.5.5 0 0 1 0-1h1.527a4.479 4.479 0 0 1 .957-2.309L1.646 2.354a.5.5 0 1 1 .708-.708L3.69 2.984A4.479 4.479 0 0 1 6 2.027V.5a.5.5 0 0 1 1 0v1.528a4.493 4.493 0 0 1 2.309.956l1.337-1.338a.5.5 0 0 1 .708.708L10.016 3.69c.311.388.56.831.73 1.314zM4 15h6.5a4.5 4.5 0 1 0-4.152-6.239A3.995 3.995 0 0 1 8 12a.5.5 0 1 1-1 0 3 3 0 1 0-3 3zm5.691-9.94a3.5 3.5 0 1 0-6.33 2.991 4.029 4.029 0 0 1 2.106.227 5.505 5.505 0 0 1 4.224-3.219z" />
</svg>
);

export const icon = EuiIconCloudSunny;
3 changes: 3 additions & 0 deletions src/components/icon/assets/cloudSunny.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions src/components/icon/assets/documentEdit.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from 'react';

const EuiIconDocumentEdit = props => (
<svg
width={16}
height={16}
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
{...props}>
<path d="M8.505 8.995l6.453-6.44-1.5-1.5-6.453 6.44 1.5 1.5zM12.968.19c.258-.238.657-.26.91 0l1.928 1.929a.642.642 0 0 1 0 .909l-6.78 6.784A.641.641 0 0 1 8.57 10H6.643A.643.643 0 0 1 6 9.357V7.43c0-.17.067-.335.188-.455L12.968.19zM4.5 13a.5.5 0 1 1 0-1h7a.5.5 0 1 1 0 1h-7zm4-12a.5.5 0 0 1 0 1H2v13h12V7.5a.5.5 0 1 1 1 0V15a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6.5z" />
</svg>
);

export const icon = EuiIconDocumentEdit;
3 changes: 3 additions & 0 deletions src/components/icon/assets/documentEdit.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions src/components/icon/assets/documents.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from 'react';

const EuiIconDocuments = props => (
<svg
width={16}
height={16}
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
{...props}>
<path d="M8.8 0c.274 0 .537.113.726.312l3.2 3.428c.176.186.274.433.274.689V13a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1h6.8zM12 5H8.5a.5.5 0 0 1-.5-.5V1H2v12h10V5zm-7.5 6a.5.5 0 1 1 0-1h5a.5.5 0 1 1 0 1h-5zm0-3a.5.5 0 0 1 0-1h5a.5.5 0 1 1 0 1h-5zm1 8a.5.5 0 1 1 0-1H14V6.5a.5.5 0 1 1 1 0V15a1 1 0 0 1-1 1H5.5z" />
</svg>
);

export const icon = EuiIconDocuments;
3 changes: 3 additions & 0 deletions src/components/icon/assets/documents.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 364b14b

Please sign in to comment.