From e8c7f8d74a49d4f5cfb029ec317e4c563ebbf07b Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 16 Mar 2020 18:17:51 -0400
Subject: [PATCH 01/25] Fixed the passing of `size` from EuiListGroup to items

---
 .../__snapshots__/list_group.test.tsx.snap    | 10 +++++--
 src/components/list_group/list_group.test.tsx | 26 ++++++++++++-------
 src/components/list_group/list_group.tsx      |  7 +++++
 .../pinnable_list_group.test.tsx.snap         | 20 +++++++-------
 .../pinnable_list_group.tsx                   |  1 -
 5 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/src/components/list_group/__snapshots__/list_group.test.tsx.snap b/src/components/list_group/__snapshots__/list_group.test.tsx.snap
index 860d689dbe8..ac58002cf33 100644
--- a/src/components/list_group/__snapshots__/list_group.test.tsx.snap
+++ b/src/components/list_group/__snapshots__/list_group.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`EuiListGroup is rendered 1`] = `
 />
 `;
 
-exports[`EuiListGroup is rendered with listItems 1`] = `
+exports[`EuiListGroup listItems is rendered 1`] = `
 <ul
   class="euiListGroup euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
 >
@@ -103,7 +103,7 @@ exports[`EuiListGroup is rendered with listItems 1`] = `
 </ul>
 `;
 
-exports[`EuiListGroup is rendered with listItems and color 1`] = `
+exports[`EuiListGroup listItems is rendered with color 1`] = `
 <ul
   class="euiListGroup euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
 >
@@ -198,6 +198,12 @@ exports[`EuiListGroup is rendered with listItems and color 1`] = `
 </ul>
 `;
 
+exports[`EuiListGroup listItems is rendered with size 1`] = `
+<ul
+  class="euiListGroup euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
+/>
+`;
+
 exports[`EuiListGroup props bordered is rendered 1`] = `
 <ul
   class="euiListGroup euiListGroup-bordered euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
diff --git a/src/components/list_group/list_group.test.tsx b/src/components/list_group/list_group.test.tsx
index 5bc6fae9644..0e6de7c863b 100644
--- a/src/components/list_group/list_group.test.tsx
+++ b/src/components/list_group/list_group.test.tsx
@@ -42,18 +42,26 @@ describe('EuiListGroup', () => {
     expect(component).toMatchSnapshot();
   });
 
-  test('is rendered with listItems', () => {
-    const component = render(<EuiListGroup listItems={someListItems} />);
+  describe('listItems', () => {
+    test('is rendered', () => {
+      const component = render(<EuiListGroup listItems={someListItems} />);
 
-    expect(component).toMatchSnapshot();
-  });
+      expect(component).toMatchSnapshot();
+    });
 
-  test('is rendered with listItems and color', () => {
-    const component = render(
-      <EuiListGroup color="primary" listItems={someListItems} />
-    );
+    test('is rendered with color', () => {
+      const component = render(
+        <EuiListGroup color="primary" listItems={someListItems} />
+      );
 
-    expect(component).toMatchSnapshot();
+      expect(component).toMatchSnapshot();
+    });
+
+    test('is rendered with size', () => {
+      const component = render(<EuiListGroup color="primary" size="xs" />);
+
+      expect(component).toMatchSnapshot();
+    });
   });
 
   describe('props', () => {
diff --git a/src/components/list_group/list_group.tsx b/src/components/list_group/list_group.tsx
index f2d70bd458a..22fe2003f4f 100644
--- a/src/components/list_group/list_group.tsx
+++ b/src/components/list_group/list_group.tsx
@@ -41,6 +41,11 @@ export type EuiListGroupProps = CommonProps &
      */
     color?: EuiListGroupItemProps['color'];
 
+    /**
+     * Change the size of all `listItems` at once
+     */
+    size?: EuiListGroupItemProps['size'];
+
     /**
      * Sets the max-width of the page,
      * set to `true` to use the default size,
@@ -74,6 +79,7 @@ export const EuiListGroup: FunctionComponent<EuiListGroupProps> = ({
   maxWidth = true,
   showToolTips = false,
   color,
+  size,
   ariaLabelledby,
   ...rest
 }) => {
@@ -112,6 +118,7 @@ export const EuiListGroup: FunctionComponent<EuiListGroupProps> = ({
           showToolTip={showToolTips}
           wrapText={wrapText}
           color={color}
+          size={size}
           {...item}
         />,
       ];
diff --git a/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap b/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap
index 52b5080d5ce..b9af555a921 100644
--- a/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap
+++ b/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
   data-test-subj="test subject string"
 >
   <li
-    class="euiListGroupItem euiListGroupItem--small euiListGroupItem-hasExtraAction euiPinnableListGroup__item"
+    class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-hasExtraAction euiPinnableListGroup__item"
   >
     <span
       class="euiListGroupItem__text"
@@ -37,7 +37,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
     </button>
   </li>
   <li
-    class="euiListGroupItem euiListGroupItem--small euiListGroupItem-hasExtraAction euiPinnableListGroup__item"
+    class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-hasExtraAction euiPinnableListGroup__item"
   >
     <span
       class="euiListGroupItem__text"
@@ -62,7 +62,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
     </button>
   </li>
   <li
-    class="euiListGroupItem euiListGroupItem--small euiListGroupItem-isActive euiListGroupItem-isClickable euiListGroupItem-hasExtraAction euiPinnableListGroup__item"
+    class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isActive euiListGroupItem-isClickable euiListGroupItem-hasExtraAction euiPinnableListGroup__item"
   >
     <a
       class="euiListGroupItem__button"
@@ -89,7 +89,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
     </button>
   </li>
   <li
-    class="euiListGroupItem euiListGroupItem--small euiListGroupItem-isClickable euiListGroupItem-hasExtraAction euiPinnableListGroup__item"
+    class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isClickable euiListGroupItem-hasExtraAction euiPinnableListGroup__item"
   >
     <button
       class="euiListGroupItem__button"
@@ -116,7 +116,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
     </button>
   </li>
   <li
-    class="euiListGroupItem euiListGroupItem--small euiListGroupItem-isClickable euiListGroupItem-hasExtraAction euiPinnableListGroup__item"
+    class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isClickable euiListGroupItem-hasExtraAction euiPinnableListGroup__item"
   >
     <a
       class="euiListGroupItem__button"
@@ -152,7 +152,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <li
-    class="euiListGroupItem euiListGroupItem--small euiListGroupItem-hasExtraAction euiPinnableListGroup__item"
+    class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-hasExtraAction euiPinnableListGroup__item"
   >
     <span
       class="euiListGroupItem__text"
@@ -182,7 +182,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
     </button>
   </li>
   <li
-    class="euiListGroupItem euiListGroupItem--small euiListGroupItem-hasExtraAction euiPinnableListGroup__item"
+    class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-hasExtraAction euiPinnableListGroup__item"
   >
     <span
       class="euiListGroupItem__text"
@@ -207,7 +207,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
     </button>
   </li>
   <li
-    class="euiListGroupItem euiListGroupItem--small euiListGroupItem-isActive euiListGroupItem-isClickable euiListGroupItem-hasExtraAction euiPinnableListGroup__item"
+    class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isActive euiListGroupItem-isClickable euiListGroupItem-hasExtraAction euiPinnableListGroup__item"
   >
     <a
       class="euiListGroupItem__button"
@@ -234,7 +234,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
     </button>
   </li>
   <li
-    class="euiListGroupItem euiListGroupItem--small euiListGroupItem-isClickable euiListGroupItem-hasExtraAction euiPinnableListGroup__item"
+    class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isClickable euiListGroupItem-hasExtraAction euiPinnableListGroup__item"
   >
     <button
       class="euiListGroupItem__button"
@@ -261,7 +261,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
     </button>
   </li>
   <li
-    class="euiListGroupItem euiListGroupItem--small euiListGroupItem-isClickable euiListGroupItem-hasExtraAction euiPinnableListGroup__item"
+    class="euiListGroupItem euiListGroupItem--medium euiListGroupItem-isClickable euiListGroupItem-hasExtraAction euiPinnableListGroup__item"
   >
     <a
       class="euiListGroupItem__button"
diff --git a/src/components/list_group/pinnable_list_group/pinnable_list_group.tsx b/src/components/list_group/pinnable_list_group/pinnable_list_group.tsx
index b00accde19f..891e27d1cc1 100644
--- a/src/components/list_group/pinnable_list_group/pinnable_list_group.tsx
+++ b/src/components/list_group/pinnable_list_group/pinnable_list_group.tsx
@@ -70,7 +70,6 @@ export const EuiPinnableListGroup: FunctionComponent<
         'euiPinnableListGroup__item',
         item.className
       );
-      itemProps.size = item.size || 's';
 
       // Add the pinning action unless the item has it's own extra action
       if (onPinClick && !itemProps.extraAction) {

From d52b61cf6334e24166adfc9f4906001621d4ae9d Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 16 Mar 2020 18:49:24 -0400
Subject: [PATCH 02/25] Fix padding of `EuiCollapsibleNavGroup` if extra action
 is passed

---
 .../collapsible_nav_group/_collapsible_nav_group.scss     | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss b/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss
index b301243a8e3..adf849cf884 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss
+++ b/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss
@@ -2,6 +2,13 @@
   &:not(:first-child) {
     border-top: $euiBorderThin;
   }
+
+  // This class does not accept a custom classname
+  .euiAccordion__triggerWrapper {
+    // Add padding to the trigger wrapper in case an `extraAction` is passed
+    // that doesn't get wrapped in the `__heading`
+    padding: $euiSize;
+  }
 }
 
 .euiCollapsibleNavGroup--light {
@@ -24,7 +31,6 @@
 }
 
 .euiCollapsibleNavGroup__heading {
-  padding: $euiSize;
   font-weight: $euiFontWeightSemiBold;
 }
 

From 5a88b2951d399b55942a4cb28dd246ba35f47803 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 16 Mar 2020 18:56:50 -0400
Subject: [PATCH 03/25] Reset line-height of heading in button

---
 .../collapsible_nav_group/_collapsible_nav_group.scss            | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss b/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss
index adf849cf884..1c169e87cf2 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss
+++ b/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss
@@ -27,6 +27,7 @@
 
   .euiCollapsibleNavGroup__title {
     color: inherit;
+    line-height: inherit;
   }
 }
 

From cd2ef9186005bfd725b8de24a043572d8b865db1 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 16 Mar 2020 18:57:42 -0400
Subject: [PATCH 04/25] Adding doc example for groups with conetnt

---
 .../collapsible_nav_example.js                | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_example.js b/src-docs/src/views/collapsible_nav/collapsible_nav_example.js
index 37ee299c83f..23cd9829a13 100644
--- a/src-docs/src/views/collapsible_nav/collapsible_nav_example.js
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav_example.js
@@ -22,6 +22,10 @@ import CollapsibleNavGroup from './collapsible_nav_group';
 const collapsibleNavGroupSource = require('!!raw-loader!./collapsible_nav_group');
 const collapsibleNavGroupHtml = renderToHtml(CollapsibleNavGroup);
 
+import CollapsibleNavList from './collapsible_nav_list';
+const collapsibleNavListSource = require('!!raw-loader!./collapsible_nav_list');
+const collapsibleNavListHtml = renderToHtml(CollapsibleNavList);
+
 export const CollapsibleNavExample = {
   title: 'Collapsible nav',
   intro: (
@@ -119,5 +123,36 @@ export const CollapsibleNavExample = {
   background="none"
 />`,
     },
