From c8476bf99cb70a95001e262f1f82f66a4ceeb4fb Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 21 Feb 2020 16:48:01 -0500
Subject: [PATCH 01/12] Extending `div` element in EuiFlyout type

---
 src/components/flyout/flyout.test.tsx |  6 ++++++
 src/components/flyout/flyout.tsx      | 11 +++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/flyout/flyout.test.tsx b/src/components/flyout/flyout.test.tsx
index 76c9d84436f..eb32c45275f 100644
--- a/src/components/flyout/flyout.test.tsx
+++ b/src/components/flyout/flyout.test.tsx
@@ -46,6 +46,12 @@ describe('EuiFlyout', () => {
         expect(label).toBe('Closes specific flyout');
       });
     });
+
+    test('accepts div props', () => {
+      const component = render(<EuiFlyout onClose={() => {}} id="imaflyout" />);
+
+      expect(component).toMatchSnapshot();
+    });
   });
 
   describe('size', () => {
diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx
index ea1d90d73b3..2efa0afc718 100644
--- a/src/components/flyout/flyout.tsx
+++ b/src/components/flyout/flyout.tsx
@@ -1,4 +1,9 @@
-import React, { Component, CSSProperties, Fragment } from 'react';
+import React, {
+  Component,
+  CSSProperties,
+  Fragment,
+  HTMLAttributes,
+} from 'react';
 import classnames from 'classnames';
 
 import { keyCodes, EuiWindowEvent } from '../../services';
@@ -16,7 +21,9 @@ const sizeToClassNameMap: { [size in EuiFlyoutSize]: string } = {
   l: 'euiFlyout--large',
 };
 
-export interface EuiFlyoutProps extends CommonProps {
+export interface EuiFlyoutProps
+  extends CommonProps,
+    HTMLAttributes<HTMLDivElement> {
   onClose: () => void;
   size?: EuiFlyoutSize;
   /**

From 61a31037bf8c076552e7867502e5a4109c6b97e7 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 21 Feb 2020 17:16:49 -0500
Subject: [PATCH 02/12] Added `shrink` prop to EuiFlexItem

Needs some doc something
---
 src-docs/src/views/flex/flex_grow_zero.tsx    |  8 +++
 .../__snapshots__/flex_item.test.tsx.snap     | 72 +++++++++++++++++++
 src/components/flex/_flex_item.scss           | 10 +++
 src/components/flex/flex_item.test.tsx        | 14 +++-
 src/components/flex/flex_item.tsx             | 38 ++++++++--
 .../flyout/__snapshots__/flyout.test.tsx.snap | 48 +++++++++++++
 6 files changed, 183 insertions(+), 7 deletions(-)

diff --git a/src-docs/src/views/flex/flex_grow_zero.tsx b/src-docs/src/views/flex/flex_grow_zero.tsx
index 55e24429d2c..e8b15663364 100644
--- a/src-docs/src/views/flex/flex_grow_zero.tsx
+++ b/src-docs/src/views/flex/flex_grow_zero.tsx
@@ -8,5 +8,13 @@ export default () => (
       <EuiFlexItem grow={false}>This item won&rsquo;t grow</EuiFlexItem>
       <EuiFlexItem>But this item will.</EuiFlexItem>
     </EuiFlexGroup>
+    <EuiFlexGroup>
+      <EuiFlexItem shrink={false}>
+        <div style={{ width: 400 }}>This item won&rsquo;t shrink</div>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <div style={{ width: 400 }}>But this item will.</div>
+      </EuiFlexItem>
+    </EuiFlexGroup>
   </div>
 );
diff --git a/src/components/flex/__snapshots__/flex_item.test.tsx.snap b/src/components/flex/__snapshots__/flex_item.test.tsx.snap
index 39afc51a3a3..b1e09bab1b3 100644
--- a/src/components/flex/__snapshots__/flex_item.test.tsx.snap
+++ b/src/components/flex/__snapshots__/flex_item.test.tsx.snap
@@ -79,3 +79,75 @@ exports[`EuiFlexItem is rendered 1`] = `
   data-test-subj="test subject string"
 />
 `;
+
+exports[`EuiFlexItem shrink 1 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexShrinktrue"
+/>
+`;
+
+exports[`EuiFlexItem shrink 2 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexShrinktrue"
+/>
+`;
+
+exports[`EuiFlexItem shrink 3 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexShrinktrue"
+/>
+`;
+
+exports[`EuiFlexItem shrink 4 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexShrinktrue"
+/>
+`;
+
+exports[`EuiFlexItem shrink 5 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexShrinktrue"
+/>
+`;
+
+exports[`EuiFlexItem shrink 6 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexShrinktrue"
+/>
+`;
+
+exports[`EuiFlexItem shrink 7 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexShrinktrue"
+/>
+`;
+
+exports[`EuiFlexItem shrink 8 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexShrinktrue"
+/>
+`;
+
+exports[`EuiFlexItem shrink 9 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexShrinktrue"
+/>
+`;
+
+exports[`EuiFlexItem shrink 10 is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexShrinktrue"
+/>
+`;
+
+exports[`EuiFlexItem shrink false is rendered 1`] = `
+<div
+  class="euiFlexItem euiFlexItem--flexShrinkZero"
+/>
+`;
+
+exports[`EuiFlexItem shrink true is rendered 1`] = `
+<div
+  class="euiFlexItem"
+/>
+`;
diff --git a/src/components/flex/_flex_item.scss b/src/components/flex/_flex_item.scss
index fa76e51ffad..7a7516b3e60 100644
--- a/src/components/flex/_flex_item.scss
+++ b/src/components/flex/_flex_item.scss
@@ -25,6 +25,16 @@
       flex-grow: $i;
     }
   }
+
+  &.euiFlexItem--flexShrinkZero { /* 1 */
+    flex-shrink: 0; /* 2 */
+  }
+
+  @for $i from 1 through 10 {
+    &.euiFlexItem--flexShrink#{$i} {
+      flex-shrink: $i;
+    }
+  }
 }
 
 // On mobile we force them to stack and act the same.
diff --git a/src/components/flex/flex_item.test.tsx b/src/components/flex/flex_item.test.tsx
index 4a05e7d8900..c6567af1bb0 100644
--- a/src/components/flex/flex_item.test.tsx
+++ b/src/components/flex/flex_item.test.tsx
@@ -6,7 +6,7 @@ import {
   stopThrowingReactWarnings,
 } from '../../test';
 
-import { EuiFlexItem, GROW_SIZES } from './flex_item';
+import { EuiFlexItem, GROW_SHRINK_SIZES } from './flex_item';
 
 beforeAll(startThrowingReactWarnings);
 afterAll(stopThrowingReactWarnings);
@@ -19,7 +19,7 @@ describe('EuiFlexItem', () => {
   });
 
   describe('grow', () => {
-    GROW_SIZES.concat([true, false]).forEach(value => {
+    GROW_SHRINK_SIZES.concat([true, false]).forEach(value => {
       test(`${value} is rendered`, () => {
         const component = render(<EuiFlexItem grow={value} />);
 
@@ -27,4 +27,14 @@ describe('EuiFlexItem', () => {
       });
     });
   });
+
+  describe('shrink', () => {
+    GROW_SHRINK_SIZES.concat([true, false]).forEach(value => {
+      test(`${value} is rendered`, () => {
+        const component = render(<EuiFlexItem shrink={value} />);
+
+        expect(component).toMatchSnapshot();
+      });
+    });
+  });
 });
diff --git a/src/components/flex/flex_item.tsx b/src/components/flex/flex_item.tsx
index e3c5cdb3e96..4465c9944f3 100644
--- a/src/components/flex/flex_item.tsx
+++ b/src/components/flex/flex_item.tsx
@@ -2,7 +2,7 @@ import React, { HTMLAttributes, FunctionComponent } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../common';
 
-export type FlexItemGrowSize =
+export type FlexItemGrowShrinkSize =
   | 1
   | 2
   | 3
@@ -18,11 +18,31 @@ export type FlexItemGrowSize =
   | null;
 
 export interface EuiFlexItemProps {
-  grow?: FlexItemGrowSize;
+  /**
+   * Set to a `number` to match the CSS property of `flex-grow`,
+   * or `true` for `1` and `false`/`null` for `0`.
+   */
+  grow?: FlexItemGrowShrinkSize;
+  /**
+   * Set to a `number` to match the CSS property of `flex-shrink`,
+   * or `true` for `1` and `false`/`null` for `0`.
+   */
+  shrink?: FlexItemGrowShrinkSize;
   component?: keyof JSX.IntrinsicElements;
 }
 
-export const GROW_SIZES: FlexItemGrowSize[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+export const GROW_SHRINK_SIZES: FlexItemGrowShrinkSize[] = [
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  10,
+];
 
 export const EuiFlexItem: FunctionComponent<
   CommonProps &
@@ -32,6 +52,7 @@ export const EuiFlexItem: FunctionComponent<
   children,
   className,
   grow = true,
+  shrink = true,
   component: Component = 'div',
   ...rest
 }) => {
@@ -42,7 +63,14 @@ export const EuiFlexItem: FunctionComponent<
     {
       'euiFlexItem--flexGrowZero': !grow,
       [`euiFlexItem--flexGrow${grow}`]:
-        typeof grow === 'number' ? GROW_SIZES.indexOf(grow) >= 0 : undefined,
+        typeof grow === 'number'
+          ? GROW_SHRINK_SIZES.indexOf(grow) >= 0
+          : undefined,
+      'euiFlexItem--flexShrinkZero': !shrink,
+      [`euiFlexItem--flexShrink${grow}`]:
+        typeof shrink === 'number'
+          ? GROW_SHRINK_SIZES.indexOf(shrink) >= 0
+          : undefined,
     },
     className
   );
@@ -56,7 +84,7 @@ export const EuiFlexItem: FunctionComponent<
 };
 
 function validateGrowValue(value: EuiFlexItemProps['grow']) {
-  const validValues = [null, undefined, true, false, ...GROW_SIZES];
+  const validValues = [null, undefined, true, false, ...GROW_SHRINK_SIZES];
 
   if (validValues.indexOf(value) === -1) {
     throw new Error(
diff --git a/src/components/flyout/__snapshots__/flyout.test.tsx.snap b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
index 2c4832bd003..36bdba58a35 100644
--- a/src/components/flyout/__snapshots__/flyout.test.tsx.snap
+++ b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
@@ -192,6 +192,54 @@ exports[`EuiFlyout max width can be set to a default 1`] = `
 </div>
 `;
 
+exports[`EuiFlyout props accepts div props 1`] = `
+<div>
+  <div
+    data-focus-guard="true"
+    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+    tabindex="0"
+  />
+  <div
+    data-focus-guard="true"
+    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+    tabindex="1"
+  />
+  <div
+    data-focus-lock-disabled="false"
+  >
+    <div
+      class="euiFlyout euiFlyout--medium"
+      id="imaflyout"
+      role="dialog"
+      tabindex="0"
+    >
+      <button
+        aria-label="Closes this dialog"
+        class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+        data-test-subj="euiFlyoutCloseButton"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
+          focusable="false"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+      </button>
+    </div>
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+    tabindex="0"
+  />
+</div>
+`;
+
 exports[`EuiFlyout props close button is not rendered 1`] = `
 <div>
   <div

From 4df2ea483ad4bfead55f99a97a925482efd00470 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 21 Feb 2020 17:46:24 -0500
Subject: [PATCH 03/12] Added `arrowDisplay` prop to EuiAccordion for changing
 side or hiding completely

---
 .../src/views/accordion/accordion_arrow.js    | 50 ++++++++++
 .../src/views/accordion/accordion_example.js  | 38 ++++++++
 .../src/views/accordion/accordion_extra.js    |  1 +
 .../__snapshots__/accordion.test.tsx.snap     | 94 +++++++++++++++++--
 src/components/accordion/_accordion.scss      |  6 ++
 src/components/accordion/accordion.test.tsx   | 22 +++++
 src/components/accordion/accordion.tsx        | 26 ++++-
 7 files changed, 228 insertions(+), 9 deletions(-)
 create mode 100644 src-docs/src/views/accordion/accordion_arrow.js

diff --git a/src-docs/src/views/accordion/accordion_arrow.js b/src-docs/src/views/accordion/accordion_arrow.js
new file mode 100644
index 00000000000..0b14cba00cd
--- /dev/null
+++ b/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>
+);
diff --git a/src-docs/src/views/accordion/accordion_example.js b/src-docs/src/views/accordion/accordion_example.js
index a4252a360b8..8a75230bf06 100644
--- a/src-docs/src/views/accordion/accordion_example.js
+++ b/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: [
diff --git a/src-docs/src/views/accordion/accordion_extra.js b/src-docs/src/views/accordion/accordion_extra.js
index c225624e3fa..7afaed69907 100644
--- a/src-docs/src/views/accordion/accordion_extra.js
+++ b/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">
diff --git a/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
index 576221f0924..7764d7e1094 100644
--- a/src/components/accordion/__snapshots__/accordion.test.tsx.snap
+++ b/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"
diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
index 3b3133e5d46..61a36b1ddc9 100644
--- a/src/components/accordion/_accordion.scss
+++ b/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;
diff --git a/src/components/accordion/accordion.test.tsx b/src/components/accordion/accordion.test.tsx
index e621af8fae2..7b11310409d 100644
--- a/src/components/accordion/accordion.test.tsx
+++ b/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', () => {
diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx
index 6d6df43a694..54a052ad921 100644
--- a/src/components/accordion/accordion.tsx
+++ b/src/components/accordion/accordion.tsx
@@ -52,6 +52,11 @@ export type EuiAccordionProps = HTMLAttributes<HTMLDivElement> &
      * The padding around the exposed accordion content.
      */
     paddingSize?: EuiAccordionSize;
+    /**
+     * Placement of the arrow indicator, or 'none' to hide it.
+     * Placing on the `right` doesn't work with `extraAction` and so it will be ignored
+     */
+    arrowDisplay?: 'left' | 'right' | 'none';
   };
 
 export class EuiAccordion extends Component<
@@ -61,6 +66,7 @@ export class EuiAccordion extends Component<
   static defaultProps = {
     initialIsOpen: false,
     paddingSize: 'none',
+    arrowDisplay: 'left',
   };
 
   childContent: HTMLDivElement | null = null;
@@ -128,6 +134,7 @@ export class EuiAccordion extends Component<
       extraAction,
       paddingSize,
       initialIsOpen,
+      arrowDisplay,
       ...rest
     } = this.props;
 
@@ -143,13 +150,26 @@ export class EuiAccordion extends Component<
       ? classNames(paddingSizeToClassNameMap[paddingSize])
       : undefined;
 
-    const buttonClasses = classNames('euiAccordion__button', buttonClassName);
+    const buttonClasses = classNames(
+      'euiAccordion__button',
+      {
+        euiAccordion__buttonReverse: !extraAction && arrowDisplay === 'right',
+      },
+      buttonClassName
+    );
 
     const iconClasses = classNames('euiAccordion__icon', {
       'euiAccordion__icon-isOpen': this.state.isOpen,
     });
 
-    const icon = <EuiIcon className={iconClasses} type="arrowRight" size="m" />;
+    let icon;
+    if (arrowDisplay !== 'none') {
+      icon = (
+        <span className="euiAccordion__iconWrapper">
+          <EuiIcon className={iconClasses} type="arrowRight" size="m" />
+        </span>
+      );
+    }
 
     let optionalAction = null;
 
@@ -168,7 +188,7 @@ export class EuiAccordion extends Component<
             onClick={this.onToggle}
             className={buttonClasses}
             type="button">
-            <span className="euiAccordion__iconWrapper">{icon}</span>
+            {icon}
             <span className={buttonContentClassName}>{buttonContent}</span>
           </button>
 

From 345b0753a23957f78b223d584630d4b627697086 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 21 Feb 2020 17:50:45 -0500
Subject: [PATCH 04/12] Added `prepend` and `append` ability to EuiFieldSearch

---
 .../src/views/form_controls/field_search.js   |  2 ++
 .../__snapshots__/field_search.test.tsx.snap  | 34 +++++++++++++++++++
 .../form/field_search/field_search.test.tsx   | 12 +++++++
 .../form/field_search/field_search.tsx        | 21 ++++++++++--
 4 files changed, 67 insertions(+), 2 deletions(-)

diff --git a/src-docs/src/views/form_controls/field_search.js b/src-docs/src/views/form_controls/field_search.js
index 22dc0fd3960..4635224c222 100644
--- a/src-docs/src/views/form_controls/field_search.js
+++ b/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
diff --git a/src/components/form/field_search/__snapshots__/field_search.test.tsx.snap b/src/components/form/field_search/__snapshots__/field_search.test.tsx.snap
index 6d3eb2848ea..60591378e8d 100644
--- a/src/components/form/field_search/__snapshots__/field_search.test.tsx.snap
+++ b/src/components/form/field_search/__snapshots__/field_search.test.tsx.snap
@@ -23,6 +23,23 @@ exports[`EuiFieldSearch is rendered 1`] = `
 </eui-form-control-layout>
 `;
 
+exports[`EuiFieldSearch props append is rendered 1`] = `
+<eui-form-control-layout
+  compressed="false"
+  fullwidth="false"
+  icon="search"
+  isloading="false"
+  prepend="Append"
+>
+  <eui-validatable-control>
+    <input
+      class="euiFieldSearch euiFieldText--inGroup"
+      type="search"
+    />
+  </eui-validatable-control>
+</eui-form-control-layout>
+`;
+
 exports[`EuiFieldSearch props fullWidth is rendered 1`] = `
 <eui-form-control-layout
   compressed="false"
@@ -72,3 +89,20 @@ exports[`EuiFieldSearch props isLoading is rendered 1`] = `
   </eui-validatable-control>
 </eui-form-control-layout>
 `;
+
+exports[`EuiFieldSearch props prepend is rendered 1`] = `
+<eui-form-control-layout
+  compressed="false"
+  fullwidth="false"
+  icon="search"
+  isloading="false"
+  prepend="Prepend"
+>
+  <eui-validatable-control>
+    <input
+      class="euiFieldSearch euiFieldText--inGroup"
+      type="search"
+    />
+  </eui-validatable-control>
+</eui-form-control-layout>
+`;
diff --git a/src/components/form/field_search/field_search.test.tsx b/src/components/form/field_search/field_search.test.tsx
index c44ec4a02aa..68715328fe8 100644
--- a/src/components/form/field_search/field_search.test.tsx
+++ b/src/components/form/field_search/field_search.test.tsx
@@ -45,5 +45,17 @@ describe('EuiFieldSearch', () => {
 
       expect(component).toMatchSnapshot();
     });
+
+    test('prepend is rendered', () => {
+      const component = render(<EuiFieldSearch prepend="Prepend" />);
+
+      expect(component).toMatchSnapshot();
+    });
+
+    test('append is rendered', () => {
+      const component = render(<EuiFieldSearch prepend="Append" />);
+
+      expect(component).toMatchSnapshot();
+    });
   });
 });
