fix: place icon for StudioProperty.Button next to label

frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.module.css

@@ -1,10 +1,10 @@
 .propertyButton {
   border-radius: 0;
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto;
   justify-content: flex-start;
-  margin: calc(-1 * var(--studio-property-button-vertical-spacing)) 0;
   overflow: hidden;
-  padding: var(--studio-property-button-vertical-spacing) var(--fds-spacing-5);
+  padding: var(--studio-property-button-vertical-spacing) var(--fds-spacing-3);
 }
 
 .propertyButton.withValue .content {
@@ -58,3 +58,7 @@
 .propertyButton.withoutNegativeMargin {
   margin: 0;
 }
+
+.definedValue {
+  color: var(--fds-semantic-text-neutral-default);
+}

frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.tsx

@@ -38,6 +38,7 @@ const StudioPropertyButton = forwardRef<HTMLButtonElement, StudioPropertyButtonP
       compact && classes.compact,
       readOnly && classes.readOnly,
       withoutNegativeMargin && classes.withoutNegativeMargin,
+      givenIcon && hasValue && classes.definedValue,
       givenClass,
     );
 

frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditActions/EditActions.tsx

@@ -61,7 +61,6 @@ export const EditActions = (): React.ReactElement => {
       <StudioProperty.Button
         onClick={onNewActionAddClicked}
         property={t('process_editor.configuration_panel_actions_add_new')}
-        size='small'
       />
     </>
   );

frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/EditDataTypes.tsx

@@ -3,7 +3,6 @@ import { StudioProperty } from '@studio/components';
 import { useTranslation } from 'react-i18next';
 import { LinkIcon } from '@studio/icons';
 import { SelectDataTypes } from './SelectDataTypes';
