From 94768d5f50d45ca5f3779c92b6496f87952c20b2 Mon Sep 17 00:00:00 2001
From: Leonardo Dourado <102989712+leonardodouradol@users.noreply.github.com>
Date: Wed, 5 Jun 2024 14:42:00 -0300
Subject: [PATCH] fix: transaction list item (#1102)

* fix: transaction list item

* chore: fix transaction list item

* fix: snapshot of transaction list spec

* chore: fix chromatic action version

* chore: change chromatic action to v11.4.0
---
 .github/workflows/chromatic.yml                           | 4 ++--
 packages/ocean-core/src/components/_list-item.scss        | 6 +++++-
 .../src/TransactionListItem/TransactionListItem.tsx       | 6 +++++-
 .../__tests__/TransactionListItem.test.tsx                | 8 ++++----
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
index a80030018..3a945fc08 100644
--- a/.github/workflows/chromatic.yml
+++ b/.github/workflows/chromatic.yml
@@ -48,14 +48,14 @@ jobs:
 
       - name: Publish to Chromatic
         if: ${{ github.actor != 'dependabot[bot]' && github.ref != 'refs/heads/master' }}
-        uses: chromaui/action@v1
+        uses: chromaui/action@v11.4.0
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
 
       - name: Publish to Chromatic and auto accept changes
         if: ${{ github.actor != 'dependabot[bot]' && github.ref == 'refs/heads/main' }}
-        uses: chromaui/action@v1
+        uses: chromaui/action@v11.4.0
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
diff --git a/packages/ocean-core/src/components/_list-item.scss b/packages/ocean-core/src/components/_list-item.scss
index b44d87127..56581ac62 100644
--- a/packages/ocean-core/src/components/_list-item.scss
+++ b/packages/ocean-core/src/components/_list-item.scss
@@ -116,7 +116,7 @@
 }
 
 .ods-transaction-list-item__information {
-  margin: 0 $spacing-inline-xs 0 12px;
+  margin: 0 $spacing-inline-xs 0 0;
   overflow: hidden;
   width: 100%;
 
@@ -125,6 +125,10 @@
   }
 }
 
+.ods-transaction-list-item__information--with-icon {
+  margin: 0 $spacing-inline-xs 0 12px;
+}
+
 .ods-transaction-list-item__sub-information {
   text-align: right;
 }
diff --git a/packages/ocean-react/src/TransactionListItem/TransactionListItem.tsx b/packages/ocean-react/src/TransactionListItem/TransactionListItem.tsx
index c660c2c42..8d98a0799 100644
--- a/packages/ocean-react/src/TransactionListItem/TransactionListItem.tsx
+++ b/packages/ocean-react/src/TransactionListItem/TransactionListItem.tsx
@@ -81,7 +81,11 @@ const TransactionListItem = React.forwardRef<
     >
       <div className="ods-transaction-list-item__content">
         {icon && <div className="ods-transaction-list-item__icon">{icon}</div>}
-        <div className="ods-transaction-list-item__information">
+        <div
+          className={`ods-transaction-list-item__information ${
+            icon ? 'ods-transaction-list-item__information--with-icon' : ''
+          }`}
+        >
           {level4 && (
             <div className="ods-transaction-list-item__level4">{level4}</div>
           )}
diff --git a/packages/ocean-react/src/TransactionListItem/__tests__/TransactionListItem.test.tsx b/packages/ocean-react/src/TransactionListItem/__tests__/TransactionListItem.test.tsx
index 66d371ffc..ef4acd637 100644
--- a/packages/ocean-react/src/TransactionListItem/__tests__/TransactionListItem.test.tsx
+++ b/packages/ocean-react/src/TransactionListItem/__tests__/TransactionListItem.test.tsx
@@ -26,7 +26,7 @@ test('renders default element properly', () => {
     class="ods-transaction-list-item__content"
   >
     <div
-      class="ods-transaction-list-item__information"
+      class="ods-transaction-list-item__information "
     >
       <div
         class="ods-transaction-list-item__level1"
@@ -71,7 +71,7 @@ test('renders default element properly with all possible information', () => {
       mock-exclamation-circle-outline
     </div>
     <div
-      class="ods-transaction-list-item__information"
+      class="ods-transaction-list-item__information ods-transaction-list-item__information--with-icon"
     >
       <div
         class="ods-transaction-list-item__level4"
@@ -151,7 +151,7 @@ test('renders default element properly with sub transaction-list-items', () => {
       mock-exclamation-circle-outline
     </div>
     <div
-      class="ods-transaction-list-item__information"
+      class="ods-transaction-list-item__information ods-transaction-list-item__information--with-icon"
     >
       <div
         class="ods-transaction-list-item__level1"
@@ -182,7 +182,7 @@ test('renders default element properly with sub transaction-list-items', () => {
           mock-exclamation-circle-outline
         </div>
         <div
-          class="ods-transaction-list-item__information"
+          class="ods-transaction-list-item__information ods-transaction-list-item__information--with-icon"
         >
           <div
             class="ods-transaction-list-item__level1"