From c9e740d2409e0fad0caee090a346cff7822f139d Mon Sep 17 00:00:00 2001 From: Gbacc Date: Wed, 13 Dec 2023 07:58:05 +0100 Subject: [PATCH] fix(TDOPS-5706): fix form arrayitem widget design and alignment (#5056) --- .changeset/stale-cars-battle.md | 5 + .../fieldsets/Array/ArrayItem.component.js | 40 ++- .../fieldsets/Array/ArrayItem.module.scss | 39 +-- .../Array.component.test.js.snap | 243 +++++++++++------- .../ArrayItem.component.test.js.snap | 81 +++--- ...efaultArrayTemplate.component.test.js.snap | 243 +++++++++++------- 6 files changed, 387 insertions(+), 264 deletions(-) create mode 100644 .changeset/stale-cars-battle.md diff --git a/.changeset/stale-cars-battle.md b/.changeset/stale-cars-battle.md new file mode 100644 index 00000000000..f551c0e8cfa --- /dev/null +++ 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 index eb51610a7f6..c2cc683749f 100644 --- 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 ( - + + {label} + ); } @@ -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) { {renderItem(index, { actions })} {!isCloseable && !readOnly && !disabled && ( -
- +
+ + {t('ARRAY_FIELD_TEMPLATE_ACTION_DELETE', { defaultValue: 'Delete' })} +
)}
diff --git a/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.module.scss b/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.module.scss index 5905adda3aa..0bb586abbca 100644 --- a/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.module.scss +++ b/packages/forms/src/UIForm/fieldsets/Array/ArrayItem.module.scss @@ -3,25 +3,24 @@ .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; } } } @@ -29,32 +28,22 @@ > * { 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) { 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 4b1c937b933..3d862ece0cd 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 @@ -37,39 +37,53 @@ exports[`Array component should render array 1`] = ` class="theme-control" >
@@ -199,38 +218,52 @@ exports[`Array component should render array 1`] = ` class="theme-control" >
@@ -360,39 +398,53 @@ exports[`Array component should render array 1`] = ` class="theme-control" >
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 5370af5e923..6ac33643970 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 @@ -8,59 +8,78 @@ exports[`Array Item component should render control panel with item content 1`] class="theme-control" >
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 6781e1bd882..951825fd3d2 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 @@ -67,39 +67,53 @@ exports[`Default Array Template component should render default array template 1 class="theme-control" >
@@ -107,24 +121,29 @@ exports[`Default Array Template component should render default array template 1 0
@@ -139,38 +158,52 @@ exports[`Default Array Template component should render default array template 1 class="theme-control" >
@@ -178,24 +211,29 @@ exports[`Default Array Template component should render default array template 1 1
@@ -210,39 +248,53 @@ exports[`Default Array Template component should render default array template 1 class="theme-control" >
@@ -250,24 +302,29 @@ exports[`Default Array Template component should render default array template 1 2