From ce4be8b2c6a27137f1dd8bb0e7f23eb45540ad3d Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Sun, 23 Jun 2024 22:05:38 +0200 Subject: [PATCH 01/10] prevented overflow in expression --- .../StudioCodeFragment/StudioCodeFragment.module.css | 8 ++++++-- .../LogicalExpressionEditor.module.css | 4 +--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.module.css b/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.module.css index cb76dfc4e4c..7a6530709d1 100644 --- a/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.module.css +++ b/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.module.css @@ -1,8 +1,12 @@ .code { - background-color: var(--fds-semantic-surface-neutral-subtle); + flex: 1; + background-color: rgb(221, 221, 234); border: 1px solid var(--fds-semantic-border-neutral-subtle); border-radius: var(--fds-border_radius-small); font-family: 'Courier New', monospace; - font-size: 0.8em; + font-size: 0.9em; padding: 0 var(--fds-spacing-1); + overflow: auto; + height: 28px; + overflow-y: hidden; } diff --git a/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/LogicalExpressionEditor.module.css b/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/LogicalExpressionEditor.module.css index d24970d18b7..57bc9a5d125 100644 --- a/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/LogicalExpressionEditor.module.css +++ b/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/LogicalExpressionEditor.module.css @@ -1,7 +1,5 @@ .fieldsetContent { align-items: stretch; - box-sizing: border-box; - display: flex; - flex-direction: column; + display: grid; gap: var(--studio-expression-spacing); } From d9da04bbdf5e6b9e31788ef8135dceaf772bddcc Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Fri, 28 Jun 2024 09:09:53 +0200 Subject: [PATCH 02/10] fixed overfloow for componenet id in config panel --- .../StudioCodeFragment/StudioCodeFragment.module.css | 4 ++-- .../StudioTextfieldToggleView.module.css | 9 +++++++++ .../StudioTextfieldToggleView.tsx | 2 +- .../ExpressionContent/ExpressionContent.module.css | 4 +++- 4 files changed, 15 insertions(+), 4 deletions(-) diff --git a/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.module.css b/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.module.css index 7a6530709d1..59b4d85ccb5 100644 --- a/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.module.css +++ b/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.module.css @@ -4,9 +4,9 @@ border: 1px solid var(--fds-semantic-border-neutral-subtle); border-radius: var(--fds-border_radius-small); font-family: 'Courier New', monospace; - font-size: 0.9em; + font-size: 0.8em; padding: 0 var(--fds-spacing-1); overflow: auto; - height: 28px; + height: 2em; overflow-y: hidden; } diff --git a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.module.css b/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.module.css index 11cc0d5a22d..5f19e379420 100644 --- a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.module.css +++ b/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.module.css @@ -9,6 +9,15 @@ display: flex; align-items: center; color: var(--fds-semantic-text-neutral-default); + width: 100%; +} + +.componentIdInViewMode { + display: flex; + flex-direction: column; + text-overflow: ellipsis; + overflow: auto; + overflow-wrap: break-word; } .editIconWrapper { diff --git a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.tsx b/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.tsx index f81ab718ac9..5930786e2c6 100644 --- a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.tsx +++ b/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.tsx @@ -18,7 +18,7 @@ export const StudioTextfieldToggleView = ({ - {children} +
{children}
 diff --git a/frontend/packages/ux-editor/src/components/config/ExpressionContent/ExpressionContent.module.css b/frontend/packages/ux-editor/src/components/config/ExpressionContent/ExpressionContent.module.css index 8df992e1737..3c4b7e14079 100644 --- a/frontend/packages/ux-editor/src/components/config/ExpressionContent/ExpressionContent.module.css +++ b/frontend/packages/ux-editor/src/components/config/ExpressionContent/ExpressionContent.module.css @@ -4,7 +4,7 @@ border-radius: var(--fds-border_radius-medium); border: 0; box-shadow: var(--fds-shadow-small); - display: grid; + display: contents; gap: var(--studio-expression-spacing); grid-template-columns: [start] 1fr auto [end]; margin: 0; @@ -18,10 +18,12 @@ .legendContent { margin-left: var(--studio-expression-spacing); + overflow-wrap: break-word; } .deleteButton { margin-right: var(--studio-expression-spacing); + width: 100%; } .legendContent, From e51dfeffb740a22f6a10cb9270686a24663acc03 Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Thu, 4 Jul 2024 13:30:25 +0200 Subject: [PATCH 03/10] fixed overflow incomponent id and config panel --- .../StudioCodeFragment.module.css | 5 ++++- .../StudioCodeFragment/StudioCodeFragment.tsx | 15 ++++++++++++--- .../StudioTextfieldToggleView.tsx | 10 ++++++++-- .../ExpressionContent.module.css | 6 +++--- 4 files changed, 27 insertions(+), 9 deletions(-) diff --git a/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.module.css b/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.module.css index 59b4d85ccb5..804d48a3f5c 100644 --- a/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.module.css +++ b/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.module.css @@ -1,11 +1,14 @@ .code { flex: 1; - background-color: rgb(221, 221, 234); + background-color: var(--fds-semantic-surface-neutral-subtle); border: 1px solid var(--fds-semantic-border-neutral-subtle); border-radius: var(--fds-border_radius-small); font-family: 'Courier New', monospace; font-size: 0.8em; padding: 0 var(--fds-spacing-1); +} + +.customDatamodelBindingOverflow { overflow: auto; height: 2em; overflow-y: hidden; diff --git a/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.tsx b/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.tsx index cf80d9e2e58..7a217914fd1 100644 --- a/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.tsx +++ b/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.tsx @@ -3,13 +3,22 @@ import React, { forwardRef } from 'react'; import cn from 'classnames'; import classes from './StudioCodeFragment.module.css'; -export type StudioCodeFragmentProps = HTMLAttributes; +export type StudioCodeFragmentProps = HTMLAttributes & { + customDatamodelBindingOverflowStyles?: boolean; +}; const StudioCodeFragment = forwardRef( - ({ children, className: givenClass, ...rest }, ref) => { + ( + { children, className: givenClass, customDatamodelBindingOverflowStyles = true, ...rest }, + ref, + ) => { const className = cn(classes.code, givenClass); + const customClassName = customDatamodelBindingOverflowStyles + ? cn(className, classes.customDatamodelBindingOverflow) + : className; + return ( - + {children} ); diff --git a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.tsx b/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.tsx index 5930786e2c6..3f420756f91 100644 --- a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.tsx +++ b/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.tsx @@ -4,21 +4,27 @@ import { StudioButton, type StudioButtonProps } from '@studio/components'; import classes from './StudioTextfieldToggleView.module.css'; import cn from 'classnames'; -export type StudioTextfieldToggleViewProps = StudioButtonProps; +export type StudioTextfieldToggleViewProps = StudioButtonProps & { + customComponentIdInViewMode?: boolean; +}; export const StudioTextfieldToggleView = ({ onClick, children, className: givenClass, + customComponentIdInViewMode = true, ...rest }: StudioTextfieldToggleViewProps) => { const className = cn(classes.button, givenClass); + const componentIdInViewModeClass = customComponentIdInViewMode + ? classes.componentIdInViewMode + : ''; return ( -
{children}
+
{children}
 diff --git a/frontend/packages/ux-editor/src/components/config/ExpressionContent/ExpressionContent.module.css b/frontend/packages/ux-editor/src/components/config/ExpressionContent/ExpressionContent.module.css index 3c4b7e14079..2e2dd4ddba0 100644 --- a/frontend/packages/ux-editor/src/components/config/ExpressionContent/ExpressionContent.module.css +++ b/frontend/packages/ux-editor/src/components/config/ExpressionContent/ExpressionContent.module.css @@ -4,7 +4,7 @@ border-radius: var(--fds-border_radius-medium); border: 0; box-shadow: var(--fds-shadow-small); - display: contents; + display: grid; gap: var(--studio-expression-spacing); grid-template-columns: [start] 1fr auto [end]; margin: 0; @@ -18,12 +18,12 @@ .legendContent { margin-left: var(--studio-expression-spacing); - overflow-wrap: break-word; + text-overflow: ellipsis; + overflow: auto; } .deleteButton { margin-right: var(--studio-expression-spacing); - width: 100%; } .legendContent, From e1b7e3bc186729fd9cf71e145a82e366f6ad0243 Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Thu, 4 Jul 2024 17:24:42 +0200 Subject: [PATCH 04/10] fix comments --WIP --- .../StudioCodeFragment/StudioCodeFragment.module.css | 6 ------ .../StudioCodeFragment/StudioCodeFragment.tsx | 12 +++--------- .../SubexpressionValueReadonly.module.css | 6 ++++++ .../SubexpressionValueReadonly.tsx | 6 +++++- .../StudioTextfieldToggleView.module.css | 8 -------- .../StudioTextfieldToggleView.tsx | 10 ++-------- .../EditComponentIdRow/EditComponentIdRow.module.css | 5 +++++ .../EditComponentIdRow/EditComponentIdRow.tsx | 1 + 8 files changed, 22 insertions(+), 32 deletions(-) diff --git a/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.module.css b/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.module.css index 804d48a3f5c..8c23ff20f7b 100644 --- a/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.module.css +++ b/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.module.css @@ -7,9 +7,3 @@ font-size: 0.8em; padding: 0 var(--fds-spacing-1); } - -.customDatamodelBindingOverflow { - overflow: auto; - height: 2em; - overflow-y: hidden; -} diff --git a/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.tsx b/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.tsx index 7a217914fd1..0ec588f05a5 100644 --- a/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.tsx +++ b/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.tsx @@ -4,21 +4,15 @@ import cn from 'classnames'; import classes from './StudioCodeFragment.module.css'; export type StudioCodeFragmentProps = HTMLAttributes & { - customDatamodelBindingOverflowStyles?: boolean; + classname?: string; }; const StudioCodeFragment = forwardRef( - ( - { children, className: givenClass, customDatamodelBindingOverflowStyles = true, ...rest }, - ref, - ) => { + ({ children, className: givenClass, classname, ...rest }, ref) => { const className = cn(classes.code, givenClass); - const customClassName = customDatamodelBindingOverflowStyles - ? cn(className, classes.customDatamodelBindingOverflow) - : className; return ( - + {children} ); diff --git a/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.module.css b/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.module.css index dab351eda9d..00b58323164 100644 --- a/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.module.css +++ b/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.module.css @@ -5,3 +5,9 @@ gap: var(--fds-spacing-1); justify-content: flex-start; } + +.datamodelOutputField { + overflow: auto; + height: 2em; + overflow-y: hidden; +} diff --git a/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.tsx b/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.tsx index 066a1fa827b..89441dffb74 100644 --- a/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.tsx +++ b/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.tsx @@ -44,7 +44,11 @@ const DataModelLookupValue = ({ return ( {value.path}} + binding={ + + {value.path} + + } /> ); }; diff --git a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.module.css b/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.module.css index 5f19e379420..c585d884672 100644 --- a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.module.css +++ b/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.module.css @@ -12,14 +12,6 @@ width: 100%; } -.componentIdInViewMode { - display: flex; - flex-direction: column; - text-overflow: ellipsis; - overflow: auto; - overflow-wrap: break-word; -} - .editIconWrapper { flex: 1; text-align: right; diff --git a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.tsx b/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.tsx index 3f420756f91..42b314129fa 100644 --- a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.tsx +++ b/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.tsx @@ -4,27 +4,21 @@ import { StudioButton, type StudioButtonProps } from '@studio/components'; import classes from './StudioTextfieldToggleView.module.css'; import cn from 'classnames'; -export type StudioTextfieldToggleViewProps = StudioButtonProps & { - customComponentIdInViewMode?: boolean; -}; +export type StudioTextfieldToggleViewProps = StudioButtonProps; export const StudioTextfieldToggleView = ({ onClick, children, className: givenClass, - customComponentIdInViewMode = true, ...rest }: StudioTextfieldToggleViewProps) => { const className = cn(classes.button, givenClass); - const componentIdInViewModeClass = customComponentIdInViewMode - ? classes.componentIdInViewMode - : ''; return ( -
{children}
+
{children}
 diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.module.css index 90c50023954..c80cd85f6b7 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.module.css +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.module.css @@ -6,3 +6,8 @@ .idInput { padding: var(--fds-spacing-5); } + +.componentIdViewMode { + text-overflow: ellipsis; + overflow: auto; +} diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.tsx index d34dd9f450e..c8818190bb8 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.tsx @@ -69,6 +69,7 @@ export const EditComponentIdRow = ({ children: , variant: 'tertiary', fullWidth: true, + className: classes.componentIdViewMode, }} inputProps={{ icon: , From 7c92bba3a42a568fdaccaadf57beced9760a0fdc Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Fri, 5 Jul 2024 08:00:30 +0200 Subject: [PATCH 05/10] fix comment , still working on ellipsis --WIP --- .../components/StudioCodeFragment/StudioCodeFragment.tsx | 6 ++---- .../SubexpressionValueReadonly.module.css | 2 +- .../SubexpressionValueReadonly.tsx | 6 +----- .../StudioTextfieldToggleView/StudioTextfieldToggleView.tsx | 2 +- 4 files changed, 5 insertions(+), 11 deletions(-) diff --git a/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.tsx b/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.tsx index 0ec588f05a5..295c88cc558 100644 --- a/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.tsx +++ b/frontend/libs/studio-components/src/components/StudioCodeFragment/StudioCodeFragment.tsx @@ -3,12 +3,10 @@ import React, { forwardRef } from 'react'; import cn from 'classnames'; import classes from './StudioCodeFragment.module.css'; -export type StudioCodeFragmentProps = HTMLAttributes & { - classname?: string; -}; +export type StudioCodeFragmentProps = HTMLAttributes; const StudioCodeFragment = forwardRef( - ({ children, className: givenClass, classname, ...rest }, ref) => { + ({ children, className: givenClass, ...rest }, ref) => { const className = cn(classes.code, givenClass); return ( diff --git a/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.module.css b/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.module.css index 00b58323164..66dcf6f8e3c 100644 --- a/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.module.css +++ b/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.module.css @@ -6,7 +6,7 @@ justify-content: flex-start; } -.datamodelOutputField { +.ellipsis { overflow: auto; height: 2em; overflow-y: hidden; diff --git a/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.tsx b/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.tsx index 89441dffb74..d1361b370f5 100644 --- a/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.tsx +++ b/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.tsx @@ -44,11 +44,7 @@ const DataModelLookupValue = ({ return ( - {value.path} - - } + binding={{value.path}} /> ); }; diff --git a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.tsx b/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.tsx index 42b314129fa..f81ab718ac9 100644 --- a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.tsx +++ b/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.tsx @@ -18,7 +18,7 @@ export const StudioTextfieldToggleView = ({ -
{children}
+ {children} From 8753a4fe63c81f14e04549ec3583464b9590b74b Mon Sep 17 00:00:00 2001 From: "davidovrelid.com" Date: Fri, 5 Jul 2024 09:37:40 +0200 Subject: [PATCH 06/10] Renamed className to ellipsis and wrapped button text in span --- .../EditComponentIdRow/EditComponentIdRow.module.css | 5 +++-- .../EditComponentIdRow/EditComponentIdRow.tsx | 7 +++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.module.css index c80cd85f6b7..e1b035cedf2 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.module.css +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.module.css @@ -7,7 +7,8 @@ padding: var(--fds-spacing-5); } -.componentIdViewMode { +.ellipsis { + overflow: hidden; + white-space: nowrap; text-overflow: ellipsis; - overflow: auto; } diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.tsx index c8818190bb8..3ebafa889a3 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.tsx @@ -66,10 +66,13 @@ export const EditComponentIdRow = ({ propertyPath='definitions/component/properties/id' key={component.id} viewProps={{ - children: , + children: ( + + + + ), variant: 'tertiary', fullWidth: true, - className: classes.componentIdViewMode, }} inputProps={{ icon: , From 16e68e698a5ebea2127e78136d6eb7a182064297 Mon Sep 17 00:00:00 2001 From: "davidovrelid.com" Date: Fri, 5 Jul 2024 09:50:37 +0200 Subject: [PATCH 07/10] renamed className and removed strict height value --- .../SubexpressionValueReadonly.module.css | 3 +-- .../SubExpressionValueReadonly/SubexpressionValueReadonly.tsx | 4 +++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.module.css b/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.module.css index 66dcf6f8e3c..7ccba92b0f7 100644 --- a/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.module.css +++ b/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.module.css @@ -6,8 +6,7 @@ justify-content: flex-start; } -.ellipsis { +.codeFragment { overflow: auto; - height: 2em; overflow-y: hidden; } diff --git a/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.tsx b/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.tsx index d1361b370f5..880a2b0a616 100644 --- a/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.tsx +++ b/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.tsx @@ -44,7 +44,9 @@ const DataModelLookupValue = ({ return ( {value.path}} + binding={ + {value.path} + } /> ); }; From 6dce3ae154cc21ee7e2c4f757a628e237e64d7d0 Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Fri, 5 Jul 2024 11:41:50 +0200 Subject: [PATCH 08/10] added title to component-id --- .../PropertiesHeader/EditComponentIdRow/EditComponentIdRow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.tsx b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.tsx index 8f1e8c502ba..03794fbee67 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.tsx +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.tsx @@ -71,7 +71,7 @@ export const EditComponentIdRow = ({ key={component.id} viewProps={{ children: ( - + ), From 2543c7fb9a523dce5bdeed6353a9e20a4c0369ad Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Fri, 5 Jul 2024 13:56:48 +0200 Subject: [PATCH 09/10] fixed comment --- .../SubexpressionValueReadonly.module.css | 5 +++-- .../SubexpressionValueReadonly.tsx | 4 +++- .../EditComponentIdRow/EditComponentIdRow.module.css | 1 + .../config/ExpressionContent/ExpressionContent.module.css | 3 ++- 4 files changed, 9 insertions(+), 4 deletions(-) diff --git a/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.module.css b/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.module.css index 7ccba92b0f7..a3095de4406 100644 --- a/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.module.css +++ b/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.module.css @@ -7,6 +7,7 @@ } .codeFragment { - overflow: auto; - overflow-y: hidden; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } diff --git a/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.tsx b/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.tsx index 880a2b0a616..e712a04c4b2 100644 --- a/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.tsx +++ b/frontend/libs/studio-components/src/components/StudioExpression/SimplifiedEditor/LogicalExpressionEditor/SubExpression/SubExpressionValueSelector/SubExpressionValueReadonly/SubexpressionValueReadonly.tsx @@ -45,7 +45,9 @@ const DataModelLookupValue = ({ {value.path} + + {value.path} + } /> ); diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.module.css index afb2e91a8b3..889353158e5 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.module.css +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.module.css @@ -11,6 +11,7 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + max-width: 245px; } .duplicatedIdField { diff --git a/frontend/packages/ux-editor/src/components/config/ExpressionContent/ExpressionContent.module.css b/frontend/packages/ux-editor/src/components/config/ExpressionContent/ExpressionContent.module.css index 2e2dd4ddba0..3f9821af111 100644 --- a/frontend/packages/ux-editor/src/components/config/ExpressionContent/ExpressionContent.module.css +++ b/frontend/packages/ux-editor/src/components/config/ExpressionContent/ExpressionContent.module.css @@ -18,8 +18,9 @@ .legendContent { margin-left: var(--studio-expression-spacing); + overflow: hidden; + white-space: nowrap; text-overflow: ellipsis; - overflow: auto; } .deleteButton { From 769edd4b96e1d0900f241fbb9892148adaadaf93 Mon Sep 17 00:00:00 2001 From: JamalAlabdullah Date: Fri, 5 Jul 2024 15:34:54 +0200 Subject: [PATCH 10/10] removed hard cod and updated viewModeIconsContainer-css class --- .../StudioTextfieldToggleView.module.css | 4 +++- .../EditComponentIdRow/EditComponentIdRow.module.css | 1 - 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.module.css b/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.module.css index c585d884672..ad56f6be622 100644 --- a/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.module.css +++ b/frontend/libs/studio-components/src/components/StudioToggleableTextfield/StudioTextfieldToggleView/StudioTextfieldToggleView.module.css @@ -6,7 +6,9 @@ } .viewModeIconsContainer { - display: flex; + display: grid; + grid-template-columns: auto 1fr; + text-align: left; align-items: center; color: var(--fds-semantic-text-neutral-default); width: 100%; diff --git a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.module.css b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.module.css index 889353158e5..afb2e91a8b3 100644 --- a/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.module.css +++ b/frontend/packages/ux-editor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.module.css @@ -11,7 +11,6 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - max-width: 245px; } .duplicatedIdField {