0.1.16

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [[0.1.16](https://github.com/multiversx/mx-sdk-dapp-ui/pull/298)] - 2026-01-27
+
+- [Add part attributes to Button, AddressTable, and Pagination components for improved external styling capabilities](https://github.com/multiversx/mx-sdk-dapp-ui/pull/298)
+
 ## [[0.1.15](https://github.com/multiversx/mx-sdk-dapp-ui/pull/296)] - 2026-01-26
 
 - [Fixed helpers export](https://github.com/multiversx/mx-sdk-dapp-ui/pull/296)

package.json

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

src/common/Button/Button.tsx

@@ -25,6 +25,7 @@ export function Button(
 ) {
   return (
     <button
+      part="button"
       data-testid={dataTestId}
       onClick={onClick}
       disabled={disabled}

src/components/visual/address-table/address-table.tsx

@@ -92,7 +92,7 @@ export class AddressTable {
 
     return (
       <div class="address-table">
-        <div class="address-table-label-wrapper">
+        <div class="address-table-label-wrapper" part="label-wrapper">
           <div class="address-table-label">Choose the wallet you want to access</div>
         </div>
 
@@ -148,14 +148,14 @@ export class AddressTable {
                   #{this.processLedgerAddressIndex(accountDerivation)}
                 </div>
 
-                <mvx-trim text={accountDerivation.address} class="address-table-list-item-address" />
+                <mvx-trim text={accountDerivation.address} class="address-table-list-item-address" part="address" />
                 <div class="address-table-list-item-balance">{accountDerivation.usdValue}</div>
               </div>
             ))}
           </div>
         </div>
 
-        <div class="address-table-pagination">
+        <div class="address-table-pagination" part="pagination-wrapper">
           <Pagination
             totalPages={totalPages}
             isDisabled={isPageChanging}
@@ -186,6 +186,7 @@ export class AddressTable {
             onButtonClick={this.handleAccessWallet.bind(this)}
             disabled={isPageChanging || isAccessWalletDisabled}
             class={classNames('address-table-button', addressTableClasses.button)}
+            exportparts="button: access-button"
           >
             <span class="address-table-button-label">{isPageChanging ? 'Loading Wallets...' : 'Access Wallet'}</span>
             {isPageChanging && <mvx-spinner-icon />}

src/components/visual/address-table/components/pagination/Pagination.tsx

@@ -97,13 +97,15 @@ export function Pagination({
         onClick={handleEdgePageClick(1)}
         data-testid={DataTestIdsEnum.firstBtn}
         class={getPaginationAngleClasses(isLeftToggleDisabled)}
+        part="pagination-angle-first"
       >
         <Icon name="angles-left" class={styles.paginationAngleIcon} />
       </span>
       <div
         data-testid={DataTestIdsEnum.prevBtn}
         onClick={handleEdgePageClick(currentPage - 1)}
         class={getPaginationEdgeButtonClasses(isLeftToggleDisabled)}
+        part="pagination-button-prev"
       >
         <Icon name="angle-left" class={styles.paginationEdgeButtonIcon} />
       </div>
@@ -120,6 +122,7 @@ export function Pagination({
               <div
                 onClick={() => handlePageClick(Number(paginationItem))}
                 data-testid={`${DataTestIdsEnum.paginationItem}-${paginationItem}`}
+                part="pagination-item"
                 class={{
                   [styles.paginationItem]: true,
                   [styles.paginationItemBefore]: true,
@@ -156,13 +159,15 @@ export function Pagination({
         data-testid={DataTestIdsEnum.nextBtn}
         onClick={handleEdgePageClick(currentPage + 1)}
         class={getPaginationEdgeButtonClasses(isRightToggleDisabled)}
+        part="pagination-button-next"
       >
         <Icon name="angle-right" class={styles.paginationEdgeButtonIcon} />
       </div>
       <span
         data-testid={DataTestIdsEnum.lastBtn}
         onClick={handleEdgePageClick(totalPages)}
         class={getPaginationAngleClasses(isRightToggleDisabled)}
+        part="pagination-angle-last"
       >
         <Icon name="angles-right" class={styles.paginationAngleIcon} />
       </span>

src/components/visual/address-table/components/pagination/pagination.styles.ts

@@ -13,7 +13,7 @@ export default {
     paginationItemWrapper: 'pagination-item-wrapper mvx:cursor-pointer mvx:text-center mvx:h-7 mvx:w-7 mvx:flex mvx:items-center mvx:justify-center mvx:transition-all mvx:duration-200 mvx:ease-in-out mvx:md:h-8 mvx:md:w-8',
     paginationItemWrapperDisabled: 'pagination-item-wrapper-disabled mvx:pointer-events-none mvx:cursor-default mvx:opacity-50',
     paginationItem: 'pagination-item mvx:text-primary mvx:relative mvx:flex mvx:justify-center mvx:items-center mvx:py-2 mvx:px-0 mvx:text-center mvx:w-7 mvx:h-7 mvx:transition-colors mvx:duration-200 mvx:ease-in-out mvx:rounded mvx:text-xs mvx:hover:text-accent mvx:md:text-base mvx:md:h-8 mvx:md:w-8',
-    paginationItemBefore: 'pagination-item-before mvx:before:absolute mvx:before:transition-all mvx:before:duration-200 mvx:before:ease-in-out mvx:before:pointer-events-none mvx:before:transform mvx:before:w-7 mvx:before:left-1/2 mvx:before:top-1/2 mvx:before:h-7 mvx:before:z-1 mvx:before:rounded-full mvx:before:opacity-20 mvx:before:-translate-y-1/2 mvx:before:-translate-x-1/2 mvx:before:bg-pagination-item mvx:hover:before:opacity-100 mvx:hover:before:bg-pagination-item-hover mvx:md:before:h-8 mvx:md:before:w-8',
+    paginationItemBefore: 'pagination-item-before mvx:before:content-[""] mvx:before:absolute mvx:before:transition-all mvx:before:duration-200 mvx:before:ease-in-out mvx:before:pointer-events-none mvx:before:transform mvx:before:w-7 mvx:before:left-1/2 mvx:before:top-1/2 mvx:before:h-7 mvx:before:z-1 mvx:before:rounded-full mvx:before:opacity-20 mvx:before:-translate-y-1/2 mvx:before:-translate-x-1/2 mvx:before:bg-pagination-item mvx:hover:before:opacity-100 mvx:hover:before:bg-pagination-item-hover mvx:md:before:h-8 mvx:md:before:w-8',
     paginationItemActive: 'pagination-item-active mvx:text-accent mvx:before:opacity-100 mvx:before:bg-pagination-item-hover',
     paginationItemHundreds: 'pagination-item-hundreds mvx:text-tiny! mvx:md:text-xxs!',
     paginationItemText: 'pagination-item-text mvx:z-2 mvx:relative'