fix(TDOPS-5706): fix form arrayitem widget design and alignment (#5056)

Talend · Dec 13, 2023 · c9e740d · c9e740d
1 parent edc3d94
commit c9e740d
Show file tree

Hide file tree

Showing 6 changed files with 387 additions and 264 deletions.
diff --git a/.changeset/stale-cars-battle.md b/.changeset/stale-cars-battle.md
@@ -0,0 +1,5 @@
+---
+'@talend/react-forms': patch
+---
+
+TDOPS-5706 - Fix form widget ArrayItem button design and alignment
diff --git a/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.component.js b/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.component.js
@@ -1,17 +1,20 @@
-import PropTypes from 'prop-types';
 import { Fragment } from 'react';
-import { Action } from '@talend/react-components/lib/Actions';
-import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { ButtonIcon } from '@talend/design-system';
+
 import { I18N_DOMAIN_FORMS } from '../../../constants';
 
-import theme from './ArrayItem.module.scss';
 import fieldTemplateTheme from '../../fields/FieldTemplate/FieldTemplate.module.scss';
+import theme from './ArrayItem.module.scss';
 
 export function ReorderButton(props) {
 	const { disabled, index, hasMoveDown, hasMoveUp, id, isMoveDown, onReorder } = props;
 	let buttonProps;
+	let label;
 	const { t } = useTranslation(I18N_DOMAIN_FORMS);
 
 	if (isMoveDown) {
@@ -23,9 +26,9 @@ export function ReorderButton(props) {
 					previousIndex: index,
 					nextIndex: index + 1,
 				}),
-			label: t('ARRAY_ITEM_MOVE_DOWN', { defaultValue: 'Move down' }),
-			iconTransform: 'rotate-270',
+			icon: 'arrow-bottom',
 		};
+		label = t('ARRAY_ITEM_MOVE_DOWN', { defaultValue: 'Move down' });
 	} else {
 		buttonProps = {
 			id: id && `${id}-moveUp`,
@@ -35,19 +38,15 @@ export function ReorderButton(props) {
 					previousIndex: index,
 					nextIndex: index - 1,
 				}),
-			label: t('ARRAY_ITEM_MOVE_UP', { defaultValue: 'Move up' }),
-			iconTransform: 'rotate-90',
+			icon: 'arrow-top',
 		};
+		label = t('ARRAY_ITEM_MOVE_UP', { defaultValue: 'Move up' });
 	}
 
 	return (
-		<Action
-			{...buttonProps}
-			className={`${theme['tf-array-item-reorder']} tf-array-item-reorder`}
-			icon="talend-arrow-left"
-			link
-			hideLabel
-		/>
+		<ButtonIcon {...buttonProps} size="XS">
+			{label}
+		</ButtonIcon>
 	);
 }
 
@@ -82,13 +81,8 @@ function ArrayItem(props) {
 	const deleteAction = {
 		id: id && `${id}-delete`,
 		onClick: event => onRemove(event, index),
-		label: t('ARRAY_FIELD_TEMPLATE_ACTION_DELETE', { defaultValue: 'Delete' }),
-		type: 'button',
 		disabled: widgetIsDisabled,
-		className: theme.delete,
 		icon: 'talend-trash',
-		hideLabel: true,
-		link: true,
 	};
 	const actions = [];
 	if (!readOnly) {
@@ -110,8 +104,10 @@ function ArrayItem(props) {
 			</div>
 			{renderItem(index, { actions })}
 			{!isCloseable && !readOnly && !disabled && (
-				<div className={theme.control}>
-					<Action {...deleteAction} />
+				<div className={theme.delete}>
+					<ButtonIcon {...deleteAction}>
+						{t('ARRAY_FIELD_TEMPLATE_ACTION_DELETE', { defaultValue: 'Delete' })}
+					</ButtonIcon>
 				</div>
 			)}
 		</div>

diff --git a/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.module.scss b/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.module.scss
@@ -3,58 +3,47 @@
 
 .tf-array-item {
 	display: flex;
+	column-gap: tokens.$coral-spacing-s;
 	background: tokens.$coral-color-neutral-background-medium;
 	border: tokens.$coral-border-s-solid transparent;
 
-	.delete,
-	.tf-array-item-reorder {
+	.delete button,
+	.control button {
 		opacity: 0;
 	}
 
 	&:hover {
 		background: tokens.$coral-color-neutral-background;
 
-		.control {
-			.delete,
-			.tf-array-item-reorder {
-				opacity: 1;
+		.control button,
+		.delete button {
+			opacity: 1;
 
-				&:disabled {
-					color: tokens.$coral-color-neutral-text-disabled;
-				}
+			&:disabled {
+				color: tokens.$coral-color-neutral-text-disabled;
 			}
 		}
 	}
 
 	> * {
 		flex-grow: 1;
 		margin: 0;
-		padding: $padding-small;
 	}
 
 	.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;
-		padding: 0;
 		justify-content: space-between;
+	}
 
-		.tf-array-item-reorder {
-			padding: 0;
-		}
-
-		button {
-			background: transparent;
-			border: 0;
-
-			&:disabled {
-				cursor: not-allowed;
-				pointer-events: all;
-			}
-		}
+	.delete {
+		flex-grow: 0;
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
 	}
 
 	:global(.collapsible-panel) {