[4110] Add layout capabilities for form widgets

Bug: #4110 Signed-off-by: Laurent Fasani <laurent.fasani@obeo.fr>
eclipse-sirius · Nov 8, 2024 · 216d494 · 216d494
1 parent 5551546
commit 216d494
Show file tree

Hide file tree

Showing 99 changed files with 11,404 additions and 936 deletions.
diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
@@ -139,6 +139,7 @@ _Warning:_ make sure all contributions return an actual MUI `MenuItem` component
 ** `projectContextMenuContainerExtensionPoint`: can be used to wrap the menu inside a custom container, for example to add more context for the items or to completely replace the context menu.
 - https://github.com/eclipse-sirius/sirius-web/issues/3980[#3980] [diagram] Add _Elements to Select Expression_ on _NodeTool_ and _EdgeTool_ to control which semantic elements should be selected after the tool's successful execution
 - https://github.com/eclipse-sirius/sirius-web/issues/4048[#4048] [core] Add the ability to undo/redo only semantic changes after a mutation with crtl+z or ctrl+y on the edit project view (this does not include deleting a resource)
+- https://github.com/eclipse-sirius/sirius-web/issues/4110[#4110] [form] Add layout capabilities for form widgets
 
 === Improvements
 

diff --git a/...rg/eclipse/sirius/components/formdescriptioneditors/components/CheckboxStyleProvider.java b/...rg/eclipse/sirius/components/formdescriptioneditors/components/CheckboxStyleProvider.java
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2022, 2023 Obeo.
+ * Copyright (c) 2022, 2024 Obeo.
  * This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
@@ -16,6 +16,7 @@
 
 import org.eclipse.sirius.components.forms.CheckboxStyle;
 import org.eclipse.sirius.components.forms.CheckboxStyle.Builder;
+import org.eclipse.sirius.components.forms.WidgetGridLayout;
 import org.eclipse.sirius.components.view.FixedColor;
 import org.eclipse.sirius.components.view.form.CheckboxDescriptionStyle;
 
