From 20658698465860e7ba979c7aa39bb7d3da3836f9 Mon Sep 17 00:00:00 2001
From: Mathieu Huchet <59565911+tlnd-mhuchet@users.noreply.github.com>
Date: Mon, 15 Jan 2024 12:03:04 +0100
Subject: [PATCH] chore(DFD-491): Update ArrayItem styles (#5113)

---
 .changeset/sharp-crabs-join.md                |  5 ++++
 .../fieldsets/Array/ArrayItem.component.js    |  2 +-
 .../fieldsets/Array/ArrayItem.module.scss     |  1 -
 .../Array.component.test.js.snap              | 30 +++++++++++--------
 .../ArrayItem.component.test.js.snap          | 10 ++++---
 ...efaultArrayTemplate.component.test.js.snap | 30 +++++++++++--------
 6 files changed, 48 insertions(+), 30 deletions(-)
 create mode 100644 .changeset/sharp-crabs-join.md

diff --git a/.changeset/sharp-crabs-join.md b/.changeset/sharp-crabs-join.md
new file mode 100644
index 00000000000..d6d73317d72
--- /dev/null
+++ b/.changeset/sharp-crabs-join.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-forms': minor
+---
+
+chore(DFD-491): Update ArrayItem styles
diff --git a/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.component.js b/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.component.js
index c2cc683749f..e47f413dfc0 100644
--- a/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.component.js
+++ b/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.component.js
@@ -82,7 +82,7 @@ function ArrayItem(props) {
 		id: id && `${id}-delete`,
 		onClick: event => onRemove(event, index),
 		disabled: widgetIsDisabled,
-		icon: 'talend-trash',
+		icon: 'trash',
 	};
 	const actions = [];
 	if (!readOnly) {
diff --git a/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.module.scss b/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.module.scss
index 0bb586abbca..7227d73466f 100644
--- a/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.module.scss
+++ b/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.module.scss
@@ -33,7 +33,6 @@
 	.control {
 		flex-grow: 0;
 		flex-shrink: 0;
-		border-right: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak;
 		display: flex;
 		flex-direction: column;
 		justify-content: space-between;
diff --git a/packages/forms/src/UIForm/fieldsets/Array/__snapshots__/Array.component.test.js.snap b/packages/forms/src/UIForm/fieldsets/Array/__snapshots__/Array.component.test.js.snap
index 3d862ece0cd..4e45b893bd6 100644
--- a/packages/forms/src/UIForm/fieldsets/Array/__snapshots__/Array.component.test.js.snap
+++ b/packages/forms/src/UIForm/fieldsets/Array/__snapshots__/Array.component.test.js.snap
@@ -197,12 +197,14 @@ exports[`Array component should render array 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="tc-svg-icon tc-icon theme-svg tc-icon-name-talend-trash"
-                focusable="false"
-                name="talend-trash"
                 pointer-events="none"
                 shape-rendering="geometricPrecision"
-              />
+                style="width: 1.6rem; height: 1.6rem;"
+              >
+                <use
+                  xlink:href="#trash:M"
+                />
+              </svg>
             </span>
           </button>
         </div>
@@ -377,12 +379,14 @@ exports[`Array component should render array 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="tc-svg-icon tc-icon theme-svg tc-icon-name-talend-trash"
-                focusable="false"
-                name="talend-trash"
                 pointer-events="none"
                 shape-rendering="geometricPrecision"
-              />
+                style="width: 1.6rem; height: 1.6rem;"
+              >
+                <use
+                  xlink:href="#trash:M"
+                />
+              </svg>
             </span>
           </button>
         </div>
@@ -558,12 +562,14 @@ exports[`Array component should render array 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="tc-svg-icon tc-icon theme-svg tc-icon-name-talend-trash"
-                focusable="false"
-                name="talend-trash"
                 pointer-events="none"
                 shape-rendering="geometricPrecision"
-              />
+                style="width: 1.6rem; height: 1.6rem;"
+              >
+                <use
+                  xlink:href="#trash:M"
+                />
+              </svg>
             </span>
           </button>
         </div>
diff --git a/packages/forms/src/UIForm/fieldsets/Array/__snapshots__/ArrayItem.component.test.js.snap b/packages/forms/src/UIForm/fieldsets/Array/__snapshots__/ArrayItem.component.test.js.snap
index 6ac33643970..68f6863a1cb 100644
--- a/packages/forms/src/UIForm/fieldsets/Array/__snapshots__/ArrayItem.component.test.js.snap
+++ b/packages/forms/src/UIForm/fieldsets/Array/__snapshots__/ArrayItem.component.test.js.snap
@@ -73,12 +73,14 @@ exports[`Array Item component should render control panel with item content 1`]
       >
         <svg
           aria-hidden="true"
-          class="tc-svg-icon tc-icon theme-svg tc-icon-name-talend-trash"
-          focusable="false"
-          name="talend-trash"
           pointer-events="none"
           shape-rendering="geometricPrecision"
-        />
+          style="width: 1.6rem; height: 1.6rem;"
+        >
+          <use
+            xlink:href="#trash:M"
+          />
+        </svg>
       </span>
     </button>
   </div>
diff --git a/packages/forms/src/UIForm/fieldsets/Array/__snapshots__/DefaultArrayTemplate.component.test.js.snap b/packages/forms/src/UIForm/fieldsets/Array/__snapshots__/DefaultArrayTemplate.component.test.js.snap
index 951825fd3d2..c87d8a1eeb8 100644
--- a/packages/forms/src/UIForm/fieldsets/Array/__snapshots__/DefaultArrayTemplate.component.test.js.snap
+++ b/packages/forms/src/UIForm/fieldsets/Array/__snapshots__/DefaultArrayTemplate.component.test.js.snap
@@ -137,12 +137,14 @@ exports[`Default Array Template component should render default array template 1
             >
               <svg
                 aria-hidden="true"
-                class="tc-svg-icon tc-icon theme-svg tc-icon-name-talend-trash"
-                focusable="false"
-                name="talend-trash"
                 pointer-events="none"
                 shape-rendering="geometricPrecision"
-              />
+                style="width: 1.6rem; height: 1.6rem;"
+              >
+                <use
+                  xlink:href="#trash:M"
+                />
+              </svg>
             </span>
           </button>
         </div>
@@ -227,12 +229,14 @@ exports[`Default Array Template component should render default array template 1
             >
               <svg
                 aria-hidden="true"
-                class="tc-svg-icon tc-icon theme-svg tc-icon-name-talend-trash"
-                focusable="false"
-                name="talend-trash"
                 pointer-events="none"
                 shape-rendering="geometricPrecision"
-              />
+                style="width: 1.6rem; height: 1.6rem;"
+              >
+                <use
+                  xlink:href="#trash:M"
+                />
+              </svg>
             </span>
           </button>
         </div>
@@ -318,12 +322,14 @@ exports[`Default Array Template component should render default array template 1
             >
               <svg
                 aria-hidden="true"
-                class="tc-svg-icon tc-icon theme-svg tc-icon-name-talend-trash"
-                focusable="false"
-                name="talend-trash"
                 pointer-events="none"
                 shape-rendering="geometricPrecision"
-              />
+                style="width: 1.6rem; height: 1.6rem;"
+              >
+                <use
+                  xlink:href="#trash:M"
+                />
+              </svg>
             </span>
           </button>
         </div>