diff --git a/src/components/form/field_search/field_search.tsx b/src/components/form/field_search/field_search.tsx
index b88728504b1..c78ad902129 100644
--- a/src/components/form/field_search/field_search.tsx
+++ b/src/components/form/field_search/field_search.tsx
@@ -4,7 +4,10 @@ import { Browser } from '../../../services/browser';
 import { ENTER } from '../../../services/key_codes';
 import { CommonProps } from '../../common';
 
-import { EuiFormControlLayout } from '../form_control_layout';
+import {
+  EuiFormControlLayout,
+  EuiFormControlLayoutProps,
+} from '../form_control_layout';
 
 import { EuiValidatableControl } from '../validatable_control';
 
@@ -37,6 +40,15 @@ export interface EuiFieldSearchProps
    * Shows a button that quickly clears any input
    */
   isClearable?: boolean;
+  /**
+   * Creates an input group with element(s) coming before input
+   */
+  prepend?: EuiFormControlLayoutProps['prepend'];
+
+  /**
+   * Creates an input group with element(s) coming after input
+   */
+  append?: EuiFormControlLayoutProps['append'];
 }
 
 export class EuiFieldSearch extends Component<EuiFieldSearchProps> {
@@ -154,6 +166,8 @@ export class EuiFieldSearch extends Component<EuiFieldSearchProps> {
       compressed,
       onSearch,
       isClearable,
+      append,
+      prepend,
       ...rest
     } = this.props;
 
@@ -163,6 +177,7 @@ export class EuiFieldSearch extends Component<EuiFieldSearchProps> {
         'euiFieldSearch--fullWidth': fullWidth,
         'euiFieldSearch--compressed': compressed,
         'euiFieldSearch-isLoading': isLoading,
+        'euiFieldText--inGroup': prepend || append,
       },
       className
     );