@@ -34,8 +35,18 @@ public CheckboxStyleProvider(CheckboxDescriptionStyle viewStyle) {
     }
 
     public CheckboxStyle build() {
+        WidgetGridLayout widgetGridLayout = WidgetGridLayout.newWidgetGridLayout()
+                .gridTemplateColumns(this.viewStyle.getGridTemplateColumns())
+                .gridTemplateRows(this.viewStyle.getGridTemplateRows())
+                .labelGridColumn(this.viewStyle.getLabelGridColumn())
+                .labelGridRow(this.viewStyle.getLabelGridRow())
+                .widgetGridColumn(this.viewStyle.getWidgetGridColumn())
+                .widgetGridRow(this.viewStyle.getWidgetGridRow())
+                .gap(this.viewStyle.getGap())
+                .build();
+
         Builder checkboxStyleBuilder = CheckboxStyle.newCheckboxStyle()
-                .labelPlacement(this.viewStyle.getLabelPlacement().getLiteral());
+                .widgetGridLayout(widgetGridLayout);
 
         if (this.viewStyle.getColor() instanceof FixedColor fixedColor) {
             String color = fixedColor.getValue();

diff --git a/...rg/eclipse/sirius/components/formdescriptioneditors/components/DateTimeStyleProvider.java b/...rg/eclipse/sirius/components/formdescriptioneditors/components/DateTimeStyleProvider.java
@@ -16,6 +16,7 @@
 
 import org.eclipse.sirius.components.forms.DateTimeStyle;
 import org.eclipse.sirius.components.forms.DateTimeStyle.Builder;
+import org.eclipse.sirius.components.forms.WidgetGridLayout;
 import org.eclipse.sirius.components.view.FixedColor;
 import org.eclipse.sirius.components.view.form.DateTimeDescriptionStyle;
 
@@ -52,10 +53,20 @@ public DateTimeStyle build() {
 
         boolean italic = this.viewStyle.isItalic();
         boolean bold = this.viewStyle.isBold();
+        WidgetGridLayout widgetGridLayout = WidgetGridLayout.newWidgetGridLayout()
+                .gridTemplateColumns(this.viewStyle.getGridTemplateColumns())
+                .gridTemplateRows(this.viewStyle.getGridTemplateRows())
+                .labelGridColumn(this.viewStyle.getLabelGridColumn())
+                .labelGridRow(this.viewStyle.getLabelGridRow())
+                .widgetGridColumn(this.viewStyle.getWidgetGridColumn())
+                .widgetGridRow(this.viewStyle.getWidgetGridRow())
+                .gap(this.viewStyle.getGap())
+                .build();
 
         return dateTimeStyleBuilder
                 .italic(italic)
                 .bold(bold)
+                .widgetGridLayout(widgetGridLayout)
                 .build();
     }
 

diff --git a/...eclipse/sirius/components/formdescriptioneditors/components/MultiSelectStyleProvider.java b/...eclipse/sirius/components/formdescriptioneditors/components/MultiSelectStyleProvider.java
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2022, 2023 Obeo.
+ * Copyright (c) 2022, 2024 Obeo.
  * This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
@@ -16,6 +16,7 @@
 
 import org.eclipse.sirius.components.forms.MultiSelectStyle;
 import org.eclipse.sirius.components.forms.MultiSelectStyle.Builder;
+import org.eclipse.sirius.components.forms.WidgetGridLayout;
 import org.eclipse.sirius.components.view.FixedColor;
 import org.eclipse.sirius.components.view.form.MultiSelectDescriptionStyle;
 
@@ -56,6 +57,15 @@ public MultiSelectStyle build() {
         boolean underline = this.viewStyle.isUnderline();
         boolean strikeThrough = this.viewStyle.isStrikeThrough();
         boolean isShowIcon = this.viewStyle.isShowIcon();
+        WidgetGridLayout widgetGridLayout = WidgetGridLayout.newWidgetGridLayout()
+                .gridTemplateColumns(this.viewStyle.getGridTemplateColumns())
+                .gridTemplateRows(this.viewStyle.getGridTemplateRows())
+                .labelGridColumn(this.viewStyle.getLabelGridColumn())
+                .labelGridRow(this.viewStyle.getLabelGridRow())
+                .widgetGridColumn(this.viewStyle.getWidgetGridColumn())
+                .widgetGridRow(this.viewStyle.getWidgetGridRow())
+                .gap(this.viewStyle.getGap())
+                .build();
 
         // @formatter:off
         return multiSelectStyleBuilder
@@ -65,6 +75,7 @@ public MultiSelectStyle build() {
                 .underline(underline)
                 .strikeThrough(strikeThrough)
                 .showIcon(isShowIcon)
+                .widgetGridLayout(widgetGridLayout)
                 .build();
         // @formatter:on
     }

diff --git a/.../org/eclipse/sirius/components/formdescriptioneditors/components/SelectStyleProvider.java b/.../org/eclipse/sirius/components/formdescriptioneditors/components/SelectStyleProvider.java
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2022, 2023 Obeo.
+ * Copyright (c) 2022, 2024 Obeo.
  * This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
@@ -16,6 +16,7 @@
 
 import org.eclipse.sirius.components.forms.SelectStyle;
 import org.eclipse.sirius.components.forms.SelectStyle.Builder;
+import org.eclipse.sirius.components.forms.WidgetGridLayout;
 import org.eclipse.sirius.components.view.FixedColor;
 import org.eclipse.sirius.components.view.form.SelectDescriptionStyle;
 
@@ -56,6 +57,15 @@ public SelectStyle build() {
         boolean underline = this.viewStyle.isUnderline();
         boolean strikeThrough = this.viewStyle.isStrikeThrough();
         boolean isShowIcon = this.viewStyle.isShowIcon();
+        WidgetGridLayout widgetGridLayout = WidgetGridLayout.newWidgetGridLayout()
+                .gridTemplateColumns(this.viewStyle.getGridTemplateColumns())
+                .gridTemplateRows(this.viewStyle.getGridTemplateRows())
+                .labelGridColumn(this.viewStyle.getLabelGridColumn())
+                .labelGridRow(this.viewStyle.getLabelGridRow())
+                .widgetGridColumn(this.viewStyle.getWidgetGridColumn())
+                .widgetGridRow(this.viewStyle.getWidgetGridRow())
+                .gap(this.viewStyle.getGap())
+                .build();
 
         // @formatter:off
         return selectStyleBuilder
@@ -65,6 +75,7 @@ public SelectStyle build() {
                 .underline(underline)
                 .strikeThrough(strikeThrough)
                 .showIcon(isShowIcon)
+                .widgetGridLayout(widgetGridLayout)
                 .build();
         // @formatter:on
     }

diff --git a/...rg/eclipse/sirius/components/formdescriptioneditors/components/TextareaStyleProvider.java b/...rg/eclipse/sirius/components/formdescriptioneditors/components/TextareaStyleProvider.java
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2022, 2023 Obeo.
+ * Copyright (c) 2022, 2024 Obeo.
  * This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
@@ -16,6 +16,7 @@
 
 import org.eclipse.sirius.components.forms.TextareaStyle;
 import org.eclipse.sirius.components.forms.TextareaStyle.Builder;
+import org.eclipse.sirius.components.forms.WidgetGridLayout;
 import org.eclipse.sirius.components.view.FixedColor;
 import org.eclipse.sirius.components.view.form.TextareaDescriptionStyle;
 
@@ -55,6 +56,15 @@ public TextareaStyle build() {
         boolean bold = this.viewStyle.isBold();
         boolean underline = this.viewStyle.isUnderline();
         boolean strikeThrough = this.viewStyle.isStrikeThrough();
+        WidgetGridLayout widgetGridLayout = WidgetGridLayout.newWidgetGridLayout()
+                .gridTemplateColumns(this.viewStyle.getGridTemplateColumns())
+                .gridTemplateRows(this.viewStyle.getGridTemplateRows())
+                .labelGridColumn(this.viewStyle.getLabelGridColumn())
+                .labelGridRow(this.viewStyle.getLabelGridRow())
+                .widgetGridColumn(this.viewStyle.getWidgetGridColumn())
+                .widgetGridRow(this.viewStyle.getWidgetGridRow())
+                .gap(this.viewStyle.getGap())
+                .build();
 
         // @formatter:off
         return textareaStyleBuilder
@@ -63,6 +73,7 @@ public TextareaStyle build() {
                 .bold(bold)
                 .underline(underline)
                 .strikeThrough(strikeThrough)
+                .widgetGridLayout(widgetGridLayout)
                 .build();
         // @formatter:on
     }

diff --git a/...g/eclipse/sirius/components/formdescriptioneditors/components/TextfieldStyleProvider.java b/...g/eclipse/sirius/components/formdescriptioneditors/components/TextfieldStyleProvider.java
@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2022, 2023 Obeo.
+ * Copyright (c) 2022, 2024 Obeo.
  * This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v2.0
  * which accompanies this distribution, and is available at
@@ -16,6 +16,7 @@
 
 import org.eclipse.sirius.components.forms.TextfieldStyle;
 import org.eclipse.sirius.components.forms.TextfieldStyle.Builder;
+import org.eclipse.sirius.components.forms.WidgetGridLayout;
 import org.eclipse.sirius.components.view.FixedColor;
 import org.eclipse.sirius.components.view.form.TextfieldDescriptionStyle;
 
@@ -55,6 +56,15 @@ public TextfieldStyle build() {
         boolean bold = this.viewStyle.isBold();
         boolean underline = this.viewStyle.isUnderline();
         boolean strikeThrough = this.viewStyle.isStrikeThrough();
+        WidgetGridLayout widgetGridLayout = WidgetGridLayout.newWidgetGridLayout()
+                .gridTemplateColumns(this.viewStyle.getGridTemplateColumns())
+                .gridTemplateRows(this.viewStyle.getGridTemplateRows())
+                .labelGridColumn(this.viewStyle.getLabelGridColumn())
+                .labelGridRow(this.viewStyle.getLabelGridRow())
+                .widgetGridColumn(this.viewStyle.getWidgetGridColumn())
+                .widgetGridRow(this.viewStyle.getWidgetGridRow())
+                .gap(this.viewStyle.getGap())
+                .build();
 
         // @formatter:off
         return textfieldStyleBuilder
@@ -63,6 +73,7 @@ public TextfieldStyle build() {
                 .bold(bold)
                 .underline(underline)
                 .strikeThrough(strikeThrough)
+                .widgetGridLayout(widgetGridLayout)
                 .build();
         // @formatter:on
     }

diff --git a/...scriptioneditors/frontend/sirius-components-formdescriptioneditors/src/CheckboxWidget.tsx b/...scriptioneditors/frontend/sirius-components-formdescriptioneditors/src/CheckboxWidget.tsx
@@ -14,32 +14,53 @@ import { getCSSColor, useSelection } from '@eclipse-sirius/sirius-components-cor
 import { CheckboxStyleProps } from '@eclipse-sirius/sirius-components-forms';
 import HelpOutlineOutlined from '@mui/icons-material/HelpOutlineOutlined';
 import Checkbox from '@mui/material/Checkbox';
-import FormControlLabel from '@mui/material/FormControlLabel';
+import FormControl from '@mui/material/FormControl';
 import Typography from '@mui/material/Typography';
 import { useEffect, useRef, useState } from 'react';
 import { makeStyles } from 'tss-react/mui';
 import { CheckboxWidgetProps } from './WidgetEntry.types';
 
-const useStyles = makeStyles<CheckboxStyleProps>()((theme, { color }) => ({
-  style: {
-    color: color ? getCSSColor(color, theme) : theme.palette.primary.light,
-    '&.Mui-checked': {
+const useStyles = makeStyles<CheckboxStyleProps>()((theme, { color, gridProps }) => {
+  const { gridTemplateColumns, gridTemplateRows, labelGridColumn, labelGridRow, widgetGridColumn, widgetGridRow, gap } =
+    {
+      ...gridProps,
+    };
+  return {
+    style: {
       color: color ? getCSSColor(color, theme) : theme.palette.primary.light,
+      '&.Mui-checked': {
+        color: color ? getCSSColor(color, theme) : theme.palette.primary.light,
+      },
     },
-  },
-  selected: {
-    color: theme.palette.primary.main,
-  },
-  propertySectionLabel: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-}));
+    selected: {
+      color: theme.palette.primary.main,
+    },
+    propertySection: {
+      display: 'grid',
+      gridTemplateColumns: gridTemplateColumns ?? 'min-content 1fr',
+      gridTemplateRows,
+      alignItems: 'center',
+      gap: gap ?? '',
+    },
+    propertySectionLabel: {
+      gridColumn: labelGridColumn ?? '2/3',
+      gridRow: labelGridRow,
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+    },
+    propertySectionWidget: {
+      gridColumn: widgetGridColumn,
+      gridRow: widgetGridRow ?? '1/2',
+    },
+  };
+});
 
 export const CheckboxWidget = ({ widget }: CheckboxWidgetProps) => {
   const props: CheckboxStyleProps = {
     color: widget.style?.color ?? null,
+    gridProps: widget.style?.widgetGridLayout ?? null,
   };
   const { classes } = useStyles(props);
 
@@ -58,19 +79,14 @@ export const CheckboxWidget = ({ widget }: CheckboxWidgetProps) => {
   }, [selection, widget]);
 
   return (
-    <FormControlLabel
-      labelPlacement={widget.style?.labelPlacement ?? 'end'}
-      label={
-        <div className={classes.propertySectionLabel}>
-          <Typography variant="subtitle2" className={selected ? classes.selected : ''}>
-            {widget.label}
-          </Typography>
-          {widget.hasHelpText ? (
-            <HelpOutlineOutlined color="secondary" style={{ marginLeft: 8, fontSize: 16 }} />
-          ) : null}
-        </div>
-      }
-      control={
+    <FormControl classes={{ root: classes.propertySection }}>
+      <div className={classes.propertySectionLabel}>
+        <Typography variant="subtitle2" className={selected ? classes.selected : ''}>
+          {widget.label}
+        </Typography>
+        {widget.hasHelpText ? <HelpOutlineOutlined color="secondary" style={{ marginLeft: 8, fontSize: 16 }} /> : null}
+      </div>
+      <div className={classes.propertySectionWidget}>
         <Checkbox
           data-testid={widget.label}
           checked
@@ -79,7 +95,7 @@ export const CheckboxWidget = ({ widget }: CheckboxWidgetProps) => {
           onBlur={() => setSelected(false)}
           classes={{ root: classes.style }}
         />
-      }
-    />
+      </div>
+    </FormControl>
   );
 };