fix: styling in subform table to be more similar the design (#14450)

Co-authored-by: JamalAlabdullah <[email protected]>
Altinn · Jan 22, 2025 · 0e08fcb · 0e08fcb
1 parent c3e12e8
commit 0e08fcb
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 9 deletions.
diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
@@ -1847,7 +1847,7 @@
   "ux_editor.properties_panel.subform_table_columns.cell_content_query_label": "Query",
   "ux_editor.properties_panel.subform_table_columns.choose_component": "Velg komponenten fra underskjemaet som skal vises her",
   "ux_editor.properties_panel.subform_table_columns.choose_component_description": "Listen viser bare de komponentene som har minst én datamodellbinding og en ledetekst",
-  "ux_editor.properties_panel.subform_table_columns.column_cell_content": "Celleinnhold (query):",
+  "ux_editor.properties_panel.subform_table_columns.column_cell_content": "Celleinnhold (query): <0>{{cellContent}}</0>",
   "ux_editor.properties_panel.subform_table_columns.column_header": "Kolonne {{columnNumber}}",
   "ux_editor.properties_panel.subform_table_columns.column_title_edit": "Kolonnetittel",
   "ux_editor.properties_panel.subform_table_columns.column_title_error": "Kolonnetittel er påkrevd",

diff --git a/...itSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElementContent.module.css b/...itSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElementContent.module.css
@@ -11,3 +11,7 @@
 .componentTitleButton {
   margin-bottom: var(--fds-spacing-1);
 }
+
+.componentCellContent {
+  font: var(--fds-typography-label-small);
+}
diff --git a/...ties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElementContent.tsx b/...ties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElementContent.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
-import { StudioDisplayTile, StudioProperty, StudioTextfield } from '@studio/components';
-import { useTranslation } from 'react-i18next';
+import { StudioCodeFragment, StudioProperty, StudioTextfield } from '@studio/components';
+import { Trans, useTranslation } from 'react-i18next';
 import classes from './EditColumnElementContent.module.css';
 
 type EditColumnElementContentProps = {
@@ -40,12 +40,13 @@ export const EditColumnElementContent = ({
         />
       )}
 
-      <StudioDisplayTile
-        className={classes.componentCellContent}
-        label={t('ux_editor.properties_panel.subform_table_columns.column_cell_content')}
-        value={cellContent}
-        showPadlock={false}
-      />
+      <div className={classes.componentCellContent}>
+        <Trans
+          i18nKey='ux_editor.properties_panel.subform_table_columns.column_cell_content'
+          values={{ cellContent }}
+          components={[<StudioCodeFragment key='0' />]}
+        />
+      </div>
     </div>
   );
 };