+    {
+      title: 'Nav groups with lists and other content',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: collapsibleNavListSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: collapsibleNavListHtml,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            <strong>EuiCollapsibleNavGroups</strong> can contain any children.
+            They work well with{' '}
+            <Link to="/display/list-group">
+              <strong>EuiListGroup, EuiPinnableListGroup</strong>
+            </Link>{' '}
+            and simple{' '}
+            <Link to="/navigation/link">
+              <strong>EuiText</strong>
+            </Link>
+            .
+          </p>
+          <p>Below are a few established patterns to use.</p>
+        </>
+      ),
+      demo: <CollapsibleNavList />,
+    },
   ],
 };

From a33047ffe69e67b5732a9a4ba6232df63226616d Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Mon, 16 Mar 2020 18:57:50 -0400
Subject: [PATCH 05/25] Adding doc example for groups with conetnt

---
 .../collapsible_nav/collapsible_nav_list.tsx  | 118 ++++++++++++++++++
 1 file changed, 118 insertions(+)
 create mode 100644 src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx

diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx
new file mode 100644
index 00000000000..c53f48835ff
--- /dev/null
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx
@@ -0,0 +1,118 @@
+import React from 'react';
+
+import { EuiCollapsibleNavGroup } from '../../../../src/components/collapsible_nav';
+import { EuiText } from '../../../../src/components/text';
+import {
+  EuiListGroup,
+  EuiListGroupProps,
+  EuiPinnableListGroup,
+  EuiPinnableListGroupItemProps,
+} from '../../../../src/components/list_group';
+import { EuiSpacer } from '../../../../src/components/spacer';
+import { EuiButton, EuiButtonIcon } from '../../../../src/components/button';
+import { EuiLink } from '../../../../src/components/link';
+
+const deploymentsList: EuiListGroupProps['listItems'] = [
+  {
+    label: 'combining-binaries',
+    iconType: 'logoAzureMono',
+    size: 's',
+  },
+  {
+    label: 'stack-monitoring',
+    iconType: 'logoAWSMono',
+    size: 's',
+  },
+];
+
+export const TopNavLinks: EuiPinnableListGroupItemProps[] = [
+  {
+    label: 'Home',
+    // @ts-ignore: Still throws a console error
+    // icon: <EuiIcon type={home} />,
+    active: true,
+  },
+  { label: 'Dashboards', pinned: true },
+  { label: 'Dev tools', pinned: true },
+  { label: 'Maps', pinned: true },
+];
+
+export const KibanaNavLinks: EuiPinnableListGroupItemProps[] = [
+  { label: 'Discover' },
+  { label: 'Visualize' },
+  { label: 'Dashboards' },
+  { label: 'Canvas' },
+  { label: 'Maps' },
+  { label: 'Machine Learning' },
+  { label: 'Graph' },
+];
+
+export default () => (
+  <>
+    <EuiCollapsibleNavGroup
+      title={
+        <span>
+          <small style={{ fontWeight: 'normal' }}>Deployment</small> <br />
+          <strong>personal-databoard</strong>
+        </span>
+      }
+      iconType="logoGCPMono"
+      iconSize="xl"
+      isCollapsible={true}
+      initialIsOpen={false}
+      background="dark">
+      <div className="kibanaNavDeployment__content">
+        <EuiListGroup listItems={deploymentsList} flush />
+        <EuiSpacer size="s" />
+        <EuiButton fullWidth>Manage deployments</EuiButton>
+      </div>
+    </EuiCollapsibleNavGroup>
+    <EuiCollapsibleNavGroup background="light">
+      <EuiPinnableListGroup
+        listItems={TopNavLinks}
+        onPinClick={() => {}}
+        maxWidth="none"
+        color="subdued"
+        gutterSize="none"
+        size="s"
+      />
+    </EuiCollapsibleNavGroup>
+    <EuiCollapsibleNavGroup
+      title="Kibana"
+      iconType="logoKibana"
+      isCollapsible={true}
+      initialIsOpen={true}>
+      <EuiPinnableListGroup
+        listItems={KibanaNavLinks}
+        onPinClick={() => {}}
+        maxWidth="none"
+        color="subdued"
+        gutterSize="none"
+        size="s"
+      />
+    </EuiCollapsibleNavGroup>
+    <EuiCollapsibleNavGroup
+      background="light"
+      iconType="logoSecurity"
+      title="Elastic Security"
+      isCollapsible={true}
+      initialIsOpen={true}
+      arrowDisplay="none"
+      extraAction={
+        <EuiButtonIcon
+          aria-label="Hide and never show again"
+          title="Hide and never show again"
+          iconType="cross"
+        />
+      }>
+      <EuiText size="s" color="subdued" style={{ padding: '0 8px 8px' }}>
+        <p>
+          Threat prevention, detection, and response with SIEM and endpoint
+          security.
+          <br />
+          <EuiLink>Learn more</EuiLink>
+        </p>
+      </EuiText>
+    </EuiCollapsibleNavGroup>
+  </>
+);

From 892400a136cf20cd11ed3755973aaf2dccac2a34 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 17 Mar 2020 11:38:17 -0400
Subject: [PATCH 06/25] Fix `title` type for EuiCollapsibleNavGroup

---
 .../collapsible_nav_group/collapsible_nav_group.tsx            | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx
index 836244a83bc..c7bbf88328f 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx
+++ b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx
@@ -48,7 +48,8 @@ export interface EuiCollapsibleNavGroupInterface extends CommonProps {
 }
 
 type GroupAsAccordion = EuiCollapsibleNavGroupInterface &
