Adding more props to EuiHeaderSectionItemButton, EuiFieldSearch, and EuiAccordion

CHANGELOG.md

@@ -14,11 +14,15 @@
 - Extending `EuiSelectable[options]` type with correct HTML element ([#2869](https://github.com/elastic/eui/pull/2869))
 - Added check mark to single selection `EuiComboBox` ([#2890](https://github.com/elastic/eui/pull/2890))
 - Added `logoGoogleG` third-party logo to `EuiIcon` ([#2853](https://github.com/elastic/eui/pull/2853))
+- Added `arrowDisplay` prop to `EuiAccordion` for changing side or hiding completely ([#2914](https://github.com/elastic/eui/pull/2914))
+- Added `prepend` and `append` ability to `EuiFieldSearch` ([#2914](https://github.com/elastic/eui/pull/2914))
+- Added `notification` and `notificationColor` props to `EuiHeaderSectionItemButton` ([#2914](https://github.com/elastic/eui/pull/2914))
 
 **Bug fixes**
 
 - Fixed building dev & docs on Windows ([#2847](https://github.com/elastic/eui/pull/2847))
 - Fixed a bug in `EuiDataGrid` causing the first cell to autofocus if interactive ([#2872](https://github.com/elastic/eui/pull/2872))
+- Extended `div` element in `EuiFlyout` type ([#2914](https://github.com/elastic/eui/pull/2914))
 
 **Breaking changes**
 

src-docs/src/views/accordion/accordion_arrow.js

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import {
+  EuiAccordion,
+  EuiText,
+  EuiCode,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiAccordion
+      id="accordion10"
+      buttonContent="Arrows default to the left"
+      paddingSize="s">
+      <EuiText>
+        <p>
+          Any content inside of <EuiCode>EuiAccordion</EuiCode> will appear
+          here.
+        </p>
+      </EuiText>
+    </EuiAccordion>
+    <EuiSpacer />
+    <EuiAccordion
+      id="accordion11"
+      arrowDisplay="right"
+      buttonContent="This one has it on the right"
+      paddingSize="s">
+      <EuiText>
+        <p>
+          Any content inside of <EuiCode>EuiAccordion</EuiCode> will appear
+          here.
+        </p>
+      </EuiText>
+    </EuiAccordion>
+    <EuiSpacer />
+    <EuiAccordion
+      id="accordion12"
+      arrowDisplay="none"
+      buttonContent="This one has it removed entirely"
+      paddingSize="s">
+      <EuiText>
+        <p>
+          Any content inside of <EuiCode>EuiAccordion</EuiCode> will appear
+          here.
+        </p>
+      </EuiText>
+    </EuiAccordion>
+  </div>
+);

src-docs/src/views/accordion/accordion_example.js

@@ -22,6 +22,18 @@ const accordionSnippet = `<EuiAccordion
 </EuiAccordion>
 `;
 
+import AccordionArrow from './accordion_arrow';
+const accordionArrowSource = require('!!raw-loader!./accordion_arrow');
+const accordionArrowHtml = renderToHtml(AccordionArrow);
+const accordionArrowSnippet = `<EuiAccordion
+  id={accordionId}
+  buttonContent="Clickable title"
+  arrowDisplay="right"
+  >
+    <!-- Content to show when expanded -->
+</EuiAccordion>
+`;
+
 import AccordionMultiple from './accordion_multiple';
 const accordionMultipleSource = require('!!raw-loader!./accordion_multiple');
 const accordionMultipleHtml = renderToHtml(AccordionMultiple);
@@ -142,6 +154,32 @@ export const AccordionExample = {
       snippet: accordionSnippet,
       demo: <Accordion />,
     },
+    {
+      title: 'Arrow display',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: accordionArrowSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: accordionArrowHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            The arrow helps indicate the current state of the accordion (open or
+            not) and points to the main triggering button text. If you must hide
+            or change the side in which the arrow appears, use{' '}
+            <EuiCode>arrowDisplay: &apos;right&apos;</EuiCode> or{' '}
+            <EuiCode>&apos;none&apos;</EuiCode>
+          </p>
+        </div>
+      ),
+      snippet: accordionArrowSnippet,
+      demo: <AccordionArrow />,
+    },
     {
       title: 'Multiple accordions',
       source: [

src-docs/src/views/accordion/accordion_extra.js

@@ -5,6 +5,7 @@ import { EuiAccordion, EuiButton } from '../../../../src/components';
 export default () => (
   <EuiAccordion
     id="accordionExtra"
+    arrowDisplay="right"
     buttonContent="Click to open"
     extraAction={<EuiButton size="s">Extra action!</EuiButton>}
     paddingSize="l">

src-docs/src/views/form_controls/display_toggles.js

@@ -84,7 +84,11 @@ export class DisplayToggles extends Component {
             </EuiButtonEmpty>
           }>
           <div>
-            <EuiFlexGroup wrap={true} direction="column" gutterSize="s">
+            <EuiFlexGroup
+              wrap={true}
+              direction="column"
+              gutterSize="s"
+              responsive={false}>
               {(canDisabled || canIsDisabled) && (
                 <EuiFlexItem grow={false}>
                   <EuiSwitch

src-docs/src/views/form_controls/field_search.js

@@ -23,6 +23,8 @@ export default class extends Component {
     return (
       /* DisplayToggles wrapper for Docs only */
       <DisplayToggles
+        canPrepend
+        canAppend
         extras={[
           <EuiSwitch
             compressed

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

@@ -35,7 +35,8 @@ export default class extends Component {
         aria-controls="keyPadMenu"
         aria-expanded={this.state.isOpen}
         aria-haspopup="true"
-        aria-label="Apps menu"
+        aria-label="Apps menu with 1 new app"
+        notification="1"
         onClick={this.onMenuButtonClick}>
         <EuiIcon type="apps" size="m" />
       </EuiHeaderSectionItemButton>
@@ -74,7 +75,7 @@ export default class extends Component {
             <EuiIcon type="visualizeApp" size="l" />
           </EuiKeyPadMenuItem>
 
-          <EuiKeyPadMenuItem label="Timelion" href="#">
+          <EuiKeyPadMenuItem label="Timelion" href="#" betaBadgeLabel="Beta">
             <EuiIcon type="timelionApp" size="l" />
           </EuiKeyPadMenuItem>
         </EuiKeyPadMenu>

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

@@ -8,7 +8,6 @@ import {
   EuiFlyoutBody,
   EuiFlyoutHeader,
   EuiTitle,
-  EuiNotificationBadge,
   EuiLink,
   EuiFlyoutFooter,
   EuiFlexGroup,
@@ -121,15 +120,12 @@ export default class extends Component {
         aria-controls="headerNewsFeed"
         aria-expanded={this.state.isFlyoutVisible}
         aria-haspopup="true"
-        aria-label="News feed"
-        onClick={this.showFlyout}>
+        aria-label={`News feed: ${
+          this.state.showBadge ? 'Updates available' : 'No updates'
+        }`}
+        onClick={this.showFlyout}
+        notification={this.state.showBadge && '•'}>
         <EuiIcon type="email" size="m" />
-
-        {this.state.showBadge ? (
-          <EuiNotificationBadge className="euiHeaderNotification">
-            &#9642;
-          </EuiNotificationBadge>
-        ) : null}
       </EuiHeaderSectionItemButton>
     );
 

src/components/accordion/__snapshots__/accordion.test.tsx.snap

@@ -2,7 +2,8 @@
 
 exports[`EuiAccordion behavior closes when clicked twice 1`] = `
 <EuiAccordion
-  id="6"
+  arrowDisplay="left"
+  id="8"
   initialIsOpen={false}
   paddingSize="none"
 >
@@ -13,7 +14,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
       className="euiAccordion__triggerWrapper"
     >
       <button
-        aria-controls="6"
+        aria-controls="8"
         aria-expanded={false}
         className="euiAccordion__button"
         onClick={[Function]}
@@ -53,7 +54,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
     </div>
     <div
       className="euiAccordion__childWrapper"
-      id="6"
+      id="8"
     >
       <EuiMutationObserver
         observerOptions={
@@ -80,7 +81,8 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
 
 exports[`EuiAccordion behavior opens when clicked once 1`] = `
 <EuiAccordion
-  id="5"
+  arrowDisplay="left"
+  id="7"
   initialIsOpen={false}
   paddingSize="none"
 >
@@ -91,7 +93,7 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
       className="euiAccordion__triggerWrapper"
     >
       <button
-        aria-controls="5"
+        aria-controls="7"
         aria-expanded={true}
         className="euiAccordion__button"
         onClick={[Function]}
@@ -131,7 +133,7 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
     </div>
     <div
       className="euiAccordion__childWrapper"
-      id="5"
+      id="7"
     >
       <EuiMutationObserver
         observerOptions={
@@ -201,6 +203,86 @@ exports[`EuiAccordion is rendered 1`] = `
 </div>
 `;
 
+exports[`EuiAccordion props arrowDisplay none is rendered 1`] = `
+<div
+  class="euiAccordion"
+>
+  <div
+    class="euiAccordion__triggerWrapper"
+  >
+    <button
+      aria-controls="6"
+      aria-expanded="false"
+      class="euiAccordion__button"
+      type="button"
+    >
+      <span />
+    </button>
+  </div>
+  <div
+    class="euiAccordion__childWrapper"
+    id="6"
+  >
+    <div>
+      <div
+        class=""
+      >
+        <p>
+          You can see me.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiAccordion props arrowDisplay right is rendered 1`] = `
+<div
+  class="euiAccordion"
+>
+  <div
+    class="euiAccordion__triggerWrapper"
+  >
+    <button
+      aria-controls="5"
+      aria-expanded="false"
+      class="euiAccordion__button euiAccordion__buttonReverse"
+      type="button"
+    >
+      <span
+        class="euiAccordion__iconWrapper"
+      >
+        <svg
+          aria-hidden="true"
+          class="euiIcon euiIcon--medium euiIcon-isLoading euiAccordion__icon"
+          focusable="false"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+      </span>
+      <span />
+    </button>
+  </div>
+  <div
+    class="euiAccordion__childWrapper"
+    id="5"
+  >
+    <div>
+      <div
+        class=""
+      >
+        <p>
+          You can see me.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiAccordion props buttonContent is rendered 1`] = `
 <div
   class="euiAccordion"

src/components/accordion/_accordion.scss

@@ -24,6 +24,12 @@
   }
 }
 
+.euiAccordion__buttonReverse {
+  // Puts the arrow on the right
+  flex-direction: row-reverse;
+  justify-content: space-between;
+}
+
 .euiAccordion__iconWrapper {
   @include size($euiSize);
   border-radius: $euiBorderRadius;

src/components/accordion/accordion.test.tsx

@@ -65,6 +65,28 @@ describe('EuiAccordion', () => {
         expect(component).toMatchSnapshot();
       });
     });
+
+    describe('arrowDisplay', () => {
+      it('right is rendered', () => {
+        const component = render(
+          <EuiAccordion id={getId()} arrowDisplay="right">
+            <p>You can see me.</p>
+          </EuiAccordion>
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+
+      it('none is rendered', () => {
+        const component = render(
+          <EuiAccordion id={getId()} arrowDisplay="none">
+            <p>You can see me.</p>
+          </EuiAccordion>
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+    });
   });
 
   describe('behavior', () => {