@linagora/twake-mui 18.4.1 → 18.5.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# @linagora/twake-mui [18.5.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@18.4.1...@linagora/twake-mui@18.5.0) (2026-10-27)
+
+
+### Bug Fixes
+
+* **twake-mui:** Take the line heights and tracking of the small styles from the design ([bab4fa1](https://github.com/linagora/twake-ui/commit/bab4fa147fd55735c8e4396c364e19bc696099db))
+
+
+### Features
+
+* **twake-mui:** Add a body3 typography variant ([b1110b3](https://github.com/linagora/twake-ui/commit/b1110b328f29ad49714b138cceaf887236dad667))
+* **twake-mui:** Add an xsmall Button size ([6ca4db8](https://github.com/linagora/twake-ui/commit/6ca4db8105c37d87bec419b8a4bfe563e4d40098))
+* **twake-mui:** Set the button text to 14px at every size ([6587b37](https://github.com/linagora/twake-ui/commit/6587b377eea92cece727309b3ff76cec8e8dfd3e))
+
 ## @linagora/twake-mui [18.4.1](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@18.4.0...@linagora/twake-mui@18.4.1) (2026-10-23)
 
 

package/dist/components/NavText/NavPrimaryText.js

@@ -4,13 +4,16 @@ export const NavPrimaryText = styled('span', {
 })(({ theme, disableMobileView }) => ({
     fontSize: theme.typography.pxToRem(14),
     fontWeight: 500,
-    letterSpacing: '.15px',
+    lineHeight: 1.313,
+    letterSpacing: '.25px',
     ...(!disableMobileView && {
         [theme.breakpoints.down('lg')]: {
             display: 'block',
             textAlign: 'center',
             whiteSpace: 'nowrap',
-            fontSize: theme.typography.pxToRem(12)
+            fontSize: theme.typography.pxToRem(12),
+            // The design line height is for the sidebar, the bottom bar keeps its rows
+            lineHeight: 'inherit'
         }
     })
 }));

package/dist/lib/makeTypography.js

@@ -54,7 +54,7 @@ export const makeTypography = () => {
         subtitle2: {
             fontSize: 14,
             fontWeight: 600,
-            lineHeight: 1.334,
+            lineHeight: 1.313,
             letterSpacing: '0.25px'
         },
         body1: {
@@ -69,23 +69,30 @@ export const makeTypography = () => {
             lineHeight: 1.313,
             letterSpacing: '0.25px'
         },
+        body3: {
+            fontSize: 14,
+            fontWeight: 400,
+            lineHeight: 1.313,
+            letterSpacing: '0.25px'
+        },
         button: {
-            fontSize: 16,
+            fontSize: 14,
             fontWeight: 500,
             lineHeight: 1.313,
+            letterSpacing: '0.1px',
             textTransform: 'inherit'
         },
         caption: {
             fontSize: 12,
             fontWeight: 500,
-            lineHeight: 1.313,
+            lineHeight: 1.317,
             letterSpacing: '0.5px'
         },
         overline: {
             fontSize: 11,
             fontWeight: 500,
-            lineHeight: '16px',
-            letterSpacing: '0.5px',
+            lineHeight: '13px',
+            letterSpacing: '0.4px',
             textTransform: 'inherit'
         }
     };

package/dist/lib/overrides.js

@@ -212,14 +212,28 @@ export const overrides = {
                             }
                         }
                     })),
+                    {
+                        props: { size: 'xsmall' },
+                        style: {
+                            minWidth: 'auto',
+                            minHeight: 24,
+                            padding: '4px 8px',
+                            fontSize: theme.typography.pxToRem(11),
+                            lineHeight: '16px',
+                            letterSpacing: '0.5px'
+                        }
+                    },
+                    {
+                        props: { size: 'xsmall', variant: 'outlined' },
+                        style: { padding: '3px 7px' }
+                    },
                     // Vertical paddings sit 1px under cozy-ui's so the outlined border
                     // still fits the fixed heights cozy-ui forces (36, 40, 48).
                     {
                         props: { size: 'small' },
                         style: {
                             minHeight: 36,
-                            padding: '9px 16px',
-                            fontSize: theme.typography.pxToRem(13)
+                            padding: '9px 16px'
                         }
                     },
                     {
@@ -230,8 +244,7 @@ export const overrides = {
                         props: { size: 'large' },
                         style: {
                             minHeight: 48,
-                            padding: '13px 32px',
-                            fontSize: theme.typography.pxToRem(15)
+                            padding: '13px 32px'
                         }
                     },
                     {
@@ -257,6 +270,10 @@ export const overrides = {
                         props: { loadingPosition: 'end', variant: 'text' },
                         style: { right: 8 }
                     },
+                    {
+                        props: { loadingPosition: 'end', size: 'xsmall' },
+                        style: { right: 8 }
+                    },
                     {
                         props: { loadingPosition: 'end', size: 'small' },
                         style: { right: 16 }
@@ -983,6 +1000,7 @@ export const overrides = {
         }
     },
     MuiTypography: {
+        defaultProps: { variantMapping: { body3: 'p' } },
         styleOverrides: {
             root: ({ theme }) => ({
                 variants: [

package/dist/lib/types.d.ts

@@ -1,5 +1,6 @@
 import paletteJson from '@linagora/twake-css/palette.json';
 import { Shadows, TypographyVariantsOptions } from '@mui/material/styles';
+import type { CSSProperties } from 'react';
 export type PaletteJson = typeof paletteJson;
 export type PaletteColor = PaletteJson['Primary'];
 export type GreyPalette = PaletteJson['Grey'];
@@ -69,6 +70,12 @@ declare module '@mui/material/styles' {
     interface CssThemeVariables {
         enabled: true;
     }
+    interface TypographyVariants {
+        body3: CSSProperties;
+    }
+    interface TypographyVariantsOptions {
+        body3?: CSSProperties;
+    }
     interface TypeBackground {
         contrast: string;
     }
@@ -82,6 +89,11 @@ declare module '@mui/material/styles' {
         border?: Partial<BorderPalette>;
     }
 }
+declare module '@mui/material/Typography' {
+    interface TypographyPropsVariantOverrides {
+        body3: true;
+    }
+}
 declare module '@mui/material/IconButton' {
     interface IconButtonPropsSizeOverrides {
         xsmall: true;
@@ -97,4 +109,7 @@ declare module '@mui/material/Button' {
     interface ButtonPropsVariantOverrides {
         ghost: true;
     }
+    interface ButtonPropsSizeOverrides {
+        xsmall: true;
+    }
 }

package/dist/stories/Button.stories.js

@@ -3,7 +3,7 @@ import { Box, Stack } from '@mui/material';
 import React from 'react';
 import Button from '../components/Button';
 const variants = ['contained', 'outlined', 'ghost', 'text'];
-const sizes = ['small', 'medium', 'large'];
+const sizes = ['xsmall', 'small', 'medium', 'large'];
 const colors = [
     'inherit',
     'primary',

package/dist/stories/DatePicker.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Modes: Story;
+export declare const MonthPicker: Story;

package/dist/stories/DatePicker.stories.js

@@ -0,0 +1,98 @@
+import { Paper, Stack } from '@mui/material';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV2';
+import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { TimePicker } from '@mui/x-date-pickers/TimePicker';
+import { enUS } from 'date-fns/locale';
+import React, { useState } from 'react';
+const description = `
+To pick a date, a time or a month, use [MUI X Date Pickers](https://mui.com/x/react-date-pickers/), installed in the app with \`date-fns\`. Their popups are built on MUI components that twake-mui themes. Their field is a \`PickersTextField\`, which twake-mui does not theme yet: its radius, border colors and gutters still differ from a \`TextField\`.
+
+Wrap the app once in a \`LocalizationProvider\`, with the date-fns locale and the picker texts of the user's language. Twake apps use date-fns 2.30.0, so import the adapter from \`@mui/x-date-pickers/AdapterDateFnsV2\`:
+
+\`\`\`jsx
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV2'
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
+import { frFR } from '@mui/x-date-pickers/locales'
+import { fr } from 'date-fns/locale'
+
+<LocalizationProvider
+  dateAdapter={AdapterDateFns}
+  adapterLocale={fr}
+  localeText={frFR.components.MuiLocalizationProvider.defaultProps.localeText}
+>
+  <App />
+</LocalizationProvider>
+\`\`\`
+`;
+const MIN_DATE = new Date(2025, 0, 10);
+const getErrorMessage = (error) => {
+    if (error === 'minDate')
+        return 'The date must be on or after 01/10/2025';
+    if (error === 'invalidDate')
+        return 'Invalid date';
+    return null;
+};
+const ExampleDatePicker = () => {
+    const [value, setValue] = useState(new Date(2025, 0, 8));
+    const [error, setError] = useState(null);
+    return (React.createElement(DatePicker, { label: "Expiration date", value: value, minDate: MIN_DATE, onChange: setValue, onError: setError, slotProps: {
+            textField: { helperText: getErrorMessage(error) },
+            actionBar: { actions: ['clear', 'today', 'cancel', 'accept'] }
+        } }));
+};
+const ExampleModes = () => (React.createElement(Stack, { spacing: 2 },
+    React.createElement(TimePicker, { label: "Time", defaultValue: new Date(2025, 0, 15, 14, 30) }),
+    React.createElement(DateTimePicker, { label: "Date and time", defaultValue: new Date(2025, 0, 15, 14, 30) })));
+const ExampleMonthPicker = () => {
+    const [value, setValue] = useState(new Date(2025, 7));
+    return (React.createElement(Stack, { spacing: 2 },
+        React.createElement(Paper, null,
+            React.createElement(DateCalendar, { views: ['year', 'month'], openTo: "month", value: value, onChange: setValue })),
+        React.createElement(DatePicker, { label: "Month", views: ['year', 'month'], openTo: "month", value: value, onChange: setValue })));
+};
+const meta = {
+    title: 'DatePicker',
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        docs: { description: { component: description } }
+    },
+    decorators: [
+        (Story) => (React.createElement(LocalizationProvider, { dateAdapter: AdapterDateFns, adapterLocale: enUS },
+            React.createElement(Story, null)))
+    ]
+};
+export default meta;
+export const Default = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'A date field with `minDate`: `onError` gives the validation error, shown in `slotProps.textField.helperText`, and `slotProps.actionBar.actions` adds the clear and today buttons. The value is before `minDate`, so the error message shows.'
+            }
+        }
+    },
+    render: () => React.createElement(ExampleDatePicker, null)
+};
+export const Modes = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'A time field with `TimePicker`, and a date and time field with `DateTimePicker`.'
+            }
+        }
+    },
+    render: () => React.createElement(ExampleModes, null)
+};
+export const MonthPicker = {
+    parameters: {
+        docs: {
+            description: {
+                story: "A month picker, inline with `DateCalendar` or as a field with `DatePicker`, both with `views={['year', 'month']}` and `openTo=\"month\"`."
+            }
+        }
+    },
+    render: () => React.createElement(ExampleMonthPicker, null)
+};

package/dist/stories/FileInput.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+interface FileInputArgs {
+    disabled: boolean;
+    isReadOnly: boolean;
+}
+declare const meta: Meta<FileInputArgs>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const InMenu: Story;
+export declare const Field: Story;

package/dist/stories/FileInput.stories.js

@@ -0,0 +1,135 @@
+import { CrossSmall, Icon, Upload } from '@linagora/twake-icons';
+import { ListItemIcon, MenuList, Paper, Stack, Typography } from '@mui/material';
+import { MuiFileInput } from 'mui-file-input';
+import React, { useState } from 'react';
+import ActionsMenuItem from '../components/ActionsMenu/ActionsMenuItem';
+import Button from '../components/Button';
+import ListItemText from '../components/ListItemText';
+import AlertProvider from '../providers/AlertProvider';
+import { useAlert } from '../providers/AlertProvider/useAlert';
+const description = `
+To open the file picker from a button or a menu item, render the trigger as a \`label\`, with \`component="label"\`, and put a hidden \`input type="file"\` inside it. The label opens the picker on click, Enter and Space.
+
+\`\`\`jsx
+const handleChange = event => {
+  const files = Array.from(event.target.files)
+  event.target.value = ''
+  onUpload(files)
+}
+
+<Button component="label" variant="primary" startIcon={<Icon icon={Upload} />}>
+  Upload
+  <input hidden type="file" multiple data-testid="upload-btn" onChange={handleChange} />
+</Button>
+\`\`\`
+
+- Resetting \`event.target.value\` lets the user pick the same file again.
+- \`disabled\` on the trigger also blocks the picker.
+- To keep the picker closed, call \`event.preventDefault()\` in the \`input\`'s \`onClick\`.
+- In tests, fire the change on the input: \`fireEvent.change(getByTestId('upload-btn'), { target: { files: [file] } })\`.
+
+#### File field with the chosen files
+
+For a form field that displays the chosen files, with size limits or a clear button, install [\`mui-file-input\`](https://viclafouch.github.io/mui-file-input/) in the app and use \`MuiFileInput\`, as in the **Field** story below. It is a \`TextField\`, so twake-mui themes it.
+`;
+const getFileNames = (files) => files.length > 0 ? files.map(file => file.name).join(', ') : 'No file chosen';
+const readFiles = (event) => {
+    const files = Array.from(event.target.files ?? []);
+    event.target.value = '';
+    return files;
+};
+const UploadButton = ({ disabled }) => {
+    const [files, setFiles] = useState([]);
+    const handleChange = (event) => {
+        setFiles(readFiles(event));
+    };
+    return (React.createElement(Stack, { spacing: 2, sx: { alignItems: 'center' } },
+        React.createElement(Button, { component: "label", variant: "primary", disabled: disabled, startIcon: React.createElement(Icon, { icon: Upload }) },
+            "Upload",
+            React.createElement("input", { hidden: true, type: "file", multiple: true, "data-testid": "upload-btn", onChange: handleChange })),
+        React.createElement(Typography, { variant: "caption" }, getFileNames(files))));
+};
+const UploadMenuItem = ({ isReadOnly }) => {
+    const { showAlert } = useAlert();
+    const [files, setFiles] = useState([]);
+    const handleClick = (event) => {
+        if (!isReadOnly)
+            return;
+        event.preventDefault();
+        showAlert({
+            message: 'This is a read-only folder. You cannot perform this action.',
+            severity: 'warning',
+            duration: 4000
+        });
+    };
+    const handleChange = (event) => {
+        setFiles(readFiles(event));
+    };
+    return (React.createElement(Stack, { spacing: 2, sx: { alignItems: 'center' } },
+        React.createElement(Paper, null,
+            React.createElement(MenuList, null,
+                React.createElement(ActionsMenuItem, { component: "label" },
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(Icon, { icon: Upload })),
+                    React.createElement(ListItemText, { primary: "Upload files" }),
+                    React.createElement("input", { hidden: true, type: "file", multiple: true, "data-testid": "upload-btn", onClick: handleClick, onChange: handleChange })))),
+        React.createElement(Typography, { variant: "caption" }, getFileNames(files))));
+};
+const MAX_FILE_SIZE = 5 * 1024 * 1024;
+const AttachmentsField = () => {
+    const [files, setFiles] = useState([]);
+    const hasTooLargeFile = files.some(file => file.size > MAX_FILE_SIZE);
+    return (React.createElement(MuiFileInput, { multiple: true, label: "Attachments", value: files, onChange: setFiles, error: hasTooLargeFile, helperText: hasTooLargeFile
+            ? 'Each file must be under 5 MB'
+            : 'PDF or images, 5 MB max per file', slotProps: { htmlInput: { accept: 'image/*,.pdf' } }, clearIconButtonProps: {
+            title: 'Remove',
+            children: React.createElement(Icon, { icon: CrossSmall })
+        }, sx: { width: 360 } }));
+};
+const meta = {
+    title: 'FileInput',
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        docs: { description: { component: description } }
+    },
+    args: { disabled: false, isReadOnly: false }
+};
+export default meta;
+export const Default = {
+    argTypes: { isReadOnly: { table: { disable: true } } },
+    parameters: {
+        docs: {
+            description: {
+                story: 'An upload button. With `disabled`, the file picker does not open.'
+            }
+        }
+    },
+    render: args => React.createElement(UploadButton, { disabled: args.disabled })
+};
+export const InMenu = {
+    argTypes: { disabled: { table: { disable: true } } },
+    parameters: {
+        docs: {
+            description: {
+                story: 'An upload item in a menu. With `isReadOnly`, the click shows an alert and the file picker does not open.'
+            }
+        }
+    },
+    render: args => (React.createElement(AlertProvider, null,
+        React.createElement(UploadMenuItem, { isReadOnly: args.isReadOnly })))
+};
+export const Field = {
+    argTypes: {
+        disabled: { table: { disable: true } },
+        isReadOnly: { table: { disable: true } }
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'An attachments field with `mui-file-input`: PDF or images only, a clear button, and an error message when a file is over 5 MB.'
+            }
+        }
+    },
+    render: () => React.createElement(AttachmentsField, null)
+};

package/dist/stories/Typography.stories.js

@@ -13,6 +13,7 @@ const variants = [
     'subtitle2',
     'body1',
     'body2',
+    'body3',
     'caption'
 ];
 const colors = [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "18.4.1",
+  "version": "18.5.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",
@@ -60,13 +60,13 @@
     "twake-i18n": ">=0.7.1"
   },
   "dependencies": {
-    "@mui/utils": "^9.2.0",
+    "@mui/utils": "9.2.0",
     "@react-spring/web": "10.1.2",
     "@use-gesture/react": "10.3.1",
-    "classnames": "^2.5.1",
+    "classnames": "2.5.1",
     "cozy-minilog": "^3.10.1",
-    "pdf-lib": "^1.17.1",
-    "react-markdown": "^10.1.0",
+    "pdf-lib": "1.17.1",
+    "react-markdown": "10.1.0",
     "react-use-measure": "2.1.7",
     "react-virtuoso": "4.13.0",
     "remark-gfm": "4.0.1",
@@ -77,34 +77,37 @@
   "devDependencies": {
     "@argos-ci/cli": "6.9.5",
     "@argos-ci/storybook": "6.4.1",
-    "@emotion/react": "^11.5.0",
-    "@emotion/styled": "^11.3.0",
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.1",
     "@linagora/twake-css": "^1.0.0",
     "@linagora/twake-icons": "^2.10.0",
-    "@mui/icons-material": "^9.2.0",
-    "@mui/lab": "^9.0.0-beta.6",
-    "@mui/material": "^9.2.0",
+    "@mui/icons-material": "9.2.0",
+    "@mui/lab": "9.0.0-beta.6",
+    "@mui/material": "9.2.0",
+    "@mui/x-date-pickers": "9.16.0",
     "@storybook/addon-docs": "10.3.5",
     "@storybook/addon-vitest": "10.3.5",
     "@storybook/builder-vite": "10.3.5",
     "@storybook/react": "10.3.5",
     "@storybook/react-vite": "10.3.5",
-    "@testing-library/react": "^16.3.3",
-    "@types/classnames": "^2.3.1",
+    "@testing-library/react": "16.3.3",
+    "@types/classnames": "2.3.4",
     "@types/lodash": "4.17.24",
     "@types/react": "19.3.0",
-    "@types/react-dom": "^19.3.0",
+    "@types/react-dom": "19.3.0",
     "@vitest/browser-playwright": "4.1.11",
     "cozy-intent": "^2.31.1",
     "cozy-tsconfig": "^2.0.0",
+    "date-fns": "2.30.0",
     "eslint": "10.2.1",
     "eslint-config-cozy-app": "7.0.0",
     "eslint-plugin-storybook": "10.3.5",
-    "jsdom": "^30.1.2",
+    "jsdom": "30.1.2",
     "lodash": "4.18.1",
+    "mui-file-input": "9.0.0",
     "playwright": "1.64.1",
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
     "storybook": "10.3.5",
     "twake-i18n": "^0.7.1",
     "vite": "8.3.1",