From 6e166e656274ea3e25e8f8ff1ff060eab3f5e726 Mon Sep 17 00:00:00 2001
From: Arthur Daussy <arthur.daussy@obeo.fr>
Date: Tue, 2 Apr 2024 14:45:29 +0200
Subject: [PATCH] [3312] Reduce space consumption in Forms

Bug: https://github.com/eclipse-sirius/sirius-web/issues/3312
Signed-off-by: Arthur Daussy <arthur.daussy@obeo.fr>
---
 .../sirius-components-forms/src/groups/Group.tsx   |  3 +--
 .../src/propertysections/ButtonPropertySection.tsx |  2 ++
 .../propertysections/CheckboxPropertySection.tsx   |  2 ++
 .../LabelWidgetPropertySection.tsx                 |  4 ++++
 .../src/propertysections/ListPropertySection.tsx   |  3 +++
 .../MultiSelectPropertySection.tsx                 |  4 +++-
 .../src/propertysections/PropertySectionLabel.tsx  |  8 +++++++-
 .../src/propertysections/RadioPropertySection.tsx  | 14 +++++++++++++-
 .../SplitButtonPropertySection.tsx                 |  2 ++
 .../propertysections/TextfieldPropertySection.tsx  | 10 ++++++++++
 .../src/components/ValuedReferenceAutocomplete.tsx |  6 ++++++
 11 files changed, 53 insertions(+), 5 deletions(-)

