fix(FormGroup): fix font-weight and truncate overflowing text of ti…

…tle (#5584)

Fixes #5578

This commit also refactors the `FormGroup` component to use CSS modules
instead of JSS

packages/main/src/components/FormGroup/FormGroupTitle.module.css

@@ -0,0 +1,16 @@
+.title {
+  grid-column: 1 / span 12;
+  height: var(--_ui5wcr-FormGroupTitleHeight);
+  line-height: var(--_ui5wcr-FormGroupTitleHeight);
+  font-family: var(--sapFontHeaderFamily);
+  color: var(--sapGroup_TitleTextColor);
+  font-size: var(--sapFontHeader6Size);
+  margin: 0;
+  margin-block-start: 1rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  /*  overwrite h5 styles */
+  font-weight: unset;
+  margin-block-end: unset;
+}

packages/main/src/components/FormGroup/FormGroupTitle.tsx

@@ -1,34 +1,17 @@
-import { CssSizeVariables, ThemingParameters } from '@ui5/webcomponents-react-base';
+import { useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import React, { type ElementType } from 'react';
-import { createUseStyles } from 'react-jss';
+import { classNames, styleData } from './FormGroupTitle.module.css.js';
 import type { FormGroupPropTypes } from './index.js';
 
-const useStyles = createUseStyles(
-  {
-    title: {
-      gridColumn: '1 / span 12',
-      display: 'flex',
-      alignItems: 'center',
-      height: CssSizeVariables.ui5WcrFormGroupTitleHeight,
-      lineHeight: CssSizeVariables.ui5WcrFormGroupTitleHeight,
-      fontFamily: ThemingParameters.sapFontHeaderFamily,
-      color: ThemingParameters.sapGroup_TitleTextColor,
-      fontSize: ThemingParameters.sapFontHeader6Size,
-      fontWeight: 'bold',
-      margin: 0,
-      marginBlockStart: '1rem'
-    }
-  },
-  { name: 'FormGroupTitle' }
-);
 export function FormGroupTitle({ as, className, titleText, style, ...rest }: Omit<FormGroupPropTypes, 'children'>) {
-  const classes = useStyles();
+  useStylesheet(styleData, FormGroupTitle.displayName);
   const CustomTag = as as ElementType;
+
   return (
     <CustomTag
       {...rest}
-      className={clsx(classes.title, className)}
+      className={clsx(classNames.title, className)}
       title={titleText}
       aria-label={titleText}
       data-component-name="FormGroupTitle"
@@ -38,3 +21,5 @@ export function FormGroupTitle({ as, className, titleText, style, ...rest }: Omi
     </CustomTag>
   );
 }
+
+FormGroupTitle.displayName = 'FormGroupTitle';