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

Adds alignment, distribution, and position icons #2070

Merged
merged 1 commit into from
Jun 21, 2019
Merged

Adds alignment, distribution, and position icons #2070

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
- Tweaked `SuperDatePicker` to make the start/end date selection more obvious ([#2049](https://github.com/elastic/eui/pull/2049))
- Added `toSentenceCase` string service ([#2049](https://github.com/elastic/eui/pull/2049))
- Pass `EuiSuperSelect`'s `popoverClassName` to the popover's panel ([#2068](https://github.com/elastic/eui/pull/2068))
- Added `editorItemAlignLeft`, `editorItemAlignCenter`, `editorItemRight`, `editorItemAlignTop`, `editorItemAlignMiddle`, `editorItemAlignBottom`, `editorDistributeHorizontal`, `editorDistributeVertical`, `editorPositionTopLeft`, `editorPositionTopRight`, `editorPositionBottomRight`, and `editorPositionBottomLeft` glyphs to `EuiIcon` ([2070](https://github.com/elastic/eui/pull/2070))

**Bug fixes**

Expand Down
74 changes: 74 additions & 0 deletions src-docs/src/views/icon/editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
// DON'T USE THIS
// DON'T USE THIS
// DON'T USE THIS
// DON'T USE THIS
// DON'T USE THIS

// This example JS is overly complex for simple icon usage
// and is set up this way for ease of use in our docs.
//
// Check the snippet tab for a more common usage.

import React from 'react';

import {
EuiFlexGrid,
EuiFlexItem,
EuiIcon,
EuiPanel,
EuiText,
EuiCopy,
} from '../../../../src/components';

const iconTypes = [
'editorAlignCenter',
'editorAlignLeft',
'editorAlignRight',
'editorBold',
'editorCodeBlock',
'editorComment',
'editorDistributeHorizontal',
'editorDistributeVertical',
'editorHeading',
'editorItalic',
'editorItemAlignBottom',
'editorItemAlignCenter',
'editorItemAlignLeft',
'editorItemAlignMiddle',
'editorItemAlignRight',
'editorItemAlignTop',
'editorLink',
'editorOrderedList',
'editorPositionBottomLeft',
'editorPositionBottomRight',
'editorPositionTopLeft',
'editorPositionTopRight',
'editorRedo',
'editorStrike',
'editorTable',
'editorUnderline',
'editorUndo',
'editorUnorderedList',
];

export default () => (
<EuiFlexGrid columns={4}>
{iconTypes.map(iconType => (
<EuiFlexItem
className="guideDemo__icon"
key={iconType}
style={{ width: '200px' }}>
<EuiCopy textToCopy={iconType} afterMessage={`${iconType} copied`}>
{copy => (
<EuiPanel onClick={copy} className="eui-textCenter">
<EuiIcon type={iconType} />
<EuiText size="s">
<p>{iconType}</p>
</EuiText>
</EuiPanel>
)}
</EuiCopy>
</EuiFlexItem>
))}
</EuiFlexGrid>
);
25 changes: 25 additions & 0 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 @@ -52,6 +52,10 @@ import Apps from './apps';
const appsSource = require('!!raw-loader!./apps');
const appsSnippet = '<EuiIcon type="addDataApp" size="xl" />';

import Editor from './editor';
const editorSource = require('!!raw-loader!./editor');
const editorSnippet = '<EuiIcon type="editorAlignLeft" />';

import Ml from './ml';
const mlSource = require('!!raw-loader!./ml');
const mlSnippet = '<EuiIcon type="dataVisualizer" size="xl" />';
Expand Down Expand Up @@ -134,6 +138,27 @@ export const IconExample = {
snippet: iconsSnippet,
demo: <Icons />,
},
{
title: 'Editor controls',
source: [
{
type: GuideSectionTypes.JS,
code: editorSource,
},
{
type: GuideSectionTypes.HTML,
code: iconsHtml,
},
],
text: (
<p>
Editor icons relate to the visual styling of elements and are
commonly used within <EuiCode>EuiButtonGroup</EuiCode> components.
</p>
),
snippet: editorSnippet,
demo: <Editor />,
},
{
title: 'Apps',
source: [
Expand Down
16 changes: 0 additions & 16 deletions src-docs/src/views/icon/icons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,22 +56,6 @@ const iconTypes = [
'database',
'document',
'dot',
'editorAlignCenter',
'editorAlignLeft',
'editorAlignRight',
'editorBold',
'editorCodeBlock',
'editorComment',
'editorHeading',
'editorItalic',
'editorLink',
'editorOrderedList',
'editorRedo',
'editorStrike',
'editorTable',
'editorUnderline',
'editorUndo',
'editorUnorderedList',
'email',
'empty',
'exit',
Expand Down
182 changes: 181 additions & 1 deletion src/components/icon/__snapshots__/icon.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1620,6 +1620,36 @@ exports[`EuiIcon props type editorComment is rendered 1`] = `
</svg>
`;

exports[`EuiIcon props type editorDistributeHorizontal 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 2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zM1.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 1 1-1 0v-13a.5.5 0 0 1 .5-.5zm13 0a.5.5 0 0 1 .5.5v13a.5.5 0 1 1-1 0v-13a.5.5 0 0 1 .5-.5z"
/>
</svg>
`;

exports[`EuiIcon props type editorDistributeVertical 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="M4 5h8a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zM1.5 1h13a.5.5 0 1 1 0 1h-13a.5.5 0 0 1 0-1zm0 13h13a.5.5 0 1 1 0 1h-13a.5.5 0 1 1 0-1z"
/>
</svg>
`;

exports[`EuiIcon props type editorHeading is rendered 1`] = `
<svg
class="euiIcon euiIcon--medium euiIcon-isLoaded"
Expand Down Expand Up @@ -1662,6 +1692,96 @@ exports[`EuiIcon props type editorItalic is rendered 1`] = `
</svg>
`;

exports[`EuiIcon props type editorItemAlignBottom 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 1h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zM1.5 14h13a.5.5 0 1 1 0 1h-13a.5.5 0 1 1 0-1z"
/>
</svg>
`;

exports[`EuiIcon props type editorItemAlignCenter 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 4H7V1.5a.5.5 0 0 1 1 0V4zm0 8v2.5a.5.5 0 1 1-1 0V12h1zM3 5h9a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z"
/>
</svg>
`;

exports[`EuiIcon props type editorItemAlignLeft 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="M5 5h8a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zM1.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 1 1-1 0v-13a.5.5 0 0 1 .5-.5z"
/>
</svg>
`;

exports[`EuiIcon props type editorItemAlignMiddle 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="M4 7v1H1.5a.5.5 0 0 1 0-1H4zm8 0h2.5a.5.5 0 1 1 0 1H12V7zM7 1h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2z"
/>
</svg>
`;

exports[`EuiIcon props type editorItemAlignRight 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="M3 5h8a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zm11.5-4a.5.5 0 0 1 .5.5v13a.5.5 0 1 1-1 0v-13a.5.5 0 0 1 .5-.5z"
/>
</svg>
`;

exports[`EuiIcon props type editorItemAlignTop 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 3h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zM1.5 1h13a.5.5 0 1 1 0 1h-13a.5.5 0 0 1 0-1z"
/>
</svg>
`;

exports[`EuiIcon props type editorLink is rendered 1`] = `
<svg
class="euiIcon euiIcon--medium euiIcon-isLoaded"
Expand Down Expand Up @@ -1704,6 +1824,66 @@ exports[`EuiIcon props type editorOrderedList is rendered 1`] = `
</svg>
`;

exports[`EuiIcon props type editorPositionBottomLeft 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="M2 8h5a1 1 0 0 1 1 1v5H3a1 1 0 0 1-1-1V8zm1-7h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3z"
/>
</svg>
`;

exports[`EuiIcon props type editorPositionBottomRight 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="M9 8h5v5a1 1 0 0 1-1 1H8V9a1 1 0 0 1 1-1zM3 1h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3z"
/>
</svg>
`;

exports[`EuiIcon props type editorPositionTopLeft 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="M3 2h5v5a1 1 0 0 1-1 1H2V3a1 1 0 0 1 1-1zm0-1h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3z"
/>
</svg>
`;

exports[`EuiIcon props type editorPositionTopRight 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 2h5a1 1 0 0 1 1 1v5H9a1 1 0 0 1-1-1V2zM3 1h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3z"
/>
</svg>
`;

exports[`EuiIcon props type editorRedo is rendered 1`] = `
<svg
class="euiIcon euiIcon--medium euiIcon-isLoaded"
Expand Down Expand Up @@ -5220,7 +5400,7 @@ exports[`EuiIcon props type popout is rendered 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.146 3.146A.498.498 0 0 1 1.5 3h6a.5.5 0 0 1 0 1H2v10h10V8.5a.5.5 0 1 1 1 0v6a.498.498 0 0 1-.5.5h-11a.498.498 0 0 1-.5-.5v-11c0-.138.056-.263.146-.354zM13.306 2H10.5a.5.5 0 1 1 0-1h4a.498.498 0 0 1 .5.5v4a.5.5 0 1 1-1 0V2.72L6.88 9.838a.5.5 0 0 1-.706-.707L13.305 2z"
d="M12 8.5a.5.5 0 1 1 1 0V13a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4.5a.5.5 0 0 1 0 1H3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V8.5zm2-5.78L6.88 9.838a.5.5 0 0 1-.706-.707L13.305 2H10.5a.5.5 0 1 1 0-1H14a1 1 0 0 1 1 1v3.5a.5.5 0 1 1-1 0V2.72z"
/>
</svg>
`;
Expand Down
14 changes: 14 additions & 0 deletions src/components/icon/assets/editorDistributeHorizontal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from 'react';

const EuiIconEditorDistributeHorizontal = props => (
<svg
width={16}
height={16}
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
{...props}>
<path d="M7 2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zM1.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 1 1-1 0v-13a.5.5 0 0 1 .5-.5zm13 0a.5.5 0 0 1 .5.5v13a.5.5 0 1 1-1 0v-13a.5.5 0 0 1 .5-.5z" />
</svg>
);

export const icon = EuiIconEditorDistributeHorizontal;
3 changes: 3 additions & 0 deletions src/components/icon/assets/editorDistributeHorizontal.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.
14 changes: 14 additions & 0 deletions src/components/icon/assets/editorDistributeVertical.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from 'react';

const EuiIconEditorDistributeVertical = props => (
<svg
width={16}
height={16}
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
{...props}>
<path d="M4 5h8a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zM1.5 1h13a.5.5 0 1 1 0 1h-13a.5.5 0 0 1 0-1zm0 13h13a.5.5 0 1 1 0 1h-13a.5.5 0 1 1 0-1z" />
</svg>
);

export const icon = EuiIconEditorDistributeVertical;
3 changes: 3 additions & 0 deletions src/components/icon/assets/editorDistributeVertical.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.
Loading