From eb8e07d7411733cf2c5b1ab83ef085fccc599914 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 20 Jun 2023 11:56:55 -0700
Subject: [PATCH 01/13] Convert EuiCollapsibleNav to Emotion

---
 .../collapsible_nav.test.tsx.snap             | 18 ++++++++---------
 .../collapsible_nav/_collapsible_nav.scss     |  5 -----
 .../collapsible_nav/collapsible_nav.styles.ts | 20 +++++++++++++++++++
 .../collapsible_nav/collapsible_nav.tsx       |  9 ++++++++-
 4 files changed, 37 insertions(+), 15 deletions(-)
 create mode 100644 src/components/collapsible_nav/collapsible_nav.styles.ts

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 3677d6e1e06..ecd47873e67 100644
--- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -13,7 +13,7 @@ Array [
     >
       <nav
         aria-describedby="generated-id"
-        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
+        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay"
         data-autofocus="true"
         id="id"
         role="dialog"
@@ -66,7 +66,7 @@ Array [
       <nav
         aria-describedby="generated-id"
         aria-label="aria-label"
-        class="euiFlyout euiCollapsibleNav testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-overlay-left"
+        class="euiFlyout euiCollapsibleNav testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay"
         data-autofocus="true"
         data-test-subj="test subject string"
         id="id"
@@ -116,7 +116,7 @@ Array [
   >
     <nav
       aria-describedby="generated-id"
-      class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
+      class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay"
       data-autofocus="true"
       id="id"
       role="dialog"
@@ -170,7 +170,7 @@ Array [
     >
       <nav
         aria-describedby="generated-id"
-        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
+        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay"
         data-autofocus="true"
         id="id"
         role="dialog"
@@ -220,7 +220,7 @@ Array [
     >
       <nav
         aria-describedby="generated-id"
-        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
+        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay"
         data-autofocus="true"
         id="id"
         role="dialog"
@@ -268,7 +268,7 @@ Array [
     data-focus-lock-disabled="disabled"
   >
     <nav
-      class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-left"
+      class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-left-euiCollapsibleNav-push"
       data-autofocus="true"
       id="id"
       role="dialog"
@@ -297,7 +297,7 @@ Array [
     >
       <nav
         aria-describedby="generated-id"
-        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
+        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay"
         data-autofocus="true"
         id="id"
         role="dialog"
@@ -350,7 +350,7 @@ Array [
     data-focus-lock-disabled="disabled"
   >
     <nav
-      class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-left"
+      class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-left-euiCollapsibleNav-push"
       data-autofocus="true"
       id="id"
       role="dialog"
@@ -379,7 +379,7 @@ Array [
     >
       <nav
         aria-describedby="generated-id"
-        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
+        class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left-euiCollapsibleNav-overlay"
         data-autofocus="true"
         id="id"
         role="dialog"
diff --git a/src/components/collapsible_nav/_collapsible_nav.scss b/src/components/collapsible_nav/_collapsible_nav.scss
index 1a55a416ae4..e69de29bb2d 100644
--- a/src/components/collapsible_nav/_collapsible_nav.scss
+++ b/src/components/collapsible_nav/_collapsible_nav.scss
@@ -1,5 +0,0 @@
-// Extends <EuiFlyout>
-
-.euiCollapsibleNav:not([class*='push']) {
-  z-index: $euiZNavigation !important; // stylelint-disable-line declaration-no-important
-}
diff --git a/src/components/collapsible_nav/collapsible_nav.styles.ts b/src/components/collapsible_nav/collapsible_nav.styles.ts
new file mode 100644
index 00000000000..b1344aced8e
--- /dev/null
+++ b/src/components/collapsible_nav/collapsible_nav.styles.ts
@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { UseEuiTheme } from '../../services';
+
+export const euiCollapsibleNavStyles = ({ euiTheme }: UseEuiTheme) => {
+  return {
+    euiCollapsibleNav: css``, // The majority of styles extend from EuiFlyout
+    push: css``, // No z-index needed
+    overlay: css`
+      z-index: ${euiTheme.levels.navigation};
+    `,
+  };
+};
diff --git a/src/components/collapsible_nav/collapsible_nav.tsx b/src/components/collapsible_nav/collapsible_nav.tsx
index a8ebb4c3466..a2704d7f195 100644
--- a/src/components/collapsible_nav/collapsible_nav.tsx
+++ b/src/components/collapsible_nav/collapsible_nav.tsx
@@ -15,11 +15,13 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 import {
+  useEuiTheme,
   useGeneratedHtmlId,
   useIsWithinMinBreakpoint,
   useCombinedRefs,
 } from '../../services';
 import { EuiFlyout, EuiFlyoutProps } from '../flyout';
+import { euiCollapsibleNavStyles } from './collapsible_nav.styles';
 
 // Extend all the flyout props except `onClose` because we handle this internally
 export type EuiCollapsibleNavProps = Omit<
@@ -85,8 +87,12 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
 
   const windowIsLargeEnoughToPush = useIsWithinMinBreakpoint(dockedBreakpoint);
   const navIsDocked = isDocked && windowIsLargeEnoughToPush;
+  const flyoutType = navIsDocked ? 'push' : 'overlay';
 
   const classes = classNames('euiCollapsibleNav', className);
+  const euiTheme = useEuiTheme();
+  const styles = euiCollapsibleNavStyles(euiTheme);
+  const cssStyles = [styles.euiCollapsibleNav, styles[flyoutType]];
 
   // Show a trigger button if one was passed but
   // not if navIsDocked and showButtonIfDocked is false
@@ -111,6 +117,7 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
   const flyout = (
     <EuiFlyout
       id={flyoutID}
+      css={cssStyles}
       className={classes}
       // Flyout props we set different defaults for
       as={as}
@@ -123,7 +130,7 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
       focusTrapProps={focusTrapProps}
       {...rest}
       // Props dependent on internal docked status
-      type={navIsDocked ? 'push' : 'overlay'}
+      type={flyoutType}
       hideCloseButton={navIsDocked}
       pushMinBreakpoint={dockedBreakpoint}
     >

From dbd06eb8a66ece6c35c3dc4dc430df407651f697 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 20 Jun 2023 16:06:23 -0700
Subject: [PATCH 02/13] [EuiCollapsibleNavGroup] Set up base Emotion styles

---
 .../collapsible_nav_group.test.tsx.snap       | 26 +++++++++----------
 .../_collapsible_nav_group.scss               |  4 ---
 .../collapsible_nav_group.styles.ts           | 23 ++++++++++++++++
 .../collapsible_nav_group.tsx                 | 16 ++++++++++--
 4 files changed, 50 insertions(+), 19 deletions(-)
 create mode 100644 src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.styles.ts

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 b4e3496cf35..97f76132228 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
@@ -3,7 +3,7 @@
 exports[`EuiCollapsibleNavGroup is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiCollapsibleNavGroup testClass1 testClass2"
+  class="euiCollapsibleNavGroup testClass1 testClass2 emotion-euiCollapsibleNavGroup"
   data-test-subj="test subject string"
   id="id"
 />
@@ -11,28 +11,28 @@ exports[`EuiCollapsibleNavGroup is rendered 1`] = `
 
 exports[`EuiCollapsibleNavGroup props background dark is rendered 1`] = `
 <div
-  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--dark"
+  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--dark emotion-euiCollapsibleNavGroup"
   id="id"
 />
 `;
 
 exports[`EuiCollapsibleNavGroup props background light is rendered 1`] = `
 <div
-  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light"
+  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light emotion-euiCollapsibleNavGroup"
   id="id"
 />
 `;
 
 exports[`EuiCollapsibleNavGroup props background none is rendered 1`] = `
 <div
-  class="euiCollapsibleNavGroup"
+  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup"
   id="id"
 />
 `;
 
 exports[`EuiCollapsibleNavGroup props iconProps renders data-test-subj 1`] = `
 <div
-  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup"
   id="id"
 >
   <div
@@ -66,7 +66,7 @@ exports[`EuiCollapsibleNavGroup props iconProps renders data-test-subj 1`] = `
 
 exports[`EuiCollapsibleNavGroup props iconSize is rendered 1`] = `
 <div
-  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup"
   id="id"
 >
   <div
@@ -99,7 +99,7 @@ exports[`EuiCollapsibleNavGroup props iconSize is rendered 1`] = `
 
 exports[`EuiCollapsibleNavGroup props iconType is rendered 1`] = `
 <div
-  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup"
   id="id"
 >
   <div
@@ -132,7 +132,7 @@ exports[`EuiCollapsibleNavGroup props iconType is rendered 1`] = `
 
 exports[`EuiCollapsibleNavGroup props title is rendered 1`] = `
 <div
-  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup"
   id="id"
 >
   <div
@@ -158,7 +158,7 @@ exports[`EuiCollapsibleNavGroup props title is rendered 1`] = `
 
 exports[`EuiCollapsibleNavGroup props titleElement can change the rendered element to h2 1`] = `
 <div
-  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup"
   id="id"
 >
   <div
@@ -184,14 +184,14 @@ exports[`EuiCollapsibleNavGroup props titleElement can change the rendered eleme
 
 exports[`EuiCollapsibleNavGroup props titleSize can be larger 1`] = `
 <div
-  class="euiCollapsibleNavGroup"
+  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup"
   id="id"
 />
 `;
 
 exports[`EuiCollapsibleNavGroup throws a warning if iconType is passed without a title 1`] = `
 <div
-  class="euiCollapsibleNavGroup"
+  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup"
   id="id"
 />
 `;
@@ -199,7 +199,7 @@ exports[`EuiCollapsibleNavGroup throws a warning if iconType is passed without a
 exports[`EuiCollapsibleNavGroup when isCollapsible is true accepts accordion props 1`] = `
 <div
   aria-label="aria-label"
-  class="euiAccordion euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading testClass1 testClass2"
+  class="euiAccordion euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading testClass1 testClass2 emotion-euiCollapsibleNavGroup"
   data-test-subj="test subject string"
 >
   <div
@@ -267,7 +267,7 @@ exports[`EuiCollapsibleNavGroup when isCollapsible is true accepts accordion pro
 
 exports[`EuiCollapsibleNavGroup when isCollapsible is true will render an accordion 1`] = `
 <div
-  class="euiAccordion euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+  class="euiAccordion euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup"
 >
   <div
     class="euiAccordion__triggerWrapper emotion-euiAccordion__triggerWrapper"
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 ec68ae0c952..49f11b54107 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
@@ -1,8 +1,4 @@
 .euiCollapsibleNavGroup {
-  &: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
diff --git a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.styles.ts b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.styles.ts
new file mode 100644
index 00000000000..ce47a3a718e
--- /dev/null
+++ b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.styles.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { UseEuiTheme } from '../../../services';
+import { logicalCSS } from '../../../global_styling';
+
+export const euiCollapsibleNavGroupStyles = ({
+  euiTheme,
+}: UseEuiTheme) => {
+  return {
+    euiCollapsibleNavGroup: css`
+      &:not(:first-child) {
+        ${logicalCSS('border-top', euiTheme.border.thin)}
+      }
+    `,
+  };
+};
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 8849645c2cf..98c3aff4948 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
@@ -9,13 +9,18 @@
 import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 import { CommonProps, ExclusiveUnion } from '../../common';
-import { useGeneratedHtmlId } from '../../../services';
+import {
+  useEuiTheme,
+  useGeneratedHtmlId,
+} from '../../../services';
 
 import { EuiAccordion, EuiAccordionProps } from '../../accordion';
 import { EuiIcon, IconType, IconSize, EuiIconProps } from '../../icon';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiTitle, EuiTitleProps, EuiTitleSize } from '../../title';
 
+import { euiCollapsibleNavGroupStyles } from './collapsible_nav_group.styles';
+
 type Background = 'none' | 'light' | 'dark';
 const backgroundToClassNameMap: { [color in Background]: string } = {
   none: '',
@@ -116,6 +121,12 @@ export const EuiCollapsibleNavGroup: FunctionComponent<
   const groupID = useGeneratedHtmlId({ conditionalId: id });
   const titleID = `${groupID}__title`;
 
+  const euiTheme = useEuiTheme();
+  const styles = euiCollapsibleNavGroupStyles(euiTheme);
+  const cssStyles = [
+    styles.euiCollapsibleNavGroup,
+  ];
+
   const classes = classNames(
     'euiCollapsibleNavGroup',
     backgroundToClassNameMap[background],
@@ -161,6 +172,7 @@ export const EuiCollapsibleNavGroup: FunctionComponent<
     return (
       <EuiAccordion
         id={groupID}
+        css={cssStyles}
         className={classes}
         buttonClassName={headingClasses}
         buttonContent={titleContent}
@@ -174,7 +186,7 @@ export const EuiCollapsibleNavGroup: FunctionComponent<
     );
   } else {
     return (
-      <div id={groupID} className={classes} {...rest}>
+      <div id={groupID} css={cssStyles} className={classes} {...rest}>
         {titleContent && <div className={headingClasses}>{titleContent}</div>}
         {content}
       </div>

From e069e93d660ac0c3bbbf37f02cc869e99d799244 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 20 Jun 2023 16:49:27 -0700
Subject: [PATCH 03/13] [EuiCollapsibleNavGroup] Convert `background` prop to
 Emotion

+ set theme colorMode on all children within `background="dark"`
---
 .../collapsible_nav/_variables.scss           |  7 -----
 .../collapsible_nav_group.test.tsx.snap       | 26 ++++++++---------
 .../_collapsible_nav_group.scss               |  9 ------
 .../collapsible_nav_group.styles.ts           | 19 ++++++++++++-
 .../collapsible_nav_group.tsx                 | 28 ++++++++++---------
 5 files changed, 46 insertions(+), 43 deletions(-)

diff --git a/src/components/collapsible_nav/_variables.scss b/src/components/collapsible_nav/_variables.scss
index 20d9200b330..d637715c804 100644
--- a/src/components/collapsible_nav/_variables.scss
+++ b/src/components/collapsible_nav/_variables.scss
@@ -1,11 +1,4 @@
 // Sizing
-$euiCollapsibleNavGroupLightBackgroundColor: $euiPageBackgroundColor !default;
-
-$euiCollapsibleNavGroupDarkBackgroundColor: lightOrDarkTheme(
-  shade($euiColorDarkestShade, 20%),
-  shade($euiColorLightestShade, 50%),
-) !default;
-
 $euiCollapsibleNavGroupDarkHighContrastColor: makeGraphicContrastColor(
   $euiColorPrimary,
   $euiCollapsibleNavGroupDarkBackgroundColor
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 97f76132228..6bdf100fb13 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
@@ -3,7 +3,7 @@
 exports[`EuiCollapsibleNavGroup is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiCollapsibleNavGroup testClass1 testClass2 emotion-euiCollapsibleNavGroup"
+  class="euiCollapsibleNavGroup testClass1 testClass2 emotion-euiCollapsibleNavGroup-none"
   data-test-subj="test subject string"
   id="id"
 />
@@ -11,28 +11,28 @@ exports[`EuiCollapsibleNavGroup is rendered 1`] = `
 
 exports[`EuiCollapsibleNavGroup props background dark is rendered 1`] = `
 <div
-  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--dark emotion-euiCollapsibleNavGroup"
+  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-dark"
   id="id"
 />
 `;
 
 exports[`EuiCollapsibleNavGroup props background light is rendered 1`] = `
 <div
-  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light emotion-euiCollapsibleNavGroup"
+  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-light"
   id="id"
 />
 `;
 
 exports[`EuiCollapsibleNavGroup props background none is rendered 1`] = `
 <div
-  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup"
+  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-none"
   id="id"
 />
 `;
 
 exports[`EuiCollapsibleNavGroup props iconProps renders data-test-subj 1`] = `
 <div
-  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup"
+  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup-none"
   id="id"
 >
   <div
@@ -66,7 +66,7 @@ exports[`EuiCollapsibleNavGroup props iconProps renders data-test-subj 1`] = `
 
 exports[`EuiCollapsibleNavGroup props iconSize is rendered 1`] = `
 <div
-  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup"
+  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup-none"
   id="id"
 >
   <div
@@ -99,7 +99,7 @@ exports[`EuiCollapsibleNavGroup props iconSize is rendered 1`] = `
 
 exports[`EuiCollapsibleNavGroup props iconType is rendered 1`] = `
 <div
-  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup"
+  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup-none"
   id="id"
 >
   <div
@@ -132,7 +132,7 @@ exports[`EuiCollapsibleNavGroup props iconType is rendered 1`] = `
 
 exports[`EuiCollapsibleNavGroup props title is rendered 1`] = `
 <div
-  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup"
+  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup-none"
   id="id"
 >
   <div
@@ -158,7 +158,7 @@ exports[`EuiCollapsibleNavGroup props title is rendered 1`] = `
 
 exports[`EuiCollapsibleNavGroup props titleElement can change the rendered element to h2 1`] = `
 <div
-  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup"
+  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup-none"
   id="id"
 >
   <div
@@ -184,14 +184,14 @@ exports[`EuiCollapsibleNavGroup props titleElement can change the rendered eleme
 
 exports[`EuiCollapsibleNavGroup props titleSize can be larger 1`] = `
 <div
-  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup"
+  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-none"
   id="id"
 />
 `;
 
 exports[`EuiCollapsibleNavGroup throws a warning if iconType is passed without a title 1`] = `
 <div
-  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup"
+  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-none"
   id="id"
 />
 `;
@@ -199,7 +199,7 @@ exports[`EuiCollapsibleNavGroup throws a warning if iconType is passed without a
 exports[`EuiCollapsibleNavGroup when isCollapsible is true accepts accordion props 1`] = `
 <div
   aria-label="aria-label"
-  class="euiAccordion euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading testClass1 testClass2 emotion-euiCollapsibleNavGroup"
+  class="euiAccordion euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading testClass1 testClass2 emotion-euiCollapsibleNavGroup-none"
   data-test-subj="test subject string"
 >
   <div
@@ -267,7 +267,7 @@ exports[`EuiCollapsibleNavGroup when isCollapsible is true accepts accordion pro
 
 exports[`EuiCollapsibleNavGroup when isCollapsible is true will render an accordion 1`] = `
 <div
-  class="euiAccordion euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup"
+  class="euiAccordion euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup-none"
 >
   <div
     class="euiAccordion__triggerWrapper emotion-euiAccordion__triggerWrapper"
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 49f11b54107..af38c527b87 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
@@ -8,23 +8,14 @@
 }
 
 .euiCollapsibleNavGroup--light {
-  background-color: $euiCollapsibleNavGroupLightBackgroundColor;
 }
 
 .euiCollapsibleNavGroup--dark {
-  background-color: $euiCollapsibleNavGroupDarkBackgroundColor;
-  color: $euiColorGhost;
-
   // Forcing better contrast of focus state on EuiAccordion toggle icon
   .euiCollapsibleNavGroup__heading:focus .euiAccordion__iconWrapper {
     color: $euiCollapsibleNavGroupDarkHighContrastColor;
     animation-name: euiCollapsibleNavGroupDarkFocusRingAnimate !important; // stylelint-disable-line declaration-no-important
   }
-
-  .euiCollapsibleNavGroup__title {
-    color: inherit;
-    line-height: inherit;
-  }
 }
 
 .euiCollapsibleNavGroup__heading {
diff --git a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.styles.ts b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.styles.ts
index ce47a3a718e..b7294877916 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.styles.ts
+++ b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.styles.ts
@@ -7,11 +7,12 @@
  */
 
 import { css } from '@emotion/react';
-import { UseEuiTheme } from '../../../services';
+import { UseEuiTheme, shade } from '../../../services';
 import { logicalCSS } from '../../../global_styling';
 
 export const euiCollapsibleNavGroupStyles = ({
   euiTheme,
+  colorMode,
 }: UseEuiTheme) => {
   return {
     euiCollapsibleNavGroup: css`
@@ -19,5 +20,21 @@ export const euiCollapsibleNavGroupStyles = ({
         ${logicalCSS('border-top', euiTheme.border.thin)}
       }
     `,
+    // Background colors
+    none: css``,
+    light: css`
+      background-color: ${euiTheme.colors.body};
+    `,
+    dark: css`
+      background-color: ${colorMode === 'DARK'
+        ? shade(euiTheme.colors.lightestShade, 0.5)
+        : shade(euiTheme.colors.darkestShade, 0.2)};
+
+      .euiCollapsibleNavGroup__title,
+      .euiCollapsibleNavGroup__heading,
+      .euiAccordion__iconButton {
+        color: ${euiTheme.colors.ghost};
+      }
+    `,
   };
 };
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 98c3aff4948..827d7690648 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
@@ -10,6 +10,7 @@ import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 import { CommonProps, ExclusiveUnion } from '../../common';
 import {
+  EuiThemeProvider,
   useEuiTheme,
   useGeneratedHtmlId,
 } from '../../../services';
@@ -21,15 +22,8 @@ import { EuiTitle, EuiTitleProps, EuiTitleSize } from '../../title';
 
 import { euiCollapsibleNavGroupStyles } from './collapsible_nav_group.styles';
 
-type Background = 'none' | 'light' | 'dark';
-const backgroundToClassNameMap: { [color in Background]: string } = {
-  none: '',
-  light: 'euiCollapsibleNavGroup--light',
-  dark: 'euiCollapsibleNavGroup--dark',
-};
-export const BACKGROUNDS = Object.keys(
-  backgroundToClassNameMap
-) as Background[];
+export const BACKGROUNDS = ['none', 'light', 'dark'] as const;
+type Background = (typeof BACKGROUNDS)[number];
 
 export interface EuiCollapsibleNavGroupInterface extends CommonProps {
   /**
@@ -125,11 +119,11 @@ export const EuiCollapsibleNavGroup: FunctionComponent<
   const styles = euiCollapsibleNavGroupStyles(euiTheme);
   const cssStyles = [
     styles.euiCollapsibleNavGroup,
+    background && styles[background],
   ];
 
   const classes = classNames(
     'euiCollapsibleNavGroup',
-    backgroundToClassNameMap[background],
     {
       'euiCollapsibleNavGroup--withHeading': title,
     },
@@ -168,8 +162,9 @@ export const EuiCollapsibleNavGroup: FunctionComponent<
     </EuiFlexGroup>
   ) : undefined;
 
+  let render;
   if (isCollapsible && title) {
-    return (
+    render = (
       <EuiAccordion
         id={groupID}
         css={cssStyles}
@@ -178,18 +173,25 @@ export const EuiCollapsibleNavGroup: FunctionComponent<
         buttonContent={titleContent}
         initialIsOpen={true}
         arrowDisplay="right"
-        arrowProps={{ color: background === 'dark' ? 'ghost' : 'text' }}
         {...rest}
       >
         {content}
       </EuiAccordion>
     );
   } else {
-    return (
+    render = (
       <div id={groupID} css={cssStyles} className={classes} {...rest}>
         {titleContent && <div className={headingClasses}>{titleContent}</div>}
         {content}
       </div>
     );
   }
+
+  return background === 'dark' ? (
+    <EuiThemeProvider colorMode="dark" wrapperProps={{ cloneElement: true }}>
+      {render}
+    </EuiThemeProvider>
+  ) : (
+    render
+  );
 };

From e24431a6939b2bf45f06ada2faa6a8da6ecf2d38 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 20 Jun 2023 18:32:15 -0700
Subject: [PATCH 04/13] Remove unused focus animation

- doesn't seem to be doing anything or used, so presumably became deprecated in Amsterdam
---
 src/components/collapsible_nav/_variables.scss    |  4 ----
 .../_collapsible_nav_group.scss                   | 15 ---------------
 2 files changed, 19 deletions(-)

diff --git a/src/components/collapsible_nav/_variables.scss b/src/components/collapsible_nav/_variables.scss
index d637715c804..a0586766fe5 100644
--- a/src/components/collapsible_nav/_variables.scss
+++ b/src/components/collapsible_nav/_variables.scss
@@ -1,5 +1 @@
 // Sizing
-$euiCollapsibleNavGroupDarkHighContrastColor: makeGraphicContrastColor(
-  $euiColorPrimary,
-  $euiCollapsibleNavGroupDarkBackgroundColor
-) !default;
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 af38c527b87..c1b37224b7d 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
@@ -11,11 +11,6 @@
 }
 
 .euiCollapsibleNavGroup--dark {
-  // Forcing better contrast of focus state on EuiAccordion toggle icon
-  .euiCollapsibleNavGroup__heading:focus .euiAccordion__iconWrapper {
-    color: $euiCollapsibleNavGroupDarkHighContrastColor;
-    animation-name: euiCollapsibleNavGroupDarkFocusRingAnimate !important; // stylelint-disable-line declaration-no-important
-  }
 }
 
 .euiCollapsibleNavGroup__heading {
@@ -34,13 +29,3 @@
 .euiCollapsibleNavGroup--withHeading .euiCollapsibleNavGroup__children {
   padding-top: 0;
 }
-
-@keyframes euiCollapsibleNavGroupDarkFocusRingAnimate {
-  0% {
-    box-shadow: 0 0 0 $euiFocusRingAnimStartSize $euiFocusRingAnimStartColor;
-  }
-
-  100% {
-    box-shadow: 0 0 0 $euiFocusRingSize $euiCollapsibleNavGroupDarkHighContrastColor;
-  }
-}

From 88f0237e177764c88fefbe388a8641cd931d883c Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 20 Jun 2023 18:33:25 -0700
Subject: [PATCH 05/13] Remove unused font-weight

- `EuiTitle` already sets a font weight of 700, so this isn't really being used meaningfully anywhere
---
 .../collapsible_nav_group/_collapsible_nav_group.scss           | 2 --
 1 file changed, 2 deletions(-)

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 c1b37224b7d..d59857735dd 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
@@ -14,8 +14,6 @@
 }
 
 .euiCollapsibleNavGroup__heading {
-  font-weight: $euiFontWeightSemiBold;
-
   // If the heading is not in an accordion, it needs the padding
   &:not(.euiAccordion__button) {
     padding: $euiSize;

From c0586ad27408dadaaf10478029daa0ee05f8255a Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 20 Jun 2023 18:35:50 -0700
Subject: [PATCH 06/13] Convert remaining padding CSS

- nest `euiCollapsibleNavGroup__heading` padding as well for consistency and so we can skip adding another Emotion var
---
 .../collapsible_nav_group.test.tsx.snap       | 26 +++++++++----------
 .../_collapsible_nav_group.scss               | 18 -------------
 .../collapsible_nav_group.styles.ts           | 22 ++++++++++++++++
 .../collapsible_nav_group.tsx                 | 17 ++++++------
 4 files changed, 44 insertions(+), 39 deletions(-)

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 6bdf100fb13..baefa95f569 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
@@ -3,7 +3,7 @@
 exports[`EuiCollapsibleNavGroup is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiCollapsibleNavGroup testClass1 testClass2 emotion-euiCollapsibleNavGroup-none"
+  class="euiCollapsibleNavGroup testClass1 testClass2 emotion-euiCollapsibleNavGroup-notCollapsible-none"
   data-test-subj="test subject string"
   id="id"
 />
@@ -11,28 +11,28 @@ exports[`EuiCollapsibleNavGroup is rendered 1`] = `
 
 exports[`EuiCollapsibleNavGroup props background dark is rendered 1`] = `
 <div
-  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-dark"
+  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-dark"
   id="id"
 />
 `;
 
 exports[`EuiCollapsibleNavGroup props background light is rendered 1`] = `
 <div
-  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-light"
+  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-light"
   id="id"
 />
 `;
 
 exports[`EuiCollapsibleNavGroup props background none is rendered 1`] = `
 <div
-  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-none"
+  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-none"
   id="id"
 />
 `;
 
 exports[`EuiCollapsibleNavGroup props iconProps renders data-test-subj 1`] = `
 <div
-  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup-none"
+  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-none"
   id="id"
 >
   <div
@@ -66,7 +66,7 @@ exports[`EuiCollapsibleNavGroup props iconProps renders data-test-subj 1`] = `
 
 exports[`EuiCollapsibleNavGroup props iconSize is rendered 1`] = `
 <div
-  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup-none"
+  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-none"
   id="id"
 >
   <div
@@ -99,7 +99,7 @@ exports[`EuiCollapsibleNavGroup props iconSize is rendered 1`] = `
 
 exports[`EuiCollapsibleNavGroup props iconType is rendered 1`] = `
 <div
-  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup-none"
+  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-none"
   id="id"
 >
   <div
@@ -132,7 +132,7 @@ exports[`EuiCollapsibleNavGroup props iconType is rendered 1`] = `
 
 exports[`EuiCollapsibleNavGroup props title is rendered 1`] = `
 <div
-  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup-none"
+  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-none"
   id="id"
 >
   <div
@@ -158,7 +158,7 @@ exports[`EuiCollapsibleNavGroup props title is rendered 1`] = `
 
 exports[`EuiCollapsibleNavGroup props titleElement can change the rendered element to h2 1`] = `
 <div
-  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup-none"
+  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-none"
   id="id"
 >
   <div
@@ -184,14 +184,14 @@ exports[`EuiCollapsibleNavGroup props titleElement can change the rendered eleme
 
 exports[`EuiCollapsibleNavGroup props titleSize can be larger 1`] = `
 <div
-  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-none"
+  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-none"
   id="id"
 />
 `;
 
 exports[`EuiCollapsibleNavGroup throws a warning if iconType is passed without a title 1`] = `
 <div
-  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-none"
+  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-none"
   id="id"
 />
 `;
@@ -199,7 +199,7 @@ exports[`EuiCollapsibleNavGroup throws a warning if iconType is passed without a
 exports[`EuiCollapsibleNavGroup when isCollapsible is true accepts accordion props 1`] = `
 <div
   aria-label="aria-label"
-  class="euiAccordion euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading testClass1 testClass2 emotion-euiCollapsibleNavGroup-none"
+  class="euiAccordion euiCollapsibleNavGroup testClass1 testClass2 emotion-euiCollapsibleNavGroup-isCollapsible-none"
   data-test-subj="test subject string"
 >
   <div
@@ -267,7 +267,7 @@ exports[`EuiCollapsibleNavGroup when isCollapsible is true accepts accordion pro
 
 exports[`EuiCollapsibleNavGroup when isCollapsible is true will render an accordion 1`] = `
 <div
-  class="euiAccordion euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading emotion-euiCollapsibleNavGroup-none"
+  class="euiAccordion euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-isCollapsible-none"
 >
   <div
     class="euiAccordion__triggerWrapper emotion-euiAccordion__triggerWrapper"
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 d59857735dd..4d29e47d351 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
@@ -1,10 +1,4 @@
 .euiCollapsibleNavGroup {
-  // 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 {
@@ -14,16 +8,4 @@
 }
 
 .euiCollapsibleNavGroup__heading {
-  // If the heading is not in an accordion, it needs the padding
-  &:not(.euiAccordion__button) {
-    padding: $euiSize;
-  }
-}
-
-.euiCollapsibleNavGroup__children {
-  padding: $euiSizeS;
-}
-
-.euiCollapsibleNavGroup--withHeading .euiCollapsibleNavGroup__children {
-  padding-top: 0;
 }
diff --git a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.styles.ts b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.styles.ts
index b7294877916..b7de2749a0f 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.styles.ts
+++ b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.styles.ts
@@ -36,5 +36,27 @@ export const euiCollapsibleNavGroupStyles = ({
         color: ${euiTheme.colors.ghost};
       }
     `,
+    // Header padding
+    isCollapsible: css`
+      /* This class does not accept a custom className */
+      .euiAccordion__triggerWrapper {
+        padding: ${euiTheme.size.base};
+      }
+    `,
+    notCollapsible: css`
+      /* If the heading is not in an accordion, it needs the padding */
+      .euiCollapsibleNavGroup__heading {
+        padding: ${euiTheme.size.base};
+      }
+    `,
+    // Children padding
+    childrenWrapper: {
+      euiCollapsibleNavGroup__children: css`
+        padding: ${euiTheme.size.s};
+      `,
+      withHeading: css`
+        ${logicalCSS('padding-top', 0)}
+      `,
+    },
   };
 };
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 827d7690648..b65c1d44aa7 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
@@ -119,16 +119,11 @@ export const EuiCollapsibleNavGroup: FunctionComponent<
   const styles = euiCollapsibleNavGroupStyles(euiTheme);
   const cssStyles = [
     styles.euiCollapsibleNavGroup,
+    isCollapsible ? styles.isCollapsible : styles.notCollapsible,
     background && styles[background],
   ];
 
-  const classes = classNames(
-    'euiCollapsibleNavGroup',
-    {
-      'euiCollapsibleNavGroup--withHeading': title,
-    },
-    className
-  );
+  const classes = classNames('euiCollapsibleNavGroup', className);
 
   // Warn if consumer passes an iconType without a title
   if (iconType && !title) {
@@ -137,8 +132,14 @@ export const EuiCollapsibleNavGroup: FunctionComponent<
     );
   }
 
+  const childrenStyles = [
+    styles.childrenWrapper.euiCollapsibleNavGroup__children,
+    title && styles.childrenWrapper.withHeading,
+  ];
   const content = children && (
-    <div className="euiCollapsibleNavGroup__children">{children}</div>
+    <div css={childrenStyles} className="euiCollapsibleNavGroup__children">
+      {children}
+    </div>
   );
 
   const headingClasses = 'euiCollapsibleNavGroup__heading';

From 86118b5adda6bd063697e0f5ca73fe2fe2231b2d Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 20 Jun 2023 18:36:38 -0700
Subject: [PATCH 07/13] Delete all Sass files

---
 src/components/collapsible_nav/_collapsible_nav.scss  |  0
 src/components/collapsible_nav/_index.scss            |  4 ----
 src/components/collapsible_nav/_variables.scss        |  1 -
 .../collapsible_nav_group/_collapsible_nav_group.scss | 11 -----------
 .../collapsible_nav/collapsible_nav_group/_index.scss |  1 -
 src/components/index.scss                             |  1 -
 6 files changed, 18 deletions(-)
 delete mode 100644 src/components/collapsible_nav/_collapsible_nav.scss
 delete mode 100644 src/components/collapsible_nav/_index.scss
 delete mode 100644 src/components/collapsible_nav/_variables.scss
 delete mode 100644 src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss
 delete mode 100644 src/components/collapsible_nav/collapsible_nav_group/_index.scss

diff --git a/src/components/collapsible_nav/_collapsible_nav.scss b/src/components/collapsible_nav/_collapsible_nav.scss
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/src/components/collapsible_nav/_index.scss b/src/components/collapsible_nav/_index.scss
deleted file mode 100644
index a31c44be949..00000000000
--- a/src/components/collapsible_nav/_index.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import 'variables';
-
-@import 'collapsible_nav';
-@import 'collapsible_nav_group/index';
diff --git a/src/components/collapsible_nav/_variables.scss b/src/components/collapsible_nav/_variables.scss
deleted file mode 100644
index a0586766fe5..00000000000
--- a/src/components/collapsible_nav/_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-// Sizing
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
deleted file mode 100644
index 4d29e47d351..00000000000
--- a/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.euiCollapsibleNavGroup {
-}
-
-.euiCollapsibleNavGroup--light {
-}
-
-.euiCollapsibleNavGroup--dark {
-}
-
-.euiCollapsibleNavGroup__heading {
-}
diff --git a/src/components/collapsible_nav/collapsible_nav_group/_index.scss b/src/components/collapsible_nav/collapsible_nav_group/_index.scss
deleted file mode 100644
index 667ebab6881..00000000000
--- a/src/components/collapsible_nav/collapsible_nav_group/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'collapsible_nav_group';
diff --git a/src/components/index.scss b/src/components/index.scss
index 999878192e4..2d60e75ee4c 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -2,7 +2,6 @@
 
 @import 'accordion/index';
 @import 'button/index';
-@import 'collapsible_nav/index';
 @import 'color_picker/index';
 @import 'combo_box/index';
 @import 'context_menu/index';

From 796ef7de71a88080408e361525f6f42dfdab0c99 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 20 Jun 2023 18:43:02 -0700
Subject: [PATCH 08/13] Convert Enzyme tests to RTL

---
 .../collapsible_nav.test.tsx.snap             | 99 ++++++++++---------
 .../collapsible_nav/collapsible_nav.test.tsx  | 81 +++++----------
 .../collapsible_nav_group.test.tsx.snap       |  2 +-
 .../collapsible_nav_group.test.tsx            | 46 ++++-----
 4 files changed, 104 insertions(+), 124 deletions(-)

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 ecd47873e67..63e57b55dc6 100644
--- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiCollapsibleNav close button can be hidden 1`] = `
-Array [
+<div>
   <div>
     <div
       data-focus-guard="true"
@@ -24,7 +24,8 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close.
+           
         </p>
         <button
           aria-label="Close this dialog"
@@ -46,14 +47,14 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-  </div>,
-]
+  </div>
+</div>
 `;
 
-exports[`EuiCollapsibleNav does not render if isOpen is false 1`] = `null`;
+exports[`EuiCollapsibleNav does not render if isOpen is false 1`] = `<div />`;
 
 exports[`EuiCollapsibleNav is rendered 1`] = `
-Array [
+<div>
   <div>
     <div
       data-focus-guard="true"
@@ -78,7 +79,8 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close.
+           
         </p>
         <button
           aria-label="Close this dialog"
@@ -100,17 +102,17 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-  </div>,
-]
+  </div>
+</div>
 `;
 
 exports[`EuiCollapsibleNav props accepts EuiFlyout props 1`] = `
-Array [
+<div>
   <div
     data-focus-guard="true"
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="0"
-  />,
+  />
   <div
     data-focus-lock-disabled="false"
   >
@@ -127,7 +129,8 @@ Array [
         class="emotion-euiScreenReaderOnly"
         id="generated-id"
       >
-        You are in a non-modal dialog. To close the dialog, press Escape. 
+        You are in a non-modal dialog. To close the dialog, press Escape.
+         
       </p>
       <button
         aria-label="Close this dialog"
@@ -143,22 +146,22 @@ Array [
         />
       </button>
     </nav>
-  </div>,
+  </div>
   <div
     data-focus-guard="true"
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="0"
-  />,
-]
+  />
+</div>
 `;
 
 exports[`EuiCollapsibleNav props button 1`] = `
-Array [
+<div>
   <button
     aria-controls="id"
     aria-expanded="true"
     aria-pressed="true"
-  />,
+  />
   <div>
     <div
       data-focus-guard="true"
@@ -181,7 +184,8 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close.
+           
         </p>
         <button
           aria-label="Close this dialog"
@@ -203,12 +207,12 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-  </div>,
-]
+  </div>
+</div>
 `;
 
 exports[`EuiCollapsibleNav props dockedBreakpoint 1`] = `
-Array [
+<div>
   <div>
     <div
       data-focus-guard="true"
@@ -231,7 +235,8 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close.
+           
         </p>
         <button
           aria-label="Close this dialog"
@@ -253,17 +258,17 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-  </div>,
-]
+  </div>
+</div>
 `;
 
 exports[`EuiCollapsibleNav props isDocked 1`] = `
-Array [
+<div>
   <div
     data-focus-guard="true"
-    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="-1"
-  />,
+  />
   <div
     data-focus-lock-disabled="disabled"
   >
@@ -272,20 +277,20 @@ Array [
       data-autofocus="true"
       id="id"
       role="dialog"
-      style="inline-size:320px"
+      style="inline-size: 320px;"
       tabindex="0"
     />
-  </div>,
+  </div>
   <div
     data-focus-guard="true"
-    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="-1"
-  />,
-]
+  />
+</div>
 `;
 
 exports[`EuiCollapsibleNav props onClose 1`] = `
-Array [
+<div>
   <div>
     <div
       data-focus-guard="true"
@@ -308,7 +313,8 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close.
+           
         </p>
         <button
           aria-label="Close this dialog"
@@ -330,22 +336,22 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-  </div>,
-]
+  </div>
+</div>
 `;
 
 exports[`EuiCollapsibleNav props showButtonIfDocked 1`] = `
-Array [
+<div>
   <button
     aria-controls="id"
     aria-expanded="true"
     aria-pressed="true"
-  />,
+  />
   <div
     data-focus-guard="true"
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="-1"
-  />,
+  />
   <div
     data-focus-lock-disabled="disabled"
   >
@@ -357,17 +363,17 @@ Array [
       style="inline-size: 320px;"
       tabindex="0"
     />
-  </div>,
+  </div>
   <div
     data-focus-guard="true"
     style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
     tabindex="-1"
-  />,
-]
+  />
+</div>
 `;
 
 exports[`EuiCollapsibleNav props size 1`] = `
-Array [
+<div>
   <div>
     <div
       data-focus-guard="true"
@@ -390,7 +396,8 @@ Array [
           class="emotion-euiScreenReaderOnly"
           id="generated-id"
         >
-          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close.
+           
         </p>
         <button
           aria-label="Close this dialog"
@@ -412,6 +419,6 @@ Array [
       style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
       tabindex="0"
     />
-  </div>,
-]
+  </div>
+</div>
 `;
diff --git a/src/components/collapsible_nav/collapsible_nav.test.tsx b/src/components/collapsible_nav/collapsible_nav.test.tsx
index 8290a998a8b..cf9239a6f27 100644
--- a/src/components/collapsible_nav/collapsible_nav.test.tsx
+++ b/src/components/collapsible_nav/collapsible_nav.test.tsx
@@ -7,8 +7,9 @@
  */
 
 import React from 'react';
-import { render, mount } from 'enzyme';
-import { requiredProps, takeMountedSnapshot } from '../../test';
+import { render } from '../../test/rtl';
+import { requiredProps } from '../../test';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiCollapsibleNav } from './collapsible_nav';
 import { EuiOverlayMaskProps } from '../overlay_mask';
@@ -32,77 +33,59 @@ const flyoutProps = {
 };
 
 describe('EuiCollapsibleNav', () => {
+  shouldRenderCustomStyles(<EuiCollapsibleNav {...propsNeededToRender} />);
+
   test('is rendered', () => {
-    const component = mount(
+    const { container } = render(
       <EuiCollapsibleNav {...propsNeededToRender} {...requiredProps} />
     );
 
-    expect(
-      takeMountedSnapshot(component, {
-        hasArrayOutput: true,
-      })
-    ).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 
   describe('props', () => {
     test('onClose', () => {
-      const component = mount(
+      const { container } = render(
         <EuiCollapsibleNav {...propsNeededToRender} onClose={() => {}} />
       );
 
-      expect(
-        takeMountedSnapshot(component, {
-          hasArrayOutput: true,
-        })
-      ).toMatchSnapshot();
+      expect(container).toMatchSnapshot();
     });
 
     test('size', () => {
-      const component = mount(
+      const { container } = render(
         <EuiCollapsibleNav {...propsNeededToRender} size={240} />
       );
 
-      expect(
-        takeMountedSnapshot(component, {
-          hasArrayOutput: true,
-        })
-      ).toMatchSnapshot();
+      expect(container).toMatchSnapshot();
     });
 
     test('isDocked', () => {
-      const component = render(
+      const { container } = render(
         <EuiCollapsibleNav {...propsNeededToRender} isDocked={true} />
       );
 
-      expect(component).toMatchSnapshot();
+      expect(container).toMatchSnapshot();
     });
 
     test('dockedBreakpoint', () => {
-      const component = mount(
+      const { container } = render(
         <EuiCollapsibleNav {...propsNeededToRender} dockedBreakpoint="s" />
       );
 
-      expect(
-        takeMountedSnapshot(component, {
-          hasArrayOutput: true,
-        })
-      ).toMatchSnapshot();
+      expect(container).toMatchSnapshot();
     });
 
     test('button', () => {
-      const component = mount(
+      const { container } = render(
         <EuiCollapsibleNav {...propsNeededToRender} button={<button />} />
       );
 
-      expect(
-        takeMountedSnapshot(component, {
-          hasArrayOutput: true,
-        })
-      ).toMatchSnapshot();
+      expect(container).toMatchSnapshot();
     });
 
     test('showButtonIfDocked', () => {
-      const component = mount(
+      const { container } = render(
         <EuiCollapsibleNav
           {...propsNeededToRender}
           button={<button />}
@@ -111,43 +94,33 @@ describe('EuiCollapsibleNav', () => {
         />
       );
 
-      expect(
-        takeMountedSnapshot(component, {
-          hasArrayOutput: true,
-        })
-      ).toMatchSnapshot();
+      expect(container).toMatchSnapshot();
     });
 
     test('accepts EuiFlyout props', () => {
-      const component = mount(
+      const { container } = render(
         <EuiCollapsibleNav {...propsNeededToRender} {...flyoutProps} />
       );
 
-      expect(
-        takeMountedSnapshot(component, {
-          hasArrayOutput: true,
-        })
-      ).toMatchSnapshot();
+      expect(container).toMatchSnapshot();
     });
   });
 
   describe('close button', () => {
     test('can be hidden', () => {
-      const component = mount(
+      const { container } = render(
         <EuiCollapsibleNav {...propsNeededToRender} hideCloseButton={true} />
       );
 
-      expect(
-        takeMountedSnapshot(component, {
-          hasArrayOutput: true,
-        })
-      ).toMatchSnapshot();
+      expect(container).toMatchSnapshot();
     });
   });
 
   test('does not render if isOpen is false', () => {
-    const component = render(<EuiCollapsibleNav onClose={() => {}} id="id" />);
+    const { container } = render(
+      <EuiCollapsibleNav onClose={() => {}} id="id" />
+    );
 
-    expect(component).toMatchSnapshot();
+    expect(container).toMatchSnapshot();
   });
 });
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 baefa95f569..0db13ad19fc 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
@@ -11,7 +11,7 @@ exports[`EuiCollapsibleNavGroup is rendered 1`] = `
 
 exports[`EuiCollapsibleNavGroup props background dark is rendered 1`] = `
 <div
-  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-dark"
+  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-dark-euiColorMode-dark-colorClassName"
   id="id"
 />
 `;
diff --git a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.test.tsx b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.test.tsx
index 39a89e9dec8..b7b5cb813d4 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.test.tsx
+++ b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.test.tsx
@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { render } from 'enzyme';
+import { render } from '../../../test/rtl';
 import { requiredProps } from '../../../test/required_props';
 import { shouldRenderCustomStyles } from '../../../test/internal';
 
@@ -20,32 +20,32 @@ describe('EuiCollapsibleNavGroup', () => {
   );
 
   test('is rendered', () => {
-    const component = render(
+    const { container } = render(
       <EuiCollapsibleNavGroup id="id" {...requiredProps} />
     );
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('props', () => {
     test('title is rendered', () => {
-      const component = render(
+      const { container } = render(
         <EuiCollapsibleNavGroup title="Title" id="id" />
       );
 
-      expect(component).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
 
     test('iconType is rendered', () => {
-      const component = render(
+      const { container } = render(
         <EuiCollapsibleNavGroup title="Title" iconType="bolt" id="id" />
       );
 
-      expect(component).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
 
     test('iconSize is rendered', () => {
-      const component = render(
+      const { container } = render(
         <EuiCollapsibleNavGroup
           title="Title"
           iconSize="s"
@@ -54,11 +54,11 @@ describe('EuiCollapsibleNavGroup', () => {
         />
       );
 
-      expect(component).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
 
     test('iconProps renders data-test-subj', () => {
-      const component = render(
+      const { container } = render(
         <EuiCollapsibleNavGroup
           title="Title"
           iconProps={{
@@ -69,41 +69,41 @@ describe('EuiCollapsibleNavGroup', () => {
         />
       );
 
-      expect(component).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
 
     describe('background', () => {
       BACKGROUNDS.forEach((color) => {
         test(`${color} is rendered`, () => {
-          const component = render(
+          const { container } = render(
             <EuiCollapsibleNavGroup id="id" background={color} />
           );
 
-          expect(component).toMatchSnapshot();
+          expect(container.firstChild).toMatchSnapshot();
         });
       });
     });
 
     test('titleElement can change the rendered element to h2', () => {
-      const component = render(
+      const { container } = render(
         <EuiCollapsibleNavGroup title="Title" titleElement="h2" id="id" />
       );
 
-      expect(component).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
 
     test('titleSize can be larger', () => {
-      const component = render(
+      const { container } = render(
         <EuiCollapsibleNavGroup id="id" titleSize="s" />
       );
 
-      expect(component).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
   });
 
   describe('when isCollapsible is true', () => {
     test('will render an accordion', () => {
-      const component = render(
+      const { container } = render(
         <EuiCollapsibleNavGroup
           isCollapsible={true}
           initialIsOpen={false}
@@ -112,11 +112,11 @@ describe('EuiCollapsibleNavGroup', () => {
         />
       );
 
-      expect(component).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
 
     test('accepts accordion props', () => {
-      const component = render(
+      const { container } = render(
         <EuiCollapsibleNavGroup
           isCollapsible={true}
           initialIsOpen={false}
@@ -127,7 +127,7 @@ describe('EuiCollapsibleNavGroup', () => {
         />
       );
 
-      expect(component).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
   });
 
@@ -147,7 +147,7 @@ describe('EuiCollapsibleNavGroup', () => {
     });
 
     test('if iconType is passed without a title', () => {
-      const component = render(
+      const { container } = render(
         <EuiCollapsibleNavGroup iconType="bolt" id="id" />
       );
 
@@ -155,7 +155,7 @@ describe('EuiCollapsibleNavGroup', () => {
       expect(consoleStub.mock.calls[0][0]).toMatch(
         'not render an icon without `title`'
       );
-      expect(component).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
   });
 });

From 0f49c0c0f3b68fdc9dc09fb25a36274a6966ac03 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 21 Jun 2023 16:25:52 -0700
Subject: [PATCH 09/13] [docs] Remove now-unnecessary `EuiThemeProvider` from
 collapsible nav docs

- since `background="dark"` now automatically sets the theme
---
 .../collapsible_nav/collapsible_nav_all.tsx   | 31 +++++++++----------
 .../collapsible_nav/collapsible_nav_list.tsx  | 11 ++-----
 2 files changed, 17 insertions(+), 25 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 926156ee990..f207c9b2e68 100644
--- a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
@@ -28,7 +28,6 @@ import { KibanaNavLinks, SecurityGroup } from './collapsible_nav_list';
 
 import contentSvg from '../../images/content.svg';
 import { useExitPath } from '../../services/routing/routing';
-import { EuiThemeProvider } from '../../../../src/services';
 
 const TopLinks: EuiPinnableListGroupItemProps[] = [
   {
@@ -161,23 +160,21 @@ const CollapsibleNavAll = () => {
       {/* Dark deployments section */}
       <EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
         <EuiCollapsibleNavGroup isCollapsible={false} background="dark">
-          <EuiThemeProvider colorMode="dark">
-            <EuiListGroup
-              maxWidth="none"
-              gutterSize="none"
-              size="s"
-              listItems={[
-                {
-                  label: 'Manage deployment',
-                  href: '#',
-                  iconType: 'logoCloud',
-                  iconProps: {
-                    color: 'ghost',
-                  },
+          <EuiListGroup
+            maxWidth="none"
+            gutterSize="none"
+            size="s"
+            listItems={[
+              {
+                label: 'Manage deployment',
+                href: '#',
+                iconType: 'logoCloud',
+                iconProps: {
+                  color: 'ghost',
                 },
-              ]}
-            />
-          </EuiThemeProvider>
+              },
+            ]}
+          />
         </EuiCollapsibleNavGroup>
       </EuiFlexItem>
 
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 f31e9fdb9da..5b72849246e 100644
--- a/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx
@@ -11,7 +11,6 @@ import {
 import { EuiSpacer } from '../../../../src/components/spacer';
 import { EuiButton, EuiButtonIcon } from '../../../../src/components/button';
 import { EuiLink } from '../../../../src/components/link';
-import { EuiThemeProvider } from '../../../../src/services';
 
 const deploymentsList: EuiListGroupProps['listItems'] = [
   {
@@ -62,13 +61,9 @@ export const DeploymentsGroup = (
     initialIsOpen={false}
     background="dark"
   >
-    <div role="group" className="kibanaNavDeployment__content">
-      <EuiThemeProvider colorMode="dark">
-        <EuiListGroup listItems={deploymentsList} flush />
-        <EuiSpacer size="s" />
-        <EuiButton fullWidth>Manage deployments</EuiButton>
-      </EuiThemeProvider>
-    </div>
+    <EuiListGroup listItems={deploymentsList} flush />
+    <EuiSpacer size="s" />
+    <EuiButton fullWidth>Manage deployments</EuiButton>
   </EuiCollapsibleNavGroup>
 );
 

From eebcabfce2416494dcae6943f31b5f0eb882bb90 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 21 Jun 2023 16:49:27 -0700
Subject: [PATCH 10/13] Set up Storybooks

- break from 'playground' example for `EuiCollapsibleGroupNav` to set up schema of different display types (since they're individually fairly different, and affect prop usage substantially)
---
 .../collapsible_nav.stories.tsx               | 51 ++++++++++++
 .../collapsible_nav_group.stories.tsx         | 83 +++++++++++++++++++
 2 files changed, 134 insertions(+)
 create mode 100644 src/components/collapsible_nav/collapsible_nav.stories.tsx
 create mode 100644 src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.stories.tsx

diff --git a/src/components/collapsible_nav/collapsible_nav.stories.tsx b/src/components/collapsible_nav/collapsible_nav.stories.tsx
new file mode 100644
index 00000000000..77a89909ea2
--- /dev/null
+++ b/src/components/collapsible_nav/collapsible_nav.stories.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+
+import { EuiButton } from '../button';
+import { EuiCollapsibleNav, EuiCollapsibleNavProps } from './collapsible_nav';
+
+const meta: Meta<EuiCollapsibleNavProps> = {
+  title: 'EuiCollapsibleNav',
+  component: EuiCollapsibleNav,
+  // TODO: Improve props inherited from EuiFlyout, ideally through
+  // a DRY import from `flyout.stories.tsx` once that's created
+};
+
+export default meta;
+type Story = StoryObj<EuiCollapsibleNavProps>;
+
+const StatefulCollapsibleNav = (props: Partial<EuiCollapsibleNavProps>) => {
+  const [isOpen, setIsOpen] = useState(props.isOpen);
+  return (
+    <EuiCollapsibleNav
+      {...props}
+      isOpen={isOpen}
+      button={
+        <EuiButton onClick={() => setIsOpen((isOpen) => !isOpen)}>
+          Toggle nav
+        </EuiButton>
+      }
+      onClose={() => setIsOpen(false)}
+    />
+  );
+};
+
+export const Playground: Story = {
+  render: ({ ...args }) => <StatefulCollapsibleNav {...args} />,
+  args: {
+    children: 'Collapsible nav content',
+    isOpen: true,
+    isDocked: false,
+    dockedBreakpoint: 'l',
+    showButtonIfDocked: false,
+    size: 240,
+  },
+};
diff --git a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.stories.tsx b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.stories.tsx
new file mode 100644
index 00000000000..4f761dc65a0
--- /dev/null
+++ b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.stories.tsx
@@ -0,0 +1,83 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {
+  EuiCollapsibleNavGroup,
+  EuiCollapsibleNavGroupProps,
+} from './collapsible_nav_group';
+
+const meta: Meta<EuiCollapsibleNavGroupProps> = {
+  title: 'EuiCollapsibleNavGroup',
+  // @ts-ignore This still works for Storybook controls, even though Typescript complains
+  component: EuiCollapsibleNavGroup,
+  argTypes: {
+    // Only show when `title` is set
+    titleSize: { if: { arg: 'title' } },
+    titleElement: { if: { arg: 'title' } },
+    iconType: { if: { arg: 'title' } },
+    iconSize: { if: { arg: 'title' } },
+    iconProps: { if: { arg: 'title' } },
+    // EuiAccordion props that should only show if `isCollapsible`
+    // (and `title`, but Storybook doesn't support multiple conditional controls)
+    buttonElement: { if: { arg: 'isCollapsible' } },
+    buttonProps: { if: { arg: 'isCollapsible' } },
+    buttonClassName: { if: { arg: 'isCollapsible' } },
+    buttonContentClassName: { if: { arg: 'isCollapsible' } },
+    buttonContent: { if: { arg: 'isCollapsible' } },
+    arrowProps: { if: { arg: 'isCollapsible' } },
+    extraAction: { if: { arg: 'isCollapsible' } },
+    initialIsOpen: { if: { arg: 'isCollapsible' } },
+    onToggle: { if: { arg: 'isCollapsible' } },
+    paddingSize: { if: { arg: 'isCollapsible' } },
+    arrowDisplay: { if: { arg: 'isCollapsible' } },
+    forceState: { if: { arg: 'isCollapsible' } },
+    isLoading: { if: { arg: 'isCollapsible' } },
+    isLoadingMessage: { if: { arg: 'isCollapsible' } },
+    isDisabled: { if: { arg: 'isCollapsible' } },
+    element: { if: { arg: 'isCollapsible' } },
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiCollapsibleNavGroupProps>;
+
+export const Accordion: Story = {
+  args: {
+    children: 'This is an accordion group with a title',
+    background: 'none',
+    title: 'Nav group - accordion',
+    iconType: 'logoElastic',
+    iconSize: 'l',
+    titleElement: 'h3',
+    titleSize: 'xxs',
+    initialIsOpen: true,
+    isCollapsible: true,
+  },
+};
+
+export const NonAccordion: StoryObj<EuiCollapsibleNavGroupProps> = {
+  args: {
+    children: 'This is a group with a title',
+    background: 'none',
+    title: 'Nav group - non-accordion',
+    iconType: 'logoElastic',
+    iconSize: 'l',
+    titleElement: 'h3',
+    titleSize: 'xxs',
+    isCollapsible: false,
+  },
+};
+
+export const NoTitle: Story = {
+  args: {
+    children: 'This is a group without a title',
+    background: 'none',
+  },
+};

From c3ced8cfd8d32605a38f5052625b4baf34b70a63 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 21 Jun 2023 16:51:14 -0700
Subject: [PATCH 11/13] Add full pattern storybook demo

- 50/50 on this, but it's useful for QA
---
 .../collapsible_nav.stories.tsx               | 302 ++++++++++++++++++
 1 file changed, 302 insertions(+)

diff --git a/src/components/collapsible_nav/collapsible_nav.stories.tsx b/src/components/collapsible_nav/collapsible_nav.stories.tsx
index 77a89909ea2..e5954a4297d 100644
--- a/src/components/collapsible_nav/collapsible_nav.stories.tsx
+++ b/src/components/collapsible_nav/collapsible_nav.stories.tsx
@@ -49,3 +49,305 @@ export const Playground: Story = {
     size: 240,
   },
 };
+
+/**
+ * Full pattern demo - this was copied from src-docs examples,
+ * and is meant to be an imitation of Kibana's production nav
+ */
+import { css } from '@emotion/react';
+import find from 'lodash/find';
+import findIndex from 'lodash/findIndex';
+
+import { logicalCSSWithFallback } from '../../global_styling';
+import {
+  EuiButtonIcon,
+  EuiIcon,
+  EuiText,
+  EuiLink,
+  EuiHeaderSectionItemButton,
+  EuiHeaderLogo,
+  EuiHeader,
+  EuiPageTemplate,
+  EuiPinnableListGroup,
+  EuiPinnableListGroupItemProps,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiSkeletonText,
+  EuiListGroup,
+} from '../../components';
+
+import { EuiCollapsibleNavGroup } from './collapsible_nav_group';
+
+const TopLinks: EuiPinnableListGroupItemProps[] = [
+  {
+    label: 'Home',
+    iconType: 'home',
+    isActive: true,
+    'aria-current': true,
+    onClick: () => {},
+    pinnable: false,
+  },
+];
+const KibanaLinks: EuiPinnableListGroupItemProps[] = [
+  { label: 'Discover', onClick: () => {} },
+  { label: 'Visualize', onClick: () => {} },
+  { label: 'Dashboards', onClick: () => {} },
+  { label: 'Canvas', onClick: () => {} },
+  { label: 'Maps', onClick: () => {} },
+  { label: 'Machine Learning', onClick: () => {} },
+  { label: 'Graph', onClick: () => {} },
+];
+
+const LearnLinks: EuiPinnableListGroupItemProps[] = [
+  { label: 'Docs', onClick: () => {} },
+  { label: 'Blogs', onClick: () => {} },
+  { label: 'Webinars', onClick: () => {} },
+  { label: 'Elastic.co', href: 'https://elastic.co' },
+];
+
+const CollapsibleNavAll = () => {
+  const [navIsOpen, setNavIsOpen] = useState(true);
+
+  /**
+   * Accordion toggling
+   */
+  const [openGroups, setOpenGroups] = useState(['Kibana', 'Learn']);
+
+  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]);
+  };
+
+  /**
+   * Pinning
+   */
+  const [pinnedItems, setPinnedItems] = useState<
+    EuiPinnableListGroupItemProps[]
+  >([]);
+
+  const addPin = (item: any) => {
+    if (!item || find(pinnedItems, { label: item.label })) {
+      return;
+    }
+    item.pinned = true;
+    const newPinnedItems = pinnedItems ? pinnedItems.concat(item) : [item];
+    setPinnedItems(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]);
+    }
+  };
+
+  const collapsibleNav = (
+    <EuiCollapsibleNav
+      aria-label="Main navigation"
+      isOpen={navIsOpen}
+      button={
+        <EuiHeaderSectionItemButton
+          aria-label="Toggle main navigation"
+          onClick={() => setNavIsOpen(!navIsOpen)}
+        >
+          <EuiIcon type={'menu'} size="m" aria-hidden="true" />
+        </EuiHeaderSectionItemButton>
+      }
+      onClose={() => setNavIsOpen(false)}
+      // Accessibility - Add scroll to nav on very small screens
+      css={css`
+        @media (max-height: 15em) {
+          ${logicalCSSWithFallback('overflow-y', 'auto')}
+        }
+      `}
+    >
+      {/* Dark deployments section */}
+      <EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
+        <EuiCollapsibleNavGroup isCollapsible={false} background="dark">
+          <EuiListGroup
+            maxWidth="none"
+            gutterSize="none"
+            size="s"
+            listItems={[
+              {
+                label: 'Manage deployment',
+                href: '#',
+                iconType: 'logoCloud',
+                iconProps: {
+                  color: 'ghost',
+                },
+              },
+            ]}
+          />
+        </EuiCollapsibleNavGroup>
+      </EuiFlexItem>
+
+      {/* Shaded pinned section always with a home item */}
+      <EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
+        <EuiCollapsibleNavGroup
+          background="light"
+          style={{ maxHeight: '40vh' }}
+          className="eui-yScroll"
+        >
+          <EuiPinnableListGroup
+            aria-label="Pinned links" // A11y : Since this group doesn't have a visible `title` it should be provided an accessible description
+            listItems={TopLinks.concat(pinnedItems)}
+            unpinTitle={({ label }) => `Unpin ${label}`}
+            onPinClick={removePin}
+            maxWidth="none"
+            color="text"
+            gutterSize="none"
+            size="s"
+          />
+        </EuiCollapsibleNavGroup>
+      </EuiFlexItem>
+
+      <EuiHorizontalRule margin="none" />
+
+      {/* BOTTOM */}
+      <EuiFlexItem
+        className="eui-yScroll"
+        // Accessibility - Allows nav items to be seen and interacted with on very small screen sizes
+        css={css`
+          @media (max-height: 15em) {
+            flex: 1 0 auto;
+          }
+        `}
+      >
+        {/* Kibana section */}
+        <EuiCollapsibleNavGroup
+          title={
+            <a
+              className="eui-textInheritColor"
+              href="#/navigation/collapsible-nav"
+              onClick={(e) => e.stopPropagation()}
+            >
+              Kibana
+            </a>
+          }
+          buttonElement="div"
+          iconType="logoKibana"
+          isCollapsible={true}
+          initialIsOpen={openGroups.includes('Kibana')}
+          onToggle={(isOpen: boolean) => 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={KibanaLinks}
+            pinTitle={({ label }) => `Pin ${label}`}
+            onPinClick={addPin}
+            maxWidth="none"
+            color="subdued"
+            gutterSize="none"
+            size="s"
+          />
+        </EuiCollapsibleNavGroup>
+
+        {/* Security callout */}
+        <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>
+
+        {/* Learn section */}
+        <EuiCollapsibleNavGroup
+          title={
+            <a
+              className="eui-textInheritColor"
+              href="#/navigation/collapsible-nav"
+              onClick={(e) => e.stopPropagation()}
+            >
+              Training
+            </a>
+          }
+          buttonElement="div"
+          iconType="training"
+          isCollapsible={true}
+          initialIsOpen={openGroups.includes('Learn')}
+          onToggle={(isOpen: boolean) => 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={LearnLinks}
+            pinTitle={({ label }) => `Pin ${label}`}
+            onPinClick={addPin}
+            maxWidth="none"
+            color="subdued"
+            gutterSize="none"
+            size="s"
+          />
+        </EuiCollapsibleNavGroup>
+      </EuiFlexItem>
+
+      <EuiFlexItem grow={false}>
+        {/* Span fakes the nav group into not being the first item and therefore adding a top border */}
+        <span />
+        <EuiCollapsibleNavGroup>
+          <EuiButton fill fullWidth iconType="plusInCircleFilled">
+            Add data
+          </EuiButton>
+        </EuiCollapsibleNavGroup>
+      </EuiFlexItem>
+    </EuiCollapsibleNav>
+  );
+
+  return (
+    <>
+      <EuiHeader
+        position="fixed"
+        sections={[
+          {
+            items: [
+              collapsibleNav,
+              <EuiHeaderLogo iconType="logoElastic">Elastic</EuiHeaderLogo>,
+            ],
+            borders: 'right',
+          },
+        ]}
+      />
+
+      <EuiPageTemplate>
+        <EuiPageTemplate.EmptyPrompt>
+          <EuiSkeletonText />
+        </EuiPageTemplate.EmptyPrompt>
+      </EuiPageTemplate>
+    </>
+  );
+};
+
+export const FullPattern: Story = {
+  render: () => <CollapsibleNavAll />,
+};

From bd1d1adf8d3a7c6d627efcb849fe87729b171cde Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 21 Jun 2023 17:00:05 -0700
Subject: [PATCH 12/13] changelog

---
 upcoming_changelogs/6865.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 upcoming_changelogs/6865.md

diff --git a/upcoming_changelogs/6865.md b/upcoming_changelogs/6865.md
new file mode 100644
index 00000000000..e072cc3de73
--- /dev/null
+++ b/upcoming_changelogs/6865.md
@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiCollapsibleNav` and `EuiCollapsibleNavGroup` to Emotion

From 71bb4b8e635b26445a8883de72bd1ffd152b46d9 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 22 Jun 2023 17:01:28 -0700
Subject: [PATCH 13/13] Revert "Add full pattern storybook demo"

This reverts commit c3ced8cfd8d32605a38f5052625b4baf34b70a63.
---
 .../collapsible_nav.stories.tsx               | 302 ------------------
 1 file changed, 302 deletions(-)

diff --git a/src/components/collapsible_nav/collapsible_nav.stories.tsx b/src/components/collapsible_nav/collapsible_nav.stories.tsx
index e5954a4297d..77a89909ea2 100644
--- a/src/components/collapsible_nav/collapsible_nav.stories.tsx
+++ b/src/components/collapsible_nav/collapsible_nav.stories.tsx
@@ -49,305 +49,3 @@ export const Playground: Story = {
     size: 240,
   },
 };
-
-/**
- * Full pattern demo - this was copied from src-docs examples,
- * and is meant to be an imitation of Kibana's production nav
- */
-import { css } from '@emotion/react';
-import find from 'lodash/find';
-import findIndex from 'lodash/findIndex';
-
-import { logicalCSSWithFallback } from '../../global_styling';
-import {
-  EuiButtonIcon,
-  EuiIcon,
-  EuiText,
-  EuiLink,
-  EuiHeaderSectionItemButton,
-  EuiHeaderLogo,
-  EuiHeader,
-  EuiPageTemplate,
-  EuiPinnableListGroup,
-  EuiPinnableListGroupItemProps,
-  EuiFlexItem,
-  EuiHorizontalRule,
-  EuiSkeletonText,
-  EuiListGroup,
-} from '../../components';
-
-import { EuiCollapsibleNavGroup } from './collapsible_nav_group';
-
-const TopLinks: EuiPinnableListGroupItemProps[] = [
-  {
-    label: 'Home',
-    iconType: 'home',
-    isActive: true,
-    'aria-current': true,
-    onClick: () => {},
-    pinnable: false,
-  },
-];
-const KibanaLinks: EuiPinnableListGroupItemProps[] = [
-  { label: 'Discover', onClick: () => {} },
-  { label: 'Visualize', onClick: () => {} },
-  { label: 'Dashboards', onClick: () => {} },
-  { label: 'Canvas', onClick: () => {} },
-  { label: 'Maps', onClick: () => {} },
-  { label: 'Machine Learning', onClick: () => {} },
-  { label: 'Graph', onClick: () => {} },
-];
-
-const LearnLinks: EuiPinnableListGroupItemProps[] = [
-  { label: 'Docs', onClick: () => {} },
-  { label: 'Blogs', onClick: () => {} },
-  { label: 'Webinars', onClick: () => {} },
-  { label: 'Elastic.co', href: 'https://elastic.co' },
-];
-
-const CollapsibleNavAll = () => {
-  const [navIsOpen, setNavIsOpen] = useState(true);
-
-  /**
-   * Accordion toggling
-   */
-  const [openGroups, setOpenGroups] = useState(['Kibana', 'Learn']);
-
-  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]);
-  };
-
-  /**
-   * Pinning
-   */
-  const [pinnedItems, setPinnedItems] = useState<
-    EuiPinnableListGroupItemProps[]
-  >([]);
-
-  const addPin = (item: any) => {
-    if (!item || find(pinnedItems, { label: item.label })) {
-      return;
-    }
-    item.pinned = true;
-    const newPinnedItems = pinnedItems ? pinnedItems.concat(item) : [item];
-    setPinnedItems(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]);
-    }
-  };
-
-  const collapsibleNav = (
-    <EuiCollapsibleNav
-      aria-label="Main navigation"
-      isOpen={navIsOpen}
-      button={
-        <EuiHeaderSectionItemButton
-          aria-label="Toggle main navigation"
-          onClick={() => setNavIsOpen(!navIsOpen)}
-        >
-          <EuiIcon type={'menu'} size="m" aria-hidden="true" />
-        </EuiHeaderSectionItemButton>
-      }
-      onClose={() => setNavIsOpen(false)}
-      // Accessibility - Add scroll to nav on very small screens
-      css={css`
-        @media (max-height: 15em) {
-          ${logicalCSSWithFallback('overflow-y', 'auto')}
-        }
-      `}
-    >
-      {/* Dark deployments section */}
-      <EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
-        <EuiCollapsibleNavGroup isCollapsible={false} background="dark">
-          <EuiListGroup
-            maxWidth="none"
-            gutterSize="none"
-            size="s"
-            listItems={[
-              {
-                label: 'Manage deployment',
-                href: '#',
-                iconType: 'logoCloud',
-                iconProps: {
-                  color: 'ghost',
-                },
-              },
-            ]}
-          />
-        </EuiCollapsibleNavGroup>
-      </EuiFlexItem>
-
-      {/* Shaded pinned section always with a home item */}
-      <EuiFlexItem grow={false} style={{ flexShrink: 0 }}>
-        <EuiCollapsibleNavGroup
-          background="light"
-          style={{ maxHeight: '40vh' }}
-          className="eui-yScroll"
-        >
-          <EuiPinnableListGroup
-            aria-label="Pinned links" // A11y : Since this group doesn't have a visible `title` it should be provided an accessible description
-            listItems={TopLinks.concat(pinnedItems)}
-            unpinTitle={({ label }) => `Unpin ${label}`}
-            onPinClick={removePin}
-            maxWidth="none"
-            color="text"
-            gutterSize="none"
-            size="s"
-          />
-        </EuiCollapsibleNavGroup>
-      </EuiFlexItem>
-
-      <EuiHorizontalRule margin="none" />
-
-      {/* BOTTOM */}
-      <EuiFlexItem
-        className="eui-yScroll"
-        // Accessibility - Allows nav items to be seen and interacted with on very small screen sizes
-        css={css`
-          @media (max-height: 15em) {
-            flex: 1 0 auto;
-          }
-        `}
-      >
-        {/* Kibana section */}
-        <EuiCollapsibleNavGroup
-          title={
-            <a
-              className="eui-textInheritColor"
-              href="#/navigation/collapsible-nav"
-              onClick={(e) => e.stopPropagation()}
-            >
-              Kibana
-            </a>
-          }
-          buttonElement="div"
-          iconType="logoKibana"
-          isCollapsible={true}
-          initialIsOpen={openGroups.includes('Kibana')}
-          onToggle={(isOpen: boolean) => 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={KibanaLinks}
-            pinTitle={({ label }) => `Pin ${label}`}
-            onPinClick={addPin}
-            maxWidth="none"
-            color="subdued"
-            gutterSize="none"
-            size="s"
-          />
-        </EuiCollapsibleNavGroup>
-
-        {/* Security callout */}
-        <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>
-
-        {/* Learn section */}
-        <EuiCollapsibleNavGroup
-          title={
-            <a
-              className="eui-textInheritColor"
-              href="#/navigation/collapsible-nav"
-              onClick={(e) => e.stopPropagation()}
-            >
-              Training
-            </a>
-          }
-          buttonElement="div"
-          iconType="training"
-          isCollapsible={true}
-          initialIsOpen={openGroups.includes('Learn')}
-          onToggle={(isOpen: boolean) => 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={LearnLinks}
-            pinTitle={({ label }) => `Pin ${label}`}
-            onPinClick={addPin}
-            maxWidth="none"
-            color="subdued"
-            gutterSize="none"
-            size="s"
-          />
-        </EuiCollapsibleNavGroup>
-      </EuiFlexItem>
-
-      <EuiFlexItem grow={false}>
-        {/* Span fakes the nav group into not being the first item and therefore adding a top border */}
-        <span />
-        <EuiCollapsibleNavGroup>
-          <EuiButton fill fullWidth iconType="plusInCircleFilled">
-            Add data
-          </EuiButton>
-        </EuiCollapsibleNavGroup>
-      </EuiFlexItem>
-    </EuiCollapsibleNav>
-  );
-
-  return (
-    <>
-      <EuiHeader
-        position="fixed"
-        sections={[
-          {
-            items: [
-              collapsibleNav,
-              <EuiHeaderLogo iconType="logoElastic">Elastic</EuiHeaderLogo>,
-            ],
-            borders: 'right',
-          },
-        ]}
-      />
-
-      <EuiPageTemplate>
-        <EuiPageTemplate.EmptyPrompt>
-          <EuiSkeletonText />
-        </EuiPageTemplate.EmptyPrompt>
-      </EuiPageTemplate>
-    </>
-  );
-};
-
-export const FullPattern: Story = {
-  render: () => <CollapsibleNavAll />,
-};