@@ -177,7 +192,9 @@ export class EuiFieldSearch extends Component<EuiFieldSearchProps> {
             ? { onClick: this.onClear }
             : undefined
         }
-        compressed={compressed}>
+        compressed={compressed}
+        append={append}
+        prepend={prepend}>
         <EuiValidatableControl isInvalid={isInvalid}>
           <input
             type="search"

From e74fa3074e96114c1112a598f9b638d3abee8fce Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 21 Feb 2020 18:10:21 -0500
Subject: [PATCH 05/12] Added `notification` and `notificationColor` props to
 EuiHeaderSectionItemButton

to automatically add the correct positioning via CSS
---
 src-docs/src/views/header/header_updates.js   | 10 ++-----
 .../header_section_item_button.test.tsx.snap  | 26 ++++++++++++++++
 .../header_section/_header_section_item.scss  |  9 ++++--
 .../header_section_item_button.test.tsx       | 19 ++++++++++++
 .../header_section_item_button.tsx            | 30 ++++++++++++++++++-
 5 files changed, 83 insertions(+), 11 deletions(-)

diff --git a/src-docs/src/views/header/header_updates.js b/src-docs/src/views/header/header_updates.js
index 526a03c3a62..bfa77124086 100755
--- a/src-docs/src/views/header/header_updates.js
+++ b/src-docs/src/views/header/header_updates.js
@@ -8,7 +8,6 @@ import {
   EuiFlyoutBody,
   EuiFlyoutHeader,
   EuiTitle,
-  EuiNotificationBadge,
   EuiLink,
   EuiFlyoutFooter,
   EuiFlexGroup,
@@ -122,14 +121,9 @@ export default class extends Component {
         aria-expanded={this.state.isFlyoutVisible}
         aria-haspopup="true"
         aria-label="News feed"
-        onClick={this.showFlyout}>
+        onClick={this.showFlyout}
+        notification={this.state.showBadge && '•'}>
         <EuiIcon type="email" size="m" />
-
-        {this.state.showBadge ? (
-          <EuiNotificationBadge className="euiHeaderNotification">
-            &#9642;
-          </EuiNotificationBadge>
-        ) : null}
       </EuiHeaderSectionItemButton>
     );
 
diff --git a/src/components/header/header_section/__snapshots__/header_section_item_button.test.tsx.snap b/src/components/header/header_section/__snapshots__/header_section_item_button.test.tsx.snap
index 407fafc9b2f..a92f0259a33 100644
--- a/src/components/header/header_section/__snapshots__/header_section_item_button.test.tsx.snap
+++ b/src/components/header/header_section/__snapshots__/header_section_item_button.test.tsx.snap
@@ -19,3 +19,29 @@ exports[`EuiHeaderSectionItemButton renders children 1`] = `
   </span>
 </button>
 `;
+
+exports[`EuiHeaderSectionItemButton renders notification children 1`] = `
+<button
+  class="euiHeaderSectionItem__button"
+  type="button"
+>
+  <span
+    class="euiNotificationBadge euiHeaderSectionItemButton__notification"
+  >
+    1
+  </span>
+</button>
+`;
+
+exports[`EuiHeaderSectionItemButton renders notification color 1`] = `
+<button
+  class="euiHeaderSectionItem__button"
+  type="button"
+>
+  <span
+    class="euiNotificationBadge euiNotificationBadge--subdued euiHeaderSectionItemButton__notification"
+  >
+    1
+  </span>
+</button>
+`;
diff --git a/src/components/header/header_section/_header_section_item.scss b/src/components/header/header_section/_header_section_item.scss
index b694e4f9e57..098b6a98667 100644
--- a/src/components/header/header_section/_header_section_item.scss
+++ b/src/components/header/header_section/_header_section_item.scss
@@ -43,7 +43,11 @@
   }
 }
 
