From a99d63b3cf29108ede5b41724d02945957209108 Mon Sep 17 00:00:00 2001
From: Tudor Morar <tudor.morar@multiversx.com>
Date: Wed, 11 Feb 2026 16:23:16 +0200
Subject: [PATCH] Data tesids (#303)

* fix datatestids

* Remove unnecessary text and clean up the SidePanelHeader component for improved clarity

* Bump version
---
 CHANGELOG.md                                                  | 4 ++++
 package.json                                                  | 2 +-
 .../SidePanel/components/SidePanelHeader/SidePanelHeader.tsx  | 2 ++
 src/components/visual/button/button.tsx                       | 4 ++--
 src/constants/dataTestIds.enum.ts                             | 1 +
 5 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fbafe685..c56ab557 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [[0.1.20](https://github.com/multiversx/mx-sdk-dapp-ui/pull/304)] - 2026-02-11
+
+- [Fied `data-testid`s](https://github.com/multiversx/mx-sdk-dapp-ui/pull/303)
+
 ## [[0.1.19](https://github.com/multiversx/mx-sdk-dapp-ui/pull/302)] - 2026-01-29
 
 - [Fix duplicated `data-testid` on `mvx-button` host and inner `<button>`](https://github.com/multiversx/mx-sdk-dapp-ui/pull/302)
diff --git a/package.json b/package.json
index bc8e57ef..a9120bee 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp-ui",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "description": "A library to hold UI components for a dApp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "MIT",
diff --git a/src/common/SidePanel/components/SidePanelHeader/SidePanelHeader.tsx b/src/common/SidePanel/components/SidePanelHeader/SidePanelHeader.tsx
index 1cfb2495..7c3aeda4 100644
--- a/src/common/SidePanel/components/SidePanelHeader/SidePanelHeader.tsx
+++ b/src/common/SidePanel/components/SidePanelHeader/SidePanelHeader.tsx
@@ -1,6 +1,7 @@
 import { h } from '@stencil/core';
 import classNames from 'classnames';
 import { Icon } from 'common/Icon';
+import { DataTestIdsEnum } from 'constants/dataTestIds.enum';
 
 // prettier-ignore
 const styles = {
@@ -57,6 +58,7 @@ export function SidePanelHeader({
       <div
         class={{ [styles.sidePanelHeadingRight]: true, [styles.sidePanelHeadingRightVisible]: hasRightButton }}
         onClick={handleRightIconClick}
+        data-testid={DataTestIdsEnum.sidePanelCloseButton}
       >
         {hasRightButton && (rightIcon || <Icon name="close" />)}
       </div>
diff --git a/src/components/visual/button/button.tsx b/src/components/visual/button/button.tsx
index 9319e84e..a2b38dba 100644
--- a/src/components/visual/button/button.tsx
+++ b/src/components/visual/button/button.tsx
@@ -20,7 +20,7 @@ export class Button {
   @Prop() size?: `${ButtonSizeEnum}` = 'large';
   @Prop() variant?: `${ButtonVariantEnum}` = 'primary';
 
-  private handleClick = (event: MouseEvent) => {
+  private readonly handleClick = (event: MouseEvent) => {
     this.buttonClick.emit(event);
   };
 
@@ -28,7 +28,7 @@ export class Button {
     return (
       <ButtonComponent
         class={this.class}
-        data-testid={this.dataTestId}
+        // data-testid={this.internalDataTestId} // This is handled by the `data-testid` prop with `reflect: false`
         disabled={this.disabled}
         size={this.size}
         variant={this.variant}
diff --git a/src/constants/dataTestIds.enum.ts b/src/constants/dataTestIds.enum.ts
index 2b57188e..772bd249 100644
--- a/src/constants/dataTestIds.enum.ts
+++ b/src/constants/dataTestIds.enum.ts
@@ -82,4 +82,5 @@ export enum DataTestIdsEnum {
   signTransactionsAdvancedDataWrapper = 'signTransactionsAdvancedDataWrapper',
   signTransactionsAdvancedDataText = 'signTransactionsAdvancedDataText',
   signTransactionsAdvancedDataHighlight = 'signTransactionsAdvancedDataHighlight',
+  sidePanelCloseButton = 'side-panel-close-button',
 }