[navigation]feat: update border style when new left nav expanded (ope…

…nsearch-project#8489) * feat: update border style Signed-off-by: SuZhou-Joe <[email protected]> * Changeset file for PR opensearch-project#8489 created/updated * feat: update Signed-off-by: SuZhou-Joe <[email protected]> * feat: update border color Signed-off-by: SuZhou-Joe <[email protected]> --------- Signed-off-by: SuZhou-Joe <[email protected]> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
LDrago27 · Oct 7, 2024 · 2f90def · 2f90def
1 parent 1f3077d
commit 2f90def
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 20 deletions.
diff --git a/changelogs/fragments/8489.yml b/changelogs/fragments/8489.yml
@@ -0,0 +1,2 @@
+feat:
+- Update border style when new left nav expanded ([#8489](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8489))
diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav_group_enabled.test.tsx.snap
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
@@ -102,11 +102,11 @@
     }
 
     &.bottom-container-expanded {
-      @include euiBottomShadowLarge($euiColorMediumShade, 0.1, true, true);
-
       gap: 16px;
       padding-top: $euiSizeM;
       padding-bottom: $euiSizeM;
+      border-top: $euiBorderThin;
+      border-color: $euiColorMediumShade;
     }
   }
 

diff --git a/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx b/src/core/public/chrome/ui/header/collapsible_nav_group_enabled.tsx
@@ -4,14 +4,7 @@
  */
 
 import './collapsible_nav_group_enabled.scss';
-import {
-  EuiFlyout,
-  EuiPanel,
-  EuiHorizontalRule,
-  EuiHideFor,
-  EuiFlyoutProps,
-  EuiShowFor,
-} from '@elastic/eui';
+import { EuiFlyout, EuiPanel, EuiHideFor, EuiFlyoutProps, EuiShowFor } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import React, { useMemo } from 'react';
 import useObservable from 'react-use/lib/useObservable';
@@ -250,7 +243,6 @@ export function CollapsibleNavGroupEnabled({
           // This element is used to push icons to the bottom of left navigation when collapsed
           !isNavOpen ? <div className="flex-1-container" /> : null
         }
-        <EuiHorizontalRule margin="none" />
         <div
           className={classNames({
             'bottom-container': true,