Skip to content

Commit

Permalink
Add new icons
Browse files Browse the repository at this point in the history
update changelog

Per PR review - Update new icons to icon design specs
  • Loading branch information
claracruz committed Jul 12, 2019
1 parent f571074 commit 53916bb
Show file tree
Hide file tree
Showing 18 changed files with 351 additions and 0 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,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 new icons `cloud drizzle`, `cloud stormy`, `cloud sunny`, `documents`, `edit `, `training` and `video player` ([#2102](https://github.com/elastic/eui/pull/2102))

**Bug fixes**

Expand Down
7 changes: 7 additions & 0 deletions src-docs/src/views/icon/icons.js
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,7 +58,9 @@ const iconTypes = [
'cut',
'database',
'document',
'documents',
'dot',
'edit',
'email',
'empty',
'exit',
Expand Down Expand Up @@ -161,9 +166,11 @@ const iconTypes = [
'tag',
'tear',
'temperature',
'training',
'trash',
'user',
'vector',
'videoPlayer',
'visArea',
'visBarHorizontal',
'visBarVertical',
Expand Down
165 changes: 165 additions & 0 deletions src/components/icon/__snapshots__/icon.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -1040,6 +1040,67 @@ 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"
>
<g
fill="#000"
fill-rule="nonzero"
>
<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.497z"
/>
<path
d="M4.739 8.696l-1.466 1.792a.5.5 0 0 0 .774.633L5.513 9.33a.5.5 0 1 0-.774-.633zm-3.12 3.647l-1.506 1.84a.5.5 0 1 0 .774.634l1.505-1.84a.5.5 0 1 0-.774-.634zm7.62-3.647l-1.466 1.792a.5.5 0 0 0 .774.633l1.466-1.792a.5.5 0 0 0-.774-.633zm-3.12 3.647l-1.506 1.84a.5.5 0 1 0 .774.634l1.505-1.84a.5.5 0 1 0-.774-.634zm7.62-3.647l-1.466 1.792a.5.5 0 1 0 .774.633l1.466-1.792a.5.5 0 0 0-.774-.633zm-3.12 3.647l-1.506 1.84a.5.5 0 1 0 .774.634l1.505-1.84a.5.5 0 1 0-.774-.634z"
/>
</g>
</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"
>
<g
fill="#000"
fill-rule="nonzero"
>
<path
d="M5 12a.5.5 0 0 1-.343-.864l4.25-4c.454-.428 1.124.195.731.68L7.05 11H9.5a.5.5 0 0 1 .32.885l-4.822 4c-.484.402-1.116-.275-.681-.73L7.331 12H5z"
/>
<path
d="M6.348 3.761c.562.408 1.018.96 1.31 1.617a.5.5 0 1 1-.915.406 3 3 0 1 0-3.579 4.098.5.5 0 1 1-.277.96 4.001 4.001 0 1 1 2.58-7.564 5.5 5.5 0 1 1 6.127 7.613.5.5 0 1 1-.198-.98 4.502 4.502 0 1 0-5.048-6.15zm-4.55 8.362l-1.685 2.06a.5.5 0 1 0 .774.634l1.686-2.06a.5.5 0 0 0-.774-.634zm10 0l-1.685 2.06a.5.5 0 1 0 .774.634l1.686-2.06a.5.5 0 1 0-.774-.634z"
/>
</g>
</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.314zM9.69 5.06a3.5 3.5 0 1 0-6.33 2.991 4.029 4.029 0 0 1 2.106.228 5.505 5.505 0 0 1 4.224-3.219zM4 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 3z"
/>
</svg>
`;

exports[`EuiIcon props type codeApp is rendered 1`] = `
<svg
class="euiIcon euiIcon--medium euiIcon--app euiIcon-isLoaded"
Expand Down Expand Up @@ -1473,6 +1534,29 @@ exports[`EuiIcon props type document is rendered 1`] = `
</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"
>
<g
fill="#000"
fill-rule="nonzero"
>
<path
d="M8 1H2v11h10V5H8.5a.5.5 0 0 1-.5-.5V1zm1 0v3h3L9 1zM1 1a1 1 0 0 1 1-1h7a1 1 0 0 1 .707.293l3 3A1 1 0 0 1 13 4v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V1z"
/>
<path
d="M4.5 8h5a.5.5 0 0 0 0-1h-5a.5.5 0 0 0 0 1zm0 2h5a.5.5 0 0 0 0-1h-5a.5.5 0 0 0 0 1zM6 16h9a1 1 0 0 0 1-1V6a.5.5 0 1 0-1 0v9H6a.5.5 0 1 0 0 1z"
/>
</g>
</svg>
`;

exports[`EuiIcon props type dot is rendered 1`] = `
<svg
class="euiIcon euiIcon--medium euiIcon-isLoaded"
Expand All @@ -1496,6 +1580,38 @@ exports[`EuiIcon props type dot is rendered 1`] = `
</svg>
`;

exports[`EuiIcon props type edit 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"
>
<g
fill="#343741"
fill-rule="nonzero"
id="icon-blog-16-ink"
stroke="none"
stroke-width="1"
>
<path
d="M7 6.293V9h2.707l5.44-5.44a1.5 1.5 0 0 0 0-2.12L14.56.853a1.5 1.5 0 0 0-2.122 0L7 6.293zm1 .414l5.146-5.146a.5.5 0 0 1 .708 0l.585.585a.5.5 0 0 1 0 .708L9.293 8H8V6.707z"
id="Path-7"
/>
<path
d="M4 13h8v-1H4z"
id="Path-9"
/>
<path
d="M14 15H2V2h7V1H1v15h14V7h-1z"
id="Path-8"
/>
</g>
</svg>
`;

exports[`EuiIcon props type editorAlignCenter is rendered 1`] = `
<svg
class="euiIcon euiIcon--medium euiIcon-isLoaded"
Expand Down Expand Up @@ -6624,6 +6740,32 @@ 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"
>
<g
fill="#000"
fill-rule="nonzero"
>
<path
d="M1 11V1h11v2.5a.5.5 0 1 0 1 0v-3a.5.5 0 0 0-.5-.5H.5a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h5a.5.5 0 1 0 0-1H1z"
/>
<path
d="M16 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.043a2.5 2.5 0 1 1 3.86.616C15.075 10.961 16 12.332 16 14zm-2.5-5.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0z"
/>
<path
d="M9 15.5V14c0-.851.134-1.357.721-2.007a.5.5 0 0 0-.742-.67C8.194 12.191 8 12.923 8 14v1.5a.5.5 0 1 0 1 0zM5.958 5.772L3.89 3.188a.5.5 0 1 0-.78.624l2.067 2.585a.5.5 0 1 0 .781-.625z"
/>
</g>
</svg>
`;

exports[`EuiIcon props type trash is rendered 1`] = `
<svg
class="euiIcon euiIcon--medium euiIcon-isLoaded"
Expand Down Expand Up @@ -6739,6 +6881,29 @@ 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"
>
<g
fill="#000"
fill-rule="nonzero"
>
<path
d="M15 4V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zm0 1H1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5zM2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z"
/>
<path
d="M2.5 3h1a.5.5 0 0 0 0-1h-1a.5.5 0 0 0 0 1zm3 0h1a.5.5 0 0 0 0-1h-1a.5.5 0 0 0 0 1zM5 7.6v5a.5.5 0 0 0 .724.447l5-2.5a.5.5 0 0 0 0-.894l-5-2.5A.5.5 0 0 0 5 7.6zm4.382 2.5L6 11.791V8.409L9.382 10.1z"
/>
</g>
</svg>
`;

exports[`EuiIcon props type visArea is rendered 1`] = `
<svg
class="euiIcon euiIcon--medium euiIcon-isLoaded"
Expand Down
17 changes: 17 additions & 0 deletions src/components/icon/assets/cloud-drizzle.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
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}>
<g fill="#000" fillRule="nonzero">
<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.497z" />
<path d="M4.739 8.696l-1.466 1.792a.5.5 0 0 0 .774.633L5.513 9.33a.5.5 0 1 0-.774-.633zm-3.12 3.647l-1.506 1.84a.5.5 0 1 0 .774.634l1.505-1.84a.5.5 0 1 0-.774-.634zm7.62-3.647l-1.466 1.792a.5.5 0 0 0 .774.633l1.466-1.792a.5.5 0 0 0-.774-.633zm-3.12 3.647l-1.506 1.84a.5.5 0 1 0 .774.634l1.505-1.84a.5.5 0 1 0-.774-.634zm7.62-3.647l-1.466 1.792a.5.5 0 1 0 .774.633l1.466-1.792a.5.5 0 0 0-.774-.633zm-3.12 3.647l-1.506 1.84a.5.5 0 1 0 .774.634l1.505-1.84a.5.5 0 1 0-.774-.634z" />
</g>
</svg>
);

export const icon = EuiIconCloudDrizzle;
6 changes: 6 additions & 0 deletions src/components/icon/assets/cloud-drizzle.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions src/components/icon/assets/cloud-stormy.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
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}>
<g fill="#000" fillRule="nonzero">
<path d="M5 12a.5.5 0 0 1-.343-.864l4.25-4c.454-.428 1.124.195.731.68L7.05 11H9.5a.5.5 0 0 1 .32.885l-4.822 4c-.484.402-1.116-.275-.681-.73L7.331 12H5z" />
<path d="M6.348 3.761c.562.408 1.018.96 1.31 1.617a.5.5 0 1 1-.915.406 3 3 0 1 0-3.579 4.098.5.5 0 1 1-.277.96 4.001 4.001 0 1 1 2.58-7.564 5.5 5.5 0 1 1 6.127 7.613.5.5 0 1 1-.198-.98 4.502 4.502 0 1 0-5.048-6.15zm-4.55 8.362l-1.685 2.06a.5.5 0 1 0 .774.634l1.686-2.06a.5.5 0 0 0-.774-.634zm10 0l-1.685 2.06a.5.5 0 1 0 .774.634l1.686-2.06a.5.5 0 1 0-.774-.634z" />
</g>
</svg>
);

