fix: place icon for StudioProperty.Button next to label

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

@@ -1,8 +1,8 @@
 .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);
 }
@@ -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;
 }

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>(
   (
@@ -51,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 ? (

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

@@ -59,7 +59,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/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>)}
     />
   );
 };

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

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/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;
-}

frontend/packages/ux-editor/src/components/Properties/DataModelBindings.tsx

@@ -86,31 +86,25 @@ 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}
-                    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}
+                renderOptions={{
+                  key: propertyKey,
+                  label: propertyKey !== 'simpleBinding' ? propertyKey : undefined,
+                }}
+              />
+            );
+          })}
+        </StudioProperty.Group>
       </div>
     )
   );

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,

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);
 }

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;
-}