From 4383158863297ad45072b1ab7992c7779f34c8c7 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Thu, 20 Jun 2019 17:23:03 -0500 Subject: [PATCH] adds editor align and dist glyphs --- CHANGELOG.md | 1 + src-docs/src/views/icon/editor.js | 74 +++++++ src-docs/src/views/icon/icon_example.js | 25 +++ src-docs/src/views/icon/icons.js | 16 -- .../icon/__snapshots__/icon.test.tsx.snap | 182 +++++++++++++++++- .../icon/assets/editorDistributeHorizontal.js | 14 ++ .../assets/editorDistributeHorizontal.svg | 3 + .../icon/assets/editorDistributeVertical.js | 14 ++ .../icon/assets/editorDistributeVertical.svg | 3 + .../icon/assets/editorItemAlignBottom.js | 14 ++ .../icon/assets/editorItemAlignBottom.svg | 3 + .../icon/assets/editorItemAlignCenter.js | 14 ++ .../icon/assets/editorItemAlignCenter.svg | 3 + .../icon/assets/editorItemAlignLeft.js | 14 ++ .../icon/assets/editorItemAlignLeft.svg | 3 + .../icon/assets/editorItemAlignMiddle.js | 14 ++ .../icon/assets/editorItemAlignMiddle.svg | 3 + .../icon/assets/editorItemAlignRight.js | 14 ++ .../icon/assets/editorItemAlignRight.svg | 3 + .../icon/assets/editorItemAlignTop.js | 14 ++ .../icon/assets/editorItemAlignTop.svg | 3 + .../icon/assets/editorPositionBottomLeft.js | 14 ++ .../icon/assets/editorPositionBottomLeft.svg | 3 + .../icon/assets/editorPositionBottomRight.js | 14 ++ .../icon/assets/editorPositionBottomRight.svg | 3 + .../icon/assets/editorPositionTopLeft.js | 14 ++ .../icon/assets/editorPositionTopLeft.svg | 3 + .../icon/assets/editorPositionTopRight.js | 14 ++ .../icon/assets/editorPositionTopRight.svg | 3 + src/components/icon/assets/popout.js | 2 +- src/components/icon/assets/popout.svg | 2 +- src/components/icon/icon.tsx | 12 ++ 32 files changed, 499 insertions(+), 19 deletions(-) create mode 100644 src-docs/src/views/icon/editor.js create mode 100644 src/components/icon/assets/editorDistributeHorizontal.js create mode 100644 src/components/icon/assets/editorDistributeHorizontal.svg create mode 100644 src/components/icon/assets/editorDistributeVertical.js create mode 100644 src/components/icon/assets/editorDistributeVertical.svg create mode 100644 src/components/icon/assets/editorItemAlignBottom.js create mode 100644 src/components/icon/assets/editorItemAlignBottom.svg create mode 100644 src/components/icon/assets/editorItemAlignCenter.js create mode 100644 src/components/icon/assets/editorItemAlignCenter.svg create mode 100644 src/components/icon/assets/editorItemAlignLeft.js create mode 100644 src/components/icon/assets/editorItemAlignLeft.svg create mode 100644 src/components/icon/assets/editorItemAlignMiddle.js create mode 100644 src/components/icon/assets/editorItemAlignMiddle.svg create mode 100644 src/components/icon/assets/editorItemAlignRight.js create mode 100644 src/components/icon/assets/editorItemAlignRight.svg create mode 100644 src/components/icon/assets/editorItemAlignTop.js create mode 100644 src/components/icon/assets/editorItemAlignTop.svg create mode 100644 src/components/icon/assets/editorPositionBottomLeft.js create mode 100644 src/components/icon/assets/editorPositionBottomLeft.svg create mode 100644 src/components/icon/assets/editorPositionBottomRight.js create mode 100644 src/components/icon/assets/editorPositionBottomRight.svg create mode 100644 src/components/icon/assets/editorPositionTopLeft.js create mode 100644 src/components/icon/assets/editorPositionTopLeft.svg create mode 100644 src/components/icon/assets/editorPositionTopRight.js create mode 100644 src/components/icon/assets/editorPositionTopRight.svg diff --git a/CHANGELOG.md b/CHANGELOG.md index 3e6b712fd44..3067c156b3b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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** diff --git a/src-docs/src/views/icon/editor.js b/src-docs/src/views/icon/editor.js new file mode 100644 index 00000000000..7ff493f6b8a --- /dev/null +++ b/src-docs/src/views/icon/editor.js @@ -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 () => ( + + {iconTypes.map(iconType => ( + + + {copy => ( + + + +

{iconType}

+ + + )} + + + ))} + +); diff --git a/src-docs/src/views/icon/icon_example.js b/src-docs/src/views/icon/icon_example.js index dc02d35db1f..05d98d9c59f 100644 --- a/src-docs/src/views/icon/icon_example.js +++ b/src-docs/src/views/icon/icon_example.js @@ -52,6 +52,10 @@ import Apps from './apps'; const appsSource = require('!!raw-loader!./apps'); const appsSnippet = ''; +import Editor from './editor'; +const editorSource = require('!!raw-loader!./editor'); +const editorSnippet = ''; + import Ml from './ml'; const mlSource = require('!!raw-loader!./ml'); const mlSnippet = ''; @@ -134,6 +138,27 @@ export const IconExample = { snippet: iconsSnippet, demo: , }, + { + title: 'Editor controls', + source: [ + { + type: GuideSectionTypes.JS, + code: editorSource, + }, + { + type: GuideSectionTypes.HTML, + code: iconsHtml, + }, + ], + text: ( +

+ Editor icons relate to the visual styling of elements and are + commonly used within EuiButtonGroup components. +

+ ), + snippet: editorSnippet, + demo: , + }, { title: 'Apps', source: [ diff --git a/src-docs/src/views/icon/icons.js b/src-docs/src/views/icon/icons.js index 960b1eac6eb..73db7f649a2 100644 --- a/src-docs/src/views/icon/icons.js +++ b/src-docs/src/views/icon/icons.js @@ -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', diff --git a/src/components/icon/__snapshots__/icon.test.tsx.snap b/src/components/icon/__snapshots__/icon.test.tsx.snap index e579d6d46a3..b7cd6a06bc1 100644 --- a/src/components/icon/__snapshots__/icon.test.tsx.snap +++ b/src/components/icon/__snapshots__/icon.test.tsx.snap @@ -1620,6 +1620,36 @@ exports[`EuiIcon props type editorComment is rendered 1`] = ` `; +exports[`EuiIcon props type editorDistributeHorizontal is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type editorDistributeVertical is rendered 1`] = ` + + + +`; + exports[`EuiIcon props type editorHeading is rendered 1`] = ` `; +exports[`EuiIcon props type editorItemAlignBottom is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type editorItemAlignCenter is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type editorItemAlignLeft is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type editorItemAlignMiddle is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type editorItemAlignRight is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type editorItemAlignTop is rendered 1`] = ` + + + +`; + exports[`EuiIcon props type editorLink is rendered 1`] = ` `; +exports[`EuiIcon props type editorPositionBottomLeft is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type editorPositionBottomRight is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type editorPositionTopLeft is rendered 1`] = ` + + + +`; + +exports[`EuiIcon props type editorPositionTopRight is rendered 1`] = ` + + + +`; + exports[`EuiIcon props type editorRedo is rendered 1`] = ` `; diff --git a/src/components/icon/assets/editorDistributeHorizontal.js b/src/components/icon/assets/editorDistributeHorizontal.js new file mode 100644 index 00000000000..e3abd05b753 --- /dev/null +++ b/src/components/icon/assets/editorDistributeHorizontal.js @@ -0,0 +1,14 @@ +import React from 'react'; + +const EuiIconEditorDistributeHorizontal = props => ( + + + +); + +export const icon = EuiIconEditorDistributeHorizontal; diff --git a/src/components/icon/assets/editorDistributeHorizontal.svg b/src/components/icon/assets/editorDistributeHorizontal.svg new file mode 100644 index 00000000000..5612226ae4c --- /dev/null +++ b/src/components/icon/assets/editorDistributeHorizontal.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icon/assets/editorDistributeVertical.js b/src/components/icon/assets/editorDistributeVertical.js new file mode 100644 index 00000000000..b44631e9f1b --- /dev/null +++ b/src/components/icon/assets/editorDistributeVertical.js @@ -0,0 +1,14 @@ +import React from 'react'; + +const EuiIconEditorDistributeVertical = props => ( + + + +); + +export const icon = EuiIconEditorDistributeVertical; diff --git a/src/components/icon/assets/editorDistributeVertical.svg b/src/components/icon/assets/editorDistributeVertical.svg new file mode 100644 index 00000000000..9579b1130ea --- /dev/null +++ b/src/components/icon/assets/editorDistributeVertical.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icon/assets/editorItemAlignBottom.js b/src/components/icon/assets/editorItemAlignBottom.js new file mode 100644 index 00000000000..929acde0db8 --- /dev/null +++ b/src/components/icon/assets/editorItemAlignBottom.js @@ -0,0 +1,14 @@ +import React from 'react'; + +const EuiIconEditorItemAlignBottom = props => ( + + + +); + +export const icon = EuiIconEditorItemAlignBottom; diff --git a/src/components/icon/assets/editorItemAlignBottom.svg b/src/components/icon/assets/editorItemAlignBottom.svg new file mode 100644 index 00000000000..1967e2a4ba8 --- /dev/null +++ b/src/components/icon/assets/editorItemAlignBottom.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icon/assets/editorItemAlignCenter.js b/src/components/icon/assets/editorItemAlignCenter.js new file mode 100644 index 00000000000..74e7d4f3bd5 --- /dev/null +++ b/src/components/icon/assets/editorItemAlignCenter.js @@ -0,0 +1,14 @@ +import React from 'react'; + +const EuiIconEditorItemAlignCenter = props => ( + + + +); + +export const icon = EuiIconEditorItemAlignCenter; diff --git a/src/components/icon/assets/editorItemAlignCenter.svg b/src/components/icon/assets/editorItemAlignCenter.svg new file mode 100644 index 00000000000..7d810adb7dd --- /dev/null +++ b/src/components/icon/assets/editorItemAlignCenter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icon/assets/editorItemAlignLeft.js b/src/components/icon/assets/editorItemAlignLeft.js new file mode 100644 index 00000000000..a9f86d18216 --- /dev/null +++ b/src/components/icon/assets/editorItemAlignLeft.js @@ -0,0 +1,14 @@ +import React from 'react'; + +const EuiIconEditorItemAlignLeft = props => ( + + + +); + +export const icon = EuiIconEditorItemAlignLeft; diff --git a/src/components/icon/assets/editorItemAlignLeft.svg b/src/components/icon/assets/editorItemAlignLeft.svg new file mode 100644 index 00000000000..192763a5010 --- /dev/null +++ b/src/components/icon/assets/editorItemAlignLeft.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icon/assets/editorItemAlignMiddle.js b/src/components/icon/assets/editorItemAlignMiddle.js new file mode 100644 index 00000000000..7d521f091da --- /dev/null +++ b/src/components/icon/assets/editorItemAlignMiddle.js @@ -0,0 +1,14 @@ +import React from 'react'; + +const EuiIconEditorItemAlignMiddle = props => ( + + + +); + +export const icon = EuiIconEditorItemAlignMiddle; diff --git a/src/components/icon/assets/editorItemAlignMiddle.svg b/src/components/icon/assets/editorItemAlignMiddle.svg new file mode 100644 index 00000000000..35f459a88ae --- /dev/null +++ b/src/components/icon/assets/editorItemAlignMiddle.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icon/assets/editorItemAlignRight.js b/src/components/icon/assets/editorItemAlignRight.js new file mode 100644 index 00000000000..1cf78cf543e --- /dev/null +++ b/src/components/icon/assets/editorItemAlignRight.js @@ -0,0 +1,14 @@ +import React from 'react'; + +const EuiIconEditorItemAlignRight = props => ( + + + +); + +export const icon = EuiIconEditorItemAlignRight; diff --git a/src/components/icon/assets/editorItemAlignRight.svg b/src/components/icon/assets/editorItemAlignRight.svg new file mode 100644 index 00000000000..f000368d3eb --- /dev/null +++ b/src/components/icon/assets/editorItemAlignRight.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icon/assets/editorItemAlignTop.js b/src/components/icon/assets/editorItemAlignTop.js new file mode 100644 index 00000000000..c586857e4b0 --- /dev/null +++ b/src/components/icon/assets/editorItemAlignTop.js @@ -0,0 +1,14 @@ +import React from 'react'; + +const EuiIconEditorItemAlignTop = props => ( + + + +); + +export const icon = EuiIconEditorItemAlignTop; diff --git a/src/components/icon/assets/editorItemAlignTop.svg b/src/components/icon/assets/editorItemAlignTop.svg new file mode 100644 index 00000000000..7cc1d57a1a6 --- /dev/null +++ b/src/components/icon/assets/editorItemAlignTop.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icon/assets/editorPositionBottomLeft.js b/src/components/icon/assets/editorPositionBottomLeft.js new file mode 100644 index 00000000000..f395e23aa23 --- /dev/null +++ b/src/components/icon/assets/editorPositionBottomLeft.js @@ -0,0 +1,14 @@ +import React from 'react'; + +const EuiIconEditorPositionBottomLeft = props => ( + + + +); + +export const icon = EuiIconEditorPositionBottomLeft; diff --git a/src/components/icon/assets/editorPositionBottomLeft.svg b/src/components/icon/assets/editorPositionBottomLeft.svg new file mode 100644 index 00000000000..d9bc9be3491 --- /dev/null +++ b/src/components/icon/assets/editorPositionBottomLeft.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icon/assets/editorPositionBottomRight.js b/src/components/icon/assets/editorPositionBottomRight.js new file mode 100644 index 00000000000..a75318b031e --- /dev/null +++ b/src/components/icon/assets/editorPositionBottomRight.js @@ -0,0 +1,14 @@ +import React from 'react'; + +const EuiIconEditorPositionBottomRight = props => ( + + + +); + +export const icon = EuiIconEditorPositionBottomRight; diff --git a/src/components/icon/assets/editorPositionBottomRight.svg b/src/components/icon/assets/editorPositionBottomRight.svg new file mode 100644 index 00000000000..162e80be7a7 --- /dev/null +++ b/src/components/icon/assets/editorPositionBottomRight.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icon/assets/editorPositionTopLeft.js b/src/components/icon/assets/editorPositionTopLeft.js new file mode 100644 index 00000000000..687df2dc5d8 --- /dev/null +++ b/src/components/icon/assets/editorPositionTopLeft.js @@ -0,0 +1,14 @@ +import React from 'react'; + +const EuiIconEditorPositionTopLeft = props => ( + + + +); + +export const icon = EuiIconEditorPositionTopLeft; diff --git a/src/components/icon/assets/editorPositionTopLeft.svg b/src/components/icon/assets/editorPositionTopLeft.svg new file mode 100644 index 00000000000..74306ead1a6 --- /dev/null +++ b/src/components/icon/assets/editorPositionTopLeft.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icon/assets/editorPositionTopRight.js b/src/components/icon/assets/editorPositionTopRight.js new file mode 100644 index 00000000000..626e94f5854 --- /dev/null +++ b/src/components/icon/assets/editorPositionTopRight.js @@ -0,0 +1,14 @@ +import React from 'react'; + +const EuiIconEditorPositionTopRight = props => ( + + + +); + +export const icon = EuiIconEditorPositionTopRight; diff --git a/src/components/icon/assets/editorPositionTopRight.svg b/src/components/icon/assets/editorPositionTopRight.svg new file mode 100644 index 00000000000..fd5b0fffa51 --- /dev/null +++ b/src/components/icon/assets/editorPositionTopRight.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/icon/assets/popout.js b/src/components/icon/assets/popout.js index 3bb0fc9581f..05650c56aa8 100644 --- a/src/components/icon/assets/popout.js +++ b/src/components/icon/assets/popout.js @@ -7,7 +7,7 @@ const EuiIconPopout = props => ( viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}> - + ); diff --git a/src/components/icon/assets/popout.svg b/src/components/icon/assets/popout.svg index 81854eadcec..6d425445bdf 100644 --- a/src/components/icon/assets/popout.svg +++ b/src/components/icon/assets/popout.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx index bb3240c0900..0848b9cd049 100644 --- a/src/components/icon/icon.tsx +++ b/src/components/icon/icon.tsx @@ -74,10 +74,22 @@ const typeToPathMap = { editorBold: 'editor_bold', editorCodeBlock: 'editor_code_block', editorComment: 'editor_comment', + editorDistributeHorizontal: 'editorDistributeHorizontal', + editorDistributeVertical: 'editorDistributeVertical', editorHeading: 'editor_heading', editorItalic: 'editor_italic', + editorItemAlignLeft: 'editorItemAlignLeft', + editorItemAlignBottom: 'editorItemAlignBottom', + editorItemAlignCenter: 'editorItemAlignCenter', + editorItemAlignMiddle: 'editorItemAlignMiddle', + editorItemAlignRight: 'editorItemAlignRight', + editorItemAlignTop: 'editorItemAlignTop', editorLink: 'editor_link', editorOrderedList: 'editor_ordered_list', + editorPositionBottomLeft: 'editorPositionBottomLeft', + editorPositionBottomRight: 'editorPositionBottomRight', + editorPositionTopLeft: 'editorPositionTopLeft', + editorPositionTopRight: 'editorPositionTopRight', editorRedo: 'editor_redo', editorStrike: 'editor_strike', editorTable: 'editor_table',