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

---
 .../StudioPropertyButton.module.css                   |  4 ++++
 .../StudioPropertyButton/StudioPropertyButton.tsx     |  1 +
 .../ConfigContent/EditActions/EditActions.tsx         |  1 -
 .../EditDataTypes/EditDataTypes.module.css            |  5 -----
 .../ConfigContent/EditDataTypes/EditDataTypes.tsx     | 11 ++---------
 .../EditUniqueFromSignaturesInDataTypes.tsx           |  1 -
 .../CustomReceiptContent/CustomReceiptContent.tsx     |  1 -
 .../components/config/FormComponentConfig.module.css  |  1 -
 .../DefinedBinding/DefinedBinding.module.css          |  4 ----
 .../DefinedBinding/DefinedBinding.tsx                 |  2 +-
 10 files changed, 8 insertions(+), 23 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.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}
     />
   );