fix(EditComponentId): Fixed PR feedback on spacing and paddings (#12433)

Altinn · Mar 4, 2024 · 390f7e6 · 390f7e6
1 parent 57e33d0
commit 390f7e6
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 7 deletions.
diff --git a/frontend/libs/studio-components/src/components/StudioIconTextfield/StudioIconTextfield.tsx b/frontend/libs/studio-components/src/components/StudioIconTextfield/StudioIconTextfield.tsx
@@ -13,13 +13,13 @@ export const StudioIconTextfield = forwardRef<HTMLDivElement, StudioIconTextfiel
     { icon, className: givenClassName, ...rest }: StudioIconTextfieldProps,
     ref,
   ): React.ReactElement => {
-    const className = cn(givenClassName, classes.textfield);
+    const className = cn(givenClassName, classes.container);
     return (
-      <div className={classes.container} ref={ref}>
+      <div className={className} ref={ref}>
         <div aria-hidden className={classes.prefixIcon}>
           {icon}
         </div>
-        <StudioTextfield {...rest} className={className} />
+        <StudioTextfield {...rest} className={classes.textfield} />
       </div>
     );
   },

diff --git a/...c/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.module.css b/...c/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.module.css
@@ -1,4 +1,7 @@
 .container {
   width: 100%;
-  padding-bottom: var(--fds-spacing-2);
+}
+
+.idInput {
+  padding: var(--fds-spacing-5);
 }
diff --git a/...itor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.tsx b/...itor/src/components/Properties/PropertiesHeader/EditComponentIdRow/EditComponentIdRow.tsx
@@ -66,7 +66,6 @@ export const EditComponentIdRow = ({
           children: `ID: ${component.id}`,
           variant: 'tertiary',
           fullWidth: true,
-          style: { paddingLeft: 0, paddingRight: 0 },
         }}
         inputProps={{
           icon: <KeyVerticalIcon />,
@@ -75,6 +74,7 @@ export const EditComponentIdRow = ({
           label: t('ux_editor.modal_properties_component_change_id'),
           size: 'small',
           error: errorMessage,
+          className: classes.idInput,
         }}
         customValidation={(value) => {
           return validateId(value);

diff --git a/...packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.module.css b/...packages/ux-editor/src/components/Properties/PropertiesHeader/PropertiesHeader.module.css
@@ -18,8 +18,6 @@
 }
 
 .content {
-  padding-inline: var(--fds-spacing-3);
-  padding-block: var(--fds-spacing-2);
   background-color: var(--fds-semantic-surface-neutral-default);
   display: flex;
   flex-direction: column;