From 9a8bc173d8a2fa8a215fa32073cc1d48d91895c5 Mon Sep 17 00:00:00 2001
From: SuZhou-Joe <suzhou@amazon.com>
Date: Mon, 23 Sep 2024 18:23:46 +0800
Subject: [PATCH] feat: revert the customized style on nested items

Signed-off-by: SuZhou-Joe <suzhou@amazon.com>
---
 .../collapsible_nav_groups.test.tsx.snap      |  4 +--
 .../header/collapsible_nav_group_enabled.scss | 30 ++++---------------
 .../ui/header/collapsible_nav_groups.tsx      |  1 -
 3 files changed, 7 insertions(+), 28 deletions(-)

diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
index e77414b2af98..69a9f8158e35 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_groups.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
             >
               <button
                 aria-label="pure link"
-                class="euiSideNavItemButton euiSideNavItemButton-isOpen nav-link-item-btn nav-link-parent-item-button"
+                class="euiSideNavItemButton euiSideNavItemButton-isOpen nav-link-item-btn"
                 data-test-subj="collapsibleNavAppLink-pure"
                 type="button"
               >
@@ -120,7 +120,7 @@ exports[`<NavGroups /> should render correctly 1`] = `
             >
               <button
                 aria-label="link-in-category"
-                class="euiSideNavItemButton euiSideNavItemButton-isOpen nav-link-item-btn nav-link-parent-item-button"
+                class="euiSideNavItemButton euiSideNavItemButton-isOpen nav-link-item-btn"
                 data-test-subj="collapsibleNavAppLink-link-in-category"
                 type="button"
               >
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
index adc479a31267..9daee8cb6e12 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
+++ b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.scss
@@ -2,7 +2,7 @@
   border: none !important;
 
   .nav-link-item {
-    padding: $euiSizeXS $euiSize;
+    padding: $euiSizeXS $euiSizeS;
     border-radius: $euiSizeS;
     box-shadow: none;
     margin-bottom: 0;
@@ -10,11 +10,6 @@
 
     .nav-link-item-btn {
       margin-bottom: 0;
-      padding: 0;
-
-      &::after {
-        display: none;
-      }
     }
   }
 
@@ -31,17 +26,6 @@
     padding: $euiSizeS;
   }
 
-  .nav-link-parent-item-button {
-    > span {
-      flex-direction: row-reverse;
-
-      > * {
-        margin-right: $euiSizeS;
-        margin-left: 0;
-      }
-    }
-  }
-
   .nav-link-fake-item {
     margin-top: 0;
   }
@@ -51,15 +35,11 @@
   }
 
   .nav-nested-item {
-    margin-left: -10px;
+    padding: $euiSizeS 0;
 
-    &::after {
-      height: unset;
-    }
-
-    .nav-link-item-btn {
-      padding-left: 0;
-      padding-right: 0;
+    // The height is used to comply with the extra padding
+    &:last-of-type::after {
+      height: 50%;
     }
   }
 
diff --git a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
index f6ddc68aad7b..a493df312541 100644
--- a/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
+++ b/src/core/public/chrome/ui/header/collapsible_nav_groups.tsx
@@ -110,7 +110,6 @@ export function NavGroups({
         href: undefined,
         onClick: undefined,
         className: classNames(props.className, 'nav-link-parent-item'),
-        buttonClassName: classNames(props.buttonClassName, 'nav-link-parent-item-button'),
         items: navLink.links.map((subNavLink) =>
           createSideNavItem(subNavLink, level + 1, 'nav-nested-item')
         ),