Updated and added some icons (#1374)

elastic · Dec 18, 2018 · fc3c790 · fc3c790
1 parent a9ea522
commit fc3c790
Show file tree

Hide file tree

Showing 74 changed files with 575 additions and 681 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 - Added `onFocus` prop to `EuiComboBox` ([#1375](https://github.com/elastic/eui/pull/1375))
 - Added `DisambiguateSet` and `ExclusiveUnion` utility types ([#1368](https://github.com/elastic/eui/pull/1368))
 - Added `EuiSuperDatePicker` component ([#1351](https://github.com/elastic/eui/pull/1351))
+- Altered a few icons and added more: `crossInACircleFilled`, `editorRedo`, `editorUndo`, `grabHorizontal`, `minusInCircleFilled`, `plusInCircleFilled`, `sortable`, `starEmptySpace`, `starFilledSpace`, `starFilled`, `starMinusEmpty`, `starMinusFilled`, `starPlusEmpty`, `pinFilled` ([#1374](https://github.com/elastic/eui/pull/1374))
 
 **Bug fixes**
 

diff --git a/src-docs/src/views/button/button_toggle.js b/src-docs/src/views/button/button_toggle.js
@@ -36,7 +36,7 @@ export default class extends Component {
       <div>
         <EuiButtonToggle
           label="Toggle Me"
-          iconType={this.state.toggle0On ? 'check' : 'cross'}
+          iconType={this.state.toggle0On ? 'starPlusEmpty' : 'starFilledSpace'}
           onChange={this.onToggle0Change}
           isSelected={this.state.toggle0On}
         />

diff --git a/src-docs/src/views/icon/icons.js b/src-docs/src/views/icon/icons.js
@@ -37,6 +37,7 @@ const iconTypes = [
   'copyClipboard',
   'cross',
   'crosshairs',
+  'crossInACircleFilled',
   'database',
   'document',
   'dot',
@@ -49,10 +50,12 @@ const iconTypes = [
   'editorHeading',
   'editorItalic',
   'editorLink',
+  'editorOrderedList',
+  'editorRedo',
   'editorStrike',
   'editorTable',
   'editorUnderline',
-  'editorOrderedList',
+  'editorUndo',
   'editorUnorderedList',
   'email',
   'empty',
@@ -71,6 +74,7 @@ const iconTypes = [
   'gear',
   'globe',
   'grab',
+  'grabHorizontal',
   'grid',
   'heatmap',
   'help',
@@ -82,14 +86,14 @@ const iconTypes = [
   'indexMapping',
   'indexOpen',
   'indexSettings',
+  'inputOutput',
   'inspect',
   'invert',
-  'inputOutput',
   'kqlField',
-  'kqlOperand',
-  'kqlValue',
   'kqlFunction',
+  'kqlOperand',
   'kqlSelector',
+  'kqlValue',
   'link',
   'list',
   'listAdd',
@@ -101,9 +105,10 @@ const iconTypes = [
   'logstashOutput',
   'logstashQueue',
   'mapMarker',
-  'merge',
   'memory',
+  'merge',
   'minusInCircle',
+  'minusInCircleFilled',
   'node',
   'number',
   'offline',
@@ -113,6 +118,7 @@ const iconTypes = [
   'pin',
   'play',
   'plusInCircle',
+  'plusInCircleFilled',
   'popout',
   'questionInCircle',
   'refresh',
@@ -121,25 +127,32 @@ const iconTypes = [
   'search',
   'shard',
   'share',
+  'sortable',
   'sortDown',
   'sortLeft',
   'sortRight',
   'sortUp',
   'starEmpty',
+  'starEmptySpace',
+  'starFilled',
+  'starFilledSpace',
+  'starMinusEmpty',
+  'starMinusFilled',
+  'starPlusEmpty',
   'starPlusFilled',
   'stats',
   'stop',
   'stopFilled',
   'storage',
   'string',
-  'temperature',
   'tableOfContents',
   'tag',
   'tear',
+  'temperature',
   'trash',
+  'pinFilled',
   'user',
   'vector',
-  'wrench',
   'visArea',
   'visBarHorizontal',
   'visBarVertical',
@@ -157,7 +170,9 @@ const iconTypes = [
   'visText',
   'visTimelion',
   'visVega',
-  'visVisualBuilder'
+  'visVisualBuilder',
+  'wrench',
+  'wrench',
 ];
 
 export default () => (

diff --git a/src/components/flyout/__snapshots__/flyout.test.js.snap b/src/components/flyout/__snapshots__/flyout.test.js.snap
@@ -23,18 +23,10 @@ exports[`EuiFlyout is rendered 1`] = `
           height="16"
           viewBox="0 0 16 16"
           width="16"
-          xlink="http://www.w3.org/1999/xlink"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <defs>
-            <path
-              d="M7.293 8l-4.147 4.146a.5.5 0 0 0 .708.708L8 8.707l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 8l4.147-4.146a.5.5 0 0 0-.708-.708L8 7.293 3.854 3.146a.5.5 0 1 0-.708.708L7.293 8z"
-              id="cross-a"
-            />
-          </defs>
-          <use
-            fill-rule="nonzero"
-            href="#cross-a"
+          <path
+            d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
           />
         </svg>
       </button>
@@ -65,18 +57,10 @@ exports[`EuiFlyout max width can be set to a custom number 1`] = `
           height="16"
           viewBox="0 0 16 16"
           width="16"
-          xlink="http://www.w3.org/1999/xlink"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <defs>
-            <path
-              d="M7.293 8l-4.147 4.146a.5.5 0 0 0 .708.708L8 8.707l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 8l4.147-4.146a.5.5 0 0 0-.708-.708L8 7.293 3.854 3.146a.5.5 0 1 0-.708.708L7.293 8z"
-              id="cross-a"
-            />
-          </defs>
-          <use
-            fill-rule="nonzero"
-            href="#cross-a"
+          <path
+            d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
           />
         </svg>
       </button>
@@ -107,18 +91,10 @@ exports[`EuiFlyout max width can be set to a custom value and measurement 1`] =
           height="16"
           viewBox="0 0 16 16"
           width="16"
-          xlink="http://www.w3.org/1999/xlink"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <defs>
-            <path
-              d="M7.293 8l-4.147 4.146a.5.5 0 0 0 .708.708L8 8.707l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 8l4.147-4.146a.5.5 0 0 0-.708-.708L8 7.293 3.854 3.146a.5.5 0 1 0-.708.708L7.293 8z"
-              id="cross-a"
-            />
-          </defs>
-          <use
-            fill-rule="nonzero"
-            href="#cross-a"
+          <path
+            d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
           />
         </svg>
       </button>
@@ -148,18 +124,10 @@ exports[`EuiFlyout max width can be set to a default 1`] = `
           height="16"
           viewBox="0 0 16 16"
           width="16"
-          xlink="http://www.w3.org/1999/xlink"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <defs>
-            <path
-              d="M7.293 8l-4.147 4.146a.5.5 0 0 0 .708.708L8 8.707l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 8l4.147-4.146a.5.5 0 0 0-.708-.708L8 7.293 3.854 3.146a.5.5 0 1 0-.708.708L7.293 8z"
-              id="cross-a"
-            />
-          </defs>
-          <use
-            fill-rule="nonzero"
-            href="#cross-a"
+          <path
+            d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
           />
         </svg>
       </button>
@@ -201,18 +169,10 @@ exports[`EuiFlyout size l is rendered 1`] = `
           height="16"
           viewBox="0 0 16 16"
           width="16"
-          xlink="http://www.w3.org/1999/xlink"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <defs>
-            <path
-              d="M7.293 8l-4.147 4.146a.5.5 0 0 0 .708.708L8 8.707l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 8l4.147-4.146a.5.5 0 0 0-.708-.708L8 7.293 3.854 3.146a.5.5 0 1 0-.708.708L7.293 8z"
-              id="cross-a"
-            />
-          </defs>
-          <use
-            fill-rule="nonzero"
-            href="#cross-a"
+          <path
+            d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
           />
         </svg>
       </button>
@@ -242,18 +202,10 @@ exports[`EuiFlyout size m is rendered 1`] = `
           height="16"
           viewBox="0 0 16 16"
           width="16"
-          xlink="http://www.w3.org/1999/xlink"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <defs>
-            <path
-              d="M7.293 8l-4.147 4.146a.5.5 0 0 0 .708.708L8 8.707l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 8l4.147-4.146a.5.5 0 0 0-.708-.708L8 7.293 3.854 3.146a.5.5 0 1 0-.708.708L7.293 8z"
-              id="cross-a"
-            />
-          </defs>
-          <use
-            fill-rule="nonzero"
-            href="#cross-a"
+          <path
+            d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
           />
         </svg>
       </button>
@@ -283,18 +235,10 @@ exports[`EuiFlyout size s is rendered 1`] = `
           height="16"
           viewBox="0 0 16 16"
           width="16"
-          xlink="http://www.w3.org/1999/xlink"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <defs>
-            <path
-              d="M7.293 8l-4.147 4.146a.5.5 0 0 0 .708.708L8 8.707l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 8l4.147-4.146a.5.5 0 0 0-.708-.708L8 7.293 3.854 3.146a.5.5 0 1 0-.708.708L7.293 8z"
-              id="cross-a"
-            />
-          </defs>
-          <use
-            fill-rule="nonzero"
-            href="#cross-a"
+          <path
+            d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
           />
         </svg>
       </button>

diff --git a/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap b/src/components/form/form_control_layout/__snapshots__/form_control_layout.test.js.snap
@@ -35,18 +35,10 @@ exports[`EuiFormControlLayout props clear onClick is rendered 1`] = `
           height="16"
           viewBox="0 0 16 16"
           width="16"
-          xlink="http://www.w3.org/1999/xlink"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <defs>
-            <path
-              d="M7.293 8l-4.147 4.146a.5.5 0 0 0 .708.708L8 8.707l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 8l4.147-4.146a.5.5 0 0 0-.708-.708L8 7.293 3.854 3.146a.5.5 0 1 0-.708.708L7.293 8z"
-              id="cross-a"
-            />
-          </defs>
-          <use
-            fill-rule="nonzero"
-            href="#cross-a"
+          <path
+            d="M7.293 8L3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8z"
           />
         </svg>
       </button>
@@ -87,16 +79,10 @@ exports[`EuiFormControlLayout props icon is rendered as a string 1`] = `
           width="16"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <g
+          <path
+            d="M8.378 1.496l6.695 10.984A1 1 0 0 1 14.22 14H1.667a1 1 0 0 1-.883-1.47L6.642 1.545a1 1 0 0 1 1.736-.05zm-.853.52L1.667 13h12.552L7.525 2.016zM7.14 10.06L6.9 5.18h1.3l-.25 4.878h-.81zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184z"
             fill-rule="evenodd"
-          >
-            <path
-              d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
-            />
-            <path
-              d="M7 6h1v5H7zM7 12h1v1H7z"
-            />
-          </g>
+          />
         </svg>
       </span>
     </div>
@@ -127,16 +113,10 @@ exports[`EuiFormControlLayout props icon is rendered as an object 1`] = `
           width="16"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <g
+          <path
+            d="M8.378 1.496l6.695 10.984A1 1 0 0 1 14.22 14H1.667a1 1 0 0 1-.883-1.47L6.642 1.545a1 1 0 0 1 1.736-.05zm-.853.52L1.667 13h12.552L7.525 2.016zM7.14 10.06L6.9 5.18h1.3l-.25 4.878h-.81zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184z"
             fill-rule="evenodd"
-          >
-            <path
-              d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
-            />
-            <path
-              d="M7 6h1v5H7zM7 12h1v1H7z"
-            />
-          </g>
+          />
         </svg>
       </span>
     </div>
@@ -166,16 +146,10 @@ exports[`EuiFormControlLayout props icon side left is rendered 1`] = `
           width="16"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <g
+          <path
+            d="M8.378 1.496l6.695 10.984A1 1 0 0 1 14.22 14H1.667a1 1 0 0 1-.883-1.47L6.642 1.545a1 1 0 0 1 1.736-.05zm-.853.52L1.667 13h12.552L7.525 2.016zM7.14 10.06L6.9 5.18h1.3l-.25 4.878h-.81zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184z"
             fill-rule="evenodd"
-          >
-            <path
-              d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
-            />
-            <path
-              d="M7 6h1v5H7zM7 12h1v1H7z"
-            />
-          </g>
+          />
         </svg>
       </span>
     </div>
@@ -205,16 +179,10 @@ exports[`EuiFormControlLayout props icon side right is rendered 1`] = `
           width="16"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <g
+          <path
+            d="M8.378 1.496l6.695 10.984A1 1 0 0 1 14.22 14H1.667a1 1 0 0 1-.883-1.47L6.642 1.545a1 1 0 0 1 1.736-.05zm-.853.52L1.667 13h12.552L7.525 2.016zM7.14 10.06L6.9 5.18h1.3l-.25 4.878h-.81zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184z"
             fill-rule="evenodd"
-          >
-            <path
-              d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
-            />
-            <path
-              d="M7 6h1v5H7zM7 12h1v1H7z"
-            />
-          </g>
+          />
         </svg>
       </span>
     </div>

diff --git a/src/components/form/form_control_layout/_mixins.scss b/src/components/form/form_control_layout/_mixins.scss
@@ -29,7 +29,7 @@
     @include size($euiSizeS);
     fill: $euiColorEmptyShade;
     stroke: $euiColorEmptyShade;
-    stroke-width: 3px; // increase thickness of icon at such a small size
+    stroke-width: 2px; // increase thickness of icon at such a small size
   }
 }
 
@@ -38,4 +38,4 @@
 @mixin euiFormControlLayout__padding($numOfIcons, $side: 'right') { // sass-lint:disable-line mixin-name-format
   @include euiFormControlLayoutPadding($numOfIcons, $side: 'right');
   @warn '@mixin euiFormControlLayout__padding is deprecated, please use euiFormControlLayoutPadding instead';
-}
+}