[3312] Reduce space consumption in Forms

Bug: eclipse-sirius#3312 Signed-off-by: Arthur Daussy <arthur.daussy@obeo.fr>
adaussy · Apr 4, 2024 · 6e166e6 · 6e166e6
1 parent 743d084
commit 6e166e6
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 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
@@ -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/...ges/forms/frontend/sirius-components-forms/src/propertysections/ButtonPropertySection.tsx b/...ges/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/...s/forms/frontend/sirius-components-forms/src/propertysections/CheckboxPropertySection.tsx b/...s/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/...orms/frontend/sirius-components-forms/src/propertysections/LabelWidgetPropertySection.tsx b/...orms/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
@@ -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/...orms/frontend/sirius-components-forms/src/propertysections/MultiSelectPropertySection.tsx b/...orms/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/...ages/forms/frontend/sirius-components-forms/src/propertysections/PropertySectionLabel.tsx b/...ages/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/...ages/forms/frontend/sirius-components-forms/src/propertysections/RadioPropertySection.tsx b/...ages/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/...orms/frontend/sirius-components-forms/src/propertysections/SplitButtonPropertySection.tsx b/...orms/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/.../forms/frontend/sirius-components-forms/src/propertysections/TextfieldPropertySection.tsx b/.../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/...rontend/sirius-components-widget-reference/src/components/ValuedReferenceAutocomplete.tsx b/...rontend/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