From 8152c91226155e3a7434a063ff5ba63ab20a86e1 Mon Sep 17 00:00:00 2001
From: tygao <tygao@amazon.com>
Date: Fri, 19 Apr 2024 11:17:10 +0800
Subject: [PATCH] chore: update component

Signed-off-by: tygao <tygao@amazon.com>
---
 .../right_navigation_button.test.tsx.snap     | 25 +++++++++++++------
 .../ui/header/right_navigation_button.tsx     | 14 ++++-------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/core/public/chrome/ui/header/__snapshots__/right_navigation_button.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/right_navigation_button.test.tsx.snap
index 1df64b25ca22..3bd3bc57c9c7 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/right_navigation_button.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/right_navigation_button.test.tsx.snap
@@ -5,18 +5,27 @@ exports[`Right navigation button should render base element normally 1`] = `
   <div>
     <button
       aria-label="title"
-      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+      class="euiButtonEmpty euiButtonEmpty--text euiHeaderSectionItemButton"
       data-test-subj="rightNavigationButton"
-      style="height: 48px; min-width: 48px;"
-      title="title"
       type="button"
     >
       <span
-        aria-hidden="true"
-        class="euiButtonIcon__icon"
-        color="inherit"
-        data-euiicon-type="mock_icon"
-      />
+        class="euiButtonContent euiButtonEmpty__content"
+      >
+        <span
+          class="euiButtonEmpty__text"
+        >
+          <span
+            class="euiHeaderSectionItemButton__content"
+          >
+            <span
+              color="primary"
+              data-euiicon-type="mock_icon"
+              title="title"
+            />
+          </span>
+        </span>
+      </span>
     </button>
   </div>
 </body>
diff --git a/src/core/public/chrome/ui/header/right_navigation_button.tsx b/src/core/public/chrome/ui/header/right_navigation_button.tsx
index 132abc0c4ec1..eac47b1ce812 100644
--- a/src/core/public/chrome/ui/header/right_navigation_button.tsx
+++ b/src/core/public/chrome/ui/header/right_navigation_button.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButtonIcon } from '@elastic/eui';
+import { EuiHeaderSectionItemButton, EuiIcon } from '@elastic/eui';
 import React from 'react';
 import { CoreStart } from 'src/core/public';
 
@@ -35,16 +35,12 @@ export const RightNavigationButton = ({
   };
 
   return (
-    <EuiButtonIcon
-      iconType={iconType}
+    <EuiHeaderSectionItemButton
       data-test-subj="rightNavigationButton"
       aria-label={title}
-      title={title}
       onClick={navigateToApp}
-      style={{
-        height: '48px',
-        minWidth: '48px',
-      }}
-    />
+    >
+      <EuiIcon type={iconType} size="m" title={title} color="primary" />
+    </EuiHeaderSectionItemButton>
   );
 };