-  Omit<EuiAccordionProps, 'id'> & {
+  // The HTML `title` prop conflicts in type with our `title` prop
+  Omit<EuiAccordionProps, 'id' | 'title'> & {
     /**
      * If `true`, wraps children in the body of an accordion,
      * requiring the prop `title` to be used as the button

From 2dd17b5f591c23e0772d0bc16ec511b83f7b1714 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 17 Mar 2020 11:53:12 -0400
Subject: [PATCH 07/25] Starting full pattern example

---
 .../collapsible_nav/collapsible_nav_all.tsx   | 15 +++++
 .../collapsible_nav_example.js                | 56 +++++++++++++++++++
 2 files changed, 71 insertions(+)
 create mode 100644 src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx

diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
new file mode 100644
index 00000000000..ab4a91a56c6
--- /dev/null
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
@@ -0,0 +1,15 @@
+import React, { useState } from 'react';
+
+import { EuiCollapsibleNav } from '../../../../src/components/collapsible_nav';
+
+export default () => {
+  // const [isFullScreen, setIsFullScreen] = useState(false);
+  const [navIsOpen, setNavIsOpen] = useState(false);
+  // const [navIsLocked, setNavIsLocked] = useState(false);
+
+  return navIsOpen ? (
+    <EuiCollapsibleNav onClose={() => setNavIsOpen(false)} />
+  ) : (
+    <></>
+  );
+};
diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_example.js b/src-docs/src/views/collapsible_nav/collapsible_nav_example.js
index 23cd9829a13..a0fb0ffd688 100644
--- a/src-docs/src/views/collapsible_nav/collapsible_nav_example.js
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav_example.js
@@ -26,6 +26,10 @@ import CollapsibleNavList from './collapsible_nav_list';
 const collapsibleNavListSource = require('!!raw-loader!./collapsible_nav_list');
 const collapsibleNavListHtml = renderToHtml(CollapsibleNavList);
 
+import CollapsibleNavAll from './collapsible_nav_all';
+const collapsibleNavAllSource = require('!!raw-loader!./collapsible_nav_all');
+const collapsibleNavAllHtml = renderToHtml(CollapsibleNavAll);
+
 export const CollapsibleNavExample = {
   title: 'Collapsible nav',
   intro: (
@@ -153,6 +157,58 @@ export const CollapsibleNavExample = {
         </>
       ),
       demo: <CollapsibleNavList />,
+      snippet: `<EuiCollapsibleNavGroup
+  title="Kibana"
+  iconType="logoKibana"
+  isCollapsible={true}
+  initialIsOpen={true}>
+  <EuiPinnableListGroup
+    listItems={[
+      { label: 'Discover' },
+      { label: 'Visualize' }
+    ]}
+    onPinClick={() => {}}
+    maxWidth="none"
+    color="subdued"
+    gutterSize="none"
+    size="s"
+  />
+</EuiCollapsibleNavGroup>`,
+    },
+    {
+      title: 'Full pattern with header and saved pins',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: collapsibleNavAllSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: collapsibleNavAllHtml,
+        },
+      ],
+      text: (
+        <>
+          <h3>Putting it all together</h3>
+          <p>
+            The button below will launch a full screen example that includes{' '}
+            <Link to="/layout/header">
+              <strong>EuiHeader</strong>
+            </Link>{' '}
+            with a toggle button to open an <strong>EuiCollapsibleNav</strong>.
+            The contents of which are multiple{' '}
+            <strong>EuiCollapsibleNavGroups</strong> and saves the
+            open/closed/pinned state for each section and item in local store.
+          </p>
+          <p>
+            This is just a pattern and should be treated as such. Consuming
+            applications will need to create the navigation groups according to
+            their context and save the states as is appropriate to their data
+            store.
+          </p>
+        </>
+      ),
+      demo: <CollapsibleNavAll />,
     },
   ],
 };

From 108337b3d6d7ed90b32956221a0fa9e97719daeb Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 17 Mar 2020 16:31:15 -0400
Subject: [PATCH 08/25] Adjusted EuiFlyout position based on fixed EuiHeader

---
 src/components/flyout/_flyout.scss    | 8 ++++++++
 src/components/header/_variables.scss | 3 ++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/flyout/_flyout.scss b/src/components/flyout/_flyout.scss
index 2333723e298..44df0e3fe33 100644
--- a/src/components/flyout/_flyout.scss
+++ b/src/components/flyout/_flyout.scss
@@ -1,3 +1,5 @@
+@import '../header/variables';
+
 %eui-flyout {
   border-left: $euiBorderThin;
   // The mixin augments the above
@@ -13,6 +15,12 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
+
+  // When the EuiHeader is fixed, we need to account for it in the position of the flyout
+  .euiBody--headerIsFixed & {
+    top: $euiHeaderHeight + 1;
+    height: calc(100% - #{$euiHeaderHeight + 1});
+  }
 }
 
 .euiFlyout {
diff --git a/src/components/header/_variables.scss b/src/components/header/_variables.scss
index 61b4c2a86c7..561547bf6c6 100644
--- a/src/components/header/_variables.scss
+++ b/src/components/header/_variables.scss
@@ -4,4 +4,5 @@ $euiHeaderBackgroundColor: $euiColorEmptyShade;
 $euiHeaderBreadcrumbColor: $euiColorDarkestShade;
 
 // Layout vars
-$euiHeaderChildSize: $euiSizeXXL + $euiSizeS;
+$euiHeaderHeight: $euiSizeXXL + $euiSizeS;
+$euiHeaderChildSize: $euiHeaderHeight;

From d7fd664fbfc8f1617fd7e4e72451d115e35289f8 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 17 Mar 2020 17:26:53 -0400
Subject: [PATCH 09/25] Utility CSS helper for simple overflow scroll without
 shadows

---
 src/global_styling/mixins/_helpers.scss  | 19 ++++++++++++++-----
 src/global_styling/utility/_utility.scss | 11 +++++++++++
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/global_styling/mixins/_helpers.scss b/src/global_styling/mixins/_helpers.scss
index 7aab069dac7..196e75a9c76 100644
--- a/src/global_styling/mixins/_helpers.scss
+++ b/src/global_styling/mixins/_helpers.scss
@@ -48,20 +48,29 @@
   }
 }
 
-// The full overflow shadow plus scrollbars
-@mixin euiYScrollWithShadows {
+// Just overflow and scrollbars
+@mixin euiYScroll {
   @include euiScrollBar;
-  @include euiOverflowShadow('y');
   height: 100%;
   overflow-y: auto;
 }
 
-@mixin euiXScrollWithShadows {
+@mixin euiXScroll {
   @include euiScrollBar;
-  @include euiOverflowShadow('x');
   overflow-x: auto;
 }
 
+// The full overflow with shadow
+@mixin euiYScrollWithShadows {
+  @include euiYScroll;
+  @include euiOverflowShadow('y');
+}
+
+@mixin euiXScrollWithShadows {
+  @include euiXScroll;
+  @include euiOverflowShadow('x');
+}
+
 // Hiding elements offscreen to only be read by screen reader
 @mixin euiScreenReaderOnly {
   position: absolute;
diff --git a/src/global_styling/utility/_utility.scss b/src/global_styling/utility/_utility.scss
index 6a691df4c52..42825d57edd 100644
--- a/src/global_styling/utility/_utility.scss
+++ b/src/global_styling/utility/_utility.scss
@@ -97,6 +97,17 @@
 /**
   * Overflow scrolling
   */
+.eui-yScroll {
+  @include euiYScroll;
+}
+
+.eui-xScroll {
+  @include euiXScroll;
+}
+
+/**
+  * Overflow scrolling with shadows
+  */
 .eui-yScrollWithShadows {
   @include euiYScrollWithShadows;
 }

From 806dc67b300a62896985823da0a88b69211aff94 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 17 Mar 2020 17:50:10 -0400
Subject: [PATCH 10/25] Adding GuideFullScreen component

---
 src-docs/src/components/guide_components.scss |  8 +++++
 .../src/services/full_screen/full_screen.tsx  | 35 +++++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 src-docs/src/services/full_screen/full_screen.tsx

diff --git a/src-docs/src/components/guide_components.scss b/src-docs/src/components/guide_components.scss
index a37483cf9bc..3950197f7de 100644
--- a/src-docs/src/components/guide_components.scss
+++ b/src-docs/src/components/guide_components.scss
@@ -182,6 +182,14 @@ $guideZLevelHighest: $euiZLevel9 + 1000;
   height: 1px;
 }
 
+.guideFullScreenOverlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
 @import '../views/guidelines/index';
 @import 'guide_section/index';
 @import 'guide_rule/index';
diff --git a/src-docs/src/services/full_screen/full_screen.tsx b/src-docs/src/services/full_screen/full_screen.tsx
new file mode 100644
index 00000000000..359422e1c8e
--- /dev/null
+++ b/src-docs/src/services/full_screen/full_screen.tsx
@@ -0,0 +1,35 @@
+import React, {
+  useState,
+  Fragment,
+  FunctionComponent,
+  ReactNode,
+  useEffect,
+} from 'react';
+
+import { EuiFocusTrap } from '../../../../src/components/focus_trap';
+import { EuiButton } from '../../../../src/components/button';
+
+export const GuideFullScreen: FunctionComponent<{
+  buttonText?: ReactNode;
+  isFullScreen?: boolean;
+}> = ({
+  children,
+  isFullScreen = false,
+  buttonText = 'Show fullscreen demo',
+}) => {
+  const [fullScreen, setFullScreen] = useState(isFullScreen);
+
+  useEffect(() => {
+    setFullScreen(isFullScreen);
+  }, [isFullScreen]);
+
+  return (
+    <Fragment>
+      <EuiButton onClick={() => setFullScreen(true)} iconType="fullScreen">
+        {buttonText}
+      </EuiButton>
+
+      {fullScreen && <EuiFocusTrap>{children}</EuiFocusTrap>}
+    </Fragment>
+  );
+};

From 7f6a70891776013bf04f38bd39f0abb30a0f6497 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 18 Mar 2020 10:38:31 -0400
Subject: [PATCH 11/25] Adding content and storing states

---
 .../collapsible_nav/collapsible_nav_all.tsx   | 247 +++++++++++++++++-
 .../collapsible_nav/collapsible_nav_list.tsx  |  95 +++----
 .../collapsible_nav_group.tsx                 |   9 +-
 3 files changed, 296 insertions(+), 55 deletions(-)

diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
index ab4a91a56c6..20d9a33f1dc 100644
--- a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
@@ -1,15 +1,244 @@
 import React, { useState } from 'react';
+import _ from 'lodash';
 
-import { EuiCollapsibleNav } from '../../../../src/components/collapsible_nav';
+import {
+  EuiCollapsibleNav,
+  EuiCollapsibleNavGroup,
+} from '../../../../src/components/collapsible_nav';
+import {
+  EuiHeaderSectionItemButton,
+  EuiHeaderLogo,
+  EuiHeader,
+} from '../../../../src/components/header';
+import { EuiIcon } from '../../../../src/components/icon';
+import { EuiButtonEmpty } from '../../../../src/components/button';
+import { EuiPage } from '../../../../src/components/page';
+import {
+  EuiPinnableListGroup,
+  EuiListGroupItem,
+  EuiPinnableListGroupItemProps,
+} from '../../../../src/components/list_group';
+import { EuiFlexItem } from '../../../../src/components/flex';
+import { EuiHorizontalRule } from '../../../../src/components/horizontal_rule';
+import { GuideFullScreen } from '../../services/full_screen/full_screen';
+
+import {
+  DeploymentsGroup,
+  KibanaNavLinks,
+  SecurityGroup,
+} from './collapsible_nav_list';
+
+const TopLinks = [
+  { label: 'Home', iconType: 'home', isActive: true, 'aria-current': true },
+];
+const KibanaLinks = [...KibanaNavLinks];
+const LearnLinks: EuiPinnableListGroupItemProps[] = [
+  { label: 'Docs', href: '#/navigation/collapsible-nav' },
+  { label: 'Blogs', href: '#/navigation/collapsible-nav' },
+  { label: 'Webinars', href: '#/navigation/collapsible-nav' },
+  { label: 'Elastic.co', href: 'https://elastic.co' },
+];
 
 export default () => {
-  // const [isFullScreen, setIsFullScreen] = useState(false);
-  const [navIsOpen, setNavIsOpen] = useState(false);
-  // const [navIsLocked, setNavIsLocked] = useState(false);
-
-  return navIsOpen ? (
-    <EuiCollapsibleNav onClose={() => setNavIsOpen(false)} />
-  ) : (
-    <></>
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  const [navIsOpen, setNavIsOpen] = useState(
+    JSON.parse(String(localStorage.getItem('navIsDocked'))) || false
+  );
+  const [navIsDocked, setNavIsDocked] = useState(
+    JSON.parse(String(localStorage.getItem('navIsDocked'))) || false
+  );
+  const [openGroups, setOpenGroups] = useState(
+    JSON.parse(String(localStorage.getItem('openNavGroups'))) || [
+      'Kibana',
+      'Learn',
+    ]
+  );
+
+  // Save which groups are open and which are not with state and local store
+  const toggleAccordion = (isOpen: boolean, title?: string) => {
+    if (!title) return;
+    const itExists = openGroups.includes(title);
+    if (isOpen) {
+      if (itExists) return;
+      openGroups.push(title);
+    } else {
+      const index = openGroups.indexOf(title);
+      if (index > -1) {
+        openGroups.splice(index, 1);
+      }
+    }
+    setOpenGroups([...openGroups]);
+    localStorage.setItem('openNavGroups', JSON.stringify(openGroups));
+  };
+
+  // Pinning
+  const [pinnedItems, setPinnedItems] = useState<
+    EuiPinnableListGroupItemProps[]
+  >(JSON.parse(String(localStorage.getItem('pinnedItems'))) || []);
+
+  const addPin = (item: any) => {
+    if (!item || _.find(pinnedItems, { label: item.label })) {
+      return;
+    }
+    item.pinned = true;
+    const newPinnedItems = pinnedItems ? pinnedItems.concat(item) : [item];
+    setPinnedItems(newPinnedItems);
+    localStorage.setItem('pinnedItems', JSON.stringify(newPinnedItems));
+  };
+
+  const removePin = (item: any) => {
+    const pinIndex = _.findIndex(pinnedItems, { label: item.label });
+    if (pinIndex > -1) {
+      item.pinned = false;
+      const newPinnedItems = pinnedItems;
+      newPinnedItems.splice(pinIndex, 1);
+      setPinnedItems([...newPinnedItems]);
+      localStorage.setItem('pinnedItems', JSON.stringify(newPinnedItems));
+    }
+  };
+
+  function alterLinksWithCurrentState(
+    links: EuiPinnableListGroupItemProps[],
+    showPinned = false
+  ): EuiPinnableListGroupItemProps[] {
+    return links.map(link => {
+      const { pinned, ...rest } = link;
+      return {
+        pinned: showPinned ? pinned : false,
+        ...rest,
+      };
+    });
+  }
+
+  const renderMenuTrigger = () => {
+    return (
+      <EuiHeaderSectionItemButton
+        aria-label="Open nav"
+        onClick={() => setNavIsOpen(!navIsOpen)}>
+        <EuiIcon type={'menu'} size="m" />
+      </EuiHeaderSectionItemButton>
+    );
+  };
+
+  const leftSectionItems = [
+    <EuiHeaderLogo iconType="logoElastic">Elastic</EuiHeaderLogo>,
+  ];
+
+  if (!navIsDocked) {
+    leftSectionItems.unshift(renderMenuTrigger());
+  }
+
+  return (
+    <GuideFullScreen isFullScreen={isFullScreen}>
+      <EuiHeader
+        position="fixed"
+        sections={[
+          {
+            items: leftSectionItems,
+            borders: 'right',
+          },
+          {
+            items: [
+              <EuiButtonEmpty
+                iconType="minimize"
+                onClick={() => setIsFullScreen(false)}>
+                Exit full screen
+              </EuiButtonEmpty>,
+            ],
+          },
+        ]}
+      />
+
+      {navIsOpen && (
+        <EuiCollapsibleNav
+          docked={navIsDocked}
+          onClose={() => setNavIsOpen(false)}>
+          {/* Dark deployments section */}
+          <EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
+            {DeploymentsGroup}
+          </EuiFlexItem>
+
+          {/* Shaded pinned section always with a home item */}
+          <EuiFlexItem grow={false}>
+            <EuiCollapsibleNavGroup
+              background="light"
+              className="eui-yScroll"
+              style={{ maxHeight: '40vh' }}>
+              <EuiPinnableListGroup
+                listItems={alterLinksWithCurrentState(TopLinks).concat(
+                  alterLinksWithCurrentState(pinnedItems, true)
+                )}
+                onPinClick={removePin}
+                maxWidth="none"
+                color="subdued"
+                gutterSize="none"
+                size="s"
+              />
+            </EuiCollapsibleNavGroup>
+          </EuiFlexItem>
+
+          <EuiHorizontalRule margin="none" />
+
+          {/* BOTTOM */}
+          <EuiFlexItem className="eui-yScroll">
+            {/* Kibana section */}
+            <EuiCollapsibleNavGroup
+              title="Kibana"
+              iconType="logoKibana"
+              isCollapsible={true}
+              initialIsOpen={openGroups.includes('Kibana')}
+              onToggle={(isOpen: boolean) => toggleAccordion(isOpen, 'Kibana')}>
+              <EuiPinnableListGroup
+                listItems={alterLinksWithCurrentState(KibanaLinks)}
+                onPinClick={addPin}
+                maxWidth="none"
+                color="subdued"
+                gutterSize="none"
+                size="s"
+              />
+            </EuiCollapsibleNavGroup>
+
+            {/* Security callout */}
+            {SecurityGroup}
+
+            {/* Learn section */}
+            <EuiCollapsibleNavGroup
+              title="Learn"
+              iconType="training"
+              isCollapsible={true}
+              initialIsOpen={openGroups.includes('Learn')}
+              onToggle={(isOpen: boolean) => toggleAccordion(isOpen, 'Learn')}>
+              <EuiPinnableListGroup
+                listItems={alterLinksWithCurrentState(LearnLinks)}
+                onPinClick={addPin}
+                maxWidth="none"
+                color="subdued"
+                gutterSize="none"
+                size="s"
+              />
+            </EuiCollapsibleNavGroup>
+
+            {/* Docking button */}
+            <EuiCollapsibleNavGroup>
+              <EuiListGroupItem
+                size="xs"
+                color="subdued"
+                label={`${navIsDocked ? 'Undock' : 'Dock'} navigation`}
+                onClick={() => {
+                  setNavIsDocked(!navIsDocked);
+                  localStorage.setItem(
+                    'navIsDocked',
+                    JSON.stringify(!navIsDocked)
+                  );
+                }}
+                iconType={navIsDocked ? 'lock' : 'lockOpen'}
+              />
+            </EuiCollapsibleNavGroup>
+          </EuiFlexItem>
+        </EuiCollapsibleNav>
+      )}
+
+      <EuiPage className="guideFullScreenOverlay" />
+    </GuideFullScreen>
   );
 };
diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx
index c53f48835ff..36cdbf992a4 100644
--- a/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx
@@ -28,9 +28,8 @@ const deploymentsList: EuiListGroupProps['listItems'] = [
 export const TopNavLinks: EuiPinnableListGroupItemProps[] = [
   {
     label: 'Home',
-    // @ts-ignore: Still throws a console error
-    // icon: <EuiIcon type={home} />,
-    active: true,
+    iconType: 'home',
+    isActive: true,
   },
   { label: 'Dashboards', pinned: true },
   { label: 'Dev tools', pinned: true },
@@ -47,26 +46,56 @@ export const KibanaNavLinks: EuiPinnableListGroupItemProps[] = [
   { label: 'Graph' },
 ];
 
+export const DeploymentsGroup = (
+  <EuiCollapsibleNavGroup
+    title={
+      <span>
+        <small style={{ fontWeight: 'normal' }}>Deployment</small> <br />
+        <strong>personal-databoard</strong>
+      </span>
+    }
+    iconType="logoGCPMono"
+    iconSize="xl"
+    isCollapsible={true}
+    initialIsOpen={false}
+    background="dark">
+    <div className="kibanaNavDeployment__content">
+      <EuiListGroup listItems={deploymentsList} flush />
+      <EuiSpacer size="s" />
+      <EuiButton fullWidth>Manage deployments</EuiButton>
+    </div>
+  </EuiCollapsibleNavGroup>
+);
+
+export const SecurityGroup = (
+  <EuiCollapsibleNavGroup
+    background="light"
+    iconType="logoSecurity"
+    title="Elastic Security"
+    isCollapsible={true}
+    initialIsOpen={true}
+    arrowDisplay="none"
+    extraAction={
+      <EuiButtonIcon
+        aria-label="Hide and never show again"
+        title="Hide and never show again"
+        iconType="cross"
+      />
+    }>
+    <EuiText size="s" color="subdued" style={{ padding: '0 8px 8px' }}>
+      <p>
+        Threat prevention, detection, and response with SIEM and endpoint
+        security.
+        <br />
+        <EuiLink>Learn more</EuiLink>
+      </p>
+    </EuiText>
+  </EuiCollapsibleNavGroup>
+);
+
 export default () => (
   <>
-    <EuiCollapsibleNavGroup
-      title={
-        <span>
-          <small style={{ fontWeight: 'normal' }}>Deployment</small> <br />
-          <strong>personal-databoard</strong>
-        </span>
-      }
-      iconType="logoGCPMono"
-      iconSize="xl"
-      isCollapsible={true}
-      initialIsOpen={false}
-      background="dark">
-      <div className="kibanaNavDeployment__content">
-        <EuiListGroup listItems={deploymentsList} flush />
-        <EuiSpacer size="s" />
-        <EuiButton fullWidth>Manage deployments</EuiButton>
-      </div>
-    </EuiCollapsibleNavGroup>
+    {DeploymentsGroup}
     <EuiCollapsibleNavGroup background="light">
       <EuiPinnableListGroup
         listItems={TopNavLinks}
@@ -91,28 +120,6 @@ export default () => (
         size="s"
       />
     </EuiCollapsibleNavGroup>
-    <EuiCollapsibleNavGroup
-      background="light"
-      iconType="logoSecurity"
-      title="Elastic Security"
-      isCollapsible={true}
-      initialIsOpen={true}
-      arrowDisplay="none"
-      extraAction={
-        <EuiButtonIcon
-          aria-label="Hide and never show again"
-          title="Hide and never show again"
-          iconType="cross"
-        />
-      }>
-      <EuiText size="s" color="subdued" style={{ padding: '0 8px 8px' }}>
-        <p>
-          Threat prevention, detection, and response with SIEM and endpoint
-          security.
-          <br />
-          <EuiLink>Learn more</EuiLink>
-        </p>
-      </EuiText>
-    </EuiCollapsibleNavGroup>
+    {SecurityGroup}
   </>
 );
diff --git a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx
index c7bbf88328f..c19b80eed63 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx
+++ b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx
@@ -1,4 +1,9 @@
-import React, { FunctionComponent, ReactNode, useState } from 'react';
+import React, {
+  FunctionComponent,
+  ReactNode,
+  useState,
+  HTMLAttributes,
+} from 'react';
 import classNames from 'classnames';
 import { CommonProps, ExclusiveUnion } from '../../common';
 import { htmlIdGenerator } from '../../../services';
@@ -72,7 +77,7 @@ type GroupAsDiv = EuiCollapsibleNavGroupInterface & {
    * with the option to add an iconType
    */
   title?: ReactNode;
-};
+} & HTMLAttributes<HTMLDivElement>;
 
 export type EuiCollapsibleNavGroupProps = ExclusiveUnion<
   GroupAsAccordion,

From 7b7ecd0ae88a9ed93b7870550eae87c54ecd20d7 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 18 Mar 2020 10:41:38 -0400
Subject: [PATCH 12/25] Fixing incompatible type with `href`

---
 .../src/views/collapsible_nav/collapsible_nav_all.tsx    | 9 ++++++++-
 src/components/list_group/list_group_item.tsx            | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
index 20d9a33f1dc..b4b41ac3c59 100644
--- a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
@@ -31,7 +31,14 @@ import {
 const TopLinks = [
   { label: 'Home', iconType: 'home', isActive: true, 'aria-current': true },
 ];
-const KibanaLinks = [...KibanaNavLinks];
+const KibanaLinks: EuiPinnableListGroupItemProps[] = KibanaNavLinks.map(
+  link => {
+    return {
+      ...link,
+      href: '#',
+    };
+  }
+);
 const LearnLinks: EuiPinnableListGroupItemProps[] = [
   { label: 'Docs', href: '#/navigation/collapsible-nav' },
   { label: 'Blogs', href: '#/navigation/collapsible-nav' },
diff --git a/src/components/list_group/list_group_item.tsx b/src/components/list_group/list_group_item.tsx
index adfb3c0cfdb..04457fe55e9 100644
--- a/src/components/list_group/list_group_item.tsx
+++ b/src/components/list_group/list_group_item.tsx
@@ -39,7 +39,7 @@ export type EuiListGroupItemProps = CommonProps &
   ExclusiveUnion<
     ExclusiveUnion<
       ButtonHTMLAttributes<HTMLButtonElement>,
-      AnchorHTMLAttributes<HTMLAnchorElement>
+      Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>
     >,
     HTMLAttributes<HTMLSpanElement>
   > & {

From f41afb474832e996708ea7965b14145c5901f1b2 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 18 Mar 2020 10:49:58 -0400
Subject: [PATCH 13/25] Fix EuiHorizontalSizing when in flex groups

---
 src/components/horizontal_rule/_horizontal_rule.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/horizontal_rule/_horizontal_rule.scss b/src/components/horizontal_rule/_horizontal_rule.scss
index 4e903a07051..b90b06bf18b 100644
--- a/src/components/horizontal_rule/_horizontal_rule.scss
+++ b/src/components/horizontal_rule/_horizontal_rule.scss
@@ -1,9 +1,9 @@
 .euiHorizontalRule {
   border: none;
-  // Sometimes Chrome "calculates" an element height of e.g. 0.990px, which it
-  // rounds down, thereby hiding the element.
-  height: 1.1px;
+  height: 1px;
   background-color: $euiBorderColor;
+  flex-shrink: 0; // Ensure when used in flex group, it retains its size
+  flex-grow: 0; // Ensure when used in flex group, it retains its size
 
   &.euiHorizontalRule--full {
     width: 100%;

From b16effb0dd24a6f48e109a0d1fde7dedee9d3ae6 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 18 Mar 2020 10:50:44 -0400
Subject: [PATCH 14/25] Cleanup

---
 .../src/views/collapsible_nav/collapsible_nav_all.tsx  | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
index b4b41ac3c59..b05de09d463 100644
--- a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
@@ -35,7 +35,7 @@ const KibanaLinks: EuiPinnableListGroupItemProps[] = KibanaNavLinks.map(
   link => {
     return {
       ...link,
-      href: '#',
+      href: '#/navigation/collapsible-nav',
     };
   }
 );
@@ -54,6 +54,10 @@ export default () => {
   const [navIsDocked, setNavIsDocked] = useState(
     JSON.parse(String(localStorage.getItem('navIsDocked'))) || false
   );
+
+  /**
+   * Accordion toggling
+   */
   const [openGroups, setOpenGroups] = useState(
     JSON.parse(String(localStorage.getItem('openNavGroups'))) || [
       'Kibana',
@@ -78,7 +82,9 @@ export default () => {
     localStorage.setItem('openNavGroups', JSON.stringify(openGroups));
   };
 
-  // Pinning
+  /**
+   * Pinning
+   */
   const [pinnedItems, setPinnedItems] = useState<
     EuiPinnableListGroupItemProps[]
   >(JSON.parse(String(localStorage.getItem('pinnedItems'))) || []);

From 0692b9df488543f12d33a8c1dd312a00642e601c Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 18 Mar 2020 10:59:31 -0400
Subject: [PATCH 15/25] Quick fix to nav heading

---
 .../collapsible_nav_group/_collapsible_nav_group.scss        | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss b/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss
index 1c169e87cf2..257c5142be5 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss
+++ b/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss
@@ -33,6 +33,11 @@
 
 .euiCollapsibleNavGroup__heading {
   font-weight: $euiFontWeightSemiBold;
+
+  // If the heading is not in an accordion, it needs the padding
+  &:not(.euiAccordion__button) {
+    padding: $euiSize;
+  }
 }
 
 .euiCollapsibleNavGroup__children {

From 3974d8469eb2b6b5b5cdec134c5d5bc7f2a39285 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 18 Mar 2020 11:28:32 -0400
Subject: [PATCH 16/25] Using subdued text color

---
 src/components/list_group/_variables.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/list_group/_variables.scss b/src/components/list_group/_variables.scss
index 63bb0e85a92..cb2caf0e35c 100644
--- a/src/components/list_group/_variables.scss
+++ b/src/components/list_group/_variables.scss
@@ -9,7 +9,7 @@ $euiListGroupGutterTypes: (
 $euiListGroupItemColorTypes: (
   primary: $euiColorPrimaryText,
   text: $euiTextColor,
-  subdued: $euiColorDarkShade,
+  subdued: $euiTextSubduedColor,
   ghost: $euiColorGhost,
 );
 

From 7c03d22fcedeeee6eee0df88cc8d8536a0e341ca Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 18 Mar 2020 11:36:08 -0400
Subject: [PATCH 17/25] Ghost button in dark section for now

---
 src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx
index 36cdbf992a4..ea35fc65cc9 100644
--- a/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx
@@ -62,7 +62,9 @@ export const DeploymentsGroup = (
     <div className="kibanaNavDeployment__content">
       <EuiListGroup listItems={deploymentsList} flush />
       <EuiSpacer size="s" />
-      <EuiButton fullWidth>Manage deployments</EuiButton>
+      <EuiButton color="ghost" fullWidth>
+        Manage deployments
+      </EuiButton>
     </div>
   </EuiCollapsibleNavGroup>
 );

From 1fb63034bd5e9643bd33c71ced98ff199369bff3 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 18 Mar 2020 11:58:53 -0400
Subject: [PATCH 18/25] Some browser fixes

---
 .../collapsible_nav/collapsible_nav_all.tsx   |  2 +-
 .../__snapshots__/accordion.test.tsx.snap     | 34 ++++++++++++++-----
 src/components/accordion/accordion.tsx        |  8 ++++-
 .../collapsible_nav_group.test.tsx.snap       |  4 ++-
 src/global_styling/utility/_utility.scss      |  8 +++--
 5 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
index b05de09d463..694dc96c279 100644
--- a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
@@ -172,7 +172,7 @@ export default () => {
           </EuiFlexItem>
 
           {/* Shaded pinned section always with a home item */}
-          <EuiFlexItem grow={false}>
+          <EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
             <EuiCollapsibleNavGroup
               background="light"
               className="eui-yScroll"
diff --git a/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
index 4f49249582f..d34f5210c31 100644
--- a/src/components/accordion/__snapshots__/accordion.test.tsx.snap
+++ b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
@@ -35,7 +35,9 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
             />
           </EuiIcon>
         </span>
-        <span />
+        <span
+          className="euiIEFlexWrapFix"
+        />
       </button>
     </div>
     <div
@@ -100,7 +102,9 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
             />
           </EuiIcon>
         </span>
-        <span />
+        <span
+          className="euiIEFlexWrapFix"
+        />
       </button>
     </div>
     <div
@@ -153,7 +157,9 @@ exports[`EuiAccordion is rendered 1`] = `
           data-euiicon-type="arrowRight"
         />
       </span>
-      <span />
+      <span
+        class="euiIEFlexWrapFix"
+      />
     </button>
   </div>
   <div
@@ -182,7 +188,9 @@ exports[`EuiAccordion props arrowDisplay none is rendered 1`] = `
       class="euiAccordion__button"
       type="button"
     >
-      <span />
+      <span
+        class="euiIEFlexWrapFix"
+      />
     </button>
   </div>
   <div
@@ -223,7 +231,9 @@ exports[`EuiAccordion props arrowDisplay right is rendered 1`] = `
           data-euiicon-type="arrowRight"
         />
       </span>
-      <span />
+      <span
+        class="euiIEFlexWrapFix"
+      />
     </button>
   </div>
   <div
@@ -264,7 +274,9 @@ exports[`EuiAccordion props buttonContent is rendered 1`] = `
           data-euiicon-type="arrowRight"
         />
       </span>
-      <span>
+      <span
+        class="euiIEFlexWrapFix"
+      >
         <div>
           Button content
         </div>
@@ -306,7 +318,7 @@ exports[`EuiAccordion props buttonContentClassName is rendered 1`] = `
         />
       </span>
       <span
-        class="button content class name"
+        class="euiIEFlexWrapFix button content class name"
       />
     </button>
   </div>
@@ -344,7 +356,9 @@ exports[`EuiAccordion props extraAction is rendered 1`] = `
           data-euiicon-type="arrowRight"
         />
       </span>
-      <span />
+      <span
+        class="euiIEFlexWrapFix"
+      />
     </button>
     <div
       class="euiAccordion__optionalAction"
@@ -388,7 +402,9 @@ exports[`EuiAccordion props initialIsOpen is rendered 1`] = `
           data-euiicon-type="arrowRight"
         />
       </span>
-      <span />
+      <span
+        class="euiIEFlexWrapFix"
+      />
     </button>
   </div>
   <div
diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx
index 54a052ad921..026c0f8322c 100644
--- a/src/components/accordion/accordion.tsx
+++ b/src/components/accordion/accordion.tsx
@@ -189,7 +189,13 @@ export class EuiAccordion extends Component<
             className={buttonClasses}
             type="button">
             {icon}
-            <span className={buttonContentClassName}>{buttonContent}</span>
+            <span
+              className={classNames(
+                'euiIEFlexWrapFix',
+                buttonContentClassName
+              )}>
+              {buttonContent}
+            </span>
           </button>
 
           {optionalAction}
diff --git a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
index 082ad42be5d..0dcef89fb1c 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
+++ b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
@@ -217,7 +217,9 @@ exports[`EuiCollapsibleNavGroup when isCollapsible is true will render an accord
           data-euiicon-type="arrowRight"
         />
       </span>
-      <span>
+      <span
+        class="euiIEFlexWrapFix"
+      >
         <div
           class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
         >
diff --git a/src/global_styling/utility/_utility.scss b/src/global_styling/utility/_utility.scss
index 42825d57edd..d8f94811f4a 100644
--- a/src/global_styling/utility/_utility.scss
+++ b/src/global_styling/utility/_utility.scss
@@ -89,9 +89,11 @@
   * https://github.com/philipwalton/flexbugs/issues/104
   */
 .euiIEFlexWrapFix {
-  flex-grow: 1;
-  flex-shrink: 1;
-  flex-basis: 0%;
+  @include internetExplorerOnly {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0%;
+  }
 }
 
 /**

From 3c28b864310e97b84cc9cc8a4df236bd2ba79323 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 18 Mar 2020 12:34:56 -0400
Subject: [PATCH 19/25] Fixes for mobile

Including the addition of the EuiCollapsibleNavToggle component
---
 .../collapsible_nav/collapsible_nav_all.tsx   | 49 +++++++++----------
 .../collapsible_nav_example.js                |  7 +++
 .../collapsible_nav_toggle.test.tsx.snap      | 13 +++++
 .../collapsible_nav/_collapsible_nav.scss     |  5 ++
 .../collapsible_nav_toggle.test.tsx           | 25 ++++++++++
 .../collapsible_nav_toggle.tsx                | 29 +++++++++++
 src/components/collapsible_nav/index.ts       |  5 ++
 src/components/index.js                       |  6 ++-
 8 files changed, 112 insertions(+), 27 deletions(-)
 create mode 100644 src/components/collapsible_nav/__snapshots__/collapsible_nav_toggle.test.tsx.snap
 create mode 100644 src/components/collapsible_nav/collapsible_nav_toggle.test.tsx
 create mode 100644 src/components/collapsible_nav/collapsible_nav_toggle.tsx

diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
index 694dc96c279..c5e97ce50bc 100644
--- a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
@@ -3,6 +3,7 @@ import _ from 'lodash';
 
 import {
   EuiCollapsibleNav,
+  EuiCollapsibleNavToggle,
   EuiCollapsibleNavGroup,
 } from '../../../../src/components/collapsible_nav';
 import {
@@ -27,6 +28,7 @@ import {
   KibanaNavLinks,
   SecurityGroup,
 } from './collapsible_nav_list';
+import { EuiShowFor } from '../../../../src/components/responsive';
 
 const TopLinks = [
   { label: 'Home', iconType: 'home', isActive: true, 'aria-current': true },
@@ -123,24 +125,17 @@ export default () => {
     });
   }
 
-  const renderMenuTrigger = () => {
-    return (
+  const leftSectionItems = [
+    <EuiCollapsibleNavToggle navIsDocked={navIsDocked}>
       <EuiHeaderSectionItemButton
         aria-label="Open nav"
         onClick={() => setNavIsOpen(!navIsOpen)}>
         <EuiIcon type={'menu'} size="m" />
       </EuiHeaderSectionItemButton>
-    );
-  };
-
-  const leftSectionItems = [
+    </EuiCollapsibleNavToggle>,
     <EuiHeaderLogo iconType="logoElastic">Elastic</EuiHeaderLogo>,
   ];
 
-  if (!navIsDocked) {
-    leftSectionItems.unshift(renderMenuTrigger());
-  }
-
   return (
     <GuideFullScreen isFullScreen={isFullScreen}>
       <EuiHeader
@@ -231,22 +226,24 @@ export default () => {
               />
             </EuiCollapsibleNavGroup>
 
-            {/* Docking button */}
-            <EuiCollapsibleNavGroup>
-              <EuiListGroupItem
-                size="xs"
-                color="subdued"
-                label={`${navIsDocked ? 'Undock' : 'Dock'} navigation`}
-                onClick={() => {
-                  setNavIsDocked(!navIsDocked);
-                  localStorage.setItem(
-                    'navIsDocked',
-                    JSON.stringify(!navIsDocked)
-                  );
-                }}
-                iconType={navIsDocked ? 'lock' : 'lockOpen'}
-              />
-            </EuiCollapsibleNavGroup>
+            {/* Docking button only for larger screens that can support it*/}
+            <EuiShowFor sizes={['l', 'xl']}>
+              <EuiCollapsibleNavGroup>
+                <EuiListGroupItem
+                  size="xs"
+                  color="subdued"
+                  label={`${navIsDocked ? 'Undock' : 'Dock'} navigation`}
+                  onClick={() => {
+                    setNavIsDocked(!navIsDocked);
+                    localStorage.setItem(
+                      'navIsDocked',
+                      JSON.stringify(!navIsDocked)
+                    );
+                  }}
+                  iconType={navIsDocked ? 'lock' : 'lockOpen'}
+                />
+              </EuiCollapsibleNavGroup>
+            </EuiShowFor>
           </EuiFlexItem>
         </EuiCollapsibleNav>
       )}
diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_example.js b/src-docs/src/views/collapsible_nav/collapsible_nav_example.js
index a0fb0ffd688..e94d31b86c0 100644
--- a/src-docs/src/views/collapsible_nav/collapsible_nav_example.js
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav_example.js
@@ -206,6 +206,13 @@ export const CollapsibleNavExample = {
             their context and save the states as is appropriate to their data
             store.
           </p>
+          <h3>EuiCollapsibleNavToggle</h3>
+          <p>
+            This example also introduces the{' '}
+            <strong>EuiCollapsibleNavToggle</strong> component, which is used to
+            simply wrap around your external nav trigger to show/hide in certain
+            docked and mobile states.
+          </p>
         </>
       ),
       demo: <CollapsibleNavAll />,
diff --git a/src/components/collapsible_nav/__snapshots__/collapsible_nav_toggle.test.tsx.snap b/src/components/collapsible_nav/__snapshots__/collapsible_nav_toggle.test.tsx.snap
new file mode 100644
index 00000000000..3e3f52c81f3
--- /dev/null
+++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav_toggle.test.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiCollapsibleNavToggle is rendered 1`] = `
+<span
+  class="euiCollapsibleNavToggle"
+/>
+`;
+
+exports[`EuiCollapsibleNavToggle is rendered when navIsDocked is true 1`] = `
+<span
+  class="euiCollapsibleNavToggle euiCollapsibleNavToggle--navIsDocked"
+/>
+`;
diff --git a/src/components/collapsible_nav/_collapsible_nav.scss b/src/components/collapsible_nav/_collapsible_nav.scss
index 7d11ac4fff7..042ec41f4e1 100644
--- a/src/components/collapsible_nav/_collapsible_nav.scss
+++ b/src/components/collapsible_nav/_collapsible_nav.scss
@@ -31,6 +31,10 @@
     }
   }
 
+  .euiCollapsibleNavToggle--navIsDocked {
+    display: none;
+  }
+
   .euiBody--collapsibleNavIsDocked {
     // Shrink the content from the left so it's no longer overlapped by the nav drawer (ALWAYS)
     padding-left: $euiCollapsibleNavWidth !important; // sass-lint:disable-line no-important
@@ -50,3 +54,4 @@
     transform: translateX(0%);
   }
 }
+
diff --git a/src/components/collapsible_nav/collapsible_nav_toggle.test.tsx b/src/components/collapsible_nav/collapsible_nav_toggle.test.tsx
new file mode 100644
index 00000000000..c15efc39fcc
--- /dev/null
+++ b/src/components/collapsible_nav/collapsible_nav_toggle.test.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { EuiCollapsibleNavToggle } from './collapsible_nav_toggle';
+
+describe('EuiCollapsibleNavToggle', () => {
+  test('is rendered', () => {
+    const component = render(
+      <EuiCollapsibleNavToggle navIsDocked={false}>
+        <span />
+      </EuiCollapsibleNavToggle>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('is rendered when navIsDocked is true', () => {
+    const component = render(
+      <EuiCollapsibleNavToggle navIsDocked={true}>
+        <span />
+      </EuiCollapsibleNavToggle>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+});
diff --git a/src/components/collapsible_nav/collapsible_nav_toggle.tsx b/src/components/collapsible_nav/collapsible_nav_toggle.tsx
new file mode 100644
index 00000000000..fac4dd98686
--- /dev/null
+++ b/src/components/collapsible_nav/collapsible_nav_toggle.tsx
@@ -0,0 +1,29 @@
+import { ReactElement, FunctionComponent, cloneElement } from 'react';
+import classNames from 'classnames';
+
+export interface EuiCollapsibleNavToggleProps {
+  children: ReactElement<any>;
+  /**
+   * The docked state must be passed in order to hide/show the toggle appropriately
+   */
+  navIsDocked: boolean;
+}
+
+export const EuiCollapsibleNavToggle: FunctionComponent<
+  EuiCollapsibleNavToggleProps
+> = ({ children, navIsDocked }) => {
+  const classes = classNames(
+    'euiCollapsibleNavToggle',
+    {
+      'euiCollapsibleNavToggle--navIsDocked': navIsDocked,
+    },
+    children.props.className
+  );
+
+  const props = {
+    ...children.props,
+    className: classes,
+  };
+
+  return cloneElement(children, props);
+};
diff --git a/src/components/collapsible_nav/index.ts b/src/components/collapsible_nav/index.ts
index 846e72f558f..3a6172213a0 100644
--- a/src/components/collapsible_nav/index.ts
+++ b/src/components/collapsible_nav/index.ts
@@ -3,4 +3,9 @@ export {
   EuiCollapsibleNavGroupProps,
 } from './collapsible_nav_group';
 
+export {
+  EuiCollapsibleNavToggle,
+  EuiCollapsibleNavToggleProps,
+} from './collapsible_nav_toggle';
+
 export { EuiCollapsibleNav, EuiCollapsibleNavProps } from './collapsible_nav';
diff --git a/src/components/index.js b/src/components/index.js
index 35305c7a47f..d8daca39b59 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -37,7 +37,11 @@ export { EuiCode, EuiCodeBlock, EuiCodeBlockImpl } from './code';
 
 export { EuiCodeEditor } from './code_editor';
 
-export { EuiCollapsibleNavGroup, EuiCollapsibleNav } from './collapsible_nav';
+export {
+  EuiCollapsibleNav,
+  EuiCollapsibleNavGroup,
+  EuiCollapsibleNavToggle,
+} from './collapsible_nav';
 
 export {
   EuiColorPicker,

From 1940b4dad91e58cc75659a1530d1f9356b597114 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Wed, 18 Mar 2020 12:47:01 -0500
Subject: [PATCH 20/25] render prop pattern

---
 .../src/services/full_screen/full_screen.tsx  |  13 +-
 .../collapsible_nav/collapsible_nav_all.tsx   | 231 +++++++++---------
 2 files changed, 126 insertions(+), 118 deletions(-)

diff --git a/src-docs/src/services/full_screen/full_screen.tsx b/src-docs/src/services/full_screen/full_screen.tsx
index 359422e1c8e..838f800ea5c 100644
--- a/src-docs/src/services/full_screen/full_screen.tsx
+++ b/src-docs/src/services/full_screen/full_screen.tsx
@@ -2,14 +2,15 @@ import React, {
   useState,
   Fragment,
   FunctionComponent,
+  ReactElement,
   ReactNode,
-  useEffect,
 } from 'react';
 
 import { EuiFocusTrap } from '../../../../src/components/focus_trap';
 import { EuiButton } from '../../../../src/components/button';
 
 export const GuideFullScreen: FunctionComponent<{
+  children: (setFullScreen: (isFullScreen: boolean) => void) => ReactElement;
   buttonText?: ReactNode;
   isFullScreen?: boolean;
 }> = ({
@@ -19,17 +20,17 @@ export const GuideFullScreen: FunctionComponent<{
 }) => {
   const [fullScreen, setFullScreen] = useState(isFullScreen);
 
-  useEffect(() => {
-    setFullScreen(isFullScreen);
-  }, [isFullScreen]);
-
   return (
     <Fragment>
       <EuiButton onClick={() => setFullScreen(true)} iconType="fullScreen">
         {buttonText}
       </EuiButton>
 
-      {fullScreen && <EuiFocusTrap>{children}</EuiFocusTrap>}
+      {fullScreen && (
+        <EuiFocusTrap>
+          <Fragment>{children(setFullScreen)}</Fragment>
+        </EuiFocusTrap>
+      )}
     </Fragment>
   );
 };
diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
index c5e97ce50bc..41cb1978919 100644
--- a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
@@ -49,7 +49,6 @@ const LearnLinks: EuiPinnableListGroupItemProps[] = [
 ];
 
 export default () => {
-  const [isFullScreen, setIsFullScreen] = useState(false);
   const [navIsOpen, setNavIsOpen] = useState(
     JSON.parse(String(localStorage.getItem('navIsDocked'))) || false
   );
@@ -137,118 +136,126 @@ export default () => {
   ];
 
   return (
-    <GuideFullScreen isFullScreen={isFullScreen}>
-      <EuiHeader
-        position="fixed"
-        sections={[
-          {
-            items: leftSectionItems,
-            borders: 'right',
-          },
-          {
-            items: [
-              <EuiButtonEmpty
-                iconType="minimize"
-                onClick={() => setIsFullScreen(false)}>
-                Exit full screen
-              </EuiButtonEmpty>,
-            ],
-          },
-        ]}
-      />
-
-      {navIsOpen && (
-        <EuiCollapsibleNav
-          docked={navIsDocked}
-          onClose={() => setNavIsOpen(false)}>
-          {/* Dark deployments section */}
-          <EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
-            {DeploymentsGroup}
-          </EuiFlexItem>
-
-          {/* Shaded pinned section always with a home item */}
-          <EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
-            <EuiCollapsibleNavGroup
-              background="light"
-              className="eui-yScroll"
-              style={{ maxHeight: '40vh' }}>
-              <EuiPinnableListGroup
-                listItems={alterLinksWithCurrentState(TopLinks).concat(
-                  alterLinksWithCurrentState(pinnedItems, true)
-                )}
-                onPinClick={removePin}
-                maxWidth="none"
-                color="subdued"
-                gutterSize="none"
-                size="s"
-              />
-            </EuiCollapsibleNavGroup>
-          </EuiFlexItem>
-
-          <EuiHorizontalRule margin="none" />
-
-          {/* BOTTOM */}
-          <EuiFlexItem className="eui-yScroll">
-            {/* Kibana section */}
-            <EuiCollapsibleNavGroup
-              title="Kibana"
-              iconType="logoKibana"
-              isCollapsible={true}
-              initialIsOpen={openGroups.includes('Kibana')}
-              onToggle={(isOpen: boolean) => toggleAccordion(isOpen, 'Kibana')}>
-              <EuiPinnableListGroup
-                listItems={alterLinksWithCurrentState(KibanaLinks)}
-                onPinClick={addPin}
-                maxWidth="none"
-                color="subdued"
-                gutterSize="none"
-                size="s"
-              />
-            </EuiCollapsibleNavGroup>
-
-            {/* Security callout */}
-            {SecurityGroup}
-
-            {/* Learn section */}
-            <EuiCollapsibleNavGroup
-              title="Learn"
-              iconType="training"
-              isCollapsible={true}
-              initialIsOpen={openGroups.includes('Learn')}
-              onToggle={(isOpen: boolean) => toggleAccordion(isOpen, 'Learn')}>
-              <EuiPinnableListGroup
-                listItems={alterLinksWithCurrentState(LearnLinks)}
-                onPinClick={addPin}
-                maxWidth="none"
-                color="subdued"
-                gutterSize="none"
-                size="s"
-              />
-            </EuiCollapsibleNavGroup>
-
-            {/* Docking button only for larger screens that can support it*/}
-            <EuiShowFor sizes={['l', 'xl']}>
-              <EuiCollapsibleNavGroup>
-                <EuiListGroupItem
-                  size="xs"
-                  color="subdued"
-                  label={`${navIsDocked ? 'Undock' : 'Dock'} navigation`}
-                  onClick={() => {
-                    setNavIsDocked(!navIsDocked);
-                    localStorage.setItem(
-                      'navIsDocked',
-                      JSON.stringify(!navIsDocked)
-                    );
-                  }}
-                  iconType={navIsDocked ? 'lock' : 'lockOpen'}
-                />
-              </EuiCollapsibleNavGroup>
-            </EuiShowFor>
-          </EuiFlexItem>
-        </EuiCollapsibleNav>
-      )}
+    <GuideFullScreen>
+      {setIsFullScreen => (
+        <React.Fragment>
+          <EuiHeader
+            position="fixed"
+            sections={[
+              {
+                items: leftSectionItems,
+                borders: 'right',
+              },
+              {
+                items: [
+                  <EuiButtonEmpty
+                    iconType="minimize"
+                    onClick={() => setIsFullScreen(false)}>
+                    Exit full screen
+                  </EuiButtonEmpty>,
+                ],
+              },
+            ]}
+          />
+
+          {navIsOpen && (
+            <EuiCollapsibleNav
+              docked={navIsDocked}
+              onClose={() => setNavIsOpen(false)}>
+              {/* Dark deployments section */}
+              <EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
+                {DeploymentsGroup}
+              </EuiFlexItem>
+
+              {/* Shaded pinned section always with a home item */}
+              <EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
+                <EuiCollapsibleNavGroup
+                  background="light"
+                  className="eui-yScroll"
+                  style={{ maxHeight: '40vh' }}>
+                  <EuiPinnableListGroup
+                    listItems={alterLinksWithCurrentState(TopLinks).concat(
+                      alterLinksWithCurrentState(pinnedItems, true)
+                    )}
+                    onPinClick={removePin}
+                    maxWidth="none"
+                    color="subdued"
+                    gutterSize="none"
+                    size="s"
+                  />
+                </EuiCollapsibleNavGroup>
+              </EuiFlexItem>
+
+              <EuiHorizontalRule margin="none" />
+
+              {/* BOTTOM */}
+              <EuiFlexItem className="eui-yScroll">
+                {/* Kibana section */}
+                <EuiCollapsibleNavGroup
+                  title="Kibana"
+                  iconType="logoKibana"
+                  isCollapsible={true}
+                  initialIsOpen={openGroups.includes('Kibana')}
+                  onToggle={(isOpen: boolean) =>
+                    toggleAccordion(isOpen, 'Kibana')
+                  }>
+                  <EuiPinnableListGroup
+                    listItems={alterLinksWithCurrentState(KibanaLinks)}
+                    onPinClick={addPin}
+                    maxWidth="none"
+                    color="subdued"
+                    gutterSize="none"
+                    size="s"
+                  />
+                </EuiCollapsibleNavGroup>
 
-      <EuiPage className="guideFullScreenOverlay" />
+                {/* Security callout */}
+                {SecurityGroup}
+
+                {/* Learn section */}
+                <EuiCollapsibleNavGroup
+                  title="Learn"
+                  iconType="training"
+                  isCollapsible={true}
+                  initialIsOpen={openGroups.includes('Learn')}
+                  onToggle={(isOpen: boolean) =>
+                    toggleAccordion(isOpen, 'Learn')
+                  }>
+                  <EuiPinnableListGroup
+                    listItems={alterLinksWithCurrentState(LearnLinks)}
+                    onPinClick={addPin}
+                    maxWidth="none"
+                    color="subdued"
+                    gutterSize="none"
+                    size="s"
+                  />
+                </EuiCollapsibleNavGroup>
+
+                {/* Docking button only for larger screens that can support it*/}
+                <EuiShowFor sizes={['l', 'xl']}>
+                  <EuiCollapsibleNavGroup>
+                    <EuiListGroupItem
+                      size="xs"
+                      color="subdued"
+                      label={`${navIsDocked ? 'Undock' : 'Dock'} navigation`}
+                      onClick={() => {
+                        setNavIsDocked(!navIsDocked);
+                        localStorage.setItem(
+                          'navIsDocked',
+                          JSON.stringify(!navIsDocked)
+                        );
+                      }}
+                      iconType={navIsDocked ? 'lock' : 'lockOpen'}
+                    />
+                  </EuiCollapsibleNavGroup>
+                </EuiShowFor>
+              </EuiFlexItem>
+            </EuiCollapsibleNav>
+          )}
+
+          <EuiPage className="guideFullScreenOverlay" />
+        </React.Fragment>
+      )}
     </GuideFullScreen>
   );
 };

From ab4bad510754ad14c11f83f9182036debfa87f3b Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Wed, 18 Mar 2020 12:55:08 -0500
Subject: [PATCH 21/25] clean up

---
 src-docs/src/services/full_screen/full_screen.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src-docs/src/services/full_screen/full_screen.tsx b/src-docs/src/services/full_screen/full_screen.tsx
index 838f800ea5c..b28db7f134c 100644
--- a/src-docs/src/services/full_screen/full_screen.tsx
+++ b/src-docs/src/services/full_screen/full_screen.tsx
@@ -26,11 +26,7 @@ export const GuideFullScreen: FunctionComponent<{
         {buttonText}
       </EuiButton>
 
-      {fullScreen && (
-        <EuiFocusTrap>
-          <Fragment>{children(setFullScreen)}</Fragment>
-        </EuiFocusTrap>
-      )}
+      {fullScreen && <EuiFocusTrap>{children(setFullScreen)}</EuiFocusTrap>}
     </Fragment>
   );
 };

From ecfc0a16f5d6b0cf3bebb36d8be4d731f339fb20 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 20 Mar 2020 15:26:41 -0400
Subject: [PATCH 22/25] Adding accessibility (?)

---
 .../src/views/collapsible_nav/collapsible_nav.tsx     | 11 ++++++++++-
 .../src/views/collapsible_nav/collapsible_nav_all.tsx |  7 ++++++-
 .../__snapshots__/collapsible_nav.test.tsx.snap       |  2 ++
 src/components/collapsible_nav/collapsible_nav.tsx    |  2 +-
 .../__snapshots__/collapsible_nav_group.test.tsx.snap | 10 ++++++++++
 .../collapsible_nav_group/collapsible_nav_group.tsx   | 11 +++++++++--
 6 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav.tsx
index 287eae6e58e..10ad5cec714 100644
--- a/src-docs/src/views/collapsible_nav/collapsible_nav.tsx
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav.tsx
@@ -11,9 +11,18 @@ export default () => {
 
   return (
     <>
-      <EuiButton onClick={() => setNavIsOpen(!navIsOpen)}>Toggle nav</EuiButton>
+      <EuiButton
+        onClick={() => setNavIsOpen(!navIsOpen)}
+        aria-label="Toggle main navigation"
+        aria-controls="guideCollapsibleNavExampleNav"
+        aria-expanded={navIsOpen}
+        aria-pressed={navIsOpen}>
+        Toggle nav
+      </EuiButton>
       {navIsOpen && (
         <EuiCollapsibleNav
+          id="guideCollapsibleNavExampleNav"
+          aria-label="Example of main navigation flyout"
           docked={navIsDocked}
           onClose={() => setNavIsOpen(false)}>
           <div style={{ padding: 16 }}>
diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
index 41cb1978919..573ca56ddc6 100644
--- a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
@@ -127,7 +127,10 @@ export default () => {
   const leftSectionItems = [
     <EuiCollapsibleNavToggle navIsDocked={navIsDocked}>
       <EuiHeaderSectionItemButton
-        aria-label="Open nav"
+        aria-label="Toggle main navigation"
+        aria-controls="guideCollapsibleNavAllExampleNav"
+        aria-expanded={navIsOpen}
+        aria-pressed={navIsOpen}
         onClick={() => setNavIsOpen(!navIsOpen)}>
         <EuiIcon type={'menu'} size="m" />
       </EuiHeaderSectionItemButton>
@@ -160,6 +163,8 @@ export default () => {
 
           {navIsOpen && (
             <EuiCollapsibleNav
+              id="guideCollapsibleNavAllExampleNav"
+              aria-label="Main navigation"
               docked={navIsDocked}
               onClose={() => setNavIsOpen(false)}>
               {/* Dark deployments section */}
diff --git a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
index 1af87fb7989..81f4736c38b 100644
--- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -17,6 +17,7 @@ exports[`EuiCollapsibleNav can be docked 1`] = `
   >
     <nav
       class="euiCollapsibleNav euiCollapsibleNav--isDocked"
+      role="group"
     >
       <button
         class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
@@ -68,6 +69,7 @@ Array [
         aria-label="aria-label"
         class="euiCollapsibleNav testClass1 testClass2"
         data-test-subj="test subject string"
+        role="group"
       >
         <button
           class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiCollapsibleNav__closeButton"
diff --git a/src/components/collapsible_nav/collapsible_nav.tsx b/src/components/collapsible_nav/collapsible_nav.tsx
index 3ea6117be18..5a92a0e985a 100644
--- a/src/components/collapsible_nav/collapsible_nav.tsx
+++ b/src/components/collapsible_nav/collapsible_nav.tsx
@@ -87,7 +87,7 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
       {optionalOverlay}
       {/* Trap focus only when isDocked={false} */}
       <EuiFocusTrap disabled={isDocked} clickOutsideDisables={true}>
-        <nav className={classes} {...rest}>
+        <nav className={classes} role="group" {...rest}>
           {children}
 
           <EuiButtonEmpty
diff --git a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
index 0dcef89fb1c..baa85774d8c 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
+++ b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
@@ -48,6 +48,7 @@ exports[`EuiCollapsibleNavGroup props background none is rendered 1`] = `
 
 exports[`EuiCollapsibleNavGroup props iconSize is rendered 1`] = `
 <div
+  aria-labelledby="id__title"
   class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
   id="id"
 >
@@ -70,6 +71,7 @@ exports[`EuiCollapsibleNavGroup props iconSize is rendered 1`] = `
       >
         <h3
           class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+          id="id__title"
         >
           Title
         </h3>
@@ -84,6 +86,7 @@ exports[`EuiCollapsibleNavGroup props iconSize is rendered 1`] = `
 
 exports[`EuiCollapsibleNavGroup props iconType is rendered 1`] = `
 <div
+  aria-labelledby="id__title"
   class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
   id="id"
 >
@@ -106,6 +109,7 @@ exports[`EuiCollapsibleNavGroup props iconType is rendered 1`] = `
       >
         <h3
           class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+          id="id__title"
         >
           Title
         </h3>
@@ -120,6 +124,7 @@ exports[`EuiCollapsibleNavGroup props iconType is rendered 1`] = `
 
 exports[`EuiCollapsibleNavGroup props title is rendered 1`] = `
 <div
+  aria-labelledby="id__title"
   class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
   id="id"
 >
@@ -134,6 +139,7 @@ exports[`EuiCollapsibleNavGroup props title is rendered 1`] = `
       >
         <h3
           class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+          id="id__title"
         >
           Title
         </h3>
@@ -148,6 +154,7 @@ exports[`EuiCollapsibleNavGroup props title is rendered 1`] = `
 
 exports[`EuiCollapsibleNavGroup props titleElement can change the rendered element to h2 1`] = `
 <div
+  aria-labelledby="id__title"
   class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
   id="id"
 >
@@ -162,6 +169,7 @@ exports[`EuiCollapsibleNavGroup props titleElement can change the rendered eleme
       >
         <h2
           class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+          id="id__title"
         >
           Title
         </h2>
@@ -198,6 +206,7 @@ exports[`EuiCollapsibleNavGroup throws a warning if iconType is passed without a
 
 exports[`EuiCollapsibleNavGroup when isCollapsible is true will render an accordion 1`] = `
 <div
+  aria-labelledby="id__title"
   class="euiAccordion euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
 >
   <div
@@ -228,6 +237,7 @@ exports[`EuiCollapsibleNavGroup when isCollapsible is true will render an accord
           >
             <h3
               class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+              id="id__title"
             >
               Title
             </h3>
diff --git a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx
index c19b80eed63..6b8be3baa46 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx
+++ b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx
@@ -100,6 +100,8 @@ export const EuiCollapsibleNavGroup: FunctionComponent<
   ...rest
 }) => {
   const [groupID] = useState(id || htmlIdGenerator()());
+  const titleID = `${groupID}__title`;
+
   const classes = classNames(
     'euiCollapsibleNavGroup',
     backgroundToClassNameMap[background],
@@ -133,7 +135,7 @@ export const EuiCollapsibleNavGroup: FunctionComponent<
 
       <EuiFlexItem>
         <EuiTitle size={titleSize as EuiTitleSize}>
-          <TitleElement className="euiCollapsibleNavGroup__title">
+          <TitleElement id={titleID} className="euiCollapsibleNavGroup__title">
             {title}
           </TitleElement>
         </EuiTitle>
@@ -147,6 +149,7 @@ export const EuiCollapsibleNavGroup: FunctionComponent<
     return (
       <EuiAccordion
         id={groupID}
+        aria-labelledby={title ? titleID : undefined}
         className={classes}
         buttonClassName={headingClasses}
         buttonContent={titleContent}
@@ -158,7 +161,11 @@ export const EuiCollapsibleNavGroup: FunctionComponent<
     );
   } else {
     return (
-      <div id={groupID} className={classes} {...rest}>
+      <div
+        id={groupID}
+        aria-labelledby={title ? titleID : undefined}
+        className={classes}
+        {...rest}>
         {titleContent && <div className={headingClasses}>{titleContent}</div>}
         {content}
       </div>

From d2403bea022f3bfa16281d4a1eea07e96b5be7b3 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 20 Mar 2020 16:57:51 -0400
Subject: [PATCH 23/25] One more a11y piece

---
 src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
index 573ca56ddc6..96a1464529e 100644
--- a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
@@ -132,7 +132,7 @@ export default () => {
         aria-expanded={navIsOpen}
         aria-pressed={navIsOpen}
         onClick={() => setNavIsOpen(!navIsOpen)}>
-        <EuiIcon type={'menu'} size="m" />
+        <EuiIcon type={'menu'} size="m" aria-hidden="true" />
       </EuiHeaderSectionItemButton>
     </EuiCollapsibleNavToggle>,
     <EuiHeaderLogo iconType="logoElastic">Elastic</EuiHeaderLogo>,
@@ -175,6 +175,7 @@ export default () => {
               {/* Shaded pinned section always with a home item */}
               <EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
                 <EuiCollapsibleNavGroup
+                  aria-label="Pinned links" // A11y : Since this group doesn't have a visible `title` it should be provided an accessible description
                   background="light"
                   className="eui-yScroll"
                   style={{ maxHeight: '40vh' }}>

From f7c7afefeb1eb6a43bbae2e8e4c5497ea26db43b Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 24 Mar 2020 11:41:23 -0400
Subject: [PATCH 24/25] Addressing some a11y concerns

- Focus state for accordions without arrow toggles (underline)
- Added link name in pin/unpin titles
---
 .../src/views/collapsible_nav/collapsible_nav_all.tsx | 11 +++++++++++
 src/components/accordion/_accordion.scss              |  3 ++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
index 96a1464529e..d33110e8519 100644
--- a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
@@ -124,6 +124,14 @@ export default () => {
     });
   }
 
+  function addLinkNameToPinTitle(listItem: EuiPinnableListGroupItemProps) {
+    return `Pin ${listItem.label} to top`;
+  }
+
+  function addLinkNameToUnpinTitle(listItem: EuiPinnableListGroupItemProps) {
+    return `Unpin ${listItem.label}`;
+  }
+
   const leftSectionItems = [
     <EuiCollapsibleNavToggle navIsDocked={navIsDocked}>
       <EuiHeaderSectionItemButton
@@ -183,6 +191,7 @@ export default () => {
                     listItems={alterLinksWithCurrentState(TopLinks).concat(
                       alterLinksWithCurrentState(pinnedItems, true)
                     )}
+                    unpinTitle={addLinkNameToUnpinTitle}
                     onPinClick={removePin}
                     maxWidth="none"
                     color="subdued"
@@ -207,6 +216,7 @@ export default () => {
                   }>
                   <EuiPinnableListGroup
                     listItems={alterLinksWithCurrentState(KibanaLinks)}
+                    pinTitle={addLinkNameToPinTitle}
                     onPinClick={addPin}
                     maxWidth="none"
                     color="subdued"
@@ -229,6 +239,7 @@ export default () => {
                   }>
                   <EuiPinnableListGroup
                     listItems={alterLinksWithCurrentState(LearnLinks)}
+                    pinTitle={addLinkNameToPinTitle}
                     onPinClick={addPin}
                     maxWidth="none"
                     color="subdued"
diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
index 14533c8fadd..0a5ca20f6e4 100644
--- a/src/components/accordion/_accordion.scss
+++ b/src/components/accordion/_accordion.scss
@@ -11,7 +11,8 @@
   display: flex;
   align-items: center;
 
-  &:hover {
+  &:hover,
+  &:focus {
     text-decoration: underline;
     cursor: pointer;
   }

From 1f27aa75c62bae5b42ac67c6c594d019d9073b73 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 25 Mar 2020 12:23:20 -0400
Subject: [PATCH 25/25] More a11y fixes

---
 src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx | 4 +++-
 .../src/views/collapsible_nav/collapsible_nav_list.tsx     | 2 +-
 .../__snapshots__/collapsible_nav_group.test.tsx.snap      | 5 -----
 .../collapsible_nav_group/collapsible_nav_group.tsx        | 7 +------
 4 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
index d33110e8519..1f378e0be34 100644
--- a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
@@ -183,11 +183,11 @@ export default () => {
               {/* Shaded pinned section always with a home item */}
               <EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
                 <EuiCollapsibleNavGroup
-                  aria-label="Pinned links" // A11y : Since this group doesn't have a visible `title` it should be provided an accessible description
                   background="light"
                   className="eui-yScroll"
                   style={{ maxHeight: '40vh' }}>
                   <EuiPinnableListGroup
+                    aria-label="Pinned links" // A11y : Since this group doesn't have a visible `title` it should be provided an accessible description
                     listItems={alterLinksWithCurrentState(TopLinks).concat(
                       alterLinksWithCurrentState(pinnedItems, true)
                     )}
@@ -215,6 +215,7 @@ export default () => {
                     toggleAccordion(isOpen, 'Kibana')
                   }>
                   <EuiPinnableListGroup
+                    aria-label="Kibana" // A11y : EuiCollapsibleNavGroup can't correctly pass the `title` as the `aria-label` to the right HTML element, so it must be added manually
                     listItems={alterLinksWithCurrentState(KibanaLinks)}
                     pinTitle={addLinkNameToPinTitle}
                     onPinClick={addPin}
@@ -238,6 +239,7 @@ export default () => {
                     toggleAccordion(isOpen, 'Learn')
                   }>
                   <EuiPinnableListGroup
+                    aria-label="Learn" // A11y : EuiCollapsibleNavGroup can't correctly pass the `title` as the `aria-label` to the right HTML element, so it must be added manually
                     listItems={alterLinksWithCurrentState(LearnLinks)}
                     pinTitle={addLinkNameToPinTitle}
                     onPinClick={addPin}
diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx
index ea35fc65cc9..dda87842154 100644
--- a/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx
@@ -59,7 +59,7 @@ export const DeploymentsGroup = (
     isCollapsible={true}
     initialIsOpen={false}
     background="dark">
-    <div className="kibanaNavDeployment__content">
+    <div role="group" className="kibanaNavDeployment__content">
       <EuiListGroup listItems={deploymentsList} flush />
       <EuiSpacer size="s" />
       <EuiButton color="ghost" fullWidth>
diff --git a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
index baa85774d8c..ac3c4be8d54 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
+++ b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
@@ -48,7 +48,6 @@ exports[`EuiCollapsibleNavGroup props background none is rendered 1`] = `
 
 exports[`EuiCollapsibleNavGroup props iconSize is rendered 1`] = `
 <div
-  aria-labelledby="id__title"
   class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
   id="id"
 >
@@ -86,7 +85,6 @@ exports[`EuiCollapsibleNavGroup props iconSize is rendered 1`] = `
 
 exports[`EuiCollapsibleNavGroup props iconType is rendered 1`] = `
 <div
-  aria-labelledby="id__title"
   class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
   id="id"
 >
@@ -124,7 +122,6 @@ exports[`EuiCollapsibleNavGroup props iconType is rendered 1`] = `
 
 exports[`EuiCollapsibleNavGroup props title is rendered 1`] = `
 <div
-  aria-labelledby="id__title"
   class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
   id="id"
 >
@@ -154,7 +151,6 @@ exports[`EuiCollapsibleNavGroup props title is rendered 1`] = `
 
 exports[`EuiCollapsibleNavGroup props titleElement can change the rendered element to h2 1`] = `
 <div
-  aria-labelledby="id__title"
   class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
   id="id"
 >
@@ -206,7 +202,6 @@ exports[`EuiCollapsibleNavGroup throws a warning if iconType is passed without a
 
 exports[`EuiCollapsibleNavGroup when isCollapsible is true will render an accordion 1`] = `
 <div
-  aria-labelledby="id__title"
   class="euiAccordion euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
 >
   <div
diff --git a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx
index 6b8be3baa46..132b082674b 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx
+++ b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx
@@ -149,7 +149,6 @@ export const EuiCollapsibleNavGroup: FunctionComponent<
     return (
       <EuiAccordion
         id={groupID}
-        aria-labelledby={title ? titleID : undefined}
         className={classes}
         buttonClassName={headingClasses}
         buttonContent={titleContent}
@@ -161,11 +160,7 @@ export const EuiCollapsibleNavGroup: FunctionComponent<
     );
   } else {
     return (
-      <div
-        id={groupID}
-        aria-labelledby={title ? titleID : undefined}
-        className={classes}
-        {...rest}>
+      <div id={groupID} className={classes} {...rest}>
         {titleContent && <div className={headingClasses}>{titleContent}</div>}
         {content}
       </div>