From 957851e97fd9bb6dd2857d7a4cda98d21f05401e Mon Sep 17 00:00:00 2001
From: andreastanderen <andreastanderen@gmail.com>
Date: Wed, 15 Jan 2025 16:13:59 +0100
Subject: [PATCH 1/7] fix: place icon for StudioProperty.Button vertically
 parallel with label AND value

---
 .../StudioPropertyButton.module.css                  |  4 ++--
 .../DefinedBinding/DefinedBinding.module.css         | 11 ++---------
 .../DefinedBinding/DefinedBinding.tsx                | 12 +++---------
 3 files changed, 7 insertions(+), 20 deletions(-)

diff --git a/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.module.css b/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.module.css
index 8932f2d1402..3cdd0db2070 100644
--- a/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.module.css
+++ b/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.module.css
@@ -1,7 +1,7 @@
 .propertyButton {
   border-radius: 0;
-  display: flex;
-  justify-content: flex-start;
+  display: grid;
+  grid-template-columns: 1fr auto;
   margin: calc(-1 * var(--studio-property-button-vertical-spacing)) 0;
   overflow: hidden;
   padding: var(--studio-property-button-vertical-spacing) var(--fds-spacing-5);
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.module.css b/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.module.css
index 8d5a9fd2850..20f0d47db0f 100644
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.module.css
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.module.css
@@ -1,14 +1,7 @@
-.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;
+.linkIcon {
+  color: var(--fds-semantic-text-neutral-default);
 }
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.tsx
index cbc0f375037..a1beaad1e6b 100644
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.tsx
+++ b/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 className={classes.linkIcon} />}
+      value={currentDataModelField}
     />
   );
 };

From 85e1118fe77e803fab62e38243ef8adca657f8b5 Mon Sep 17 00:00:00 2001
From: andreastanderen <andreastanderen@gmail.com>
Date: Thu, 16 Jan 2025 09:29:56 +0100
Subject: [PATCH 2/7] update all usages of StudioProperty.Button to have icon
 vertially aligned with label and value

---
 .../StudioPropertyButton.module.css           |  4 ++
 .../StudioPropertyButton.tsx                  |  1 +
 .../ConfigContent/EditActions/EditActions.tsx |  1 -
 .../EditDataTypes/EditDataTypes.module.css    |  5 --
 .../EditDataTypes/EditDataTypes.tsx           | 11 +---
 .../EditUniqueFromSignaturesInDataTypes.tsx   |  1 -
 .../CustomReceiptContent.tsx                  |  1 -
 .../config/FormComponentConfig.module.css     |  1 -
 .../DefinedBinding/DefinedBinding.module.css  |  4 --
 .../DefinedBinding/DefinedBinding.test.tsx    | 63 ++++++++++++++++---
 .../DefinedBinding/DefinedBinding.tsx         |  2 +-
 11 files changed, 62 insertions(+), 32 deletions(-)
 delete mode 100644 frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/EditDataTypes.module.css

diff --git a/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.module.css b/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.module.css
index 3cdd0db2070..92ee81fce08 100644
--- a/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.module.css
+++ b/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.module.css
@@ -58,3 +58,7 @@
 .propertyButton.withoutNegativeMargin {
   margin: 0;
 }
+
+.definedValue {
+  color: var(--fds-semantic-text-neutral-default);
+}
diff --git a/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.tsx b/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.tsx
index 24062ddeae8..34f05d379e1 100644
--- a/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.tsx
+++ b/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,
     );
 
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditActions/EditActions.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditActions/EditActions.tsx
index 27cfd2ba6e4..70add0d3ddf 100644
--- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditActions/EditActions.tsx
+++ b/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'
       />
     </>
   );
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/EditDataTypes.module.css b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/EditDataTypes.module.css
deleted file mode 100644
index 5c04a2a3501..00000000000
--- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/EditDataTypes.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.definedValue {
-  align-items: center;
-  display: flex;
-  gap: var(--fds-spacing-1);
-}
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/EditDataTypes.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/EditDataTypes.tsx
index 4a93d1a569b..8a20f209a64 100644
--- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/EditDataTypes.tsx
+++ b/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}
         />
       )}
     </>
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditUniqueFromSignaturesInDataTypes/EditUniqueFromSignaturesInDataTypes.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditUniqueFromSignaturesInDataTypes/EditUniqueFromSignaturesInDataTypes.tsx
index c95a559cb31..4675a4ff248 100644
--- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditUniqueFromSignaturesInDataTypes/EditUniqueFromSignaturesInDataTypes.tsx
+++ b/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 ? (
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigEndEvent/CustomReceiptContent/CustomReceiptContent.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigEndEvent/CustomReceiptContent/CustomReceiptContent.tsx
index 4c4173d34c7..032ce00656e 100644
--- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigEndEvent/CustomReceiptContent/CustomReceiptContent.tsx
+++ b/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}
       />
