Skip to content

Commit

Permalink
adds editor align and dist glyphs
Browse files Browse the repository at this point in the history
  • Loading branch information
ryankeairns committed Jun 20, 2019
1 parent 82f22d8 commit 4383158
Show file tree
Hide file tree
Showing 32 changed files with 499 additions and 19 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
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
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
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
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
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
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
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
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
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 4383158

Please sign in to comment.