elastic · cchaos · Jul 13, 2018 · Jul 12, 2018 · Jul 12, 2018 · Jul 12, 2018
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,14 +1,22 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Fixed `EuiHeader` responsive styles ([#1009](https://github.com/elastic/eui/pull/1009))
+
+**Breaking changes**
+
+- Moved `EuiHeaderNotification` to a generic `EuiNotificationBadge` component ([#1009](https://github.com/elastic/eui/pull/1009))
+
 **Bug fixes**
 
 - `EuiInMemoryTable` no longer resets to the first page on prop update when `items` remains the same ([#1008](https://github.com/elastic/eui/pull/1008))
+- Fixed css selector for hiding responsive `EuiBreadcrumb`'s ([#1009](https://github.com/elastic/eui/pull/1009))
+- Fixed responsive utility classes for IE ([#1009](https://github.com/elastic/eui/pull/1009))
 
 ## [`2.0.0`](https://github.com/elastic/eui/tree/v2.0.0)
 
-- Add more typings to `EuiContextMenuItemProps` ([#1006](https://github.com/elastic/eui/pull/1006))
-- Make some proprties of `EuiFlyout` optional ([#1003](https://github.com/elastic/eui/pull/1003))
-- Add typings for `EuiFlyout`, `EuiFlyoutBody`, `EuiFlyoutHeader`, and `EuiFlyoutFooter` ([#1001](https://github.com/elastic/eui/pull/1001))
+- Added more typings to `EuiContextMenuItemProps` ([#1006](https://github.com/elastic/eui/pull/1006))
+- Made some properties of `EuiFlyout` optional ([#1003](https://github.com/elastic/eui/pull/1003))
+- Added typings for `EuiFlyout`, `EuiFlyoutBody`, `EuiFlyoutHeader`, and `EuiFlyoutFooter` ([#1001](https://github.com/elastic/eui/pull/1001))
 - Gave `EuiFlyout` close button a data-test-subj ([#1000](https://github.com/elastic/eui/pull/1000))
 - Updated `react-vis` version to `1.10.2`. ([#999](https://github.com/elastic/eui/pull/999))
 

diff --git a/src-docs/src/views/badge/badge_example.js b/src-docs/src/views/badge/badge_example.js
@@ -11,6 +11,7 @@ import {
   EuiCode,
   EuiBetaBadge,
   EuiLink,
+  EuiNotificationBadge,
 } from '../../../../src/components';
 
 import Badge from './badge';
@@ -29,6 +30,10 @@ import BetaBadge from './beta_badge';
 const betaBadgeSource = require('!!raw-loader!./beta_badge');
 const betaBadgeHtml = renderToHtml(BetaBadge);
 
+import NotificationBadge from './notification_badge';
+const notificationBadgeSource = require('!!raw-loader!./notification_badge');
+const notificationBadgeHtml = renderToHtml(NotificationBadge);
+
 export const BadgeExample = {
   title: 'Badge',
   sections: [{
@@ -113,5 +118,23 @@ export const BadgeExample = {
     ),
     props: { EuiBetaBadge },
     demo: <BetaBadge />,
+  }, {
+    title: 'Notification badge type',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: notificationBadgeSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: notificationBadgeHtml,
+    }],
+    text: (
+      <p>
+        Used to showcase the number of notifications, alerts or hidden selections.
+        Typically used in <EuiLink href="/#/layout/header">EuiHeader</EuiLink> or
+        (eventually) <EuiLink href="/#/forms/filter-group">EuiFilterButtons</EuiLink>.
+      </p>
+    ),
+    props: { EuiNotificationBadge },
+    demo: <NotificationBadge />,
   }],
 };
diff --git a/src-docs/src/views/badge/notification_badge.js b/src-docs/src/views/badge/notification_badge.js
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import {
+  EuiNotificationBadge,
+} from '../../../../src/components';
+
+export default () => (
+  <EuiNotificationBadge>
+    3
+  </EuiNotificationBadge>
+);
diff --git a/src-docs/src/views/breadcrumbs/responsive.js b/src-docs/src/views/breadcrumbs/responsive.js
@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import {
   EuiBreadcrumbs,
+  EuiShowFor,
+  EuiText,
 } from '../../../../src/components';
 
 export default () => {
@@ -30,5 +32,15 @@ export default () => {
     text: 'Nebulosa subspecies',
   }];
 
-  return <EuiBreadcrumbs breadcrumbs={breadcrumbs} max={null} />;
+  return (
+    <Fragment>
+      <EuiBreadcrumbs breadcrumbs={breadcrumbs} max={null} />
+
+      <EuiShowFor sizes={['xs', 's']}>
+        <EuiText size="s" color="subdued">
+          <p><em>Responsive breadcrumbs do not show at all on small (mobile) screens.</em></p>
+        </EuiText>
+      </EuiShowFor>
+    </Fragment>
+  );
 };
diff --git a/src-docs/src/views/breadcrumbs/truncate.js b/src-docs/src/views/breadcrumbs/truncate.js
@@ -15,5 +15,5 @@ export default () => {
     text: 'Nebulosa subspecies',
   }];
 
-  return <EuiBreadcrumbs breadcrumbs={breadcrumbs} />;
+  return <EuiBreadcrumbs responsive={false} breadcrumbs={breadcrumbs} />;
 };
diff --git a/src-docs/src/views/header/header.js b/src-docs/src/views/header/header.js
@@ -14,31 +14,16 @@ import {
 
 import HeaderAppMenu from './header_app_menu';
 import HeaderUserMenu from './header_user_menu';
+import HeaderSpacesMenu from './header_spaces_menu';
 
 export default class extends Component {
   constructor(props) {
     super(props);
-
-    this.state = {
-      isAppMenuOpen: false,
-    };
-  }
-
-  onAppMenuButtonClick() {
-    this.setState({
-      isAppMenuOpen: !this.state.isAppMenuOpen,
-    });
-  }
-
-  closeAppMenu() {
-    this.setState({
-      isAppMenuOpen: false,
-    });
   }
 
   renderLogo() {
     return (
-      <EuiHeaderLogo href="#" aria-label="Go to home page" />
+      <EuiHeaderLogo iconType="logoKibana" href="#" aria-label="Go to home page" />
     );
   }
 
@@ -88,6 +73,9 @@ export default class extends Component {
           <EuiHeaderSectionItem border="right">
             {this.renderLogo()}
           </EuiHeaderSectionItem>
+          <EuiHeaderSectionItem border="right">
+            <HeaderSpacesMenu />
+          </EuiHeaderSectionItem>
 
           {this.renderBreadcrumbs()}
         </EuiHeaderSection>

diff --git a/src-docs/src/views/header/header_app_menu.js b/src-docs/src/views/header/header_app_menu.js
@@ -52,9 +52,8 @@ export default class extends Component {
         isOpen={this.state.isOpen}
         anchorPosition="downRight"
         closePopover={this.closeMenu}
-        panelClassName="euiHeaderPopover"
       >
-        <EuiKeyPadMenu id="keyPadMenu">
+        <EuiKeyPadMenu id="keyPadMenu" style={{ width: 288 }}>
           <EuiKeyPadMenuItem
             label="Discover"
             href="#"

diff --git a/src-docs/src/views/header/header_spaces_menu.js b/src-docs/src/views/header/header_spaces_menu.js
@@ -0,0 +1,98 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  EuiHeaderSectionItemButton,
+  EuiContextMenuPanel,
+  EuiContextMenuItem,
+  EuiPopover,
+  EuiButton,
+  EuiAvatar,
+} from '../../../../src/components';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      isOpen: false,
+    };
+  }
+
+  onMenuButtonClick = () => {
+    this.setState({
+      isOpen: !this.state.isOpen,
+    });
+  };
+
+  closeMenu = () => {
+    this.setState({
+      isOpen: false,
+    });
+  };
+
+  render() {
+    const button = (
+      <EuiHeaderSectionItemButton
+        aria-controls="headerSpacesMenuList"
+        aria-expanded={this.state.isOpen}
+        aria-haspopup="true"
+        aria-label="Apps menu"
+        onClick={this.onMenuButtonClick}
+      >
+        <EuiAvatar type="space" size="s" name="Sales Team" />
+      </EuiHeaderSectionItemButton>
+    );
+
+    const items = [
+      (
+        <EuiContextMenuItem
+          key="Sales Team"
+          icon={(<EuiAvatar type="space" name="Sales Team" size="s" />)}
+          onClick={() => { this.closeMenu(); }}
+        >
+          Sales Team
+        </EuiContextMenuItem>
+      ), (
+        <EuiContextMenuItem
+          key="Engineering"
+          icon={(<EuiAvatar type="space" name="Engineering" size="s" />)}
+          onClick={() => { this.closeMenu(); }}
+        >
+          Engineering
+        </EuiContextMenuItem>
+      ), (
+        <EuiContextMenuItem
+          key="Security"
+          icon={(<EuiAvatar type="space" name="Security" size="s" initialsLength={2} />)}
+          onClick={() => { this.closeMenu(); }}
+        >
+          Security
+        </EuiContextMenuItem>
+      ), (
+        <div className="euiContextMenuItem">
+          <EuiButton size="s" style={{ width: `100%` }}>Manage spaces</EuiButton>
+        </div>
+      )
+    ];
+
+    return (
+      <EuiPopover
+        id="headerSpacesMenu"
+        ownFocus
+        button={button}
+        isOpen={this.state.isOpen}
+        anchorPosition="downLeft"
+        closePopover={this.closeMenu}
+        panelPaddingSize="none"
+      >
+        <EuiContextMenuPanel
+          id="headerSpacesMenuList"
+          title="Change current space"
+          items={items}
+        />
+      </EuiPopover>
+    );
+  }
+}
diff --git a/src-docs/src/views/header/header_user_menu.js b/src-docs/src/views/header/header_user_menu.js
@@ -8,8 +8,7 @@ import {
   EuiFlexItem,
   EuiHeaderAlert,
   EuiHeaderSectionItemButton,
-  EuiHeaderNotification,
-  EuiIcon,
+  EuiNotificationBadge,
   EuiLink,
   EuiText,
   EuiSpacer,
@@ -46,12 +45,9 @@ export default class extends Component {
         aria-label="Account menu"
         onClick={this.onMenuButtonClick}
       >
-        <EuiIcon
-          type="user"
-          size="m"
-        />
+        <EuiAvatar name="John Username" size="s" />
 
-        <EuiHeaderNotification>3</EuiHeaderNotification>
+        <EuiNotificationBadge className="euiHeaderNotification">3</EuiNotificationBadge>
       </EuiHeaderSectionItemButton>
     );
 
@@ -63,55 +59,57 @@ export default class extends Component {
         isOpen={this.state.isOpen}
         anchorPosition="downRight"
         closePopover={this.closeMenu}
-        panelClassName="euiHeaderPopover"
+        panelPaddingSize="none"
       >
-        <EuiFlexGroup gutterSize="m" className="euiHeaderProfile eui--flexRow eui--flexAlignItemsCenter">
-          <EuiFlexItem grow={false}>
-            <EuiAvatar name="John Username" size="xl" />
-          </EuiFlexItem>
+        <div style={{ width: 320 }}>
+          <EuiFlexGroup gutterSize="m" className="euiHeaderProfile" responsive={false}>
+            <EuiFlexItem grow={false}>
+              <EuiAvatar name="John Username" size="xl" />
+            </EuiFlexItem>
 
-          <EuiFlexItem>
-            <EuiText>
-              <p>John Username</p>
-            </EuiText>
+            <EuiFlexItem>
+              <EuiText>
+                <p>John Username</p>
+              </EuiText>
 
-            <EuiSpacer size="m" />
+              <EuiSpacer size="m" />
 
-            <EuiFlexGroup>
-              <EuiFlexItem>
-                <EuiFlexGroup justifyContent="spaceBetween">
-                  <EuiFlexItem grow={false}>
-                    <EuiLink href="">Edit profile</EuiLink>
-                  </EuiFlexItem>
+              <EuiFlexGroup>
+                <EuiFlexItem>
+                  <EuiFlexGroup justifyContent="spaceBetween">
+                    <EuiFlexItem grow={false}>
+                      <EuiLink href="">Edit profile</EuiLink>
+                    </EuiFlexItem>
 
-                  <EuiFlexItem grow={false}>
-                    <EuiLink href="">Log out</EuiLink>
-                  </EuiFlexItem>
-                </EuiFlexGroup>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+                    <EuiFlexItem grow={false}>
+                      <EuiLink href="">Log out</EuiLink>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          </EuiFlexGroup>
 
-        <EuiHeaderAlert
-          title="Here&rsquo;s a notification title"
-          text="I am the hat judge. Show me a hat and I will tell you if it&rsquo;s a good hat or bad hat."
-          date="Nov. 14, 02:14PM."
-        />
+          <EuiHeaderAlert
+            title="Here&rsquo;s a notification title"
+            text="I am the hat judge. Show me a hat and I will tell you if it&rsquo;s a good hat or bad hat."
+            date="Nov. 14, 02:14PM."
+          />
 
-        <EuiHeaderAlert
-          title="Here&rsquo;s a notification title that is extremely long and will wrap"
-          text="I am the hat judge. Show me a hat and I will tell you if it&rsquo;s a good hat or bad hat."
-          action={<EuiLink href="#">Download your thing here</EuiLink>}
-          date="Nov. 14, 02:14PM."
-        />
+          <EuiHeaderAlert
+            title="Here&rsquo;s a notification title that is extremely long and will wrap"
+            text="I am the hat judge. Show me a hat and I will tell you if it&rsquo;s a good hat or bad hat."
+            action={<EuiLink href="#">Download your thing here</EuiLink>}
+            date="Nov. 14, 02:14PM."
+          />
 
-        <EuiHeaderAlert
-          title="Here&rsquo;s a notification title"
-          text="I am the hat judge. Show me a hat and I will tell you if it&rsquo;s a good hat or bad hat."
-          action={<EuiLink href="#">Download your thing here</EuiLink>}
-          date="Nov. 14, 02:14PM."
-        />
+          <EuiHeaderAlert
+            title="Here&rsquo;s a notification title"
+            text="I am the hat judge. Show me a hat and I will tell you if it&rsquo;s a good hat or bad hat."
+            action={<EuiLink href="#">Download your thing here</EuiLink>}
+            date="Nov. 14, 02:14PM."
+          />
+        </div>
       </EuiPopover>
     );
   }