[4426] Remove last usages of mui styled pattern

Bug: eclipse-sirius#4426
Signed-off-by: Florian ROUËNÉ <[email protected]>

CHANGELOG.adoc

@@ -104,6 +104,8 @@ Note that you may need to encode special characters like `[`(by `%5B`) and `]` (
 - https://github.com/eclipse-sirius/sirius-web/issues/4381[#4381] [trees] Set activeFilterIds variable in DefaultExpandAllTreePathHandler.
 - https://github.com/eclipse-sirius/sirius-web/issues/3533[#3553] [diagram] Add a dedicated component to handle diagram subscription
 - https://github.com/eclipse-sirius/sirius-web/issues/4346[#4346] [query] Improve the performance of the Query view with large sets of data.
+- https://github.com/eclipse-sirius/sirius-web/issues/4426[#4426] [deck] Remove last usages of mui `styled` pattern.
+
 
 == v2025.1.0
 

packages/deck/frontend/sirius-components-deck/src/card/DeckCard.tsx

@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2024 Obeo.
+ * Copyright (c) 2024, 2025 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
@@ -15,12 +15,11 @@ import { Theme, useTheme } from '@mui/material/styles';
 import { CSSProperties, useRef } from 'react';
 import { makeStyles } from 'tss-react/mui';
 import { DeckInput } from '../common/DeckInput';
-import { DeckTitle, titleFontStyle } from '../styled/DeckStyledComponents';
 import { DeckCardProps, UpdateCardProps } from './DeckCard.types';
 import { DeckDeleteButton } from './DeckDeleteButton';
 import { DeckTag } from './DeckTag';
 
-const useStyles = makeStyles()((theme: Theme) => ({
+const useStyles = makeStyles<boolean>()((theme: Theme, draggable: boolean) => ({
   detail: {
     color: theme.palette.text.primary,
     whiteSpace: 'pre-wrap',
@@ -38,6 +37,11 @@ const useStyles = makeStyles()((theme: Theme) => ({
     width: ' 38%',
     paddingRight: '10px',
   },
+  title: {
+    width: '70%',
+    color: theme.palette.text.primary,
+    cursor: draggable ? 'grab' : `auto`,
+  },
   header: {
     marginBottom: '10px',
     display: 'flex',
@@ -70,6 +74,12 @@ const cardDetailFontStyle: CSSProperties = {
   minHeight: '20px',
 };
 
+const titleFontStyle: CSSProperties = {
+  fontWeight: 'bold',
+  fontSize: '14px',
+  lineHeight: '18px',
+};
+
 /**
  * A specific Card Component to handle selection and direct edit.
  * Copied and adapted from react-trello Card component.
@@ -101,7 +111,7 @@ export const DeckCard = ({
   };
 
   const theme: Theme = useTheme();
-  const { classes } = useStyles();
+  const { classes } = useStyles(cardDraggable);
 
   const cardStyle: React.CSSProperties = {
     border: editable ? `2px solid ${theme.palette.selected}` : undefined,
@@ -128,7 +138,11 @@ export const DeckCard = ({
       data-testid={`card-${title}`}
       onDragStart={(e) => e.preventDefault()}>
       <article className={classes.header}>
-        <DeckTitle draggable={cardDraggable} style={titleStyle} theme={theme} data-testid={`card-${title}-title`}>
+        <span
+          draggable={cardDraggable}
+          style={titleStyle}
+          data-testid={`card-${title}-title`}
+          className={classes.title}>
           {editable ? (
             <DeckInput
               ref={titleInputRef}
@@ -141,7 +155,7 @@ export const DeckCard = ({
           ) : (
             title
           )}
-        </DeckTitle>
+        </span>
         <span className={classes.rightContent} style={cardLabelFontStyle}>
           {editable ? (
             <DeckInput

packages/deck/frontend/sirius-components-deck/src/common/DeckInput.tsx

@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2024 Obeo.
+ * Copyright (c) 2025 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
@@ -10,38 +10,42 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-
 import TextField from '@mui/material/TextField';
-import { styled } from '@mui/material/styles';
 import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { makeStyles } from 'tss-react/mui';
 import { DeckCardInputProps } from './DeckInput.types';
 
+const useStyles = makeStyles()((theme) => ({
+  textField: {
+    '& .MuiInputBase-multiline': {
+      padding: '0px 0px 0px 0px',
+    },
+    '& input': {
+      padding: '0px 0px 0px 0px',
+    },
+    '& input:focus': {
+      backgroundColor: 'white',
+      boxShadow: `inset 0 0 0 1px ${theme.palette.secondary.light}`,
+    },
+    '& textarea': {
+      padding: '0px 0px 0px 0px',
+    },
+    '& textarea:focus': {
+      backgroundColor: 'white',
+      boxShadow: `inset 0 0 0 1px ${theme.palette.secondary.light}`,
+    },
+  },
+}));
+
 /**
  * Inspired from react-trello InlineInput component.
  */
 export const DeckInput = forwardRef(
   ({ value, placeholder, onSave, style, multiline, ...otherProps }: DeckCardInputProps, ref) => {
-    const StyledTextField = styled(TextField)(({ theme }) => ({
-      '& .MuiInputBase-multiline': {
-        padding: '0px 0px 0px 0px',
-      },
-      '& input': {
-        padding: '0px 0px 0px 0px',
-      },
-      '& input:focus': {
-        backgroundColor: 'white',
-        boxShadow: `inset 0 0 0 1px ${theme.palette.secondary.light}`,
-      },
-      '& textarea': {
-        padding: '0px 0px 0px 0px',
-      },
-      '& textarea:focus': {
-        backgroundColor: 'white',
-        boxShadow: `inset 0 0 0 1px ${theme.palette.secondary.light}`,
-      },
-    }));
+    const { classes } = useStyles();
     const onFocus = (e) => e.target.select();
     const textInput = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);
+
     // This is the way to select all text if mouse clicked
     const onMouseDown = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
       if (document.activeElement != e.target) {
@@ -89,7 +93,8 @@ export const DeckInput = forwardRef(
 
     useImperativeHandle(ref, () => textInput.current);
     return (
-      <StyledTextField
+      <TextField
+        className={classes.textField}
         inputRef={textInput}
         onMouseDown={onMouseDown}
         onFocus={onFocus}

packages/deck/frontend/sirius-components-deck/src/laneHeader/DeckLaneHeader.tsx

@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2024 Obeo.
+ * Copyright (c) 2024, 2025 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
@@ -12,18 +12,33 @@
  *******************************************************************************/
 
 import MoreVertIcon from '@mui/icons-material/MoreVert';
-import { Theme, useTheme } from '@mui/material/styles';
 import { makeStyles } from 'tss-react/mui';
-import { useEffect, useRef } from 'react';
+import { CSSProperties, useEffect, useRef } from 'react';
 import { DeckInput } from '../common/DeckInput';
-import { LaneHeader } from '../styled/DeckLaneStyledComponents';
-import { DeckTitle, RightContent, titleFontStyle } from '../styled/DeckStyledComponents';
 import { DeckLaneHeaderProps } from './DeckLaneHeader.types';
 
 import IconButton from '@mui/material/IconButton';
 import { useLaneContextMenu } from './useLaneContextMenu';
 
-const useLaneHeaderStyle = makeStyles()((theme) => ({
+const useLaneHeaderStyle = makeStyles<boolean>()((theme, draggable) => ({
+  header: {
+    marginBottom: ' 10px',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    padding: '0px 5px',
+  },
+  title: {
+    width: '70%',
+    color: theme.palette.text.primary,
+    cursor: draggable ? 'grab' : `auto`,
+  },
+  rightContent: {
+    width: '38%',
+    textAlign: 'right',
+    paddingRight: '10px',
+    fontSize: '13px',
+  },
   more: {
     hover: {
       backgroundColor: theme.palette.action.hover,
@@ -34,6 +49,12 @@ const useLaneHeaderStyle = makeStyles()((theme) => ({
   },
 }));
 
+const titleFontStyle: CSSProperties = {
+  fontWeight: 'bold',
+  fontSize: '14px',
+  lineHeight: '18px',
+};
+
 export const DeckLaneHeader = ({
   updateTitle,
   editLaneTitle,
@@ -45,7 +66,6 @@ export const DeckLaneHeader = ({
   id,
   titleStyle = titleFontStyle,
 }: DeckLaneHeaderProps) => {
-  const theme: Theme = useTheme();
   const titleInputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);
   const headerRef = useRef<HTMLElement | null>(null);
   const { openContextMenu, contextMenu } = useLaneContextMenu(cards, id);
@@ -66,11 +86,15 @@ export const DeckLaneHeader = ({
     }
   };
 
-  const { classes } = useLaneHeaderStyle();
+  const { classes } = useLaneHeaderStyle(laneDraggable);
   return (
     <>
-      <LaneHeader onKeyDown={handleKeyDown} tabIndex={0} ref={headerRef}>
-        <DeckTitle draggable={laneDraggable} style={titleStyle} theme={theme} data-testid={`lane-${title}-title`}>
+      <header onKeyDown={handleKeyDown} tabIndex={0} ref={headerRef} className={classes.header}>
+        <span
+          draggable={laneDraggable}
+          style={titleStyle}
+          data-testid={`lane-${title}-title`}
+          className={classes.title}>
           {editLaneTitle ? (
             <DeckInput
               ref={titleInputRef}
@@ -83,12 +107,12 @@ export const DeckLaneHeader = ({
           ) : (
             title
           )}
-        </DeckTitle>
-        {label && <RightContent>{label}</RightContent>}
+        </span>
+        {label && <span className={classes.rightContent}>{label}</span>}
         <IconButton className={classes.more} size="small" onClick={openContextMenu} data-testid={`lane-${title}-more`}>
           <MoreVertIcon style={{ fontSize: 14 }} />
         </IconButton>
-      </LaneHeader>
+      </header>
       {contextMenu}
     </>
   );