From d7990accc7e76668d77b0c849a04f7e1b94db602 Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Fri, 19 Jul 2024 15:01:38 +0200 Subject: [PATCH 1/2] fixed overfloee in datamodellknytninger accordion --- .../Properties/DataModelBindings.module.css | 5 ++ .../Properties/DataModelBindings.tsx | 50 ++++++++++--------- .../DefinedBinding/DefinedBinding.module.css | 5 ++ .../DefinedBinding/DefinedBinding.tsx | 2 +- .../SelectDataFieldBinding.module.css | 6 +++ .../EditBinding/SelectDataFieldBinding.tsx | 2 + 6 files changed, 45 insertions(+), 25 deletions(-) create mode 100644 frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditBinding/SelectDataFieldBinding.module.css 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 1b792d47539..8b9f84f301a 100644 --- a/frontend/packages/ux-editor/src/components/Properties/DataModelBindings.module.css +++ b/frontend/packages/ux-editor/src/components/Properties/DataModelBindings.module.css @@ -16,3 +16,8 @@ .alert { margin: 0 var(--fds-spacing-5); } + +.wrapper { + 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 cdc5a1f918e..10ef68cbbe0 100644 --- a/frontend/packages/ux-editor/src/components/Properties/DataModelBindings.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/DataModelBindings.tsx @@ -86,30 +86,32 @@ export const DataModelBindings = (): React.JSX.Element => { {t('ux_editor.modal_properties_data_model_link_multiple_attachments')} )} - - {Object.keys(dataModelBindingsProperties).map((propertyKey: string) => { - return ( -
- { - handleUpdate(updatedComponent); - debounceSave(formItemId, updatedComponent, mutateOptions); - }} - editFormId={formItemId} - helpText={dataModelBindingsProperties[propertyKey]?.description} - renderOptions={{ - key: propertyKey, - label: propertyKey !== 'simpleBinding' ? propertyKey : undefined, - }} - /> -
- ); - })} - +
+ + {Object.keys(dataModelBindingsProperties).map((propertyKey: string) => { + return ( +
+ { + handleUpdate(updatedComponent); + debounceSave(formItemId, updatedComponent, mutateOptions); + }} + editFormId={formItemId} + helpText={dataModelBindingsProperties[propertyKey]?.description} + renderOptions={{ + key: propertyKey, + label: propertyKey !== 'simpleBinding' ? propertyKey : undefined, + }} + /> +
+ ); + })} + +
) ); 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 075f8e07928..8d5a9fd2850 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 @@ -7,3 +7,8 @@ .error { background-color: var(--fds-semantic-surface-danger-subtle); } + +.currentLinkedDataModel { + text-overflow: ellipsis; + overflow: hidden; +} 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 9be5f25a0e0..cbc0f375037 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 @@ -48,7 +48,7 @@ export const DefinedBinding = ({ const value = ( - {currentDataModelField} + {currentDataModelField} ); diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditBinding/SelectDataFieldBinding.module.css b/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditBinding/SelectDataFieldBinding.module.css new file mode 100644 index 00000000000..65f56a4403f --- /dev/null +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditBinding/SelectDataFieldBinding.module.css @@ -0,0 +1,6 @@ +.selectedDatafieldBinding { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + width: 100%; +} diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditBinding/SelectDataFieldBinding.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditBinding/SelectDataFieldBinding.tsx index 46781f08d38..364b9e45e69 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditBinding/SelectDataFieldBinding.tsx +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditBinding/SelectDataFieldBinding.tsx @@ -9,6 +9,7 @@ import { FormField } from 'app-shared/components/FormField'; import { StudioNativeSelect } from '@studio/components'; import { useValidDataModels } from '@altinn/ux-editor/hooks/useValidDataModels'; import type { ComponentType } from 'app-shared/types/ComponentType'; +import classes from './SelectDataFieldBinding.module.css'; type SelectDataFieldProps = { internalBindingFormat: InternalBindingFormat; @@ -60,6 +61,7 @@ export const SelectDataFieldBinding = ({ label={t('ux_editor.modal_properties_data_model_field_binding')} renderField={({ fieldProps }) => ( fieldProps.onChange(e.target.value)} error={isBindingError && t('ux_editor.modal_properties_data_model_field_update')} From 4b8e64532da6d0afa71ad6977e16f985e051e9e1 Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Mon, 22 Jul 2024 14:05:28 +0200 Subject: [PATCH 2/2] fixes overflow in datamodel bilnding in featureFlag --- .../EditBinding/SelectDataModelBinding.module.css | 4 ++++ .../EditBinding/SelectDataModelBinding.tsx | 1 + 2 files changed, 5 insertions(+) diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditBinding/SelectDataModelBinding.module.css b/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditBinding/SelectDataModelBinding.module.css index 86c9bd1b36d..dfbd2742a1b 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditBinding/SelectDataModelBinding.module.css +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditBinding/SelectDataModelBinding.module.css @@ -6,3 +6,7 @@ .displayTileContainer > div { display: block; } + +.selectDataModel { + width: 100%; +} diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditBinding/SelectDataModelBinding.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditBinding/SelectDataModelBinding.tsx index d314f74b42c..f1181df913e 100644 --- a/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditBinding/SelectDataModelBinding.tsx +++ b/frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditBinding/SelectDataModelBinding.tsx @@ -39,6 +39,7 @@ export const SelectDataModelBinding = ({ label={t('ux_editor.modal_properties_data_model_binding')} renderField={({ fieldProps }) => ( fieldProps.onChange(e.target.value)} size='small'