diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc index 3f8289e382..fc00ffb606 100644 --- a/CHANGELOG.adoc +++ b/CHANGELOG.adoc @@ -16,7 +16,7 @@ === Breaking changes - +- https://github.com/eclipse-sirius/sirius-web/issues/4110[#4110] [view] CheckboxDescriptionStyle.labelPlacement is replaced by Grid layout properties === Dependency update @@ -28,7 +28,7 @@ === New Features - +- https://github.com/eclipse-sirius/sirius-web/issues/4110[#4110] [form] Add layout capabilities for form widgets === Improvements diff --git a/packages/formdescriptioneditors/backend/sirius-components-formdescriptioneditors/src/main/java/org/eclipse/sirius/components/formdescriptioneditors/components/CheckboxStyleProvider.java b/packages/formdescriptioneditors/backend/sirius-components-formdescriptioneditors/src/main/java/org/eclipse/sirius/components/formdescriptioneditors/components/CheckboxStyleProvider.java index 6ec1784a0f..fe873c98dd 100644 --- a/packages/formdescriptioneditors/backend/sirius-components-formdescriptioneditors/src/main/java/org/eclipse/sirius/components/formdescriptioneditors/components/CheckboxStyleProvider.java +++ b/packages/formdescriptioneditors/backend/sirius-components-formdescriptioneditors/src/main/java/org/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/packages/formdescriptioneditors/backend/sirius-components-formdescriptioneditors/src/main/java/org/eclipse/sirius/components/formdescriptioneditors/components/DateTimeStyleProvider.java b/packages/formdescriptioneditors/backend/sirius-components-formdescriptioneditors/src/main/java/org/eclipse/sirius/components/formdescriptioneditors/components/DateTimeStyleProvider.java index 213195a8a4..7c419c7264 100644 --- a/packages/formdescriptioneditors/backend/sirius-components-formdescriptioneditors/src/main/java/org/eclipse/sirius/components/formdescriptioneditors/components/DateTimeStyleProvider.java +++ b/packages/formdescriptioneditors/backend/sirius-components-formdescriptioneditors/src/main/java/org/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/packages/formdescriptioneditors/backend/sirius-components-formdescriptioneditors/src/main/java/org/eclipse/sirius/components/formdescriptioneditors/components/MultiSelectStyleProvider.java b/packages/formdescriptioneditors/backend/sirius-components-formdescriptioneditors/src/main/java/org/eclipse/sirius/components/formdescriptioneditors/components/MultiSelectStyleProvider.java index 3508b14fcc..49ffcf8a1f 100644 --- a/packages/formdescriptioneditors/backend/sirius-components-formdescriptioneditors/src/main/java/org/eclipse/sirius/components/formdescriptioneditors/components/MultiSelectStyleProvider.java +++ b/packages/formdescriptioneditors/backend/sirius-components-formdescriptioneditors/src/main/java/org/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/packages/formdescriptioneditors/backend/sirius-components-formdescriptioneditors/src/main/java/org/eclipse/sirius/components/formdescriptioneditors/components/SelectStyleProvider.java b/packages/formdescriptioneditors/backend/sirius-components-formdescriptioneditors/src/main/java/org/eclipse/sirius/components/formdescriptioneditors/components/SelectStyleProvider.java index b4fc839768..8591b61e08 100644 --- a/packages/formdescriptioneditors/backend/sirius-components-formdescriptioneditors/src/main/java/org/eclipse/sirius/components/formdescriptioneditors/components/SelectStyleProvider.java +++ b/packages/formdescriptioneditors/backend/sirius-components-formdescriptioneditors/src/main/java/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/packages/formdescriptioneditors/backend/sirius-components-formdescriptioneditors/src/main/java/org/eclipse/sirius/components/formdescriptioneditors/components/TextareaStyleProvider.java b/packages/formdescriptioneditors/backend/sirius-components-formdescriptioneditors/src/main/java/org/eclipse/sirius/components/formdescriptioneditors/components/TextareaStyleProvider.java index e81e0fcfff..65cc56c3ab 100644 --- a/packages/formdescriptioneditors/backend/sirius-components-formdescriptioneditors/src/main/java/org/eclipse/sirius/components/formdescriptioneditors/components/TextareaStyleProvider.java +++ b/packages/formdescriptioneditors/backend/sirius-components-formdescriptioneditors/src/main/java/org/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/packages/formdescriptioneditors/backend/sirius-components-formdescriptioneditors/src/main/java/org/eclipse/sirius/components/formdescriptioneditors/components/TextfieldStyleProvider.java b/packages/formdescriptioneditors/backend/sirius-components-formdescriptioneditors/src/main/java/org/eclipse/sirius/components/formdescriptioneditors/components/TextfieldStyleProvider.java index bb6df32a5a..0577d1e89a 100644 --- a/packages/formdescriptioneditors/backend/sirius-components-formdescriptioneditors/src/main/java/org/eclipse/sirius/components/formdescriptioneditors/components/TextfieldStyleProvider.java +++ b/packages/formdescriptioneditors/backend/sirius-components-formdescriptioneditors/src/main/java/org/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/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/CheckboxWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/CheckboxWidget.tsx index 66f65da4d8..225ff24404 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/CheckboxWidget.tsx +++ b/packages/formdescriptioneditors/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()((theme, { color }) => ({ - style: { - color: color ? getCSSColor(color, theme) : theme.palette.primary.light, - '&.Mui-checked': { +const useStyles = makeStyles()((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 ( - - - {widget.label} - - {widget.hasHelpText ? ( - - ) : null} - - } - control={ + +
+ + {widget.label} + + {widget.hasHelpText ? : null} +
+
{ onBlur={() => setSelected(false)} classes={{ root: classes.style }} /> - } - /> +
+ ); }; diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/DateTimeWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/DateTimeWidget.tsx index 40835429b2..9c4d344f31 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/DateTimeWidget.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/DateTimeWidget.tsx @@ -21,22 +21,52 @@ import { DataTimeWidgetState } from './DateTimeWidget.types'; import { DateTimeWidgetProps } from './WidgetEntry.types'; const useDataTimeWidgetStyles = makeStyles()( - (theme, { backgroundColor, foregroundColor, italic, bold }) => ({ - style: { - backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : null, - color: foregroundColor ? getCSSColor(foregroundColor, theme) : null, - fontStyle: italic ? 'italic' : null, - fontWeight: bold ? 'bold' : null, - }, - textfield: { - marginTop: theme.spacing(0.5), - marginBottom: theme.spacing(0.5), - }, - selected: { - color: theme.palette.primary.main, - }, - input: {}, - }) + (theme, { backgroundColor, foregroundColor, italic, bold, gridProps }) => { + const { + gridTemplateColumns, + gridTemplateRows, + labelGridColumn, + labelGridRow, + widgetGridColumn, + widgetGridRow, + gap, + } = { + ...gridProps, + }; + return { + style: { + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : null, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + }, + selected: { + color: theme.palette.primary.main, + }, + input: {}, + propertySection: { + display: 'grid', + gridTemplateColumns, + gridTemplateRows, + alignItems: 'center', + gap: gap ?? '', + }, + propertySectionLabel: { + gridColumn: labelGridColumn, + gridRow: labelGridRow, + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + propertySectionWidget: { + marginTop: theme.spacing(0.5), + marginBottom: theme.spacing(0.5), + gridColumn: widgetGridColumn, + gridRow: widgetGridRow, + }, + }; + } ); export const DateTimeWidget = ({ widget }: DateTimeWidgetProps) => { @@ -45,6 +75,7 @@ export const DateTimeWidget = ({ widget }: DateTimeWidgetProps) => { foregroundColor: widget.style?.foregroundColor ?? null, italic: widget.style?.italic ?? null, bold: widget.style?.bold ?? null, + gridProps: widget.style?.widgetGridLayout ?? null, }; const { classes } = useDataTimeWidgetStyles(props); @@ -66,33 +97,34 @@ export const DateTimeWidget = ({ widget }: DateTimeWidgetProps) => { const { value, type } = getValueAndType(widget.type); return ( -
-
+
+
{widget.label} {widget.hasHelpText ? : null}
- setState((prevState) => ({ ...prevState, selected: true }))} - onBlur={() => setState((prevState) => ({ ...prevState, selected: false }))} - InputProps={ - widget.style - ? { - className: classes.style, - } - : {} - } - inputProps={{ - 'data-testid': `datetime-${widget.label}`, - className: classes.input, - }} - /> +
+ setState((prevState) => ({ ...prevState, selected: true }))} + onBlur={() => setState((prevState) => ({ ...prevState, selected: false }))} + InputProps={ + widget.style + ? { + className: classes.style, + } + : {} + } + inputProps={{ + 'data-testid': `datetime-${widget.label}`, + className: classes.input, + }} + /> +
); }; diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/MultiSelectWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/MultiSelectWidget.tsx index ffdf4e6645..ea010c5d74 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/MultiSelectWidget.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/MultiSelectWidget.tsx @@ -23,24 +23,51 @@ import { makeStyles } from 'tss-react/mui'; import { MultiSelectWidgetProps } from './WidgetEntry.types'; const useStyles = makeStyles()( - (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough }) => ({ - style: { - backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : null, - color: foregroundColor ? getCSSColor(foregroundColor, theme) : null, - fontSize: fontSize ? fontSize : null, - fontStyle: italic ? 'italic' : null, - fontWeight: bold ? 'bold' : null, - textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), - }, - selected: { - color: theme.palette.primary.main, - }, - propertySectionLabel: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - }, - }) + (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough, gridProps }) => { + const { + gridTemplateColumns, + gridTemplateRows, + labelGridColumn, + labelGridRow, + widgetGridColumn, + widgetGridRow, + gap, + } = { + ...gridProps, + }; + return { + style: { + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : null, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : null, + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + }, + selected: { + color: theme.palette.primary.main, + }, + propertySection: { + display: 'grid', + gridTemplateColumns, + gridTemplateRows, + alignItems: 'center', + gap: gap ?? '', + }, + propertySectionLabel: { + gridColumn: labelGridColumn, + gridRow: labelGridRow, + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + propertySectionWidget: { + gridColumn: widgetGridColumn, + gridRow: widgetGridRow, + }, + }; + } ); export const MultiSelectWidget = ({ widget }: MultiSelectWidgetProps) => { @@ -52,6 +79,7 @@ export const MultiSelectWidget = ({ widget }: MultiSelectWidgetProps) => { bold: widget.style?.bold ?? null, underline: widget.style?.underline ?? null, strikeThrough: widget.style?.strikeThrough ?? null, + gridProps: widget.style?.widgetGridLayout ?? null, }; const { classes } = useStyles(props); @@ -77,71 +105,73 @@ export const MultiSelectWidget = ({ widget }: MultiSelectWidgetProps) => { }, [selection, widget]); return ( -
+
{widget.label} {widget.hasHelpText ? : null}
- 'Value 1, Value 3'} + inputRef={ref} + onFocus={() => setSelected(true)} + onBlur={() => setSelected(false)} + inputProps={ + widget.style + ? { + className: classes.style, + } + : {} + }> + + + - - - - - - - - - - - - - + /> + + + + + + + + + + +
); }; diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/SelectWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/SelectWidget.tsx index fd96334e5c..29bb06d5dd 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/SelectWidget.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/SelectWidget.tsx @@ -21,24 +21,51 @@ import { makeStyles } from 'tss-react/mui'; import { SelectWidgetProps } from './WidgetEntry.types'; const useStyles = makeStyles()( - (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough }) => ({ - style: { - backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : null, - color: foregroundColor ? getCSSColor(foregroundColor, theme) : null, - fontSize: fontSize ? fontSize : null, - fontStyle: italic ? 'italic' : null, - fontWeight: bold ? 'bold' : null, - textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), - }, - selected: { - color: theme.palette.primary.main, - }, - propertySectionLabel: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - }, - }) + (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough, gridProps }) => { + const { + gridTemplateColumns, + gridTemplateRows, + labelGridColumn, + labelGridRow, + widgetGridColumn, + widgetGridRow, + gap, + } = { + ...gridProps, + }; + return { + style: { + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : null, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : null, + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + }, + selected: { + color: theme.palette.primary.main, + }, + propertySection: { + display: 'grid', + gridTemplateColumns, + gridTemplateRows, + alignItems: 'center', + gap: gap ?? '', + }, + propertySectionLabel: { + gridColumn: labelGridColumn, + gridRow: labelGridRow, + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + propertySectionWidget: { + gridColumn: widgetGridColumn, + gridRow: widgetGridRow, + }, + }; + } ); export const SelectWidget = ({ widget }: SelectWidgetProps) => { @@ -50,6 +77,7 @@ export const SelectWidget = ({ widget }: SelectWidgetProps) => { bold: widget.style?.bold ?? null, underline: widget.style?.underline ?? null, strikeThrough: widget.style?.strikeThrough ?? null, + gridProps: widget.style?.widgetGridLayout ?? null, }; const { classes } = useStyles(props); @@ -77,74 +105,76 @@ export const SelectWidget = ({ widget }: SelectWidgetProps) => { }, [selection, widget]); return ( -
+
{widget.label} {widget.hasHelpText ? : null}
- - Value 1 - - - Value 2 - - setSelected(true)} + onBlur={() => setSelected(false)} + inputProps={ widget.style ? { - root: classes.style, + className: classes.style, } : {} }> - Value 3 - - + + None + + + Value 1 + + + Value 2 + + + Value 3 + + +
); }; diff --git a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/TextAreaWidget.tsx b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/TextAreaWidget.tsx index b191089afe..992f9e304a 100644 --- a/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/TextAreaWidget.tsx +++ b/packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/TextAreaWidget.tsx @@ -20,24 +20,51 @@ import { makeStyles } from 'tss-react/mui'; import { TextareaWidgetProps } from './WidgetEntry.types'; const useStyles = makeStyles()( - (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough }) => ({ - style: { - backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : null, - color: foregroundColor ? getCSSColor(foregroundColor, theme) : null, - fontSize: fontSize ? fontSize : null, - fontStyle: italic ? 'italic' : null, - fontWeight: bold ? 'bold' : null, - textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), - }, - selected: { - color: theme.palette.primary.main, - }, - propertySectionLabel: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - }, - }) + (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough, gridProps }) => { + const { + gridTemplateColumns, + gridTemplateRows, + labelGridColumn, + labelGridRow, + widgetGridColumn, + widgetGridRow, + gap, + } = { + ...gridProps, + }; + return { + style: { + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : null, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : null, + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + }, + selected: { + color: theme.palette.primary.main, + }, + propertySection: { + display: 'grid', + gridTemplateColumns, + gridTemplateRows, + alignItems: 'center', + gap: gap ?? '', + }, + propertySectionLabel: { + gridColumn: labelGridColumn, + gridRow: labelGridRow, + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + propertySectionWidget: { + gridColumn: widgetGridColumn, + gridRow: widgetGridRow, + }, + }; + } ); export const TextAreaWidget = ({ widget }: TextareaWidgetProps) => { @@ -49,6 +76,7 @@ export const TextAreaWidget = ({ widget }: TextareaWidgetProps) => { bold: widget.style?.bold ?? null, underline: widget.style?.underline ?? null, strikeThrough: widget.style?.strikeThrough ?? null, + gridProps: widget.style?.widgetGridLayout ?? null, }; const { classes } = useStyles(props); @@ -66,7 +94,7 @@ export const TextAreaWidget = ({ widget }: TextareaWidgetProps) => { }, [selection, widget]); return ( -
+
{widget.label} @@ -74,6 +102,7 @@ export const TextAreaWidget = ({ widget }: TextareaWidgetProps) => { {widget.hasHelpText ? : null}
()( - (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough }) => ({ - style: { - backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : null, - color: foregroundColor ? getCSSColor(foregroundColor, theme) : null, - fontSize: fontSize ? fontSize : null, - fontStyle: italic ? 'italic' : null, - fontWeight: bold ? 'bold' : null, - textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), - }, - selected: { - color: theme.palette.primary.main, - }, - propertySectionLabel: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - }, - }) + (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough, gridProps }) => { + const { + gridTemplateColumns, + gridTemplateRows, + labelGridColumn, + labelGridRow, + widgetGridColumn, + widgetGridRow, + gap, + } = { + ...gridProps, + }; + return { + style: { + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : null, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : null, + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + }, + selected: { + color: theme.palette.primary.main, + }, + propertySection: { + display: 'grid', + gridTemplateColumns, + gridTemplateRows, + alignItems: 'center', + gap: gap ?? '', + }, + propertySectionLabel: { + gridColumn: labelGridColumn, + gridRow: labelGridRow, + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + propertySectionWidget: { + gridColumn: widgetGridColumn, + gridRow: widgetGridRow, + }, + }; + } ); export const TextfieldWidget = ({ widget }: TextfieldWidgetProps) => { @@ -49,6 +76,7 @@ export const TextfieldWidget = ({ widget }: TextfieldWidgetProps) => { bold: widget.style?.bold ?? null, underline: widget.style?.underline ?? null, strikeThrough: widget.style?.strikeThrough ?? null, + gridProps: widget.style?.widgetGridLayout ?? null, }; const { classes } = useStyles(props); @@ -66,7 +94,7 @@ export const TextfieldWidget = ({ widget }: TextfieldWidgetProps) => { }, [selection, widget]); return ( -
+
{widget.label} @@ -74,6 +102,7 @@ export const TextfieldWidget = ({ widget }: TextfieldWidgetProps) => { {widget.hasHelpText ? : null}
()((theme, { color }) => ({ - formControl: { - alignItems: 'flex-start', - }, - style: { - color: color ? getCSSColor(color, theme) : theme.palette.primary.light, - paddingTop: theme.spacing(0.5), - paddingBottom: theme.spacing(0.5), - }, - disabled: {}, -})); +const useStyle = makeStyles()((theme, { color, gridProps }) => { + const { gridTemplateColumns, gridTemplateRows, labelGridColumn, labelGridRow, widgetGridColumn, widgetGridRow, gap } = + { + ...gridProps, + }; + + return { + checkboxStyle: { + color: color ? getCSSColor(color, theme) : theme.palette.primary.light, + padding: '0', + }, + disabled: {}, + 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 editCheckboxMutation = gql` mutation editCheckbox($input: EditCheckboxInput!) { @@ -76,6 +97,7 @@ export const CheckboxPropertySection: PropertySectionComponent = ({ }: PropertySectionComponentProps) => { const props: CheckboxStyleProps = { color: widget.style?.color ?? null, + gridProps: widget.style?.widgetGridLayout ?? null, }; const { classes } = useStyle(props); @@ -112,23 +134,22 @@ export const CheckboxPropertySection: PropertySectionComponent = ({ }, [loading, error, data]); return ( - 0}> - } - control={ - - } - /> - {widget.diagnostics[0]?.message} + 0}> +
+ +
+
+ + {widget.diagnostics[0]?.message ? {widget.diagnostics[0]?.message} : null} +
); }; diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/CheckboxPropertySection.types.ts b/packages/forms/frontend/sirius-components-forms/src/propertysections/CheckboxPropertySection.types.ts index c4492956fe..1a6959e581 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/CheckboxPropertySection.types.ts +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/CheckboxPropertySection.types.ts @@ -11,9 +11,11 @@ * Obeo - initial API and implementation *******************************************************************************/ import { GQLMessage } from '@eclipse-sirius/sirius-components-core'; +import { PropertySectionGridProps } from './PropertySection.types'; export interface CheckboxStyleProps { color: string | null; + gridProps?: PropertySectionGridProps; } export interface GQLEditCheckboxMutationData { diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/DateTimeWidgetPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/DateTimeWidgetPropertySection.tsx index e610513c34..2f4550a6be 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/DateTimeWidgetPropertySection.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/DateTimeWidgetPropertySection.tsx @@ -26,19 +26,51 @@ import { } from './DateTimeWidgetPropertySection.types'; import { PropertySectionLabel } from './PropertySectionLabel'; -const useStyle = makeStyles()((theme, { backgroundColor, foregroundColor, italic, bold }) => ({ - style: { - backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : null, - color: foregroundColor ? getCSSColor(foregroundColor, theme) : null, - fontStyle: italic ? 'italic' : null, - fontWeight: bold ? 'bold' : null, - }, - textfield: { - marginTop: theme.spacing(0.5), - marginBottom: theme.spacing(0.5), - }, - input: {}, -})); +const useStyle = makeStyles()( + (theme, { backgroundColor, foregroundColor, italic, bold, gridProps }) => { + const { + gridTemplateColumns, + gridTemplateRows, + labelGridColumn, + labelGridRow, + widgetGridColumn, + widgetGridRow, + gap, + } = { + ...gridProps, + }; + return { + inputStyle: { + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : null, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + }, + propertySectionLabel: { + marginTop: theme.spacing(0.5), + marginBottom: theme.spacing(0.5), + gridColumn: labelGridColumn, + gridRow: labelGridRow, + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + input: {}, + propertySection: { + display: 'grid', + gridTemplateColumns, + gridTemplateRows, + alignItems: 'center', + gap: gap ?? '', + }, + propertySectionWidget: { + gridColumn: widgetGridColumn, + gridRow: widgetGridRow, + }, + }; + } +); export const editDateTimeMutation = gql` mutation editDateTime($input: EditDateTimeInput!) { @@ -71,6 +103,7 @@ export const DateTimeWidgetPropertySection: PropertySectionComponent) => { if (!event.currentTarget.contains(event.relatedTarget)) { onBlur(); } - }}> - - + }} + className={classes.propertySection}> +
+ +
+
+ 0} + helperText={widget.diagnostics[0]?.message} + InputProps={ + widget.style + ? { + className: classes.inputStyle, + } + : {} + } + inputProps={{ + 'data-testid': `datetime-${widget.label}`, + className: classes.input, + }} + onChange={onChange} + onKeyPress={onKeyPress} + /> +
); }; diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/DateTimeWidgetPropertySection.types.ts b/packages/forms/frontend/sirius-components-forms/src/propertysections/DateTimeWidgetPropertySection.types.ts index 03682d4ed2..6a5ae3d242 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/DateTimeWidgetPropertySection.types.ts +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/DateTimeWidgetPropertySection.types.ts @@ -11,12 +11,14 @@ * Obeo - initial API and implementation *******************************************************************************/ import { GQLErrorPayload, GQLSuccessPayload } from '@eclipse-sirius/sirius-components-core'; +import { PropertySectionGridProps } from './PropertySection.types'; export interface DateTimeStyleProps { foregroundColor: string | null; backgroundColor: string | null; italic: boolean | null; bold: boolean | null; + gridProps?: PropertySectionGridProps; } export interface DataTimeWidgetPropertySectionState { 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 395ce6ccf5..fa954c5a29 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/LabelWidgetPropertySection.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/LabelWidgetPropertySection.tsx @@ -36,6 +36,9 @@ const useStyle = makeStyles()( flexDirection: 'row', gap: theme.spacing(2), }, + propertySectionLabel: { + width: 'min-content', + }, }) ); @@ -55,7 +58,9 @@ export const LabelWidgetPropertySection: PropertySectionComponent - +
+ +
{widget.stringValue}
); 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 c878e130f5..fec8535931 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/MultiSelectPropertySection.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/MultiSelectPropertySection.tsx @@ -34,21 +34,53 @@ import { PropertySectionLabel } from './PropertySectionLabel'; import { getTextDecorationLineValue } from './getTextDecorationLineValue'; const useStyle = makeStyles()( - (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough }) => ({ - style: { - backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : null, - color: foregroundColor ? getCSSColor(foregroundColor, theme) : null, - fontSize: fontSize ? fontSize : null, - fontStyle: italic ? 'italic' : null, - fontWeight: bold ? 'bold' : null, - textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), - paddingTop: theme.spacing(0.5), - paddingBottom: theme.spacing(0.5), - }, - iconRoot: { - minWidth: theme.spacing(1), - }, - }) + (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough, gridProps }) => { + const { + gridTemplateColumns, + gridTemplateRows, + labelGridColumn, + labelGridRow, + widgetGridColumn, + widgetGridRow, + gap, + } = { + ...gridProps, + }; + return { + style: { + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : null, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : null, + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + paddingTop: theme.spacing(0.5), + paddingBottom: theme.spacing(0.5), + }, + iconRoot: { + minWidth: theme.spacing(1), + }, + propertySection: { + display: 'grid', + gridTemplateColumns, + gridTemplateRows, + alignItems: 'center', + gap: gap ?? '', + }, + propertySectionLabel: { + gridColumn: labelGridColumn, + gridRow: labelGridRow, + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + propertySectionWidget: { + gridColumn: widgetGridColumn, + gridRow: widgetGridRow, + }, + }; + } ); export const editMultiSelectMutation = gql` @@ -91,6 +123,7 @@ export const MultiSelectPropertySection: PropertySectionComponent 0}> - - - {widget.diagnostics[0]?.message} + 0} className={classes.propertySection}> +
+ +
+
+ + {widget.diagnostics[0]?.message} +
); }; diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/MultiSelectPropertySection.types.ts b/packages/forms/frontend/sirius-components-forms/src/propertysections/MultiSelectPropertySection.types.ts index e928e1237b..59b81674a7 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/MultiSelectPropertySection.types.ts +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/MultiSelectPropertySection.types.ts @@ -11,6 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ import { GQLMessage } from '@eclipse-sirius/sirius-components-core'; +import { PropertySectionGridProps } from './PropertySection.types'; export interface MultiSelectStyleProps { backgroundColor: string | null; @@ -20,6 +21,7 @@ export interface MultiSelectStyleProps { bold: boolean | null; underline: boolean | null; strikeThrough: boolean | null; + gridProps?: PropertySectionGridProps; } export interface GQLEditMultiSelectMutationData { diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/PropertySection.types.ts b/packages/forms/frontend/sirius-components-forms/src/propertysections/PropertySection.types.ts index 8608684c0d..ba6f00b962 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/PropertySection.types.ts +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/PropertySection.types.ts @@ -18,3 +18,13 @@ export interface PropertySectionProps { widget: GQLWidget; readOnly: boolean; } + +export interface PropertySectionGridProps { + gridTemplateColumns: string; + gridTemplateRows: string; + labelGridColumn: string; + labelGridRow: string; + widgetGridColumn: string; + widgetGridRow: string; + gap: string; +} 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 bb75360405..706c5ca71e 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/PropertySectionLabel.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/PropertySectionLabel.tsx @@ -23,6 +23,8 @@ const usePropertySectionLabelStyles = makeStyles()((theme) => ({ flexDirection: 'row', alignItems: 'center', gap: theme.spacing(1), + justifyContent: 'space-between', + width: '100%', }, typography: { lineHeight: '1.5', diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/SelectPropertySection.tsx b/packages/forms/frontend/sirius-components-forms/src/propertysections/SelectPropertySection.tsx index 72f54f68a0..72207036bc 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/SelectPropertySection.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/SelectPropertySection.tsx @@ -32,19 +32,51 @@ import { import { getTextDecorationLineValue } from './getTextDecorationLineValue'; const useStyle = makeStyles()( - (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough }) => ({ - style: { - backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : null, - color: foregroundColor ? getCSSColor(foregroundColor, theme) : null, - fontSize: fontSize ? fontSize : null, - fontStyle: italic ? 'italic' : null, - fontWeight: bold ? 'bold' : null, - textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), - }, - iconRoot: { - minWidth: theme.spacing(3), - }, - }) + (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough, gridProps }) => { + const { + gridTemplateColumns, + gridTemplateRows, + labelGridColumn, + labelGridRow, + widgetGridColumn, + widgetGridRow, + gap, + } = { + ...gridProps, + }; + return { + style: { + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : null, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : null, + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: getTextDecorationLineValue(underline, strikeThrough), + }, + iconRoot: { + minWidth: theme.spacing(3), + }, + propertySection: { + display: 'grid', + gridTemplateColumns, + gridTemplateRows, + alignItems: 'center', + gap: gap ?? '', + }, + propertySectionLabel: { + gridColumn: labelGridColumn, + gridRow: labelGridRow, + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + propertySectionWidget: { + gridColumn: widgetGridColumn, + gridRow: widgetGridRow, + }, + }; + } ); export const editSelectMutation = gql` @@ -86,6 +118,7 @@ export const SelectPropertySection: PropertySectionComponent = ({ bold: widget.style?.bold ?? null, underline: widget.style?.underline ?? null, strikeThrough: widget.style?.strikeThrough ?? null, + gridProps: widget.style?.widgetGridLayout ?? null, }; const { classes } = useStyle(props); @@ -121,38 +154,28 @@ export const SelectPropertySection: PropertySectionComponent = ({ }, [loading, error, data]); return ( - 0}> - - - None - - {widget.options.map((option) => ( = ({ } : {} }> - {option.iconURL.length > 0 && ( - - - - )} - - {option.label} + None - ))} - - {widget.diagnostics[0]?.message} + {widget.options.map((option) => ( + + {option.iconURL.length > 0 && ( + + + + )} + + {option.label} + + ))} + + {widget.diagnostics[0]?.message} +
); }; diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/SelectPropertySection.types.ts b/packages/forms/frontend/sirius-components-forms/src/propertysections/SelectPropertySection.types.ts index 27ed7589c3..a9017c4859 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/SelectPropertySection.types.ts +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/SelectPropertySection.types.ts @@ -11,6 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ import { GQLMessage } from '@eclipse-sirius/sirius-components-core'; +import { PropertySectionGridProps } from './PropertySection.types'; export interface SelectStyleProps { backgroundColor: string | null; @@ -20,6 +21,7 @@ export interface SelectStyleProps { bold: boolean | null; underline: boolean | null; strikeThrough: boolean | null; + gridProps?: PropertySectionGridProps; } export interface GQLEditSelectMutationData { 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 529f1f5831..4dff90a008 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/TextfieldPropertySection.tsx +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/TextfieldPropertySection.tsx @@ -50,24 +50,57 @@ import { import { getTextDecorationLineValue } from './getTextDecorationLineValue'; const useStyle = makeStyles()( - (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough }) => ({ - style: { - backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : null, - color: foregroundColor ? getCSSColor(foregroundColor, theme) : null, - fontSize: fontSize ? fontSize : null, - fontStyle: italic ? 'italic' : null, - fontWeight: bold ? 'bold' : null, - textDecorationLine: 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), - }, - }) + (theme, { backgroundColor, foregroundColor, fontSize, italic, bold, underline, strikeThrough, gridProps }) => { + const { + gridTemplateColumns, + gridTemplateRows, + labelGridColumn, + labelGridRow, + widgetGridColumn, + widgetGridRow, + gap, + } = { + ...gridProps, + }; + return { + style: { + backgroundColor: backgroundColor ? getCSSColor(backgroundColor, theme) : null, + color: foregroundColor ? getCSSColor(foregroundColor, theme) : null, + fontSize: fontSize ? fontSize : null, + fontStyle: italic ? 'italic' : null, + fontWeight: bold ? 'bold' : null, + textDecorationLine: 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), + }, + formControl: {}, + propertySection: { + display: 'grid', + gridTemplateColumns, + gridTemplateRows, + alignItems: 'center', + gap: gap ?? '', + }, + propertySectionLabel: { + gridColumn: labelGridColumn, + gridRow: labelGridRow, + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + propertySectionWidget: { + gridColumn: widgetGridColumn, + gridRow: widgetGridRow, + }, + }; + } ); export const getCompletionProposalsQuery = gql` @@ -142,6 +175,7 @@ export const TextfieldPropertySection: PropertySectionComponent ); } - return (
) => { if (!event.currentTarget.contains(event.relatedTarget)) { onBlur(); } - }}> - - 0} - helperText={widget.diagnostics[0]?.message} - inputRef={inputElt} - className={classes.textfield} - InputProps={ - widget.style - ? { - className: classes.style, - } - : {} - } - inputProps={{ - 'data-testid': `input-${widget.label}`, - className: classes.input, - }} - /> - {proposalsList} + }} + className={classes.propertySection}> +
+ +
+
+ 0} + helperText={widget.diagnostics[0]?.message} + inputRef={inputElt} + className={classes.textfield} + InputProps={ + widget.style + ? { + className: classes.style, + } + : {} + } + inputProps={{ + 'data-testid': `input-${widget.label}`, + className: classes.input, + }} + /> + {proposalsList} +
); }; diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/TextfieldPropertySection.types.ts b/packages/forms/frontend/sirius-components-forms/src/propertysections/TextfieldPropertySection.types.ts index 096df6b775..f5db61b2b0 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/TextfieldPropertySection.types.ts +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/TextfieldPropertySection.types.ts @@ -11,6 +11,7 @@ * Obeo - initial API and implementation *******************************************************************************/ import { GQLMessage } from '@eclipse-sirius/sirius-components-core'; +import { PropertySectionGridProps } from './PropertySection.types'; export interface TextfieldStyleProps { backgroundColor: string | null; @@ -20,6 +21,7 @@ export interface TextfieldStyleProps { bold: boolean | null; underline: boolean | null; strikeThrough: boolean | null; + gridProps?: PropertySectionGridProps; } export interface TextFieldState { diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/__tests__/__snapshots__/ButtonPropertySection.test.tsx.snap b/packages/forms/frontend/sirius-components-forms/src/propertysections/__tests__/__snapshots__/ButtonPropertySection.test.tsx.snap index 76f2b9dcb0..8cb90e2a4f 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/__tests__/__snapshots__/ButtonPropertySection.test.tsx.snap +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/__tests__/__snapshots__/ButtonPropertySection.test.tsx.snap @@ -7,7 +7,7 @@ exports[`should display the error received 1`] = ` class="css-cs36e2-propertySection" >
-
@@ -63,13 +60,29 @@ exports[`should display the error received 2`] = `
-
@@ -121,14 +115,45 @@ exports[`should display the error received 2`] = ` exports[`should render a checkbox with help hint 1`] = `
-
+
@@ -151,41 +176,7 @@ exports[`should render a checkbox with help hint 1`] = ` /> - -
-
- CheckboxLabel -
-
- -
-
- - -

+

`; @@ -193,14 +184,30 @@ exports[`should render a checkbox with help hint 1`] = ` exports[`should render a readOnly checkbox 1`] = `
-
`; @@ -250,14 +238,30 @@ exports[`should render a readOnly checkbox 1`] = ` exports[`should render a readOnly checkbox from widget properties 1`] = `
-
`; @@ -307,13 +292,29 @@ exports[`should render a readOnly checkbox from widget properties 1`] = ` exports[`should render the checkbox 1`] = `
-
+`; + +exports[`should render the checkbox with empty style 1`] = ` + +
+
+
- - -

-

-
-`; - -exports[`should render the checkbox with empty style 1`] = ` - -
-
-
@@ -424,13 +403,29 @@ exports[`should render the checkbox with style 1`] = `
-
@@ -483,13 +459,29 @@ exports[`should render the checkbox without style 1`] = `
-
@@ -541,13 +514,29 @@ exports[`should render the checkbox without style 1`] = ` exports[`should send mutation when clicked 1`] = `
-
`; @@ -598,13 +568,29 @@ exports[`should send mutation when clicked 1`] = ` exports[`should send mutation when clicked 2`] = `
-
`; diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/__tests__/__snapshots__/FlexboxContainerPropertySection.test.tsx.snap b/packages/forms/frontend/sirius-components-forms/src/propertysections/__tests__/__snapshots__/FlexboxContainerPropertySection.test.tsx.snap index 64f787200a..3700e3cc9a 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/__tests__/__snapshots__/FlexboxContainerPropertySection.test.tsx.snap +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/__tests__/__snapshots__/FlexboxContainerPropertySection.test.tsx.snap @@ -7,7 +7,7 @@ exports[`should render the flexbox container with border style 1`] = ` data-testid="flexbox-label" >
-
- myLabel -
+ class="css-e81ojj-propertySectionLabel" + > +
+ myLabel +
+
+

-
- myLabel -
- + myLabel +
+
+ +

-
- myLabel -
+ class="css-e81ojj-propertySectionLabel" + > +
+ myLabel +
+
+

-
- MultiSelectLabel -
+ class="css-e81ojj-propertySectionLabel" + > +
+ MultiSelectLabel +
+
+
+ +
- -
-

@@ -68,75 +76,83 @@ exports[`should render the multiSelect help hint 1`] = `
-
- MultiSelectLabel -
+
+ MultiSelectLabel +
+
+ +
+
+
+
+ +
-
-
- - -
-

@@ -146,60 +162,68 @@ exports[`should render the multiSelect with empty style 1`] = `
-
- MultiSelectLabel -
+ class="css-e81ojj-propertySectionLabel" + > +
+ MultiSelectLabel +
+
+
+ +
- -
-

@@ -209,60 +233,68 @@ exports[`should render the multiSelect with style 1`] = `
-
- MultiSelectLabel -
+ class="css-e81ojj-propertySectionLabel" + > +
+ MultiSelectLabel +
+
+
+ +
- -
-

@@ -272,60 +304,68 @@ exports[`should render the multiSelect without style 1`] = `
-
- MultiSelectLabel -
+ class="css-e81ojj-propertySectionLabel" + > +
+ MultiSelectLabel +
+
+
+ +
- -
-

diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/__tests__/__snapshots__/RadioPropertySection.test.tsx.snap b/packages/forms/frontend/sirius-components-forms/src/propertysections/__tests__/__snapshots__/RadioPropertySection.test.tsx.snap index 95edfea59d..8a5abc0266 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/__tests__/__snapshots__/RadioPropertySection.test.tsx.snap +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/__tests__/__snapshots__/RadioPropertySection.test.tsx.snap @@ -7,7 +7,7 @@ exports[`should display the error received 1`] = ` class="MuiFormControl-root css-1nrlq1o-MuiFormControl-root" >
-
- SelectLabel -
+ class="css-e81ojj-propertySectionLabel" + > +
+ SelectLabel +
+
+
- -
-

@@ -66,58 +74,66 @@ exports[`should render the select with empty style 1`] = `
-
- SelectLabel -
+ class="css-e81ojj-propertySectionLabel" + > +
+ SelectLabel +
+
+
- -
-

@@ -127,73 +143,81 @@ exports[`should render the select with help hint 1`] = `
-
- SelectLabel -
+
+ SelectLabel +
+
+ +
+
+
+
+ +
-
-
- - -
-

@@ -203,58 +227,66 @@ exports[`should render the select with style 1`] = `
-
- SelectLabel -
+ class="css-e81ojj-propertySectionLabel" + > +
+ SelectLabel +
+
+
- -
-

@@ -264,58 +296,66 @@ exports[`should render the select without style 1`] = `
-
- SelectLabel -
+ class="css-e81ojj-propertySectionLabel" + > +
+ SelectLabel +
+
+
- -
-

diff --git a/packages/forms/frontend/sirius-components-forms/src/propertysections/__tests__/__snapshots__/SplitButtonPropertySection.test.tsx.snap b/packages/forms/frontend/sirius-components-forms/src/propertysections/__tests__/__snapshots__/SplitButtonPropertySection.test.tsx.snap index c29483d32c..affaf3aaee 100644 --- a/packages/forms/frontend/sirius-components-forms/src/propertysections/__tests__/__snapshots__/SplitButtonPropertySection.test.tsx.snap +++ b/packages/forms/frontend/sirius-components-forms/src/propertysections/__tests__/__snapshots__/SplitButtonPropertySection.test.tsx.snap @@ -7,7 +7,7 @@ exports[`should display the error received 1`] = ` class="css-1yfdnbv-style" >
-
+
-
- Name: -
+ class="css-e81ojj-propertySectionLabel" + > +
+ Name: +
+
+
- + class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth MuiTextField-root css-xhyru6-textfield css-1z10yd4-MuiFormControl-root-MuiTextField-root" + data-testid="Name:" + spellcheck="false" + > +
+ +
@@ -41,37 +51,47 @@ exports[`should display the edited value 1`] = ` exports[`should display the edited value 2`] = `
-
+
-
- Name: -
+ class="css-e81ojj-propertySectionLabel" + > +
+ Name: +
+
+
- + class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth MuiTextField-root css-xhyru6-textfield css-1z10yd4-MuiFormControl-root-MuiTextField-root" + data-testid="Name:" + spellcheck="false" + > +
+ +
@@ -80,37 +100,47 @@ exports[`should display the edited value 2`] = ` exports[`should display the edited value 3`] = `
-
+
-
- Name: -
+ class="css-e81ojj-propertySectionLabel" + > +
+ Name: +
+
+
- + class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth MuiTextField-root css-xhyru6-textfield css-1z10yd4-MuiFormControl-root-MuiTextField-root" + data-testid="Name:" + spellcheck="false" + > +
+ +
@@ -122,37 +152,47 @@ exports[`should not trigger completion request if not configured 1`] = ` style="" >
-
+
-
- Text: -
+ class="css-e81ojj-propertySectionLabel" + > +
+ Text: +
+
+
- +
+ +
@@ -165,37 +205,47 @@ exports[`should not trigger completion request if not configured 2`] = ` style="" >
-
+
-
- Text: -
+ class="css-e81ojj-propertySectionLabel" + > +
+ Text: +
+
+
- +
+ +
@@ -208,37 +258,47 @@ exports[`should not trigger completion request if not configured 3`] = ` style="" >
-
+
-
- Text: -
+ class="css-e81ojj-propertySectionLabel" + > +
+ Text: +
+
+
- +
+ +
@@ -248,38 +308,48 @@ exports[`should not trigger completion request if not configured 3`] = ` exports[`should render a readOnly textfield 1`] = `
-
+
-
- Name: -
+ class="css-e81ojj-propertySectionLabel" + > +
+ Name: +
+
+
- + class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth MuiTextField-root css-xhyru6-textfield css-1z10yd4-MuiFormControl-root-MuiTextField-root" + data-testid="Name:" + spellcheck="false" + > +
+ +
@@ -288,38 +358,48 @@ exports[`should render a readOnly textfield 1`] = ` exports[`should render a readOnly textfield from widget properties 1`] = `
-
+
-
- Name: -
+ class="css-e81ojj-propertySectionLabel" + > +
+ Name: +
+
+
- + class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth MuiTextField-root css-xhyru6-textfield css-1z10yd4-MuiFormControl-root-MuiTextField-root" + data-testid="Name:" + spellcheck="false" + > +
+ +
@@ -328,49 +408,14 @@ exports[`should render a readOnly textfield from widget properties 1`] = ` exports[`should render the textfield 1`] = `
-
-
-
- Name: -
-
-
+
- -
-
-
-
-`; - -exports[`should render the textfield with empty style 1`] = ` - -
-
-
+
+
- +
`; -exports[`should render the textfield with help hint 1`] = ` -
+exports[`should render the textfield with empty style 1`] = ` +
-
- Name: -
-
+
- +
-
-
- + class="css-19oeos1-propertySectionWidget" + > +
+
+ +
+
-
+ `; -exports[`should render the textfield with style 1`] = ` - -
-
+exports[`should render the textfield with help hint 1`] = ` +
+
+
+ > + +
+
+
- +
`; -exports[`should render the textfield without style 1`] = ` +exports[`should render the textfield with style 1`] = `
-
+
-
- Name: -
+
+ Name: +
+
+
+
+
+ class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth MuiTextField-root css-xhyru6-textfield css-1z10yd4-MuiFormControl-root-MuiTextField-root" + data-testid="Name:" + spellcheck="false" + > +
+ +
+
+
+
+ +`; + +exports[`should render the textfield without style 1`] = ` + +
+
- + Name: +
+
+
+
+
+ +
+
+
@@ -545,37 +675,47 @@ exports[`should render the textfield without style 1`] = ` exports[`should support completion if configured 1`] = `
-
+
-
- Text: -
+ class="css-e81ojj-propertySectionLabel" + > +
+ Text: +
+
+
- +
+ +
@@ -586,37 +726,47 @@ exports[`should support completion if configured 1`] = ` exports[`should support completion if configured 2`] = `
-
+
-
- Text: -
+ class="css-e81ojj-propertySectionLabel" + > +
+ Text: +
+
+
- +
+ +
@@ -631,37 +781,47 @@ exports[`should support completion if configured 3`] = `