From b0e113b197b421ce2bbec21a36af562cf06c46b7 Mon Sep 17 00:00:00 2001
From: "dave.snider@gmail.com" <dave.snider@gmail.com>
Date: Wed, 8 Nov 2017 15:11:54 -0800
Subject: [PATCH] New icons, new sizes for EmptyButton and HRs, un-responsive
 FlexGroups (#126)

* Adds a few new icons.
* Adds `xs` size to our empty buttons (I don't want this applied to regular buttons, which is why I didn't add it there).
* Adds `xs` margin to horizontal rules.
* Adds a responsive prop to `EuiFlexGroup` which disables responsiveness (useful when you use flexgroup more for alignment rather than gridding). Added the prop to a few places that make sense.
---
 .../guide_page/guide_page_chrome.js           | 30 ++++++++------
 src-docs/src/views/button/button_empty.js     | 40 +++++++++++++++++++
 src-docs/src/views/flex/flex_example.js       | 26 ++++++++++++
 src-docs/src/views/flex/flex_responsive.js    | 24 +++++++++++
 .../horizontal_rule/horizontal_rule_margin.js | 13 +++---
 src-docs/src/views/icon/icons.js              |  3 ++
 .../views/side_nav/side_nav_complicated.js    | 18 +++++++--
 .../__snapshots__/accordion.test.js.snap      |  4 +-
 .../button/button_empty/_button_empty.scss    |  5 +++
 .../button/button_empty/button_empty.js       |  1 +
 .../__snapshots__/flex_group.test.js.snap     |  2 +-
 src/components/flex/_flex_group.scss          |  2 +-
 src/components/flex/_flex_item.scss           |  2 +-
 src/components/flex/flex_group.js             |  7 +++-
 .../__snapshots__/header_alert.test.js.snap   |  2 +-
 .../horizontal_rule/_horizontal_rule.scss     |  5 ++-
 .../horizontal_rule/horizontal_rule.js        |  1 +
 .../icon/__snapshots__/icon.test.js.snap      | 39 ++++++++++++++++++
 src/components/icon/assets/invert.svg         |  6 +++
 .../icon/assets/minus_in_circle.svg           |  3 ++
 src/components/icon/assets/pin.svg            |  3 ++
 src/components/icon/icon.js                   |  6 +++
 src/components/popover/_popover.scss          |  1 +
 23 files changed, 212 insertions(+), 31 deletions(-)
 create mode 100644 src-docs/src/views/flex/flex_responsive.js
 create mode 100644 src/components/icon/assets/invert.svg
 create mode 100644 src/components/icon/assets/minus_in_circle.svg
 create mode 100644 src/components/icon/assets/pin.svg

diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js
index 75bbf17390a..27858233d58 100644
--- a/src-docs/src/components/guide_page/guide_page_chrome.js
+++ b/src-docs/src/components/guide_page/guide_page_chrome.js
@@ -9,6 +9,7 @@ import {
 import {
   EuiSideNav,
   EuiIcon,
+  EuiButtonEmpty,
   EuiSideNavItem,
   EuiSideNavTitle,
   EuiFieldSearch,
@@ -62,20 +63,22 @@ export class GuidePageChrome extends Component {
     );
 
     return (
-      <EuiFlexGroup alignItems="center" gutterSize="s">
+      <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
         <EuiFlexItem grow={false}>
           {homeLink}
         </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
-          <EuiText size="s">
-            <button
+            <EuiButtonEmpty
+              size="xs"
               onClick={this.props.onToggleTheme}
               className="euiLink"
+              iconSide="right"
+              color="text"
+              iconType="invert"
             >
-              Theme
-            </button>
-          </EuiText>
+              Flip theme
+          </EuiButtonEmpty>
         </EuiFlexItem>
       </EuiFlexGroup>
     );
@@ -163,6 +166,14 @@ export class GuidePageChrome extends Component {
       <div>
         {this.renderIdentity()}
 
+        <EuiSpacer size="m" />
+        
+        <EuiFieldSearch
+          placeholder="Search..."
+          value={this.state.search}
+          onChange={this.onSearchChange}
+        />
+
         <EuiSpacer size="m" />
 
         <EuiSideNav
@@ -170,13 +181,6 @@ export class GuidePageChrome extends Component {
           toggleOpenOnMobile={this.toggleOpenOnMobile.bind(this)}
           isOpenOnMobile={this.state.isSideNavOpenOnMobile}
         >
-          <EuiFieldSearch
-            placeholder="Search..."
-            value={this.state.search}
-            onChange={this.onSearchChange}
-          />
-
-          <EuiSpacer size="m" />
 
           <EuiSideNavTitle>
             Components
diff --git a/src-docs/src/views/button/button_empty.js b/src-docs/src/views/button/button_empty.js
index c3f9f5ae4b8..000e93f95d3 100644
--- a/src-docs/src/views/button/button_empty.js
+++ b/src-docs/src/views/button/button_empty.js
@@ -21,6 +21,15 @@ export default () => (
       small
     </EuiButtonEmpty>
 
+    &nbsp;&nbsp;
+
+    <EuiButtonEmpty
+      size="xs"
+      onClick={() => window.alert('Button clicked')}
+    >
+      extra small
+    </EuiButtonEmpty>
+
     <br/><br/>
 
     <EuiButtonEmpty
@@ -80,6 +89,16 @@ export default () => (
       small
     </EuiButtonEmpty>
 
+    &nbsp;&nbsp;
+
+    <EuiButtonEmpty
+      color="danger"
+      size="xs"
+      onClick={() => window.alert('Button clicked')}
+    >
+      extra small
+    </EuiButtonEmpty>
+
     <br/><br/>
 
     <EuiButtonEmpty
@@ -143,6 +162,16 @@ export default () => (
       small
     </EuiButtonEmpty>
 
+    &nbsp;&nbsp;
+
+    <EuiButtonEmpty
+      color="text"
+      size="xs"
+      onClick={() => window.alert('Button clicked')}
+    >
+      extra small
+    </EuiButtonEmpty>
+
     <br/><br/>
 
     <EuiButtonEmpty
@@ -208,6 +237,17 @@ export default () => (
       small
     </EuiButtonEmpty>
 
+    &nbsp;&nbsp;
+
+    <EuiButtonEmpty
+      color="danger"
+      size="xs"
+      onClick={() => window.alert('Button clicked')}
+      isDisabled
+    >
+      extra small
+    </EuiButtonEmpty>
+
     <br/><br/>
 
     <EuiButtonEmpty
diff --git a/src-docs/src/views/flex/flex_example.js b/src-docs/src/views/flex/flex_example.js
index 8a698ab09ca..33cb32090e4 100644
--- a/src-docs/src/views/flex/flex_example.js
+++ b/src-docs/src/views/flex/flex_example.js
@@ -52,6 +52,10 @@ import FlexItemPanel from './flex_item_panel';
 const flexItemPanelSource = require('!!raw-loader!./flex_item_panel');
 const flexItemPanelHtml = renderToHtml(FlexItemPanel);
 
+import FlexGroupResponsive from './flex_responsive';
+const flexItemResponsiveSource = require('!!raw-loader!./flex_responsive');
+const flexItemResonsiveHtml = renderToHtml(FlexGroupResponsive);
+
 export default props => (
   <GuidePage title={props.route.name}>
     <EuiCallOut
@@ -253,5 +257,27 @@ export default props => (
         <div className="guideDemo__highlightGrid"><FlexGutter /></div>
       }
     />
+
+    <GuideSection
+      title="FlexGroups can turn off responsive layouts"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: flexGutterSource,
+      }, {
+        type: GuideSectionTypes.HTML,
+        code: flexGutterHtml,
+      }]}
+      text={
+        <p>
+          By default <EuiCode>EuiFlexGroup</EuiCode> is responsive. However, often
+          you only want to use groups for alignment and margins, rather than layouts.
+          Simply apply the <EuiCode>responsive={`{false}`}</EuiCode> prop
+          to retain a single row layout for the group.
+        </p>
+      }
+      demo={
+        <div className="guideDemo__highlightGrid"><FlexGroupResponsive /></div>
+      }
+    />
   </GuidePage>
 );
diff --git a/src-docs/src/views/flex/flex_responsive.js b/src-docs/src/views/flex/flex_responsive.js
new file mode 100644
index 00000000000..25830be977b
--- /dev/null
+++ b/src-docs/src/views/flex/flex_responsive.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiFlexGroup alignItems="center">
+      <EuiFlexItem grow={false}><EuiIcon type="faceSad" /></EuiFlexItem>
+      <EuiFlexItem grow={false}>On mobile, the icon will show above this text.</EuiFlexItem>
+    </EuiFlexGroup>
+
+    <EuiSpacer />
+
+    <EuiFlexGroup responsive={false} alignItems="center">
+      <EuiFlexItem grow={false}><EuiIcon type="faceHappy" /></EuiFlexItem>
+      <EuiFlexItem grow={false}>On mobile, the icon will stay to the left of this text.</EuiFlexItem>
+    </EuiFlexGroup>
+  </div>
+);
diff --git a/src-docs/src/views/horizontal_rule/horizontal_rule_margin.js b/src-docs/src/views/horizontal_rule/horizontal_rule_margin.js
index 2280c608b0c..bf0c750fbe1 100644
--- a/src-docs/src/views/horizontal_rule/horizontal_rule_margin.js
+++ b/src-docs/src/views/horizontal_rule/horizontal_rule_margin.js
@@ -6,16 +6,17 @@ import {
 
 export default () => (
   <div>
-    <p>Small</p>
+    <p>xs</p>
+    <EuiHorizontalRule margin="xs" />
+    <p>s</p>
     <EuiHorizontalRule margin="s" />
-    <p>Medium</p>
+    <p>m</p>
     <EuiHorizontalRule margin="m" />
-    <p>Large</p>
+    <p>l (default)</p>
     <EuiHorizontalRule margin="l" />
-    <p>XLarge</p>
+    <p>xl</p>
     <EuiHorizontalRule margin="xl" />
-    <p>XXLarge</p>
+    <p>xxl</p>
     <EuiHorizontalRule margin="xxl" />
   </div>
 );
-
diff --git a/src-docs/src/views/icon/icons.js b/src-docs/src/views/icon/icons.js
index cdcaeaee0b5..732f8b56220 100644
--- a/src-docs/src/views/icon/icons.js
+++ b/src-docs/src/views/icon/icons.js
@@ -36,13 +36,16 @@ const iconTypes = [
   'gear',
   'grid',
   'help',
+  'invert',
   'link',
   'list',
   'listAdd',
   'lock',
   'mapMarker',
+  'minusInCircle',
   'node',
   'pencil',
+  'pin',
   'plusInCircle',
   'search',
   'shard',
diff --git a/src-docs/src/views/side_nav/side_nav_complicated.js b/src-docs/src/views/side_nav/side_nav_complicated.js
index 10babc04f0d..ca30442958b 100644
--- a/src-docs/src/views/side_nav/side_nav_complicated.js
+++ b/src-docs/src/views/side_nav/side_nav_complicated.js
@@ -39,7 +39,11 @@ export default class extends Component {
         {/* Elasticsearch section */}
 
         <EuiSideNavTitle>
-          <EuiFlexGroup gutterSize="s" alignItems="center">
+          <EuiFlexGroup
+            gutterSize="s"
+            alignItems="center"
+            responsive={false}
+          >
             <EuiFlexItem grow={false}>
               <EuiIcon type="logoElasticSearch" />
             </EuiFlexItem>
@@ -82,7 +86,11 @@ export default class extends Component {
         {/* Kibana section */}
 
         <EuiSideNavTitle>
-          <EuiFlexGroup gutterSize="s" alignItems="center">
+          <EuiFlexGroup
+            gutterSize="s"
+            alignItems="center"
+            responsive={false}
+          >
             <EuiFlexItem grow={false}>
               <EuiIcon type="logoKibana" />
             </EuiFlexItem>
@@ -153,7 +161,11 @@ export default class extends Component {
         {/* Logstash section */}
 
         <EuiSideNavTitle>
-          <EuiFlexGroup gutterSize="s" alignItems="center">
+          <EuiFlexGroup
+            gutterSize="s"
+            alignItems="center"
+            responsive={false}
+          >
             <EuiFlexItem grow={false}>
               <EuiIcon type="logoLogstash" />
             </EuiFlexItem>
diff --git a/src/components/accordion/__snapshots__/accordion.test.js.snap b/src/components/accordion/__snapshots__/accordion.test.js.snap
index 7b514d97118..6dbed35b448 100644
--- a/src/components/accordion/__snapshots__/accordion.test.js.snap
+++ b/src/components/accordion/__snapshots__/accordion.test.js.snap
@@ -7,7 +7,7 @@ exports[`EuiAccordion is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <div
-    class="euiFlexGroup euiFlexGroup--alignItemsCenter"
+    class="euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--responsive"
   >
     <div
       class="euiFlexItem"
@@ -18,7 +18,7 @@ exports[`EuiAccordion is rendered 1`] = `
         class="euiAccordion__button"
       >
         <div
-          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter"
+          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--responsive"
         >
           <div
             class="euiFlexItem euiFlexItem--flexGrowZero"
diff --git a/src/components/button/button_empty/_button_empty.scss b/src/components/button/button_empty/_button_empty.scss
index 6ba22f72856..30bfb693133 100644
--- a/src/components/button/button_empty/_button_empty.scss
+++ b/src/components/button/button_empty/_button_empty.scss
@@ -15,6 +15,11 @@
     height: $euiButtonHeightSmall;
   }
 
+  &.euiButtonEmpty--xSmall {
+    height: $euiSizeL;
+    font-size: $euiFontSizeS;
+  }
+
   &.euiButtonEmpty--iconRight {
     .euiButtonEmpty__content {
       @include euiButtonContent($isReverse: true);
diff --git a/src/components/button/button_empty/button_empty.js b/src/components/button/button_empty/button_empty.js
index ec7e5a6714e..9fede0adee0 100644
--- a/src/components/button/button_empty/button_empty.js
+++ b/src/components/button/button_empty/button_empty.js
@@ -18,6 +18,7 @@ const colorToClassNameMap = {
 export const COLORS = Object.keys(colorToClassNameMap);
 
 const sizeToClassNameMap = {
+  xs: 'euiButtonEmpty--xSmall',
   s: 'euiButtonEmpty--small',
   l: 'euiButtonEmpty--large',
 };
diff --git a/src/components/flex/__snapshots__/flex_group.test.js.snap b/src/components/flex/__snapshots__/flex_group.test.js.snap
index b389bd3d92e..e9cbbd7879d 100644
--- a/src/components/flex/__snapshots__/flex_group.test.js.snap
+++ b/src/components/flex/__snapshots__/flex_group.test.js.snap
@@ -3,7 +3,7 @@
 exports[`EuiFlexGroup is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiFlexGroup euiFlexGroup--gutterLarge testClass1 testClass2"
+  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--responsive testClass1 testClass2"
   data-test-subj="test subject string"
 />
 `;
diff --git a/src/components/flex/_flex_group.scss b/src/components/flex/_flex_group.scss
index 0a924034ad8..fd1db17deaf 100644
--- a/src/components/flex/_flex_group.scss
+++ b/src/components/flex/_flex_group.scss
@@ -57,7 +57,7 @@
 
 
 @include screenXSmall {
-  .euiFlexGroup {
+  .euiFlexGroup--responsive {
     flex-wrap: wrap;
   }
 }
diff --git a/src/components/flex/_flex_item.scss b/src/components/flex/_flex_item.scss
index 08866f3f822..83705bc63ba 100644
--- a/src/components/flex/_flex_item.scss
+++ b/src/components/flex/_flex_item.scss
@@ -17,7 +17,7 @@
 
 // On mobile we force them to stack and act the same.
 @include screenXSmall {
-  .euiFlexItem {
+  .euiFlexGroup--responsive .euiFlexItem {
     width: 100% !important;
     flex-basis: 100% !important;
     margin-left: 0 !important;
diff --git a/src/components/flex/flex_group.js b/src/components/flex/flex_group.js
index c0ecf37c9fb..86176149fe2 100644
--- a/src/components/flex/flex_group.js
+++ b/src/components/flex/flex_group.js
@@ -31,12 +31,15 @@ const justifyContentToClassNameMap = {
 
 export const JUSTIFY_CONTENTS = Object.keys(justifyContentToClassNameMap);
 
-export const EuiFlexGroup = ({ children, className, gutterSize, alignItems, justifyContent, ...rest }) => {
+export const EuiFlexGroup = ({ children, className, gutterSize, alignItems, responsive, justifyContent, ...rest }) => {
   const classes = classNames(
     'euiFlexGroup',
     gutterSizeToClassNameMap[gutterSize],
     alignItemsToClassNameMap[alignItems],
     justifyContentToClassNameMap[justifyContent],
+    {
+      'euiFlexGroup--responsive': responsive,
+    },
     className
   );
 
@@ -53,6 +56,7 @@ export const EuiFlexGroup = ({ children, className, gutterSize, alignItems, just
 EuiFlexGroup.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  responsive: PropTypes.bool,
   gutterSize: PropTypes.oneOf(GUTTER_SIZES),
   alignItems: PropTypes.oneOf(ALIGN_ITEMS),
   justifyContent: PropTypes.oneOf(JUSTIFY_CONTENTS),
@@ -61,5 +65,6 @@ EuiFlexGroup.propTypes = {
 EuiFlexGroup.defaultProps = {
   gutterSize: 'l',
   alignItems: 'stretch',
+  responsive: true,
   justifyContent: 'flexStart',
 };
diff --git a/src/components/header/header_alert/__snapshots__/header_alert.test.js.snap b/src/components/header/header_alert/__snapshots__/header_alert.test.js.snap
index a268f1626e0..bf9051d793d 100644
--- a/src/components/header/header_alert/__snapshots__/header_alert.test.js.snap
+++ b/src/components/header/header_alert/__snapshots__/header_alert.test.js.snap
@@ -32,7 +32,7 @@ exports[`EuiHeaderAlert is rendered 1`] = `
     class="euiHeaderAlert__text"
   />
   <div
-    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween"
+    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--responsive"
   >
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
diff --git a/src/components/horizontal_rule/_horizontal_rule.scss b/src/components/horizontal_rule/_horizontal_rule.scss
index b8f070a1a5f..5eca2cc5287 100644
--- a/src/components/horizontal_rule/_horizontal_rule.scss
+++ b/src/components/horizontal_rule/_horizontal_rule.scss
@@ -21,8 +21,9 @@
 }
 
 $ruleMargins: (
-  marginSmall: $euiSizeS,
-  marginMedium: $euiSizeM,
+  marginXSmall: $euiSizeS,
+  marginSmall: $euiSizeM,
+  marginMedium: $euiSize,
   marginLarge: $euiSizeL,
   marginXLarge: $euiSizeXL,
   marginXXLarge: $euiSizeXXL,
diff --git a/src/components/horizontal_rule/horizontal_rule.js b/src/components/horizontal_rule/horizontal_rule.js
index a30ed4ea631..9ce7cc6a128 100644
--- a/src/components/horizontal_rule/horizontal_rule.js
+++ b/src/components/horizontal_rule/horizontal_rule.js
@@ -12,6 +12,7 @@ export const SIZES = Object.keys(sizeToClassNameMap);
 
 const marginToClassNameMap = {
   none: null,
+  xs: 'euiHorizontalRule--marginXSmall',
   s: 'euiHorizontalRule--marginSmall',
   m: 'euiHorizontalRule--marginMedium',
   l: 'euiHorizontalRule--marginLarge',
diff --git a/src/components/icon/__snapshots__/icon.test.js.snap b/src/components/icon/__snapshots__/icon.test.js.snap
index 7ce1fb251ae..e5663d41dc7 100644
--- a/src/components/icon/__snapshots__/icon.test.js.snap
+++ b/src/components/icon/__snapshots__/icon.test.js.snap
@@ -496,6 +496,19 @@ exports[`EuiIcon renders type help 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon renders type invert 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+>
+  <title>
+    invert icon
+  </title>
+  <use
+    href="#invert"
+  />
+</svg>
+`;
+
 exports[`EuiIcon renders type link 1`] = `
 <svg
   class="euiIcon euiIcon--medium"
@@ -730,6 +743,19 @@ exports[`EuiIcon renders type mapMarker 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon renders type minusInCircle 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+>
+  <title>
+    minus in circle icon
+  </title>
+  <use
+    href="#minus_in_circle"
+  />
+</svg>
+`;
+
 exports[`EuiIcon renders type monitoringApp 1`] = `
 <svg
   class="euiIcon euiIcon--medium"
@@ -769,6 +795,19 @@ exports[`EuiIcon renders type pencil 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon renders type pin 1`] = `
+<svg
+  class="euiIcon euiIcon--medium"
+>
+  <title>
+    pin icon
+  </title>
+  <use
+    href="#pin"
+  />
+</svg>
+`;
+
 exports[`EuiIcon renders type plusInCircle 1`] = `
 <svg
   class="euiIcon euiIcon--medium"
diff --git a/src/components/icon/assets/invert.svg b/src/components/icon/assets/invert.svg
new file mode 100644
index 00000000000..87c3cf1d31f
--- /dev/null
+++ b/src/components/icon/assets/invert.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <g transform="translate(2 2)">
+    <path d="M6,11.25 C8.8994949,11.25 11.25,8.8994949 11.25,6 C11.25,3.10050506 8.8994949,0.75 6,0.75 C3.10050506,0.75 0.75,3.10050506 0.75,6 C0.75,8.8994949 3.10050506,11.25 6,11.25 Z M6,12 C2.6862915,12 0,9.3137085 0,6 C0,2.6862915 2.6862915,0 6,0 C9.3137085,0 12,2.6862915 12,6 C12,9.3137085 9.3137085,12 6,12 Z"/>
+    <path d="M6,0 C2.6862915,0 0,2.6862915 0,6 C0,9.3137085 2.6862915,12 6,12 L6,0 Z"/>
+  </g>
+</svg>
diff --git a/src/components/icon/assets/minus_in_circle.svg b/src/components/icon/assets/minus_in_circle.svg
new file mode 100644
index 00000000000..fd2689836c9
--- /dev/null
+++ b/src/components/icon/assets/minus_in_circle.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M7.5,14 C11.0898509,14 14,11.0898509 14,7.5 C14,3.91014913 11.0898509,1 7.5,1 C3.91014913,1 1,3.91014913 1,7.5 C1,11.0898509 3.91014913,14 7.5,14 Z M7.5,15 C3.35786438,15 0,11.6421356 0,7.5 C0,3.35786438 3.35786438,0 7.5,0 C11.6421356,0 15,3.35786438 15,7.5 C15,11.6421356 11.6421356,15 7.5,15 Z M3.5,7 L11.5,7 L11.5,7 C11.7761424,7 12,7.22385763 12,7.5 L12,7.5 L12,7.5 C12,7.77614237 11.7761424,8 11.5,8 L3.5,8 L3.5,8 C3.22385763,8 3,7.77614237 3,7.5 L3,7.5 L3,7.5 C3,7.22385763 3.22385763,7 3.5,7 Z"/>
+</svg>
diff --git a/src/components/icon/assets/pin.svg b/src/components/icon/assets/pin.svg
new file mode 100644
index 00000000000..1ef278960b2
--- /dev/null
+++ b/src/components/icon/assets/pin.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M6,10 L10.5,10 C10.7761424,10 11,9.77614237 11,9.5 C11,9.22385763 10.7761424,9 10.5,9 L0.5,9 L0.5,9 C0.223857625,9 -3.38176876e-17,9.22385763 0,9.5 C3.38176876e-17,9.77614237 0.223857625,10 0.5,10 L5,10 L5,14.25 C5,14.6642136 5.22385763,15 5.5,15 C5.77614237,15 6,14.6642136 6,14.25 L6,10 Z M2,3 L3,3 L3,9 L2,9 L2,3 Z M8,3 L9,3 L9,9 L8,9 L8,3 Z M2.28571429,1 C2.08072994,1 2,1.06278995 2,1 L2,2 C2,1.93721005 2.08072994,2 2.28571429,2 L8.71428571,2 C8.91927006,2 9,1.93721005 9,2 L9,1 C9,1.06278995 8.91927006,1 8.71428571,1 L2.28571429,1 Z M2.28571429,0 L8.71428571,0 C9.42436611,0 10,0.44771525 10,1 L10,2 C10,2.55228475 9.42436611,3 8.71428571,3 L2.28571429,3 C1.57563389,3 1,2.55228475 1,2 L1,1 C1,0.44771525 1.57563389,0 2.28571429,0 Z" transform="translate(2 1)"/>
+</svg>
diff --git a/src/components/icon/icon.js b/src/components/icon/icon.js
index 512ec9498c0..e9002288cf5 100644
--- a/src/components/icon/icon.js
+++ b/src/components/icon/icon.js
@@ -39,6 +39,7 @@ import './assets/full_screen.svg';
 import './assets/gear.svg';
 import './assets/grid.svg';
 import './assets/help.svg';
+import './assets/invert.svg';
 import './assets/link.svg';
 import './assets/list_add.svg';
 import './assets/list.svg';
@@ -55,8 +56,10 @@ import './assets/logo_webhook.svg';
 import './assets/logo_xpack.svg';
 import './assets/logo_kibana.svg';
 import './assets/map_marker.svg';
+import './assets/minus_in_circle.svg';
 import './assets/node.svg';
 import './assets/pencil.svg';
+import './assets/pin.svg';
 import './assets/plus_in_circle.svg';
 import './assets/search.svg';
 import './assets/shard.svg';
@@ -106,6 +109,7 @@ const typeToIconMap = {
   graphApp: 'app_graph',
   grid: 'grid',
   help: 'help',
+  invert: 'invert',
   link: 'link',
   list: 'list',
   listAdd: 'list_add',
@@ -124,9 +128,11 @@ const typeToIconMap = {
   logoXpack: 'logo_xpack',
   machineLearningApp: 'app_ml',
   mapMarker: 'map_marker',
+  minusInCircle: 'minus_in_circle',
   monitoringApp: 'app_monitoring',
   node: 'node',
   pencil: 'pencil',
+  pin: 'pin',
   plusInCircle: 'plus_in_circle',
   search: 'search',
   shard: 'shard',
diff --git a/src/components/popover/_popover.scss b/src/components/popover/_popover.scss
index d01aedd2778..bda365e01a8 100644
--- a/src/components/popover/_popover.scss
+++ b/src/components/popover/_popover.scss
@@ -7,6 +7,7 @@
 .euiPopover {
   display: inline-block;
   position: relative;
+  vertical-align: middle;
 
   // Open state happens on the wrapper and applies to the panel.
   &.euiPopover-isOpen {