Merge pull request #306 from multiversx/development

0.1.22

Author: arhtudormorar

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [[0.1.22](https://github.com/multiversx/mx-sdk-dapp-ui/pull/306)] - 2026-02-20
+
+- [Added part attributes to SidePanel and SignTransactions ](https://github.com/multiversx/mx-sdk-dapp-ui/pull/306)
+
 ## [[0.1.21](https://github.com/multiversx/mx-sdk-dapp-ui/pull/305)] - 2026-02-11
 
 - [Fixed `data-testid` on button](https://github.com/multiversx/mx-sdk-dapp-ui/pull/305)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp-ui",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "description": "A library to hold UI components for a dApp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "MIT",

src/common/SidePanel/SidePanel.tsx

@@ -68,7 +68,7 @@ export function SidePanel(
               />
             )}
           </div>
-          <div class={styles.sidePanelContent}>{children}</div>
+          <div class={styles.sidePanelContent} part="side-panel-content">{children}</div>
         </div>
       </SidePanelSwiper>
     </div>

src/common/SidePanel/components/SidePanelSwiper/SidePanelSwiper.tsx

@@ -241,19 +241,28 @@ export function SidePanelSwiper(
           [styles.sidePanelSwiperWrapperVisible]: state.isVisible,
           [styles.sidePanelSwiperWrapperHidden]: !state.isVisible,
         }}
+        part="side-panel-swiper-wrapper"
       >
-        <div class={styles.sidePanelSwiper} ref={setSheetRef} onClick={(event: MouseEvent) => event.stopPropagation()}>
-          <div class={styles.sidePanelSwiperHandleWrapper}>
+        <div
+          class={styles.sidePanelSwiper}
+          ref={setSheetRef}
+          part="side-panel-swiper"
+          onClick={(event: MouseEvent) => event.stopPropagation()}
+        >
+          <div class={styles.sidePanelSwiperHandleWrapper} part="side-panel-swiper-handle-wrapper">
             <div
               class={styles.sidePanelSwiperHandleContainer}
+              part="side-panel-swiper-handle-container"
               onMouseDown={handleDragStart}
               onTouchStart={handleDragStart}
             >
-              <div class={styles.sidePanelSwiperHandle} />
+              <div class={styles.sidePanelSwiperHandle} part="side-panel-swiper-handle" />
             </div>
           </div>
 
-          <div class={styles.sidePanelSwiperContent}>{children}</div>
+          <div class={styles.sidePanelSwiperContent} part="side-panel-swiper-content">
+            {children}
+          </div>
         </div>
       </div>
     </div>

src/components/functional/sign-transactions-panel/components/SignTransactionsAdvanced/components/SignTransactionsAdvancedData/SignTransactionsAdvancedData.tsx

@@ -102,7 +102,7 @@ export function SignTransactionsAdvancedData({
       </div>
 
       <div class={styles.signTransactionsAdvancedDataBottom}>
-        <div class={styles.signTransactionsAdvancedDataWrapper}>
+        <div class={styles.signTransactionsAdvancedDataWrapper} part="sign-transactions-advanced-data-wrapper">
           {beforeHighlight || afterHighlight ? (
             <Fragment>
               {beforeHighlight && (
@@ -120,6 +120,7 @@ export function SignTransactionsAdvancedData({
                   styles.signTransactionsAdvancedDataHighlightBolded,
                 )}
                 data-testid={DataTestIdsEnum.signTransactionsAdvancedDataHighlight}
+                part="sign-transactions-advanced-data-highlight"
                 ref={el => (highlightElement = el)}
               >
                 {highlightText}
@@ -138,6 +139,7 @@ export function SignTransactionsAdvancedData({
             <div
               class={styles.signTransactionsAdvancedDataHighlight}
               data-testid={DataTestIdsEnum.signTransactionsAdvancedDataHighlight}
+              part="sign-transactions-advanced-data-highlight"
             >
               {highlightText}
             </div>

src/components/functional/sign-transactions-panel/components/SignTransactionsFooter/SignTransactionsFooter.tsx

@@ -54,7 +54,7 @@ export function SignTransactionsFooter({
   const checkButtonText = providerName ? `Check ${providerName}` : 'Check your device';
 
   return (
-    <div class={styles.signTransactionsFooterContainer}>
+    <div class={styles.signTransactionsFooterContainer} part="sign-transactions-footer-container">
       <div class={styles.signTransactionsFooter} data-testid={DataTestIdsEnum.signTransactionsFooter}>
         <div class={styles.signTransactionsFooterButtons} data-testid={DataTestIdsEnum.signTransactionsFooterButtons}>
           <div

src/components/functional/sign-transactions-panel/components/SignTransactionsHeader/SignTransactionsHeader.tsx

@@ -24,7 +24,11 @@ export function SignTransactionsHeader({
   showFavicon,
 }: SignTransactionsHeaderPropsType) {
   return (
-    <div class={styles.signTransactionsHeader} data-testid={DataTestIdsEnum.signTransactionsHeader}>
+    <div
+      class={styles.signTransactionsHeader}
+      data-testid={DataTestIdsEnum.signTransactionsHeader}
+      part={DataTestIdsEnum.signTransactionsHeader}
+    >
       {transactionsCount > 1 && (
         <div
           class={styles.signTransactionsHeaderPager}
@@ -80,6 +84,7 @@ export function SignTransactionsHeader({
 
       <div
         data-testid={DataTestIdsEnum.signTransactionsHeaderOrigin}
+        part="sign-transactions-header-origin"
         class={{
           [styles.signTransactionsHeaderOrigin]: true,
           [styles.signTransactionsHeaderOriginCentered]: transactionsCount <= 1,

src/components/functional/sign-transactions-panel/sign-transactions-panel.tsx

@@ -150,7 +150,7 @@ export class SignTransactionsPanel {
 
     return (
       <SidePanel isOpen={this.isOpen} onClose={this.handleClose} panelTitle="Confirm Transaction" hasBackButton={false}>
-        <div class={styles.signTransactionsPanel} data-testid={DataTestIdsEnum.signTransactionsPanel}>
+        <div class={styles.signTransactionsPanel} data-testid={DataTestIdsEnum.signTransactionsPanel} part="sign-transactions-panel">
           <SignTransactionsHeader
             onBack={onBack}
             onNext={onNext}
@@ -160,7 +160,7 @@ export class SignTransactionsPanel {
             showFavicon={this.showFavicon}
           />
 
-          <div class={styles.signTransactionContent}>
+          <div class={styles.signTransactionContent} part="sign-transaction-content">
             <div class={styles.signTransactionsTabs}>
               {transactionTabs.map(transactionTab => (
                 <div