Use @linagora/twake-mui 1.1.6 from registry

src/components/Event/AddDescButton.tsx

@@ -1,8 +1,9 @@
-import { Box, Button, TextField, useTheme } from "@linagora/twake-mui";
-import { alpha } from "@mui/material/styles";
+import { TextField } from "@linagora/twake-mui";
 import { Notes as NotesIcon } from "@mui/icons-material";
+import React from "react";
 import { useI18n } from "twake-i18n";
 import { FieldWithLabel } from "./components/FieldWithLabel";
+import { SectionPreviewRow } from "./components/SectionPreviewRow";
 
 export function AddDescButton({
   showDescription,
@@ -10,92 +11,72 @@ export function AddDescButton({
   showMore,
   description,
   setDescription,
-  buttonVariant,
-  buttonColor,
 }: {
   showDescription: boolean;
   setShowDescription: (b: boolean) => void;
   showMore: boolean;
   description: string;
   setDescription: (d: string) => void;
-  buttonVariant?: "text" | "outlined" | "contained";
-  buttonColor?:
-    | "inherit"
-    | "primary"
-    | "secondary"
-    | "success"
-    | "error"
-    | "info"
-    | "warning";
 }) {
   const { t } = useI18n();
-  const theme = useTheme();
+  const descriptionInputRef = React.useRef<HTMLTextAreaElement>(null);
+
+  React.useEffect(() => {
+    if (showDescription) {
+      descriptionInputRef.current?.focus();
+    }
+  }, [showDescription]);
+
+  const descriptionField = (
+    <FieldWithLabel
+      label={t("event.form.description")}
+      isExpanded={showMore}
+      sx={{ padding: 0, margin: 0 }}
+    >
+      <TextField
+        fullWidth
+        label=""
+        inputRef={descriptionInputRef}
+        inputProps={{ "aria-label": t("event.form.description") }}
+        placeholder={t("event.form.descriptionPlaceholder")}
+        value={description}
+        onChange={(e) => setDescription(e.target.value)}
+        size="small"
+        margin="dense"
+        multiline
+        minRows={2}
+        maxRows={10}
+        sx={{
+          "& .MuiInputBase-root": {
+            maxHeight: "33%",
+            overflowY: "auto",
+            padding: 0,
+          },
+          "& textarea": {
+            resize: "vertical",
+          },
+        }}
+      />
+    </FieldWithLabel>
+  );
+
+  if (showMore) {
+    return descriptionField;
+  }
+
   return (
     <>
       {!showDescription && (
-        <FieldWithLabel
-          label={showMore || showDescription ? t("event.form.description") : ""}
-          isExpanded={showMore}
-        >
-          {!showMore ? (
-            <Button
-              startIcon={<NotesIcon />}
-              onClick={() => setShowDescription(true)}
-              fullWidth
-              sx={{
-                justifyContent: "flex-start",
-                borderRadius: "4px",
-                color: alpha(theme.palette.grey[900], 0.9),
-              }}
-            >
-              {t("event.form.addDescription")}
-            </Button>
-          ) : (
-            <Box display="flex" gap={1}>
-              <Button
-                startIcon={<NotesIcon />}
-                onClick={() => setShowDescription(true)}
-                size="medium"
-                variant={buttonVariant}
-                color={buttonColor}
-              >
-                {t("event.form.addDescription")}
-              </Button>
-            </Box>
-          )}
-        </FieldWithLabel>
-      )}
-      {showDescription && (
-        <FieldWithLabel
-          label={t("event.form.description")}
-          isExpanded={showMore}
-          sx={{ padding: 0, margin: 0 }}
-        >
-          <TextField
-            fullWidth
-            label=""
-            inputProps={{ "aria-label": t("event.form.description") }}
-            placeholder={t("event.form.descriptionPlaceholder")}
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-            size="small"
-            margin="dense"
-            multiline
-            minRows={2}
-            maxRows={10}
-            sx={{
-              "& .MuiInputBase-root": {
-                maxHeight: "33%",
-                overflowY: "auto",
-                padding: 0,
-              },
-              "& textarea": {
-                resize: "vertical",
-              },
-            }}
-          />
+        <FieldWithLabel label="" isExpanded={showMore}>
+          <SectionPreviewRow
+            icon={<NotesIcon />}
+            onClick={() => setShowDescription(true)}
+          >
+            {t("event.form.addDescription")}
+          </SectionPreviewRow>
         </FieldWithLabel>
       )}
+      {showDescription && descriptionField}
     </>
   );
 }