-.euiHeaderNotification {
+// SET FOR DEPRECATION: 2/21/20
+// The `euiHeaderNotification` class was needed to be manually applied
+// Now notifications can be automatically added to the buttons via props
+.euiHeaderNotification,
+.euiHeaderSectionItemButton__notification {
   position: absolute;
   top: 9%;
   right: 9%;
@@ -64,7 +68,8 @@
   }
 
   // On small screens just show a small dot indicating there are notifications
-  .euiHeaderNotification {
+  .euiHeaderNotification,
+  .euiHeaderSectionItemButton__notification {
     @include size($euiSizeS);
     top: 20%;
     min-width: 0;
diff --git a/src/components/header/header_section/header_section_item_button.test.tsx b/src/components/header/header_section/header_section_item_button.test.tsx
index 817519bf34f..1481ebf62e3 100644
--- a/src/components/header/header_section/header_section_item_button.test.tsx
+++ b/src/components/header/header_section/header_section_item_button.test.tsx
@@ -21,6 +21,25 @@ describe('EuiHeaderSectionItemButton', () => {
     expect(component).toMatchSnapshot();
   });
 
+  describe('renders notification', () => {
+    test('children', () => {
+      const component = render(<EuiHeaderSectionItemButton notification="1" />);
+
+      expect(component).toMatchSnapshot();
+    });
+
+    test('color', () => {
+      const component = render(
+        <EuiHeaderSectionItemButton
+          notification="1"
+          notificationColor="subdued"
+        />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+  });
+
   describe('onClick', () => {
     test("isn't called upon instantiation", () => {
       const onClickHandler = jest.fn();
diff --git a/src/components/header/header_section/header_section_item_button.tsx b/src/components/header/header_section/header_section_item_button.tsx
index 413c288a479..be5eeb5831d 100644
--- a/src/components/header/header_section/header_section_item_button.tsx
+++ b/src/components/header/header_section/header_section_item_button.tsx
@@ -2,20 +2,48 @@ import React, { ButtonHTMLAttributes, FunctionComponent } from 'react';
 import classNames from 'classnames';
 
 import { CommonProps } from '../../common';
+import {
+  EuiNotificationBadgeProps,
+  EuiNotificationBadge,
+} from '../../badge/notification_badge/badge_notification';
 
-type Props = CommonProps & ButtonHTMLAttributes<HTMLButtonElement>;
+type Props = CommonProps &
+  ButtonHTMLAttributes<HTMLButtonElement> & {
+    /**
+     * Inserts the node into a EuiBadgeNotification and places it appropriatesly against the button
+     */
+    notification?: EuiNotificationBadgeProps['children'];
+    /**
+     * Changes the color of the notification background
+     */
+    notificationColor?: EuiNotificationBadgeProps['color'];
+  };
 
 export const EuiHeaderSectionItemButton: FunctionComponent<Props> = ({
   onClick,
   children,
   className,
+  notification,
+  notificationColor,
   ...rest
 }) => {
   const classes = classNames('euiHeaderSectionItem__button', className);
 
+  let notificationBadge;
+  if (notification) {
+    notificationBadge = (
+      <EuiNotificationBadge
+        className="euiHeaderSectionItemButton__notification"
+        color={notificationColor}>
+        {notification}
+      </EuiNotificationBadge>
+    );
+  }
+
   return (
     <button className={classes} onClick={onClick} type="button" {...rest}>
       {children}
+      {notificationBadge}
     </button>
   );
 };

From 2211e159f708ddf29d91fbb3f617fcaefd6ee005 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 24 Feb 2020 15:41:48 -0500
Subject: [PATCH 06/12] Revert "Added `shrink` prop to EuiFlexItem"

This reverts commit 61a31037bf8c076552e7867502e5a4109c6b97e7.
---
 src-docs/src/views/flex/flex_grow_zero.tsx    |  8 ---
 .../__snapshots__/flex_item.test.tsx.snap     | 72 -------------------
 src/components/flex/_flex_item.scss           | 10 ---
 src/components/flex/flex_item.test.tsx        | 14 +---
 src/components/flex/flex_item.tsx             | 38 ++--------
 .../flyout/__snapshots__/flyout.test.tsx.snap | 48 -------------
 6 files changed, 7 insertions(+), 183 deletions(-)

diff --git a/src-docs/src/views/flex/flex_grow_zero.tsx b/src-docs/src/views/flex/flex_grow_zero.tsx
index e8b15663364..55e24429d2c 100644
--- a/src-docs/src/views/flex/flex_grow_zero.tsx
+++ b/src-docs/src/views/flex/flex_grow_zero.tsx
@@ -8,13 +8,5 @@ export default () => (
       <EuiFlexItem grow={false}>This item won&rsquo;t grow</EuiFlexItem>
       <EuiFlexItem>But this item will.</EuiFlexItem>
     </EuiFlexGroup>
-    <EuiFlexGroup>
-      <EuiFlexItem shrink={false}>
-        <div style={{ width: 400 }}>This item won&rsquo;t shrink</div>
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <div style={{ width: 400 }}>But this item will.</div>
-      </EuiFlexItem>
-    </EuiFlexGroup>
   </div>
 );
diff --git a/src/components/flex/__snapshots__/flex_item.test.tsx.snap b/src/components/flex/__snapshots__/flex_item.test.tsx.snap
index b1e09bab1b3..39afc51a3a3 100644
--- a/src/components/flex/__snapshots__/flex_item.test.tsx.snap
+++ b/src/components/flex/__snapshots__/flex_item.test.tsx.snap
@@ -79,75 +79,3 @@ exports[`EuiFlexItem is rendered 1`] = `
   data-test-subj="test subject string"
 />
 `;
-
-exports[`EuiFlexItem shrink 1 is rendered 1`] = `
-<div
-  class="euiFlexItem euiFlexItem--flexShrinktrue"
-/>
-`;
-
-exports[`EuiFlexItem shrink 2 is rendered 1`] = `
-<div
-  class="euiFlexItem euiFlexItem--flexShrinktrue"
-/>
-`;
-
-exports[`EuiFlexItem shrink 3 is rendered 1`] = `
-<div
-  class="euiFlexItem euiFlexItem--flexShrinktrue"
-/>
-`;
-
-exports[`EuiFlexItem shrink 4 is rendered 1`] = `
-<div
-  class="euiFlexItem euiFlexItem--flexShrinktrue"
-/>
-`;
-
-exports[`EuiFlexItem shrink 5 is rendered 1`] = `
-<div
-  class="euiFlexItem euiFlexItem--flexShrinktrue"
-/>
-`;
-
-exports[`EuiFlexItem shrink 6 is rendered 1`] = `
-<div
-  class="euiFlexItem euiFlexItem--flexShrinktrue"
-/>
-`;
-
-exports[`EuiFlexItem shrink 7 is rendered 1`] = `
-<div
-  class="euiFlexItem euiFlexItem--flexShrinktrue"
-/>
-`;
-
-exports[`EuiFlexItem shrink 8 is rendered 1`] = `
-<div
-  class="euiFlexItem euiFlexItem--flexShrinktrue"
-/>
-`;
-
-exports[`EuiFlexItem shrink 9 is rendered 1`] = `
-<div
-  class="euiFlexItem euiFlexItem--flexShrinktrue"
-/>
-`;
-
-exports[`EuiFlexItem shrink 10 is rendered 1`] = `
-<div
-  class="euiFlexItem euiFlexItem--flexShrinktrue"
-/>
-`;
-
-exports[`EuiFlexItem shrink false is rendered 1`] = `
-<div
-  class="euiFlexItem euiFlexItem--flexShrinkZero"
-/>
-`;
-
-exports[`EuiFlexItem shrink true is rendered 1`] = `
-<div
-  class="euiFlexItem"
-/>
-`;
diff --git a/src/components/flex/_flex_item.scss b/src/components/flex/_flex_item.scss
index 7a7516b3e60..fa76e51ffad 100644
--- a/src/components/flex/_flex_item.scss
+++ b/src/components/flex/_flex_item.scss
@@ -25,16 +25,6 @@
       flex-grow: $i;
     }
   }
-
-  &.euiFlexItem--flexShrinkZero { /* 1 */
-    flex-shrink: 0; /* 2 */
-  }
-
-  @for $i from 1 through 10 {
-    &.euiFlexItem--flexShrink#{$i} {
-      flex-shrink: $i;
-    }
-  }
 }
 
 // On mobile we force them to stack and act the same.
diff --git a/src/components/flex/flex_item.test.tsx b/src/components/flex/flex_item.test.tsx
index c6567af1bb0..4a05e7d8900 100644
--- a/src/components/flex/flex_item.test.tsx
+++ b/src/components/flex/flex_item.test.tsx
@@ -6,7 +6,7 @@ import {
   stopThrowingReactWarnings,
 } from '../../test';
 
-import { EuiFlexItem, GROW_SHRINK_SIZES } from './flex_item';
+import { EuiFlexItem, GROW_SIZES } from './flex_item';
 
 beforeAll(startThrowingReactWarnings);
 afterAll(stopThrowingReactWarnings);
@@ -19,7 +19,7 @@ describe('EuiFlexItem', () => {
   });
 
   describe('grow', () => {
-    GROW_SHRINK_SIZES.concat([true, false]).forEach(value => {
+    GROW_SIZES.concat([true, false]).forEach(value => {
       test(`${value} is rendered`, () => {
         const component = render(<EuiFlexItem grow={value} />);
 
@@ -27,14 +27,4 @@ describe('EuiFlexItem', () => {
       });
     });
   });
-
-  describe('shrink', () => {
-    GROW_SHRINK_SIZES.concat([true, false]).forEach(value => {
-      test(`${value} is rendered`, () => {
-        const component = render(<EuiFlexItem shrink={value} />);
-
-        expect(component).toMatchSnapshot();
-      });
-    });
-  });
 });
diff --git a/src/components/flex/flex_item.tsx b/src/components/flex/flex_item.tsx
index 4465c9944f3..e3c5cdb3e96 100644
--- a/src/components/flex/flex_item.tsx
+++ b/src/components/flex/flex_item.tsx
@@ -2,7 +2,7 @@ import React, { HTMLAttributes, FunctionComponent } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../common';
 
-export type FlexItemGrowShrinkSize =
+export type FlexItemGrowSize =
   | 1
   | 2
   | 3
@@ -18,31 +18,11 @@ export type FlexItemGrowShrinkSize =
   | null;
 
 export interface EuiFlexItemProps {
-  /**
-   * Set to a `number` to match the CSS property of `flex-grow`,
-   * or `true` for `1` and `false`/`null` for `0`.
-   */
-  grow?: FlexItemGrowShrinkSize;
-  /**
-   * Set to a `number` to match the CSS property of `flex-shrink`,
-   * or `true` for `1` and `false`/`null` for `0`.
-   */
-  shrink?: FlexItemGrowShrinkSize;
+  grow?: FlexItemGrowSize;
   component?: keyof JSX.IntrinsicElements;
 }
 
-export const GROW_SHRINK_SIZES: FlexItemGrowShrinkSize[] = [
-  1,
-  2,
-  3,
-  4,
-  5,
-  6,
-  7,
-  8,
-  9,
-  10,
-];
+export const GROW_SIZES: FlexItemGrowSize[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
 export const EuiFlexItem: FunctionComponent<
   CommonProps &
@@ -52,7 +32,6 @@ export const EuiFlexItem: FunctionComponent<
   children,
   className,
   grow = true,
-  shrink = true,
   component: Component = 'div',
   ...rest
 }) => {
@@ -63,14 +42,7 @@ export const EuiFlexItem: FunctionComponent<
     {
       'euiFlexItem--flexGrowZero': !grow,
       [`euiFlexItem--flexGrow${grow}`]:
-        typeof grow === 'number'
-          ? GROW_SHRINK_SIZES.indexOf(grow) >= 0
-          : undefined,
-      'euiFlexItem--flexShrinkZero': !shrink,
-      [`euiFlexItem--flexShrink${grow}`]:
-        typeof shrink === 'number'
-          ? GROW_SHRINK_SIZES.indexOf(shrink) >= 0
-          : undefined,
+        typeof grow === 'number' ? GROW_SIZES.indexOf(grow) >= 0 : undefined,
     },
     className
   );
@@ -84,7 +56,7 @@ export const EuiFlexItem: FunctionComponent<
 };
 
 function validateGrowValue(value: EuiFlexItemProps['grow']) {
-  const validValues = [null, undefined, true, false, ...GROW_SHRINK_SIZES];
+  const validValues = [null, undefined, true, false, ...GROW_SIZES];
 
   if (validValues.indexOf(value) === -1) {
     throw new Error(
diff --git a/src/components/flyout/__snapshots__/flyout.test.tsx.snap b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
index 36bdba58a35..2c4832bd003 100644
--- a/src/components/flyout/__snapshots__/flyout.test.tsx.snap
+++ b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
@@ -192,54 +192,6 @@ exports[`EuiFlyout max width can be set to a default 1`] = `
 </div>
 `;
 
-exports[`EuiFlyout props accepts div props 1`] = `
-<div>
-  <div
-    data-focus-guard="true"
-    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-    tabindex="0"
-  />
-  <div
-    data-focus-guard="true"
-    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-    tabindex="1"
-  />
-  <div
-    data-focus-lock-disabled="false"
-  >
-    <div
-      class="euiFlyout euiFlyout--medium"
-      id="imaflyout"
-      role="dialog"
-      tabindex="0"
-    >
-      <button
-        aria-label="Closes this dialog"
-        class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
-        data-test-subj="euiFlyoutCloseButton"
-        type="button"
-      >
-        <svg
-          aria-hidden="true"
-          class="euiIcon euiIcon--medium euiIcon-isLoading euiButtonIcon__icon"
-          focusable="false"
-          height="16"
-          role="img"
-          viewBox="0 0 16 16"
-          width="16"
-          xmlns="http://www.w3.org/2000/svg"
-        />
-      </button>
-    </div>
-  </div>
-  <div
-    data-focus-guard="true"
-    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-    tabindex="0"
-  />
-</div>
-`;
-
 exports[`EuiFlyout props close button is not rendered 1`] = `
 <div>
   <div

From 0fc11363d5c09102faa288a341c5ab203ab1eb2b Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 24 Feb 2020 15:57:15 -0500
Subject: [PATCH 07/12] [Docs] Added header notification example to basic
 header example

---
 src-docs/src/views/header/header_app_menu.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src-docs/src/views/header/header_app_menu.js b/src-docs/src/views/header/header_app_menu.js
index 5eefdbab188..05997065c6c 100644
--- a/src-docs/src/views/header/header_app_menu.js
+++ b/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>

From 2b012e88870341af7b3266ee64a64358ce66ae95 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 24 Feb 2020 16:11:31 -0500
Subject: [PATCH 08/12] Adding aria-label to updates button

---
 src-docs/src/views/header/header_updates.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src-docs/src/views/header/header_updates.js b/src-docs/src/views/header/header_updates.js
index bfa77124086..14dfc87bc03 100755
--- a/src-docs/src/views/header/header_updates.js
+++ b/src-docs/src/views/header/header_updates.js
@@ -120,7 +120,9 @@ export default class extends Component {
         aria-controls="headerNewsFeed"
         aria-expanded={this.state.isFlyoutVisible}
         aria-haspopup="true"
-        aria-label="News feed"
+        aria-label={`News feed: ${
+          this.state.showBadge ? 'Updates available' : 'No updates'
+        }`}
         onClick={this.showFlyout}
         notification={this.state.showBadge && '•'}>
         <EuiIcon type="email" size="m" />

From 03787a907d39bf6bc589e93b0b0a366e9b0bb496 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 24 Feb 2020 16:30:03 -0500
Subject: [PATCH 09/12] [Docs] Better prop comments

---
 .../views/form_controls/display_toggles.js    |  6 ++++-
 src/components/color_picker/color_picker.tsx  |  2 ++
 .../form/field_number/field_number.tsx        |  6 +++--
 .../form/field_search/field_search.tsx        |  4 +++-
 src/components/form/field_text/field_text.tsx |  6 +++--
 .../form_control_layout.tsx                   |  6 +++--
 src/components/form/range/dual_range.tsx      | 24 +++++++++++++++++++
 src/components/form/select/select.tsx         |  6 +++--
 8 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/src-docs/src/views/form_controls/display_toggles.js b/src-docs/src/views/form_controls/display_toggles.js
index c126cd96f56..d0f2e2c7a51 100644
--- a/src-docs/src/views/form_controls/display_toggles.js
+++ b/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
diff --git a/src/components/color_picker/color_picker.tsx b/src/components/color_picker/color_picker.tsx
index 9004714d5ec..ffb70017ff0 100644
--- a/src/components/color_picker/color_picker.tsx
+++ b/src/components/color_picker/color_picker.tsx
@@ -77,11 +77,13 @@ export interface EuiColorPickerProps
 
   /**
    * Creates an input group with element(s) coming before input. It only shows when the `display` is set to `default`.
+   * `string` | `ReactElement` or an array of these
    */
   prepend?: EuiFormControlLayoutProps['prepend'];
 
   /**
    * Creates an input group with element(s) coming after input. It only shows when the `display` is set to `default`.
+   * `string` | `ReactElement` or an array of these
    */
   append?: EuiFormControlLayoutProps['append'];
 }
diff --git a/src/components/form/field_number/field_number.tsx b/src/components/form/field_number/field_number.tsx
index a9ee1e21895..a5ceefc4280 100644
--- a/src/components/form/field_number/field_number.tsx
+++ b/src/components/form/field_number/field_number.tsx
@@ -25,12 +25,14 @@ export type EuiFieldNumberProps = InputHTMLAttributes<HTMLInputElement> &
     inputRef?: Ref<HTMLInputElement>;
 
     /**
-     * Creates an input group with element(s) coming before input
+     * Creates an input group with element(s) coming before input.
+     * `string` | `ReactElement` or an array of these
      */
     prepend?: EuiFormControlLayoutProps['prepend'];
 
     /**
-     * Creates an input group with element(s) coming after input
+     * Creates an input group with element(s) coming after input.
+     * `string` | `ReactElement` or an array of these
      */
     append?: EuiFormControlLayoutProps['append'];
 
diff --git a/src/components/form/field_search/field_search.tsx b/src/components/form/field_search/field_search.tsx
index c78ad902129..2047cf46aa1 100644
--- a/src/components/form/field_search/field_search.tsx
+++ b/src/components/form/field_search/field_search.tsx
@@ -42,11 +42,13 @@ export interface EuiFieldSearchProps
   isClearable?: boolean;
   /**
    * Creates an input group with element(s) coming before input
+   * `string` | `ReactElement` or an array of these
    */
   prepend?: EuiFormControlLayoutProps['prepend'];
 
   /**
-   * Creates an input group with element(s) coming after input
+   * Creates an input group with element(s) coming after input.
+   * `string` | `ReactElement` or an array of these
    */
   append?: EuiFormControlLayoutProps['append'];
 }
diff --git a/src/components/form/field_text/field_text.tsx b/src/components/form/field_text/field_text.tsx
index 9322462a253..d234b4ec7e6 100644
--- a/src/components/form/field_text/field_text.tsx
+++ b/src/components/form/field_text/field_text.tsx
@@ -19,12 +19,14 @@ export type EuiFieldTextProps = InputHTMLAttributes<HTMLInputElement> &
     inputRef?: Ref<HTMLInputElement>;
 
     /**
-     * Creates an input group with element(s) coming before input
+     * Creates an input group with element(s) coming before input.
+     * `string` | `ReactElement` or an array of these
      */
     prepend?: EuiFormControlLayoutProps['prepend'];
 
     /**
-     * Creates an input group with element(s) coming after input
+     * Creates an input group with element(s) coming after input.
+     * `string` | `ReactElement` or an array of these
      */
     append?: EuiFormControlLayoutProps['append'];
 
diff --git a/src/components/form/form_control_layout/form_control_layout.tsx b/src/components/form/form_control_layout/form_control_layout.tsx
index 8a01f0c6073..b53629c5840 100644
--- a/src/components/form/form_control_layout/form_control_layout.tsx
+++ b/src/components/form/form_control_layout/form_control_layout.tsx
@@ -22,11 +22,13 @@ type PrependAppendType = StringOrReactElement | StringOrReactElement[];
 export type EuiFormControlLayoutProps = CommonProps &
   HTMLAttributes<HTMLDivElement> & {
     /**
-     * Creates an input group with element(s) coming before children
+     * Creates an input group with element(s) coming before children.
+     * `string` | `ReactElement` or an array of these
      */
     prepend?: PrependAppendType;
     /**
-     * Creates an input group with element(s) coming after children
+     * Creates an input group with element(s) coming after children.
+     * `string` | `ReactElement` or an array of these
      */
     append?: PrependAppendType;
     children?: ReactNode;
diff --git a/src/components/form/range/dual_range.tsx b/src/components/form/range/dual_range.tsx
index 7edba3ac3b1..e26ef1a5682 100644
--- a/src/components/form/range/dual_range.tsx
+++ b/src/components/form/range/dual_range.tsx
@@ -45,12 +45,36 @@ export interface EuiDualRangeProps
   ) => void;
   fullWidth?: boolean;
   isInvalid?: boolean;
+  /**
+   * Create colored indicators for certain intervals
+   */
   levels?: EuiRangeLevel[];
+  /**
+   * Shows static min/max labels on the sides of the range slider
+   */
   showLabels?: boolean;
+  /**
+   * Pass `true` to displays an extra input control for direct manipulation.
+   * Pass `'inputWithPopover'` to only show the input but show the range in a dropdown.
+   */
   showInput?: EuiRangeProps['showInput'];
+  /**
+   * Modifies the number of tick marks and at what interval
+   */
   tickInterval?: number;
+  /**
+   * Specified ticks at specified values
+   */
   ticks?: EuiRangeTick[];
+  /**
+   * Creates an input group with element(s) coming before input. Will only show if `showInput = inputWithPopver`.
+   * `string` | `ReactElement` or an array of these
+   */
   append?: EuiFormControlLayoutProps['append'];
+  /**
+   * Creates an input group with element(s) coming after input.  Will only show if `showInput = inputWithPopver`.
+   * `string` | `ReactElement` or an array of these
+   */
   prepend?: EuiFormControlLayoutProps['prepend'];
 
   /**
diff --git a/src/components/form/select/select.tsx b/src/components/form/select/select.tsx
index 8b6606c3496..41b4303d86e 100644
--- a/src/components/form/select/select.tsx
+++ b/src/components/form/select/select.tsx
@@ -37,11 +37,13 @@ export type EuiSelectProps = SelectHTMLAttributes<HTMLSelectElement> &
     compressed?: boolean;
 
     /**
-     * Creates an input group with element(s) coming before select
+     * Creates an input group with element(s) coming before select.
+     * `string` | `ReactElement` or an array of these
      */
     prepend?: EuiFormControlLayoutProps['prepend'];
     /**
-     * Creates an input group with element(s) coming after select
+     * Creates an input group with element(s) coming after select.
+     * `string` | `ReactElement` or an array of these
      */
     append?: EuiFormControlLayoutProps['append'];
   };

From 319d6d908a5e7a9cdcce6e5e75e4d78203382d64 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 24 Feb 2020 16:31:44 -0500
Subject: [PATCH 10/12] cl

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5fd3032ce3d..6c74f9aa0d7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,11 +11,15 @@
 - Added `image` glyph to `EuiIcon` ([#2870](https://github.com/elastic/eui/pull/2870))
 - Exported TS props from top level `EuiListGroupProps`, `EuiListGroupItemProps`, `EuiSelectableProps`,  `EuiSelectableOption`, `EuiSelectableOptionsListProps` ([#2869](https://github.com/elastic/eui/pull/2869))
 - Extending `EuiSelectable[options]` type with correct HTML element ([#2869](https://github.com/elastic/eui/pull/2869))
+- 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))
 
 ## [`19.0.0`](https://github.com/elastic/eui/tree/v19.0.0)
 

From f7227c58bc7ab988d4420b8ac259d911bcd0ba63 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 25 Feb 2020 16:28:49 -0500
Subject: [PATCH 11/12] Fix typos

---
 CHANGELOG.md                                             | 5 ++++-
 src-docs/src/views/accordion/accordion_extra.js          | 1 -
 src/components/form/range/dual_range.tsx                 | 9 ++++-----
 .../header/header_section/header_section_item_button.tsx | 2 +-
 4 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f9f86798b25..043f888751b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@
 - 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**
+
+- Extended `div` element in `EuiFlyout` type ([#2914](https://github.com/elastic/eui/pull/2914))
+
 **Theme: Amsterdam**
 
 - Altered `secondary`, `accent` colors to be more saturated ([#2873](https://github.com/elastic/eui/pull/2873))
@@ -35,7 +39,6 @@
 - Fixed building dev & docs on Windows ([#2847](https://github.com/elastic/eui/pull/2847))
 - Fixed screen reader discovery issues with `EuiBottomBar` and `EuiControlBar` ([#2861](https://github.com/elastic/eui/pull/2861))
 - 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**
 
diff --git a/src-docs/src/views/accordion/accordion_extra.js b/src-docs/src/views/accordion/accordion_extra.js
index 7afaed69907..c225624e3fa 100644
--- a/src-docs/src/views/accordion/accordion_extra.js
+++ b/src-docs/src/views/accordion/accordion_extra.js
@@ -5,7 +5,6 @@ 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">
diff --git a/src/components/form/range/dual_range.tsx b/src/components/form/range/dual_range.tsx
index e26ef1a5682..7296e7dbffb 100644
--- a/src/components/form/range/dual_range.tsx
+++ b/src/components/form/range/dual_range.tsx
@@ -67,16 +67,15 @@ export interface EuiDualRangeProps
    */
   ticks?: EuiRangeTick[];
   /**
-   * Creates an input group with element(s) coming before input. Will only show if `showInput = inputWithPopver`.
+   * Creates an input group with element(s) coming before input.  Will only show if `showInput = inputWithPopver`.
    * `string` | `ReactElement` or an array of these
    */
-  append?: EuiFormControlLayoutProps['append'];
+  prepend?: EuiFormControlLayoutProps['prepend'];
   /**
-   * Creates an input group with element(s) coming after input.  Will only show if `showInput = inputWithPopver`.
+   * Creates an input group with element(s) coming after input. Will only show if `showInput = inputWithPopver`.
    * `string` | `ReactElement` or an array of these
    */
-  prepend?: EuiFormControlLayoutProps['prepend'];
-
+  append?: EuiFormControlLayoutProps['append'];
   /**
    *  Intended to be uses with aria attributes. Some attributes may be overwritten.
    */
diff --git a/src/components/header/header_section/header_section_item_button.tsx b/src/components/header/header_section/header_section_item_button.tsx
index be5eeb5831d..648553fc859 100644
--- a/src/components/header/header_section/header_section_item_button.tsx
+++ b/src/components/header/header_section/header_section_item_button.tsx
@@ -10,7 +10,7 @@ import {
 type Props = CommonProps &
   ButtonHTMLAttributes<HTMLButtonElement> & {
     /**
-     * Inserts the node into a EuiBadgeNotification and places it appropriatesly against the button
+     * Inserts the node into a EuiBadgeNotification and places it appropriately against the button
      */
     notification?: EuiNotificationBadgeProps['children'];
     /**

From 6e611127303cd4d66a3ffc245f557903a313b256 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 28 Feb 2020 10:43:30 -0500
Subject: [PATCH 12/12] 1 more snap

---
 .../accordion/__snapshots__/accordion.test.tsx.snap  | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
index 300f0b4888d..4f49249582f 100644
--- a/src/components/accordion/__snapshots__/accordion.test.tsx.snap
+++ b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
@@ -218,15 +218,9 @@ exports[`EuiAccordion props arrowDisplay right is rendered 1`] = `
       <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"
+        <div
+          class="euiAccordion__icon"
+          data-euiicon-type="arrowRight"
         />
       </span>
       <span />