From 84058e0ded1ed9f65b7db99254def6224ff7842b Mon Sep 17 00:00:00 2001
From: tygao <tygao@amazon.com>
Date: Tue, 12 Mar 2024 18:22:49 +0800
Subject: [PATCH] add prefix for resizableButton

Signed-off-by: tygao <tygao@amazon.com>
---
 .../__snapshots__/sidecar_service.test.tsx.snap    | 10 +++++-----
 .../__snapshots__/resizable_button.test.tsx.snap   | 14 +++++++-------
 .../components/__snapshots__/sidecar.test.tsx.snap | 10 +++++-----
 .../sidecar/components/resizable_button.scss       |  2 +-
 .../sidecar/components/resizable_button.tsx        |  2 +-
 5 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/core/public/overlays/sidecar/__snapshots__/sidecar_service.test.tsx.snap b/src/core/public/overlays/sidecar/__snapshots__/sidecar_service.test.tsx.snap
index f183bb4cccb4..95d617b3acfe 100644
--- a/src/core/public/overlays/sidecar/__snapshots__/sidecar_service.test.tsx.snap
+++ b/src/core/public/overlays/sidecar/__snapshots__/sidecar_service.test.tsx.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SidecarService SidecarRef#Hide() hide the sidecar when calling hide  1`] = `"<div class=\\"osdSidecarFlyout osdSidecarFlyout--dockedRight osdSidecarFlyout--hide\\" style=\\"width: 460px;\\"><button class=\\"resizableButton resizableButton--horizontal\\" data-test-subj=\\"resizableButton\\" type=\\"button\\"></button><div class=\\"osdSidecarMountWrapper\\"><span>Sidecar content</span></div></div>"`;
+exports[`SidecarService SidecarRef#Hide() hide the sidecar when calling hide  1`] = `"<div class=\\"osdSidecarFlyout osdSidecarFlyout--dockedRight osdSidecarFlyout--hide\\" style=\\"width: 460px;\\"><button class=\\"sidecar-resizableButton resizableButton--horizontal\\" data-test-subj=\\"resizableButton\\" type=\\"button\\"></button><div class=\\"osdSidecarMountWrapper\\"><span>Sidecar content</span></div></div>"`;
 
-exports[`SidecarService SidecarRef#Show() recover sidecar when calling show after calling hide 1`] = `"<div class=\\"osdSidecarFlyout osdSidecarFlyout--dockedRight\\" style=\\"width: 460px;\\"><button class=\\"resizableButton resizableButton--horizontal\\" data-test-subj=\\"resizableButton\\" type=\\"button\\"></button><div class=\\"osdSidecarMountWrapper\\"><span>Sidecar content</span></div></div>"`;
+exports[`SidecarService SidecarRef#Show() recover sidecar when calling show after calling hide 1`] = `"<div class=\\"osdSidecarFlyout osdSidecarFlyout--dockedRight\\" style=\\"width: 460px;\\"><button class=\\"sidecar-resizableButton resizableButton--horizontal\\" data-test-subj=\\"resizableButton\\" type=\\"button\\"></button><div class=\\"osdSidecarMountWrapper\\"><span>Sidecar content</span></div></div>"`;
 
 exports[`SidecarService SidecarRef#close() can be called multiple times on the same SidecarRef 1`] = `
 Array [
@@ -12,8 +12,8 @@ Array [
 ]
 `;
 
-exports[`SidecarService open sidecar does not unmount if targetDom is null 1`] = `"<div class=\\"osdSidecarFlyout osdSidecarFlyout--dockedRight\\" style=\\"width: 460px;\\"><button class=\\"resizableButton resizableButton--horizontal\\" data-test-subj=\\"resizableButton\\" type=\\"button\\"></button><div class=\\"osdSidecarMountWrapper\\"><span>Sidecar content</span></div></div>"`;
+exports[`SidecarService open sidecar does not unmount if targetDom is null 1`] = `"<div class=\\"osdSidecarFlyout osdSidecarFlyout--dockedRight\\" style=\\"width: 460px;\\"><button class=\\"sidecar-resizableButton resizableButton--horizontal\\" data-test-subj=\\"resizableButton\\" type=\\"button\\"></button><div class=\\"osdSidecarMountWrapper\\"><span>Sidecar content</span></div></div>"`;
 
