fix: adjust design in StudioDisplayTile to align with `StudioToggle…

…ableTextfield` design (#14401)

Co-authored-by: Erling Hauan <148075168+ErlingHauan@users.noreply.github.com>

frontend/language/src/nb.json

@@ -751,7 +751,7 @@
   "process_editor.configuration_panel_set_unique_from_signatures_in_data_types": "Samme person kan ikke signere både denne oppgaven og:",
   "process_editor.configuration_panel_set_unique_from_signatures_in_data_types_link": "Bruk unik signatur på denne oppgaven",
   "process_editor.configuration_panel_signing_task": "Oppgave: Signering",
-  "process_editor.configuration_view_panel_id_label": "ID: {{id}}",
+  "process_editor.configuration_view_panel_id_label": "ID:",
   "process_editor.configuration_view_panel_name_label": "Navn: ",
   "process_editor.configuration_view_panel_no_task": "Du har ikke valgt noen oppgave",
   "process_editor.configuration_view_panel_please_choose_task": "Velg en oppgave for å se detaljer om valgt oppgave.",

frontend/libs/studio-components/src/components/StudioDisplayTile/StudioDisplayTile.module.css

@@ -1,22 +1,25 @@
 .container {
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr auto;
   align-items: center;
-  justify-content: space-between;
-  flex: 1;
   gap: var(--fds-spacing-2);
-  padding: var(--fds-spacing-2) var(--fds-spacing-3);
 }
 
-.innerContainer {
-  display: flex;
-  gap: var(--fds-spacing-1);
+.prefixIcon {
+  grid-template-columns: auto 1fr;
+}
+
+.container:has(:nth-child(3)) {
+  grid-template-columns: auto 1fr auto;
 }
 
 .label {
   font-weight: 500;
 }
 
-.iconLabelContainer {
-  display: flex;
-  align-items: center;
+.label,
+.ellipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }

frontend/libs/studio-components/src/components/StudioDisplayTile/StudioDisplayTile.test.tsx

@@ -4,19 +4,41 @@ import { StudioDisplayTile, type StudioDisplayTileProps } from './StudioDisplayT
 
 const padlockIconTestId: string = 'padlockIconTestId';
 
+const label = 'label';
+const value = 'value';
 const defaultProps: StudioDisplayTileProps = {
-  label: 'Label',
-  value: 'value',
+  label,
+  value,
 };
 
 describe('StudioDisplayTile', () => {
-  it('should show the padlock icon when showPadlock is true', () => {
-    render(<StudioDisplayTile {...defaultProps} showPadlock />);
+  it('should render displayTile', () => {
+    render(<StudioDisplayTile {...defaultProps} />);
+    expect(screen.getByLabelText(label)).toBeInTheDocument();
+  });
+
+  it('should render displayTile with value', () => {
+    render(<StudioDisplayTile {...defaultProps} />);
+    expect(screen.getByText(value)).toBeInTheDocument();
+  });
+
+  it('should show the padlock icon by default', () => {
+    render(<StudioDisplayTile {...defaultProps} />);
     expect(screen.getByTestId(padlockIconTestId)).toBeInTheDocument();
   });
 
   it('should hide the padlock icon when showPadlock is false', () => {
     render(<StudioDisplayTile {...defaultProps} showPadlock={false} />);
     expect(screen.queryByTestId(padlockIconTestId)).not.toBeInTheDocument();
   });
+
+  it('should not assign prefix icon className by default', () => {
+    render(<StudioDisplayTile {...defaultProps} />);
+    expect(screen.getByLabelText(label)).not.toHaveClass('prefixIcon');
+  });
+
+  it('should assign prefix icon className when prefix icon is set', () => {
+    render(<StudioDisplayTile {...defaultProps} icon={<svg />} />);
+    expect(screen.getByLabelText(label)).toHaveClass('prefixIcon');
+  });
 });

frontend/libs/studio-components/src/components/StudioDisplayTile/StudioDisplayTile.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, type HTMLAttributes } from 'react';
 import { PadlockLockedFillIcon } from '@studio/icons';
 import cn from 'classnames';
-import { Paragraph } from '@digdir/designsystemet-react';
+import { Label, Paragraph } from '@digdir/designsystemet-react';
 import classes from './StudioDisplayTile.module.css';
 
 export type StudioDisplayTileProps = {
@@ -23,18 +23,19 @@ const StudioDisplayTile = forwardRef<HTMLDivElement, StudioDisplayTileProps>(
     }: StudioDisplayTileProps,
     ref,
   ): React.ReactElement => {
-    const className = cn(givenClassName, classes.container);
+    const hasPrefixIcon = !!icon;
+    const className = cn(givenClassName, classes.container, hasPrefixIcon && classes.prefixIcon);
 
     return (
-      <div {...rest} className={className} ref={ref}>
-        <div className={classes.innerContainer}>
-          <div className={classes.iconLabelContainer}>
-            {icon ?? null}
-            <Paragraph size='small' className={classes.label}>
-              {label}
-            </Paragraph>
-          </div>
-          <Paragraph size='small'>{value}</Paragraph>
+      <div {...rest} aria-label={label} className={className} ref={ref}>
+        {icon}
+        <div className={classes.ellipsis}>
+          <Label size='small' className={classes.label}>
+            {label}
+          </Label>
+          <Paragraph size='small' className={classes.ellipsis}>
+            {value}
+          </Paragraph>
         </div>
         {showPadlock && <PadlockLockedFillIcon data-testid='padlockIconTestId' />}
       </div>

frontend/packages/process-editor/src/components/ConfigPanel/ConfigContent/ConfigContent.module.css

@@ -19,5 +19,5 @@
 }
 
 .displayTile {
-  padding-inline: var(--fds-spacing-5);
+  padding-inline: var(--fds-spacing-4);
 }

frontend/packages/process-editor/src/components/ConfigViewerPanel/ConfigViewerPanel.module.css

@@ -0,0 +1,6 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  padding: var(--fds-spacing-4);
+  gap: var(--fds-spacing-2);
+}

frontend/packages/process-editor/src/components/ConfigViewerPanel/ConfigViewerPanel.tsx

@@ -6,6 +6,7 @@ import { getConfigTitleHelpTextKey, getConfigTitleKey } from '../../utils/config
 import { useTranslation } from 'react-i18next';
 import { Alert, Heading, Paragraph } from '@digdir/designsystemet-react';
 import { ConfigSurface } from '../ConfigSurface/ConfigSurface';
+import classes from './ConfigViewerPanel.module.css';
 
 export const ConfigViewerPanel = (): React.ReactElement => {
   return (
@@ -52,7 +53,7 @@ export const ConfigViewerPanelContent = (): React.ReactElement => {
           title: t('process_editor.configuration_panel_header_help_text_title'),
         }}
       />
-      <div>
+      <div className={classes.container}>
         {propertiesToDisplay.map(({ label, value }) => (
           <StudioDisplayTile key={label} label={label} value={value} />
         ))}

frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditBinding/SelectDataModelBinding.module.css

@@ -3,26 +3,3 @@
   text-overflow: ellipsis;
   overflow: hidden;
 }
-
-.displayTileContainer {
-  padding: 0;
-  padding-right: var(--fds-spacing-1);
-}
-
-.displayTileContainer > div {
-  display: grid;
-}
-
-.displayTileContainer > div > p {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.selectDataModel {
-  width: 100%;
-}
-
-.selectDataModel {
-  width: 100%;
-}

frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditBinding/SelectDataModelBinding.tsx

@@ -74,7 +74,6 @@ export const SelectDataModelBinding = ({
     <StudioDisplayTile
       label={t('ux_editor.modal_properties_data_model_binding')}
       value={selectedDataModel}
-      className={classes.displayTileContainer}
     />
   );
 };