[3208] Fix splitbutton default style in form editor

Bug: #3208
Signed-off-by: Michaël Charfadi <michael.charfadi@obeosoft.com>

CHANGELOG.adoc

@@ -104,6 +104,7 @@ The implemented fix does not allow to evaluate an AQL expression, but only to re
 - https://github.com/eclipse-sirius/sirius-web/issues/3149[#3149] [diagram] Fix an issue where newly created border nodes could overlap existing one
 - https://github.com/eclipse-sirius/sirius-web/issues/3217[#3217] [diagram] Prevent helper lines to be displayed on moving a pinned node
 - https://github.com/eclipse-sirius/sirius-web/issues/3215[#3215] [vscode] Fix an issue where it was impossible to delete elements on a diagram from the VSCode extension.
+- https://github.com/eclipse-sirius/sirius-web/issues/3208[#3208] [form] Fix an issue with splitbutton default style in form editor
 
 === New Features
 

packages/formdescriptioneditors/frontend/sirius-components-formdescriptioneditors/src/SplitButtonWidget.tsx

@@ -83,7 +83,7 @@ const useStyles = makeStyles<Theme>((theme) => ({
   },
   helpOutlineOutlined: {
     marginLeft: theme.spacing(1),
-    fontSize: theme.spacing(2),
+    fontSize: theme.typography.subtitle1.fontSize,
   },
   dragOver: {
     borderWidth: '1px',
@@ -180,6 +180,7 @@ export const SplitButtonWidget = ({ widget, editingContextId, representationId }
         actionsButtonLabel: actionsButtonLabel,
         actionsImageURL: actionsImageURL,
         actionsIsValidImage: actionsIsValidImage,
+        selectedIndex: state.selectedIndex >= widget.actions.length - 1 ? 0 : state.selectedIndex,
       };
     });
   }, [
@@ -253,11 +254,11 @@ export const SplitButtonWidget = ({ widget, editingContextId, representationId }
   };
 
   const getStyle = (index: number): React.CSSProperties => {
-    if (widget.actions.length == 0) {
+    if (!widget.actions.at(index) || !widget.actions.at(index).style) {
       const defaultProps = {
         backgroundColor: null,
         foregroundColor: null,
-        fontSize: null,
+        fontSize: theme.typography.subtitle2.fontSize,
         italic: null,
         bold: null,
         underline: null,

packages/forms/frontend/sirius-components-forms/src/form/FormEventFragments.types.ts

@@ -290,7 +290,7 @@ export interface GQLSplitButton extends GQLWidget {
 export interface GQLButtonStyle {
   backgroundColor: string | null;
   foregroundColor: string | null;
-  fontSize: number | null;
+  fontSize: number | string | null;
   italic: boolean | null;
   bold: boolean | null;
   underline: boolean | null;

packages/forms/frontend/sirius-components-forms/src/propertysections/ButtonPropertySection.types.ts

@@ -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
@@ -23,7 +23,7 @@ export interface ButtonPropertySectionProps {
 export interface ButtonStyleProps {
   backgroundColor: string | null;
   foregroundColor: string | null;
-  fontSize: number | null;
+  fontSize: number | string | null;
   italic: boolean | null;
   bold: boolean | null;
   underline: boolean | null;

packages/forms/frontend/sirius-components-forms/src/toolbaraction/ToolbarAction.types.ts

@@ -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
@@ -22,7 +22,7 @@ export interface ToolbarActionProps {
 export interface ToolbarActionStyleProps {
   backgroundColor: string | null;
   foregroundColor: string | null;
-  fontSize: number | null;
+  fontSize: number | string | null;
   italic: boolean | null;
   bold: boolean | null;
   underline: boolean | null;