-import classes from './EditDataTypes.module.css';
 import { useBpmnContext } from '../../../../contexts/BpmnContext';
 
 export type EditDataTypesProps = {
@@ -27,19 +26,12 @@ export const EditDataTypes = ({
     setDataModelSelectVisible(false);
   }, [bpmnDetails.id]);
 
-  const definedValueWithLinkIcon = (
-    <span className={classes.definedValue}>
-      <LinkIcon /> {existingDataTypeForTask}
-    </span>
-  );
-
   return (
     <>
       {!existingDataTypeForTask && !dataModelSelectVisible ? (
         <StudioProperty.Button
           onClick={() => setDataModelSelectVisible(true)}
           property={t('process_editor.configuration_panel_set_data_model_link')}
-          size='small'
           icon={<LinkIcon />}
         />
       ) : dataModelSelectVisible ? (
@@ -55,9 +47,10 @@ export const EditDataTypes = ({
           aria-label={t('process_editor.configuration_panel_set_data_model', {
             dataModelName: existingDataTypeForTask,
           })}
+          icon={<LinkIcon />}
           onClick={() => setDataModelSelectVisible(true)}
           property={t('process_editor.configuration_panel_set_data_model_label')}
-          value={definedValueWithLinkIcon}
+          value={existingDataTypeForTask}
         />
       )}
     </>

frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditUniqueFromSignaturesInDataTypes/EditUniqueFromSignaturesInDataTypes.tsx

@@ -51,7 +51,6 @@ export const EditUniqueFromSignaturesInDataTypes = () => {
           property={t(
             'process_editor.configuration_panel_set_unique_from_signatures_in_data_types_link',
           )}
-          size='small'
           icon={<PersonPencilIcon />}
         />
       ) : isSelectVisible ? (

frontend/packages/process-editor/src/components/ConfigPanel/ConfigEndEvent/CustomReceiptContent/CustomReceiptContent.tsx

@@ -27,7 +27,6 @@ export const CustomReceiptContent = (): React.ReactElement => {
     return (
       <StudioProperty.Button
         onClick={openCustomReceiptFields}
-        size='small'
         property={t('process_editor.configuration_panel_custom_receipt_create_your_own_button')}
         className={classes.createButton}
       />

frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.module.css

@@ -3,6 +3,5 @@
   flex-direction: column;
   background-color: var(--fds-semantic-surface-neutral-default);
   gap: var(--fds-spacing-2);
-  padding-bottom: var(--fds-spacing-2);
   align-items: flex-start;
 }

frontend/packages/ux-editor/src/components/config/FormComponentConfig.module.css

@@ -4,7 +4,6 @@
 
 .button {
   margin: var(--fds-spacing-1);
-  align-items: center;
   padding-left: 0;
 }
 

frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.module.css

@@ -1,14 +1,3 @@
-.selectedOption {
-  align-items: center;
-  display: flex;
-  gap: var(--fds-spacing-1);
-}
-
 .error {
   background-color: var(--fds-semantic-surface-danger-subtle);
 }
-
-.currentLinkedDataModel {
-  text-overflow: ellipsis;
-  overflow: hidden;
-}

frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.test.tsx

@@ -6,14 +6,16 @@ import { screen, waitForElementToBeRemoved, within } from '@testing-library/reac
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import type { QueryClient } from '@tanstack/react-query';
 import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
+import { QueryKey } from 'app-shared/types/QueryKey';
+import { app, org } from '@studio/testing/testids';
 import type { ServicesContextProps } from 'app-shared/contexts/ServicesContext';
 
 const label = 'label';
 const dataModelField = 'field';
 const dataModel = 'model';
 const bindingKey = 'bindingKey';
 
-const defaultDefinedBinding: DefinedBindingProps = {
+const defaultDefinedBindingProps: DefinedBindingProps = {
   label,
   onClick: jest.fn(),
   internalBindingFormat: {
@@ -25,19 +27,19 @@ const defaultDefinedBinding: DefinedBindingProps = {
 };
 
 type RenderDefinedBinding = {
-  props?: DefinedBindingProps;
+  props?: Partial<DefinedBindingProps>;
   queryClient?: QueryClient;
   queries?: Partial<ServicesContextProps>;
 };
 
 const renderDefinedBinding = ({
-  props = defaultDefinedBinding,
+  props,
   queryClient = createQueryClientMock(),
   queries,
-}: RenderDefinedBinding) => {
+}: RenderDefinedBinding = {}) => {
   return {
-    ...renderWithProviders(<DefinedBinding {...props} />, {
-      queries: { ...queries },
+    ...renderWithProviders(<DefinedBinding {...defaultDefinedBindingProps} {...props} />, {
+      queries,
       queryClient,
     }),
   };
@@ -49,7 +51,7 @@ describe('DefinedBinding', () => {
   });
 
   it('should render loading spinner', async () => {
-    renderDefinedBinding({});
+    renderDefinedBinding();
     const loadingSpinnerTitle = textMock('ux_editor.modal_properties_loading');
 
     const loadingSpinner = screen.getByTitle(loadingSpinnerTitle);
@@ -59,7 +61,7 @@ describe('DefinedBinding', () => {
   });
 
   it('should render edit button with the binding selected', async () => {
-    renderDefinedBinding({});
+    renderDefinedBinding();
 
     await waitForElementToBeRemoved(() =>
       screen.queryByTitle(textMock('ux_editor.modal_properties_loading')),
@@ -77,7 +79,6 @@ describe('DefinedBinding', () => {
   it('should render edit button with the binding selected even with no data model selected', async () => {
     renderDefinedBinding({
       props: {
-        ...defaultDefinedBinding,
         internalBindingFormat: {
           field: dataModelField,
           dataType: '',
@@ -97,4 +98,48 @@ describe('DefinedBinding', () => {
     const editButtonText = within(editButton).getByText(dataModelField);
     expect(editButtonText).toBeInTheDocument();
   });
+
+  it('should render with error css class when selected data model does not exist', async () => {
+    renderWithDataModelAndMetadata('non-existent-model', dataModelField);
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTitle(textMock('ux_editor.modal_properties_loading')),
+    );
+    const editButton = screen.getByRole('button', {
+      name: textMock('right_menu.data_model_bindings_edit', { binding: label }),
+    });
+    expect(editButton).toHaveClass('error');
+  });
+
+  it('should render with error css class when selected data model field does not exist in model', async () => {
+    renderWithDataModelAndMetadata(dataModel, 'non-existent-field');
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTitle(textMock('ux_editor.modal_properties_loading')),
+    );
+    const editButton = screen.getByRole('button', {
+      name: textMock('right_menu.data_model_bindings_edit', { binding: label }),
+    });
+    expect(editButton).toHaveClass('error');
+  });
+
+  it('should render without error css class when selected data model and field is valid', async () => {
+    renderWithDataModelAndMetadata(dataModel, dataModelField);
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTitle(textMock('ux_editor.modal_properties_loading')),
+    );
+    const editButton = screen.getByRole('button', {
+      name: textMock('right_menu.data_model_bindings_edit', { binding: label }),
+    });
+    expect(editButton).not.toHaveClass('error');
+  });
 });
+
+const renderWithDataModelAndMetadata = (modelName: string, fieldName: string) => {
+  const queryClient = createQueryClientMock();
+  queryClient.setQueryData([QueryKey.AppMetadataModelIds, org, app, false], [modelName]);
+  const getDataModelMetadata = jest
+    .fn()
+    .mockImplementation(() =>
+      Promise.resolve({ elements: { [fieldName]: { dataBindingName: fieldName, maxOccurs: 0 } } }),
+    );
+  renderDefinedBinding({ queries: { getDataModelMetadata }, queryClient });
+};

frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.tsx

@@ -43,23 +43,17 @@ export const DefinedBinding = ({
 
   const dataModelFields = getDataModelFields({ componentType, bindingKey, dataModelMetadata });
   const isFieldValid = validateSelectedDataField(currentDataModelField, dataModelFields);
-
   const isBindingError = !isFieldValid || !isDataModelValid;
 
-  const value = (
-    <span className={classes.selectedOption}>
-      <LinkIcon /> <span className={classes.currentLinkedDataModel}>{currentDataModelField}</span>
-    </span>
-  );
-
   return (
     <StudioProperty.Button
-      className={`${isBindingError ? classes.error : ''}`}
+      className={isBindingError ? classes.error : ''}
       aria-label={title}
       onClick={onClick}
       property={label}
       title={title}
-      value={value}
+      icon={<LinkIcon />}
+      value={currentDataModelField}
     />
   );
 };

frontend/packages/ux-editor/src/components/config/editModal/EditTextResourceBindings/EditTextResourceBindings.module.css

@@ -1,3 +1,4 @@
 .texts {
-  margin-bottom: var(--fds-spacing-7);
+  margin-bottom: var(--fds-spacing-3);
+  gap: 0;
 }