diff --git a/packages/forms/frontend/sirius-components-forms/src/groups/Group.tsx b/packages/forms/frontend/sirius-components-forms/src/groups/Group.tsx
index d8c999f2771..3a1607afec0 100644
--- a/packages/forms/frontend/sirius-components-forms/src/groups/Group.tsx
+++ b/packages/forms/frontend/sirius-components-forms/src/groups/Group.tsx
@@ -54,7 +54,7 @@ const useGroupStyles = makeStyles<Theme, GroupStyleProps>((theme) => ({
     display: 'flex',
     flexDirection: 'column',
     '& > *': {
-      marginBottom: theme.spacing(2),
+      marginBottom: theme.spacing(1),
     },
   },
   adaptableSections: {
@@ -121,7 +121,6 @@ export const Group = ({ editingContextId, formId, group, widgetSubscriptions, re
       </div>
     );
   }
-
   return (
     <div className={classes.group} data-testid={`group-${group.label}`}>
       <div className={classes.groupLabelAndToolbar}>
diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/ButtonPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/ButtonPropertySection.tsx
index d7f06e8d240..69cbfe88257 100644
--- a/packages/forms/frontend/sirius-components-forms/src/propertysections/ButtonPropertySection.tsx
+++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/ButtonPropertySection.tsx
@@ -43,6 +43,8 @@ const useStyle = makeStyles<Theme, ButtonStyleProps>((theme) => ({
     fontStyle: ({ italic }) => (italic ? 'italic' : null),
     fontWeight: ({ bold }) => (bold ? 'bold' : null),
     textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
+    paddingTop: theme.spacing(0.5),
+    paddingBottom: theme.spacing(0.5),
     '&:hover': {
       backgroundColor: ({ backgroundColor }) =>
         backgroundColor ? getCSSColor(backgroundColor, theme) : theme.palette.primary.main,
diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/CheckboxPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/CheckboxPropertySection.tsx
index 77e86a8fbd3..cb19a2f076f 100644
--- a/packages/forms/frontend/sirius-components-forms/src/propertysections/CheckboxPropertySection.tsx
+++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/CheckboxPropertySection.tsx
@@ -41,6 +41,8 @@ const useStyle = makeStyles<Theme, CheckboxStyleProps>((theme) => ({
   },
   style: {
     color: ({ color }) => (color ? getCSSColor(color, theme) : theme.palette.primary.light),
+    paddingTop: theme.spacing(0.5),
+    paddingBottom: theme.spacing(0.5),
   },
   disabled: {},
 }));
diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/LabelWidgetPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/LabelWidgetPropertySection.tsx
index a6b8598cb8f..541a77d80c0 100644
--- a/packages/forms/frontend/sirius-components-forms/src/propertysections/LabelWidgetPropertySection.tsx
+++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/LabelWidgetPropertySection.tsx
@@ -26,6 +26,10 @@ const useStyle = makeStyles<Theme, LabelStyleProps>((theme) => ({
     fontStyle: ({ italic }) => (italic ? 'italic' : null),
     fontWeight: ({ bold }) => (bold ? 'bold' : null),
     textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
+    verticalAlign: 'baseline',
+    'align-items': 'center',
+    display: 'flex',
+    margingLeft: theme.spacing(2),
   },
 }));
 
diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/ListPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/ListPropertySection.tsx
index 3263ba12040..6461097d0c5 100644
--- a/packages/forms/frontend/sirius-components-forms/src/propertysections/ListPropertySection.tsx
+++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/ListPropertySection.tsx
@@ -89,6 +89,8 @@ const useListPropertySectionStyles = makeStyles<Theme, ListStyleProps>((theme) =
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
+    paddingTop: theme.spacing(0.25),
+    paddingBottom: theme.spacing(0.25),
   },
   canBeSelectedItem: {
     '&:hover': {
@@ -248,6 +250,7 @@ export const ListPropertySection: PropertySectionComponent<GQLList> = ({
           aria-label="deleteListItem"
           onClick={(event) => onDelete(event, item)}
           disabled={readOnly || !item.deletable || widget.readOnly}
+          size="small"
           data-testid={`delete-representation-${item.label}`}>
           <DeleteIcon />
         </IconButton>
diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/MultiSelectPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/MultiSelectPropertySection.tsx
index a0a2e1b2290..e474c043443 100644
--- a/packages/forms/frontend/sirius-components-forms/src/propertysections/MultiSelectPropertySection.tsx
+++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/MultiSelectPropertySection.tsx
@@ -43,9 +43,11 @@ const useStyle = makeStyles<Theme, MultiSelectStyleProps>((theme) => ({
     fontStyle: ({ italic }) => (italic ? 'italic' : null),
     fontWeight: ({ bold }) => (bold ? 'bold' : null),
     textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
+    paddingTop: theme.spacing(0.5),
+    paddingBottom: theme.spacing(0.5),
   },
   iconRoot: {
-    minWidth: theme.spacing(3),
+    minWidth: theme.spacing(1),
   },
 }));
 
diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/PropertySectionLabel.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/PropertySectionLabel.tsx
index fc489c55682..3d758bfa409 100644
--- a/packages/forms/frontend/sirius-components-forms/src/propertysections/PropertySectionLabel.tsx
+++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/PropertySectionLabel.tsx
@@ -22,6 +22,7 @@ const usePropertySectionLabelStyles = makeStyles((theme) => ({
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
+    marginRight: theme.spacing(2),
   },
   subscribers: {
     marginLeft: 'auto',
@@ -38,13 +39,18 @@ const usePropertySectionLabelStyles = makeStyles((theme) => ({
     width: theme.spacing(2),
     height: theme.spacing(2),
   },
+  typography: {
+    lineHeight: '1.5',
+  },
 }));
 
 export const PropertySectionLabel = ({ editingContextId, formId, widget, subscribers }: PropertySectionLabelProps) => {
   const classes = usePropertySectionLabelStyles();
   return (
     <div className={classes.propertySectionLabel}>
-      <Typography variant="subtitle2">{widget.label}</Typography>
+      <Typography className={classes.typography} variant="subtitle2">
+        {widget.label}
+      </Typography>
       {widget.hasHelpText ? (
         <HelpTooltip editingContextId={editingContextId} formId={formId} widgetId={widget.id} />
       ) : null}
diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/RadioPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/RadioPropertySection.tsx
index 1ca72fdf339..f2fe3ef7e43 100644
--- a/packages/forms/frontend/sirius-components-forms/src/propertysections/RadioPropertySection.tsx
+++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/RadioPropertySection.tsx
@@ -85,6 +85,10 @@ const useRadioPropertySectionStyles = makeStyles<Theme, RadioStyleProps>((theme)
     fontWeight: ({ bold }) => (bold ? 'bold' : null),
     textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
   },
+  radio: {
+    paddingBottom: theme.spacing(0.5),
+    paddingTop: theme.spacing(0.5),
+  },
 }));
 
 const isErrorPayload = (payload: GQLEditRadioPayload | GQLUpdateWidgetFocusPayload): payload is GQLErrorPayload =>
@@ -193,7 +197,15 @@ export const RadioPropertySection: PropertySectionComponent<GQLRadio> = ({
         {widget.options.map((option) => (
           <FormControlLabel
             value={option.id}
-            control={<Radio color="primary" onFocus={onFocus} onBlur={onBlur} data-testid={option.label} />}
+            control={
+              <Radio
+                className={classes.radio}
+                color="primary"
+                onFocus={onFocus}
+                onBlur={onBlur}
+                data-testid={option.label}
+              />
+            }
             label={
               <Typography
                 classes={
diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/SplitButtonPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/SplitButtonPropertySection.tsx
index a248c59abd6..4651812112a 100644
--- a/packages/forms/frontend/sirius-components-forms/src/propertysections/SplitButtonPropertySection.tsx
+++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/SplitButtonPropertySection.tsx
@@ -54,6 +54,8 @@ const useStyle = makeStyles<Theme, ButtonStyleProps>((theme) => ({
     fontStyle: ({ italic }) => (italic ? 'italic' : null),
     fontWeight: ({ bold }) => (bold ? 'bold' : null),
     textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
+    paddingTop: theme.spacing(0.5),
+    paddingBottom: theme.spacing(0.5),
     '&:hover': {
       backgroundColor: ({ backgroundColor }) =>
         backgroundColor ? getCSSColor(backgroundColor, theme) : theme.palette.primary.main,
diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/TextfieldPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/TextfieldPropertySection.tsx
index 098ce404e0a..59493274ec1 100644
--- a/packages/forms/frontend/sirius-components-forms/src/propertysections/TextfieldPropertySection.tsx
+++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/TextfieldPropertySection.tsx
@@ -59,6 +59,14 @@ const useStyle = makeStyles<Theme, TextfieldStyleProps>((theme) => ({
     fontWeight: ({ bold }) => (bold ? 'bold' : null),
     textDecorationLine: ({ underline, strikeThrough }) => getTextDecorationLineValue(underline, strikeThrough),
   },
+  input: {
+    paddingTop: theme.spacing(0.5),
+    paddingBottom: theme.spacing(0.5),
+  },
+  textfield: {
+    marginTop: theme.spacing(0.5),
+    marginBottom: theme.spacing(0.5),
+  },
 }));
 
 export const getCompletionProposalsQuery = gql`
@@ -385,6 +393,7 @@ export const TextfieldPropertySection: PropertySectionComponent<GQLTextfield | G
         error={widget.diagnostics.length > 0}
         helperText={widget.diagnostics[0]?.message}
         inputRef={inputElt}
+        className={classes.textfield}
         InputProps={
           widget.style
             ? {
@@ -394,6 +403,7 @@ export const TextfieldPropertySection: PropertySectionComponent<GQLTextfield | G
         }
         inputProps={{
           'data-testid': `input-${widget.label}`,
+          className: classes.input,
         }}
       />
       {proposalsList}
diff --git a/packages/forms/frontend/sirius-components-widget-reference/src/components/ValuedReferenceAutocomplete.tsx b/packages/forms/frontend/sirius-components-widget-reference/src/components/ValuedReferenceAutocomplete.tsx
index 4d31bab8529..373eb5e162f 100644
--- a/packages/forms/frontend/sirius-components-widget-reference/src/components/ValuedReferenceAutocomplete.tsx
+++ b/packages/forms/frontend/sirius-components-widget-reference/src/components/ValuedReferenceAutocomplete.tsx
@@ -265,6 +265,12 @@ export const ValuedReferenceAutocomplete = ({
           placeholder={placeholder}
           error={widget.diagnostics.length > 0}
           helperText={widget.diagnostics[0]?.message}
+          inputProps={{
+            style: {
+              paddingTop: theme.spacing(0.5),
+              paddingBottom: theme.spacing(0.5),
+            },
+          }}
           InputProps={{
             ...params.InputProps,
             style: { paddingRight: theme.spacing(10) }, // Offset required to prevent values from being displayed below the buttons