chore(DFD-491): Update ArrayItem styles (#5113)

Talend · Jan 15, 2024 · 2065869 · 2065869
1 parent 2a65607
commit 2065869
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 30 deletions.
diff --git a/.changeset/sharp-crabs-join.md 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
@@ -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
@@ -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
@@ -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
@@ -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/...orms/src/UIForm/fieldsets/Array/__snapshots__/DefaultArrayTemplate.component.test.js.snap b/...orms/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>