update all usages of StudioProperty.Button to have icon vertially ali…

…gned with label and value
Altinn · Jan 16, 2025 · be3ffd9 · be3ffd9
1 parent 957851e
commit be3ffd9
Show file tree

Hide file tree

Showing 10 changed files with 8 additions and 23 deletions.
diff --git a/...onents/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.module.css b/...onents/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/...io-components/src/components/StudioProperty/StudioPropertyButton/StudioPropertyButton.tsx b/...io-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/...kages/process-editor/src/components/ConfigPanel/ConfigContent/EditActions/EditActions.tsx b/...kages/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/...ss-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/EditDataTypes.module.css b/...ss-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/EditDataTypes.module.css
diff --git a/...s/process-editor/src/components/ConfigPanel/ConfigContent/EditDataTypes/EditDataTypes.tsx b/...s/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/...ConfigContent/EditUniqueFromSignaturesInDataTypes/EditUniqueFromSignaturesInDataTypes.tsx b/...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/...r/src/components/ConfigPanel/ConfigEndEvent/CustomReceiptContent/CustomReceiptContent.tsx b/...r/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
@@ -4,7 +4,6 @@
 
 .button {
   margin: var(--fds-spacing-1);
-  align-items: center;
   padding-left: 0;
 }
 

diff --git a/...components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.module.css b/...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/...or/src/components/config/editModal/EditDataModelBinding/DefinedBinding/DefinedBinding.tsx b/...or/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}
     />
   );