diff --git a/frontend/packages/ux-editor/src/components/config/FormComponentConfig.module.css b/frontend/packages/ux-editor/src/components/config/FormComponentConfig.module.css
index 2cd7aa5f8af..f4fa61514f5 100644
--- a/frontend/packages/ux-editor/src/components/config/FormComponentConfig.module.css
+++ b/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;
 }
 
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.module.css b/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.module.css
index 20f0d47db0f..8b90ffe1e8f 100644
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.module.css
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.module.css
@@ -1,7 +1,3 @@
 .error {
   background-color: var(--fds-semantic-surface-danger-subtle);
 }
-
-.linkIcon {
-  color: var(--fds-semantic-text-neutral-default);
-}
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.test.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.test.tsx
index da40a40c97d..5b613ec6bd7 100644
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.test.tsx
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.test.tsx
@@ -6,6 +6,8 @@ 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';
@@ -13,7 +15,7 @@ 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 });
+};
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.tsx
index a1beaad1e6b..5dc048992d4 100644
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.tsx
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.tsx
@@ -52,7 +52,7 @@ export const DefinedBinding = ({
       onClick={onClick}
       property={label}
       title={title}
-      icon={<LinkIcon className={classes.linkIcon} />}
+      icon={<LinkIcon />}
       value={currentDataModelField}
     />
   );

From 2d8e46c65278bdac03babea28f553ecf001a2391 Mon Sep 17 00:00:00 2001
From: andreastanderen <andreastanderen@gmail.com>
Date: Fri, 17 Jan 2025 11:00:14 +0100
Subject: [PATCH 3/7] fix css

---
 .../StudioPropertyButton/StudioPropertyButton.module.css      | 4 ++--
 .../Properties/PropertiesHeader/PropertiesHeader.module.css   | 1 -
 .../EditTextResourceBindings.module.css                       | 3 ++-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.module.css b/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.module.css
index 92ee81fce08..9936dfc54ef 100644
--- a/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.module.css
+++ b/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.module.css
@@ -2,9 +2,9 @@
   border-radius: 0;
   display: grid;
   grid-template-columns: 1fr auto;
-  margin: calc(-1 * var(--studio-property-button-vertical-spacing)) 0;
+  justify-content: flex-start;
   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 {
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.module.css
index 0c958143711..06c8f1a0bd0 100644
--- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.module.css
+++ b/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;
 }
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditTextResourceBindings/EditTextResourceBindings.module.css b/frontend/packages/ux-editor/src/components/config/editModal/EditTextResourceBindings/EditTextResourceBindings.module.css
index 329b459f623..a3583640f75 100644
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditTextResourceBindings/EditTextResourceBindings.module.css
+++ b/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;
 }

From 533540fc7dc8d788681089ab07679a9d176e05bd Mon Sep 17 00:00:00 2001
From: andreastanderen <andreastanderen@gmail.com>
Date: Fri, 17 Jan 2025 15:18:27 +0100
Subject: [PATCH 4/7] place icon next to label

---
 .../StudioPropertyButton.module.css           | 12 +++--
 .../StudioPropertyButton.tsx                  | 10 ++--
 .../Properties/DataModelBindings.module.css   | 16 +------
 .../Properties/DataModelBindings.tsx          | 46 ++++++++-----------
 .../DefinedLayoutSet.module.css               |  4 --
 .../DefinedLayoutSet/DefinedLayoutSet.tsx     |  3 --
 .../EditLayoutSetForSubform.module.css        |  1 +
 7 files changed, 35 insertions(+), 57 deletions(-)
 delete mode 100644 frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/DefinedLayoutSet/DefinedLayoutSet.module.css

