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
ocean-ds · Jun 5, 2024 · 94768d5 · 94768d5
1 parent c6149ea
commit 94768d5
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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"