[Feature Notification] Add a euiAnimation method on the EuiHeaderSectionItemButton ref

src-docs/src/views/header/header_example.js

@@ -67,7 +67,8 @@ const headerSnippet = `<EuiHeader>
       <!-- HeaderSectionItem content -->
     </EuiHeaderSectionItem>
   </EuiHeaderSection>
-</EuiHeader>`;
+</EuiHeader>
+`;
 
 const headerSectionsSnippet = `<EuiHeader
   sections={[
@@ -105,6 +106,30 @@ const headerLinksSnippet = `<EuiHeader>
   </EuiHeaderLinks>
 </EuiHeader>`;
 
+const headerAlertSnippet = `<EuiHeader>
+  <EuiHeaderSection grow={false}>
+    <EuiHeaderSectionItem>
+      <!-- HeaderSectionItem content -->
+    </EuiHeaderSectionItem>
+  </EuiHeaderSection>
+
+  <EuiHeaderSection side="right">
+    <EuiHeaderSectionItem>
+      <!-- Button to trigger portal content like a EuiPopover or a EuiFlyout -->
+      <EuiHeaderSectionItemButton
+        aria-controls={portalContentId}
+        aria-expanded={isPortalContentVisible}
+        aria-label="Open portal content"
+        onClick={() => showPortalConten()}
+        notification={showNotification}
+        animation={isAnimating}
+      >
+        <EuiIcon type="bell" />
+      </EuiHeaderSectionItemButton>
+    </EuiHeaderSectionItem>
+  </EuiHeaderSection>
+</EuiHeader>`;
+
 export const HeaderExample = {
   title: 'Header',
   sections: [
@@ -279,7 +304,7 @@ export const HeaderExample = {
       demo: <HeaderDark theme={lightColors} />,
     },
     {
-      title: 'Portal content in the header',
+      title: 'Portal content and buttons in the header',
       source: [
         {
           type: GuideSectionTypes.JS,
@@ -311,16 +336,39 @@ export const HeaderExample = {
             in conjunction with a <strong>fixed</strong> header, be sure to add
             the <EuiCode>repositionOnScroll</EuiCode> prop to the popover.
           </p>
+          <p>
+            To alert or notify users about the additional information they are
+            receiving, use the <strong>EuiHeaderSectionItemButton</strong>{' '}
+            <EuiCode>notification</EuiCode> prop. You can pass a{' '}
+            <EuiCode>node</EuiCode> that will render inside a{' '}
+            <strong>EuiBadgeNotification</strong> or pass{' '}
+            <EuiCode>true</EuiCode> to render a simple dot. You can also animate
+            the button by calling the <EuiCode>triggerAnimation()</EuiCode>{' '}
+            method on the <strong>EuiHeaderSectionItemButton</strong>{' '}
+            <EuiCode>ref</EuiCode>.
+          </p>
+
           <p>
             The example below shows how to incorporate{' '}
-            <strong>EuiHeaderAlert</strong> components to show a list of
-            updates.
+            <strong>EuiHeaderAlert</strong> components to show a list of updates
+            inside a{' '}
+            <Link to="/layout/flyout">
+              <strong>EuiFlyout</strong>
+            </Link>{' '}
+            and a{' '}
+            <Link to="/layout/popover">
+              <strong>EuiPopover</strong>
+            </Link>{' '}
+            . It also shows how to animate and add different types of
+            notifications.
           </p>
         </>
       ),
       props: {
         EuiHeaderAlert,
+        EuiHeaderSectionItemButton,
       },
+      snippet: headerAlertSnippet,
       demo: <HeaderAlert />,
     },
     {

src/components/header/_mixins.scss

@@ -4,7 +4,7 @@
 
   .euiHeaderLogo__text,
   .euiHeaderLink,
-  .euiHeaderSectionItem__button {
+  .euiHeaderSectionItemButton {
     color: $euiColorGhost;
   }
 
@@ -20,7 +20,7 @@
 
   .euiHeaderLogo,
   .euiHeaderLink,
-  .euiHeaderSectionItem__button {
+  .euiHeaderSectionItemButton {
     &:hover {
       background: transparentize(lightOrDarkTheme($euiColorDarkShade, $euiColorLightestShade), .5);
     }

src/components/header/header_links/__snapshots__/header_links.test.tsx.snap

@@ -80,12 +80,16 @@ exports[`EuiHeaderLinks popover props is rendered 1`] = `
     >
       <button
         aria-label="Open menu"
-        class="euiHeaderSectionItem__button customButtonClass"
+        class="euiHeaderSectionItemButton customButtonClass"
         type="button"
       >
         <span
-          data-euiicon-type="bolt"
-        />
+          class="euiHeaderSectionItemButton__content"
+        >
+          <span
+            data-euiicon-type="bolt"
+          />
+        </span>
       </button>
     </div>
   </div>

src/components/header/header_section/__snapshots__/header_section_item_button.test.tsx.snap

@@ -3,28 +3,39 @@
 exports[`EuiHeaderSectionItemButton is rendered 1`] = `
 <button
   aria-label="aria-label"
-  class="euiHeaderSectionItem__button testClass1 testClass2"
+  class="euiHeaderSectionItemButton testClass1 testClass2"
   data-test-subj="test subject string"
   type="button"
-/>
+>
+  <span
+    class="euiHeaderSectionItemButton__content"
+  />
+</button>
 `;
 
 exports[`EuiHeaderSectionItemButton renders children 1`] = `
 <button
-  class="euiHeaderSectionItem__button"
+  class="euiHeaderSectionItemButton"
   type="button"
 >
-  <span>
-    Ahoy!
+  <span
+    class="euiHeaderSectionItemButton__content"
+  >
+    <span>
+      Ahoy!
+    </span>
   </span>
 </button>
 `;
 
 exports[`EuiHeaderSectionItemButton renders notification as a badge 1`] = `
 <button
-  class="euiHeaderSectionItem__button"
+  class="euiHeaderSectionItemButton"
   type="button"
 >
+  <span
+    class="euiHeaderSectionItemButton__content"
+  />
   <span
     class="euiNotificationBadge euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--badge"
   >
@@ -35,9 +46,12 @@ exports[`EuiHeaderSectionItemButton renders notification as a badge 1`] = `
 
 exports[`EuiHeaderSectionItemButton renders notification as a dot 1`] = `
 <button
-  class="euiHeaderSectionItem__button"
+  class="euiHeaderSectionItemButton"
   type="button"
 >
+  <span
+    class="euiHeaderSectionItemButton__content"
+  />
   <span
     class="euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--dot"
     color="accent"
@@ -48,9 +62,12 @@ exports[`EuiHeaderSectionItemButton renders notification as a dot 1`] = `
 
 exports[`EuiHeaderSectionItemButton renders notification color 1`] = `
 <button
-  class="euiHeaderSectionItem__button"
+  class="euiHeaderSectionItemButton"
   type="button"
 >
+  <span
+    class="euiHeaderSectionItemButton__content"
+  />
   <span
     class="euiNotificationBadge euiNotificationBadge--subdued euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--badge"
   >

src/components/header/header_section/_header_section_item.scss

@@ -15,22 +15,6 @@
   }
 }
 
-.euiHeaderSectionItem__button {
-  position: relative; // For positioning the notification
-  height: $euiHeaderChildSize;
-  min-width: $euiHeaderChildSize;
-  text-align: center;
-  font-size: 0; // aligns icons better vertically
-
-  &:hover {
-    background: $euiColorLightestShade;
-  }
-
-  &:focus {
-    background: $euiFocusBackgroundColor;
-  }
-}
-
 .euiHeaderSectionItem--borderLeft {
   &:after {
     left: 0;
@@ -46,25 +30,8 @@
   }
 }
 
-.euiHeaderSectionItemButton__notification {
-  position: absolute;
-}
-
-.euiHeaderSectionItemButton__notification--badge {
-  top: 9%;
-  right: 9%;
-  box-shadow: 0 0 0 1px $euiHeaderBackgroundColor;
-}
-
-.euiHeaderSectionItemButton__notification--dot {
-  top: 0;
-  right: 0;
-  stroke: $euiHeaderBackgroundColor;
-}
-
 @include euiBreakpoint('xs') {
-  .euiHeaderSectionItem,
-  .euiHeaderSectionItem__button {
+  .euiHeaderSectionItem {
     min-width: $euiHeaderChildSize * .75;
   }
 
@@ -74,20 +41,4 @@
       display: none;
     }
   }
-
-  // On small screens just show a small dot indicating there are notifications
-  .euiHeaderSectionItemButton__notification--badge {
-    @include size($euiSizeS);
-    top: 20%;
-    min-width: 0;
-    border-radius: $euiSizeS;
-    color: $euiColorAccent;
-    overflow: hidden;
-  }
-
-  // Using specificty to override the default icon size
-  .euiHeaderSectionItemButton__notification.euiHeaderSectionItemButton__notification--dot {
-    @include size($euiSize);
-    top: 9%;
-  }
-}
+}

src/components/header/header_section/_header_section_item_button.scss

@@ -0,0 +1,49 @@
+.euiHeaderSectionItemButton {
+  position: relative; // For positioning the notification
+  height: $euiHeaderChildSize;
+  min-width: $euiHeaderChildSize;
+  text-align: center;
+  font-size: 0; // aligns icons better vertically
+
+  &:hover {
+    background: $euiColorLightestShade;
+  }
+
+  &:focus {
+    background: $euiFocusBackgroundColor;
+  }
+}
+
+.euiHeaderSectionItemButton__notification {
+  position: absolute;
+
+  &--dot {
+    top: 0;
+    right: 0;
+    stroke: $euiHeaderBackgroundColor;
+  }
+
+  &--badge {
+    top: 9%;
+    right: 9%;
+    box-shadow: 0 0 0 1px $euiHeaderBackgroundColor;
+  }
+}
+
+
+.euiHeaderSectionItemButton__content {
+  // This element is a span and we're changing the display because inline elements can’t take a transform
+  display: inline-block;
+}
+
+@include euiBreakpoint('xs') {
+  .euiHeaderSectionItemButton {
+    min-width: $euiHeaderChildSize * .75;
+  }
+
+  // Using specificity to override the default icon size
+  .euiHeaderSectionItemButton__notification.euiHeaderSectionItemButton__notification--dot {
+    @include size($euiSize);
+    top: 9%;
+  }
+}

src/components/header/header_section/_index.scss

@@ -1,2 +1,3 @@
 @import 'header_section';
 @import 'header_section_item';
+@import 'header_section_item_button';

src/components/header/header_section/header_section_item_button.test.tsx

@@ -67,6 +67,14 @@ describe('EuiHeaderSectionItemButton', () => {
     });
   });
 
+  // test('renders animation', () => {
+  //   const component = render(
+  //     <EuiHeaderSectionItemButton animation={true} notification={true} />
+  //   );
+  //
+  //   expect(component).toMatchSnapshot();
+  // });
+
   describe('onClick', () => {
     test("isn't called upon instantiation", () => {
       const onClickHandler = jest.fn();