-exports[`SidecarService open sidecar renders a sidecar to the DOM 1`] = `"<div class=\\"osdSidecarFlyout osdSidecarFlyout--dockedRight\\" style=\\"width: 460px;\\"><button class=\\"resizableButton resizableButton--horizontal\\" data-test-subj=\\"resizableButton\\" type=\\"button\\"></button><div class=\\"osdSidecarMountWrapper\\"><span>Sidecar content</span></div></div>"`;
+exports[`SidecarService open sidecar renders a sidecar to the DOM 1`] = `"<div class=\\"osdSidecarFlyout osdSidecarFlyout--dockedRight\\" style=\\"width: 460px;\\"><button class=\\"sidecar-resizableButton resizableButton--horizontal\\" data-test-subj=\\"resizableButton\\" type=\\"button\\"></button><div class=\\"osdSidecarMountWrapper\\"><span>Sidecar content</span></div></div>"`;
 
-exports[`SidecarService open sidecar with a currently active sidecar replaces the current sidecar with a new one 1`] = `"<div class=\\"osdSidecarFlyout osdSidecarFlyout--dockedRight\\" style=\\"width: 460px;\\"><button class=\\"resizableButton resizableButton--horizontal\\" data-test-subj=\\"resizableButton\\" type=\\"button\\"></button><div class=\\"osdSidecarMountWrapper\\"><span>Sidecar content 2</span></div></div>"`;
+exports[`SidecarService open sidecar with a currently active sidecar replaces the current sidecar with a new one 1`] = `"<div class=\\"osdSidecarFlyout osdSidecarFlyout--dockedRight\\" style=\\"width: 460px;\\"><button class=\\"sidecar-resizableButton resizableButton--horizontal\\" data-test-subj=\\"resizableButton\\" type=\\"button\\"></button><div class=\\"osdSidecarMountWrapper\\"><span>Sidecar content 2</span></div></div>"`;
diff --git a/src/core/public/overlays/sidecar/components/__snapshots__/resizable_button.test.tsx.snap b/src/core/public/overlays/sidecar/components/__snapshots__/resizable_button.test.tsx.snap
index 8acfbacadd5c..9407e6c6956b 100644
--- a/src/core/public/overlays/sidecar/components/__snapshots__/resizable_button.test.tsx.snap
+++ b/src/core/public/overlays/sidecar/components/__snapshots__/resizable_button.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`is rendered 1`] = `
 <button
-  className="resizableButton resizableButton--horizontal"
+  className="sidecar-resizableButton resizableButton--horizontal"
   data-test-subj="resizableButton"
   onClick={[Function]}
   onMouseDown={[Function]}
@@ -13,7 +13,7 @@ exports[`is rendered 1`] = `
 
 exports[`it should be horizontal when docked mode is right 1`] = `
 <button
-  className="resizableButton resizableButton--horizontal"
+  className="sidecar-resizableButton resizableButton--horizontal"
   data-test-subj="resizableButton"
   onClick={[Function]}
   onMouseDown={[Function]}
@@ -24,7 +24,7 @@ exports[`it should be horizontal when docked mode is right 1`] = `
 
 exports[`it should be vertical when docked mode is takeover 1`] = `
 <button
-  className="resizableButton resizableButton--vertical"
+  className="sidecar-resizableButton resizableButton--vertical"
   data-test-subj="resizableButton"
   onClick={[Function]}
   onMouseDown={[Function]}
@@ -35,7 +35,7 @@ exports[`it should be vertical when docked mode is takeover 1`] = `
 
 exports[`it should emit onResize with min size when drag if new size is below the minimum 1`] = `
 <button
-  className="resizableButton resizableButton--horizontal"
+  className="sidecar-resizableButton resizableButton--horizontal"
   data-test-subj="resizableButton"
   onClick={[Function]}
   onMouseDown={[Function]}
@@ -46,7 +46,7 @@ exports[`it should emit onResize with min size when drag if new size is below th
 
 exports[`it should emit onResize with new flyout size when docked left and drag and horizontal 1`] = `
 <button
-  className="resizableButton resizableButton--horizontal"
+  className="sidecar-resizableButton resizableButton--horizontal"
   data-test-subj="resizableButton"
   onClick={[Function]}
   onMouseDown={[Function]}
@@ -57,7 +57,7 @@ exports[`it should emit onResize with new flyout size when docked left and drag
 
 exports[`it should emit onResize with new flyout size when docked right and drag and horizontal 1`] = `
 <button
-  className="resizableButton resizableButton--horizontal"
+  className="sidecar-resizableButton resizableButton--horizontal"
   data-test-subj="resizableButton"
   onClick={[Function]}
   onMouseDown={[Function]}
@@ -68,7 +68,7 @@ exports[`it should emit onResize with new flyout size when docked right and drag
 
 exports[`it should emit onResize with new flyout size when drag and vertical 1`] = `
 <button
-  className="resizableButton resizableButton--vertical"
+  className="sidecar-resizableButton resizableButton--vertical"
   data-test-subj="resizableButton"
   onClick={[Function]}
   onMouseDown={[Function]}
diff --git a/src/core/public/overlays/sidecar/components/__snapshots__/sidecar.test.tsx.snap b/src/core/public/overlays/sidecar/components/__snapshots__/sidecar.test.tsx.snap
index 59d236eaa821..25364ab42740 100644
--- a/src/core/public/overlays/sidecar/components/__snapshots__/sidecar.test.tsx.snap
+++ b/src/core/public/overlays/sidecar/components/__snapshots__/sidecar.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Sidecar component is rendered 1`] = `
   data-test-subj="sidecar-component-wrapper"
 >
   <button
-    class="resizableButton resizableButton--horizontal"
+    class="sidecar-resizableButton resizableButton--horizontal"
     data-test-subj="resizableButton"
     type="button"
   />
@@ -245,7 +245,7 @@ exports[`Sidecar component it should emit setSidecarConfig with new style when r
         onResize={[Function]}
       >
         <button