diff --git a/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.module.css b/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.module.css
index 9936dfc54ef..623116d1db4 100644
--- a/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.module.css
+++ b/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.module.css
@@ -4,7 +4,7 @@
   grid-template-columns: 1fr auto;
   justify-content: flex-start;
   overflow: hidden;
-  padding: var(--studio-property-button-vertical-spacing) var(--fds-spacing-3);
+  padding: var(--studio-property-button-vertical-spacing) var(--fds-spacing-5);
 }
 
 .propertyButton.withValue .content {
@@ -12,6 +12,12 @@
   text-align: left;
 }
 
+.propertyButton .property {
+  display: flex;
+  align-items: center;
+  gap: var(--fds-spacing-1);
+}
+
 .propertyButton.withValue .property {
   font-weight: 500;
 }
@@ -58,7 +64,3 @@
 .propertyButton.withoutNegativeMargin {
   margin: 0;
 }
-
-.definedValue {
-  color: var(--fds-semantic-text-neutral-default);
-}
diff --git a/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.tsx b/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.tsx
index 34f05d379e1..b3741375d1f 100644
--- a/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.tsx
+++ b/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.tsx
@@ -11,8 +11,9 @@ export type StudioPropertyButtonProps = {
   value?: ReactNode;
   compact?: boolean;
   readOnly?: boolean;
+  icon?: ReactNode;
   withoutNegativeMargin?: boolean;
-} & Omit<StudioButtonProps, 'children' | 'value'>;
+} & Omit<StudioButtonProps, 'children' | 'value' | 'icon'>;
 
 const StudioPropertyButton = forwardRef<HTMLButtonElement, StudioPropertyButtonProps>(
   (
@@ -38,7 +39,6 @@ const StudioPropertyButton = forwardRef<HTMLButtonElement, StudioPropertyButtonP
       compact && classes.compact,
       readOnly && classes.readOnly,
       withoutNegativeMargin && classes.withoutNegativeMargin,
-      givenIcon && hasValue && classes.definedValue,
       givenClass,
     );
 
@@ -52,14 +52,16 @@ const StudioPropertyButton = forwardRef<HTMLButtonElement, StudioPropertyButtonP
         aria-readonly={readOnly ? true : null}
         className={className}
         fullWidth
-        icon={icon}
         ref={ref}
         title={property}
         variant='tertiary'
         {...rest}
       >
         <span className={classes.content}>
-          <span className={classes.property}>{property}</span>
+          <span className={classes.property}>
+            {icon}
+            {property}
+          </span>
           <span className={classes.value}>{value}</span>
         </span>
         {readOnly ? (
diff --git a/frontend/packages/ux-editor/src/components/Properties/DataModelBindings.module.css b/frontend/packages/ux-editor/src/components/Properties/DataModelBindings.module.css
index 82b0434e9bf..3b4635042fe 100644
--- a/frontend/packages/ux-editor/src/components/Properties/DataModelBindings.module.css
+++ b/frontend/packages/ux-editor/src/components/Properties/DataModelBindings.module.css
@@ -1,25 +1,11 @@
 .container {
-  display: grid;
-  gap: var(--studio-property-vertical-gap);
+  gap: 0;
 }
 
 .switch {
   padding-left: var(--fds-spacing-5);
 }
 
-.dataModelBindings {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-
 .alert {
   margin: 0 var(--fds-spacing-5);
 }
-
-.wrapper {
-  padding-top: var(--fds-spacing-2);
-  padding-bottom: var(--fds-spacing-2);
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
diff --git a/frontend/packages/ux-editor/src/components/Properties/DataModelBindings.tsx b/frontend/packages/ux-editor/src/components/Properties/DataModelBindings.tsx
index 10ef68cbbe0..e8d18662f54 100644
--- a/frontend/packages/ux-editor/src/components/Properties/DataModelBindings.tsx
+++ b/frontend/packages/ux-editor/src/components/Properties/DataModelBindings.tsx
@@ -86,32 +86,26 @@ export const DataModelBindings = (): React.JSX.Element => {
             {t('ux_editor.modal_properties_data_model_link_multiple_attachments')}
           </Switch>
         )}
-        <div className={classes.wrapper}>
-          <StudioProperty.Group>
-            {Object.keys(dataModelBindingsProperties).map((propertyKey: string) => {
-              return (
-                <div
-                  className={classes.dataModelBindings}
-                  key={`${formItem.id}-data-model-${propertyKey}`}
-                >
-                  <EditDataModelBinding
-                    component={formItem}
-                    handleComponentChange={async (updatedComponent, mutateOptions) => {
-                      handleUpdate(updatedComponent);
-                      debounceSave(formItemId, updatedComponent, mutateOptions);
-                    }}
-                    editFormId={formItemId}
-                    helpText={dataModelBindingsProperties[propertyKey]?.description}
-                    renderOptions={{
-                      key: propertyKey,
-                      label: propertyKey !== 'simpleBinding' ? propertyKey : undefined,
-                    }}
-                  />
-                </div>
-              );
-            })}
-          </StudioProperty.Group>
-        </div>
+        <StudioProperty.Group className={classes.container}>
+          {Object.keys(dataModelBindingsProperties).map((propertyKey: string) => {
+            return (
+              <EditDataModelBinding
+                key={`${formItem.id}-data-model-${propertyKey}`}
+                component={formItem}
+                handleComponentChange={async (updatedComponent, mutateOptions) => {
+                  handleUpdate(updatedComponent);
+                  debounceSave(formItemId, updatedComponent, mutateOptions);
+                }}
+                editFormId={formItemId}
+                helpText={dataModelBindingsProperties[propertyKey]?.description}
+                renderOptions={{
+                  key: propertyKey,
+                  label: propertyKey !== 'simpleBinding' ? propertyKey : undefined,
+                }}
+              />
+            );
+          })}
+        </StudioProperty.Group>
       </div>
     )
   );
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/DefinedLayoutSet/DefinedLayoutSet.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/DefinedLayoutSet/DefinedLayoutSet.module.css
deleted file mode 100644
index 2647e5af726..00000000000
--- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/DefinedLayoutSet/DefinedLayoutSet.module.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.selectedLayoutSet {
-  display: block;
-  padding: var(--fds-spacing-3);
-}
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/DefinedLayoutSet/DefinedLayoutSet.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/DefinedLayoutSet/DefinedLayoutSet.tsx
index b5a49eb1272..8368827b671 100644
--- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/DefinedLayoutSet/DefinedLayoutSet.tsx
+++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/DefinedLayoutSet/DefinedLayoutSet.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { ClipboardIcon } from '@studio/icons';
 import { StudioProperty } from '@studio/components';
 import { useTranslation } from 'react-i18next';
-import classes from './DefinedLayoutSet.module.css';
 
 type DefinedLayoutSetProps = {
   existingLayoutSetForSubform: string;
@@ -13,8 +12,6 @@ export const DefinedLayoutSet = ({ existingLayoutSetForSubform }: DefinedLayoutS
 
   return (
     <StudioProperty.Button
-      className={classes.selectedLayoutSet}
-      color='second'
       icon={<ClipboardIcon />}
       aria-label={t('ux_editor.component_properties.subform.selected_layout_set_title', {
         subform: existingLayoutSetForSubform,
diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.module.css
index 1e46d5356e6..e32a8f4215c 100644
--- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.module.css
+++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditLayoutSetForSubform/EditLayoutSetForSubform.module.css
@@ -1,3 +1,4 @@
 .navigateSubformButton {
   margin-left: var(--fds-spacing-3);
+  margin-bottom: var(--fds-spacing-3);
 }

From 9291cd05b08678de10f4a04d2476a9f858afa8c2 Mon Sep 17 00:00:00 2001
From: andreastanderen <andreastanderen@gmail.com>
Date: Fri, 17 Jan 2025 15:47:52 +0100
Subject: [PATCH 5/7] remove icon next to multiple values

---
 .../EditDataTypesToSign.module.css                   |  5 -----
 .../EditDataTypesToSign/EditDataTypesToSign.tsx      | 12 ++----------
 .../EditUniqueFromSignaturesInDataTypes.module.css   |  5 -----
 .../EditUniqueFromSignaturesInDataTypes.tsx          | 12 ++----------
 4 files changed, 4 insertions(+), 30 deletions(-)
 delete mode 100644 frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypesToSign/EditDataTypesToSign.module.css
 delete mode 100644 frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditUniqueFromSignaturesInDataTypes/EditUniqueFromSignaturesInDataTypes.module.css

diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypesToSign/EditDataTypesToSign.module.css b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypesToSign/EditDataTypesToSign.module.css
deleted file mode 100644
index 15a61bbfa90..00000000000
--- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypesToSign/EditDataTypesToSign.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.dataType {
-  align-items: center;
-  display: flex;
-  gap: var(--fds-spacing-1);
-}
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypesToSign/EditDataTypesToSign.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypesToSign/EditDataTypesToSign.tsx
index 5dce58d8741..a5f0b506391 100644
--- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypesToSign/EditDataTypesToSign.tsx
+++ b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypesToSign/EditDataTypesToSign.tsx
@@ -3,7 +3,6 @@ import { StudioProperty } from '@studio/components';
 import { useTranslation } from 'react-i18next';
 import { LinkIcon } from '@studio/icons';
 import { SelectDataTypesToSign } from './SelectDataTypesToSign';
-import classes from './EditDataTypesToSign.module.css';
 import { useGetDataTypesToSign } from '../../../../hooks/dataTypesToSign/useGetDataTypesToSign';
 
 export const EditDataTypesToSign = () => {
@@ -21,15 +20,8 @@ export const EditDataTypesToSign = () => {
       onClick={() => setDataTypesToSignSelectVisible(true)}
       property={t('process_editor.configuration_panel_set_data_types_to_sign')}
       title={t('process_editor.configuration_panel_set_data_types_to_sign')}
-      value={
-        <>
-          {selectedDataTypes?.map((dataType) => (
-            <div key={dataType} className={classes.dataType}>
-              <LinkIcon /> {dataType}
-            </div>
-          ))}
-        </>
-      }
+      icon={<LinkIcon />}
+      value={selectedDataTypes?.map((dataType: string) => <div key={dataType}>{dataType}</div>)}
     />
   );
 };
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditUniqueFromSignaturesInDataTypes/EditUniqueFromSignaturesInDataTypes.module.css b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditUniqueFromSignaturesInDataTypes/EditUniqueFromSignaturesInDataTypes.module.css
deleted file mode 100644
index 15a61bbfa90..00000000000
--- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditUniqueFromSignaturesInDataTypes/EditUniqueFromSignaturesInDataTypes.module.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.dataType {
-  align-items: center;
-  display: flex;
-  gap: var(--fds-spacing-1);
-}
diff --git a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditUniqueFromSignaturesInDataTypes/EditUniqueFromSignaturesInDataTypes.tsx b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditUniqueFromSignaturesInDataTypes/EditUniqueFromSignaturesInDataTypes.tsx
index 4675a4ff248..655f073ad00 100644
--- a/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditUniqueFromSignaturesInDataTypes/EditUniqueFromSignaturesInDataTypes.tsx
+++ b/frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/EditUniqueFromSignaturesInDataTypes/EditUniqueFromSignaturesInDataTypes.tsx
@@ -4,7 +4,6 @@ import { StudioProperty } from '@studio/components';
 import { useTranslation } from 'react-i18next';
 import { PersonPencilIcon } from '@studio/icons';
 import { SelectUniqueFromSignaturesInDataTypes } from './SelectUniqueFromSignaturesInDataTypes';
-import classes from './EditUniqueFromSignaturesInDataTypes.module.css';
 import { getSelectedDataTypes } from './UniqueFromSignaturesInDataTypesUtils';
 import { StudioModeler } from '../../../../utils/bpmnModeler/StudioModeler';
 
@@ -62,15 +61,8 @@ export const EditUniqueFromSignaturesInDataTypes = () => {
             'process_editor.configuration_panel_set_unique_from_signatures_in_data_types',
           )}
           title={t('process_editor.configuration_panel_set_unique_from_signatures_in_data_types')}
-          value={
-            <>
-              {signingTasks?.map((dataType) => (
-                <div key={dataType.id} className={classes.dataType}>
-                  <PersonPencilIcon /> {dataType.name}
-                </div>
-              ))}
-            </>
-          }
+          icon={<PersonPencilIcon />}
+          value={signingTasks?.map((dataType) => <div key={dataType.id}>{dataType.name}</div>)}
         />
       )}
     </>

From e47112fa381ef9b0f03155536312dff9ab14ae3b Mon Sep 17 00:00:00 2001
From: andreastanderen <andreastanderen@gmail.com>
Date: Mon, 20 Jan 2025 13:05:46 +0100
Subject: [PATCH 6/7] remove redundant prop-definition

---
 .../StudioPropertyButton/StudioPropertyButton.tsx              | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.tsx b/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.tsx
index b3741375d1f..37c5f0b2583 100644
--- a/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.tsx
+++ b/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.tsx
@@ -11,9 +11,8 @@ export type StudioPropertyButtonProps = {
   value?: ReactNode;
   compact?: boolean;
   readOnly?: boolean;
-  icon?: ReactNode;
   withoutNegativeMargin?: boolean;
-} & Omit<StudioButtonProps, 'children' | 'value' | 'icon'>;
+} & Omit<StudioButtonProps, 'children' | 'value'>;
 
 const StudioPropertyButton = forwardRef<HTMLButtonElement, StudioPropertyButtonProps>(
   (

From 84b2760eadf8d6aad6dbb28508a4617ff8a766a7 Mon Sep 17 00:00:00 2001
From: andreastanderen <andreastanderen@gmail.com>
Date: Mon, 20 Jan 2025 14:04:30 +0100
Subject: [PATCH 7/7] add margin to StudioProperty.Button again

---
 .../StudioPropertyButton/StudioPropertyButton.module.css    | 1 +
 .../src/components/Properties/DataModelBindings.module.css  | 4 ----
 .../src/components/Properties/DataModelBindings.tsx         | 6 +++---
 .../EditTextResourceBindings.module.css                     | 1 -
 4 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.module.css b/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.module.css
index 623116d1db4..2fe288f90e1 100644
--- a/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.module.css
+++ b/frontend/libs/studio-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.module.css
@@ -3,6 +3,7 @@
   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);
 }
diff --git a/frontend/packages/ux-editor/src/components/Properties/DataModelBindings.module.css b/frontend/packages/ux-editor/src/components/Properties/DataModelBindings.module.css
index 3b4635042fe..93dd6764ae3 100644
--- a/frontend/packages/ux-editor/src/components/Properties/DataModelBindings.module.css
+++ b/frontend/packages/ux-editor/src/components/Properties/DataModelBindings.module.css
@@ -1,7 +1,3 @@
-.container {
-  gap: 0;
-}
-
 .switch {
   padding-left: var(--fds-spacing-5);
 }
diff --git a/frontend/packages/ux-editor/src/components/Properties/DataModelBindings.tsx b/frontend/packages/ux-editor/src/components/Properties/DataModelBindings.tsx
index 28dde114a2e..f6212906d67 100644
--- a/frontend/packages/ux-editor/src/components/Properties/DataModelBindings.tsx
+++ b/frontend/packages/ux-editor/src/components/Properties/DataModelBindings.tsx
@@ -68,7 +68,7 @@ export const DataModelBindings = (): React.JSX.Element => {
 
   return (
     dataModelBindingsProperties && (
-      <div className={classes.container}>
+      <>
         {(formItem.type === ComponentType.FileUploadWithTag ||
           formItem.type === ComponentType.FileUpload) &&
           isItemChildOfContainer(layout, formItem.id, ComponentType.RepeatingGroup) && (
@@ -86,7 +86,7 @@ export const DataModelBindings = (): React.JSX.Element => {
             {t('ux_editor.modal_properties_data_model_link_multiple_attachments')}
           </Switch>
         )}
-        <StudioProperty.Group className={classes.container}>
+        <StudioProperty.Group>
           {Object.keys(dataModelBindingsProperties).map((propertyKey: string) => {
             return (
               <EditDataModelBinding
@@ -105,7 +105,7 @@ export const DataModelBindings = (): React.JSX.Element => {
             );
           })}
         </StudioProperty.Group>
-      </div>
+      </>
     )
   );
 };
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditTextResourceBindings/EditTextResourceBindings.module.css b/frontend/packages/ux-editor/src/components/config/editModal/EditTextResourceBindings/EditTextResourceBindings.module.css
index a3583640f75..7a1932d05fa 100644
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditTextResourceBindings/EditTextResourceBindings.module.css
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditTextResourceBindings/EditTextResourceBindings.module.css
@@ -1,4 +1,3 @@
 .texts {
   margin-bottom: var(--fds-spacing-3);
-  gap: 0;
 }