export const icon = EuiIconCloudStormy;
6 changes: 6 additions & 0 deletions src/components/icon/assets/cloud-stormy.svg
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/cloud-sunny.js
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.314zM9.69 5.06a3.5 3.5 0 1 0-6.33 2.991 4.029 4.029 0 0 1 2.106.228 5.505 5.505 0 0 1 4.224-3.219zM4 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 3z" />
</svg>
);

export const icon = EuiIconCloudSunny;
3 changes: 3 additions & 0 deletions src/components/icon/assets/cloud-sunny.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions src/components/icon/assets/documents.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
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}>
<g fill="#000" fillRule="nonzero">
<path d="M8 1H2v11h10V5H8.5a.5.5 0 0 1-.5-.5V1zm1 0v3h3L9 1zM1 1a1 1 0 0 1 1-1h7a1 1 0 0 1 .707.293l3 3A1 1 0 0 1 13 4v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V1z" />
<path d="M4.5 8h5a.5.5 0 0 0 0-1h-5a.5.5 0 0 0 0 1zm0 2h5a.5.5 0 0 0 0-1h-5a.5.5 0 0 0 0 1zM6 16h9a1 1 0 0 0 1-1V6a.5.5 0 1 0-1 0v9H6a.5.5 0 1 0 0 1z" />
</g>
</svg>
);

export const icon = EuiIconDocuments;
6 changes: 6 additions & 0 deletions src/components/icon/assets/documents.svg
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 53916bb

Please sign in to comment.