Design feedback changes

Altinn · Jan 22, 2025 · e844f92 · e844f92
1 parent 1950572
commit e844f92
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 21 deletions.
diff --git a/...onfig/componentSpecificContent/Summary2/Override/OverrideFields/EmptyTextField.module.css b/...onfig/componentSpecificContent/Summary2/Override/OverrideFields/EmptyTextField.module.css
@@ -0,0 +1,27 @@
+.wrapper {
+  margin-top: var(--fds-spacing-4);
+  padding: var(--fds-spacing-3);
+}
+
+.header {
+  padding-top: var(--fds-spacing-2);
+  padding-bottom: var(--fds-spacing-0);
+  padding-left: var(--fds-spacing-0);
+}
+
+.content {
+  padding: var(--fds-spacing-0);
+}
+
+.divider {
+  margin-top: var(--fds-spacing-0);
+}
+
+.buttons {
+  display: flex;
+  gap: var(--fds-spacing-2);
+}
+
+.button {
+  padding-left: var(--fds-spacing-0);
+}
diff --git a/...nents/config/componentSpecificContent/Summary2/Override/OverrideFields/EmptyTextField.tsx b/...nents/config/componentSpecificContent/Summary2/Override/OverrideFields/EmptyTextField.tsx
@@ -1,6 +1,12 @@
-import React from 'react';
+import React, { type ChangeEvent } from 'react';
+import classes from './EmptyTextField.module.css';
 import type { Summary2OverrideConfig } from 'app-shared/types/ComponentSpecificConfig';
-import { StudioAlert, StudioParagraph, StudioToggleableTextfield } from '@studio/components';
+import {
+  StudioAlert,
+  StudioLabelAsParagraph,
+  StudioProperty,
+  StudioTextfield,
+} from '@studio/components';
 import { useTranslation } from 'react-i18next';
 
 type EmptyTextFieldProps = {
@@ -10,6 +16,7 @@ type EmptyTextFieldProps = {
 
 export const EmptyTextField = ({ onChange, override }: EmptyTextFieldProps) => {
   const { t } = useTranslation();
+  const [open, setOpen] = React.useState(false);
 
   if (override.hideEmptyFields || !override.forceShow) {
     return (
@@ -19,23 +26,31 @@ export const EmptyTextField = ({ onChange, override }: EmptyTextFieldProps) => {
     );
   }
 
+  if (!open) {
+    return (
+      <StudioProperty.Button
+        className={classes.button}
+        value={override.emptyFieldText}
+        property={t('ux_editor.component_properties.summary.override.empty_field_text')}
+        onClick={() => setOpen(true)}
+      ></StudioProperty.Button>
+    );
+  }
+
   return (
-    <StudioToggleableTextfield
-      inputProps={{
-        icon: '',
-        label: t('ux_editor.component_properties.summary.override.empty_field_text'),
-        size: 'sm',
-        value: override.emptyFieldText ?? '',
-        onChange: (event: React.ChangeEvent<HTMLInputElement>) =>
-          onChange({ ...override, emptyFieldText: event.target.value }),
-      }}
-      viewProps={{
-        label: t('ux_editor.component_properties.summary.override.empty_field_text'),
-        style: { padding: '0' },
-        icon: null,
-        children: <StudioParagraph size='small'>{override.emptyFieldText}</StudioParagraph>,
-        variant: 'tertiary',
-      }}
-    ></StudioToggleableTextfield>
+    <>
+      <StudioLabelAsParagraph>
+        {t('ux_editor.component_properties.summary.override.empty_field_text')}
+      </StudioLabelAsParagraph>
+      <StudioTextfield
+        autoFocus={true}
+        onBlur={() => setOpen(false)}
+        onKeyDown={({ key }) => key === 'Enter' && setOpen(false)}
+        value={override.emptyFieldText}
+        onChange={(event: ChangeEvent<HTMLInputElement>) =>
+          onChange({ ...override, emptyFieldText: event.target.value })
+        }
+      />
+    </>
   );
 };
diff --git a/...tor/src/components/config/componentSpecificContent/Summary2/Override/Summary2Override.tsx b/...tor/src/components/config/componentSpecificContent/Summary2/Override/Summary2Override.tsx
@@ -61,7 +61,13 @@ export const Summary2Override = ({ overrides, onChange }: Summary2OverrideProps)
           ))}
         </div>
       )}
-      <StudioButton icon={<PlusIcon />} size='sm' variant='secondary' onClick={addOverride}>
+      <StudioButton
+        icon={<PlusIcon />}
+        size='sm'
+        variant='secondary'
+        onClick={addOverride}
+        disabled={overrides?.some((override) => !override.componentId)}
+      >
         {t('ux_editor.component_properties.summary.add_override')}
       </StudioButton>
     </>

diff --git a/...onents/config/componentSpecificContent/Summary2/Override/Summary2OverrideEntry.module.css b/...onents/config/componentSpecificContent/Summary2/Override/Summary2OverrideEntry.module.css
@@ -25,5 +25,5 @@
 
 .buttongroup {
   display: flex;
-  gap: var(--fds-spacing-4);
+  gap: var(--fds-spacing-3);
 }