-          className="resizableButton resizableButton--horizontal"
+          className="sidecar-resizableButton resizableButton--horizontal"
           data-test-subj="resizableButton"
           onClick={[Function]}
           onMouseDown={[Function]}
@@ -675,7 +675,7 @@ exports[`Sidecar component it should have a height style when dockedDirection is
         onResize={[Function]}
       >
         <button
-          className="resizableButton resizableButton--vertical"
+          className="sidecar-resizableButton resizableButton--vertical"
           data-test-subj="resizableButton"
           onClick={[Function]}
           onMouseDown={[Function]}
@@ -1195,7 +1195,7 @@ exports[`Sidecar component it should have a height style when isHidden is true 1
         onResize={[Function]}
       >
         <button
-          className="resizableButton resizableButton--vertical"
+          className="sidecar-resizableButton resizableButton--vertical"
           data-test-subj="resizableButton"
           onClick={[Function]}
           onMouseDown={[Function]}
@@ -1572,7 +1572,7 @@ exports[`Sidecar component it should have a width style when dockedDirection is
         onResize={[Function]}
       >
         <button
-          className="resizableButton resizableButton--horizontal"
+          className="sidecar-resizableButton resizableButton--horizontal"
           data-test-subj="resizableButton"
           onClick={[Function]}
           onMouseDown={[Function]}
diff --git a/src/core/public/overlays/sidecar/components/resizable_button.scss b/src/core/public/overlays/sidecar/components/resizable_button.scss
index ddda85d79a0a..2473b49455f6 100644
--- a/src/core/public/overlays/sidecar/components/resizable_button.scss
+++ b/src/core/public/overlays/sidecar/components/resizable_button.scss
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-.resizableButton {
+.sidecar-resizableButton {
   position: relative;
   flex-shrink: 0;
   z-index: $euiZLevel1;
diff --git a/src/core/public/overlays/sidecar/components/resizable_button.tsx b/src/core/public/overlays/sidecar/components/resizable_button.tsx
index 8741581d97e2..830a0c00ba96 100644
--- a/src/core/public/overlays/sidecar/components/resizable_button.tsx
+++ b/src/core/public/overlays/sidecar/components/resizable_button.tsx
@@ -20,7 +20,7 @@ export const MIN_SIDECAR_SIZE = 350;
 export const ResizableButton = ({ dockedMode, onResize, flyoutSize }: Props) => {
   const isHorizontal = dockedMode !== SIDECAR_DOCKED_MODE.TAKEOVER;
 
-  const classes = classNames('resizableButton', {
+  const classes = classNames('sidecar-resizableButton', {
     'resizableButton--vertical': !isHorizontal,
     'resizableButton--horizontal': isHorizontal,
   });