@linagora/twake-mui 7.0.0 → 7.1.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# @linagora/twake-mui [7.1.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@7.0.0...@linagora/twake-mui@7.1.0) (2026-09-10)
+
+
+### Bug Fixes
+
+* **twake-mui:** Clean old IconButton override ([b5a7733](https://github.com/linagora/twake-ui/commit/b5a7733ad9451ea9950e93a787133a2f9bf951d5))
+
+
+### Features
+
+* **twake-mui:** Migrate IconButton from cozy-ui ([d6aca04](https://github.com/linagora/twake-ui/commit/d6aca0454195f1d3ffd5170b2463f5bec9254678))
+
 # @linagora/twake-mui [7.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@6.0.0...@linagora/twake-mui@7.0.0) (2026-09-08)
 
 

package/dist/components/Chip/index.js

@@ -2,9 +2,9 @@ import { Icon, CrossSmall } from '@linagora/twake-icons';
 import { Box, Chip as MuiChip, IconButton } from '@mui/material';
 import cx from 'classnames';
 import React from 'react';
-export const Chip = ({ className, deleteIcon = (React.createElement(IconButton, null,
-    React.createElement(Icon, { icon: CrossSmall }))), label, endIcon, square = false, ...props }) => {
-    return (React.createElement(MuiChip, { className: cx(className, { square }), deleteIcon: deleteIcon, label: endIcon ? (React.createElement(Box, { component: "span", sx: { display: 'flex', alignItems: 'center', gap: 1 } },
+export const Chip = ({ className, label, endIcon, square = false, size, deleteIcon = (React.createElement(IconButton, { size: size === 'small' ? 'xsmall' : 'small' },
+    React.createElement(Icon, { icon: CrossSmall }))), ...props }) => {
+    return (React.createElement(MuiChip, { size: size, className: cx(className, { square }), deleteIcon: deleteIcon, label: endIcon ? (React.createElement(Box, { component: "span", sx: { display: 'flex', alignItems: 'center', gap: 1 } },
             label,
             React.createElement("span", null, endIcon))) : (label), ...props }));
 };

package/dist/lib/lightOverrides.js

@@ -364,10 +364,41 @@ export const lightOverrides = {
         }
     },
     MuiIconButton: {
+        defaultProps: { size: 'large' },
         styleOverrides: {
             root: ({ theme }) => ({
-                color: alpha(theme.palette.grey[900], 0.48),
-                padding: '4px'
+                variants: [
+                    {
+                        props: { color: 'default' },
+                        style: {
+                            color: theme.palette.text.secondary
+                        }
+                    },
+                    {
+                        props: { size: 'xsmall' },
+                        style: {
+                            padding: '5px'
+                        }
+                    },
+                    {
+                        props: { size: 'small' },
+                        style: {
+                            padding: '8px'
+                        }
+                    },
+                    {
+                        props: { size: 'medium' },
+                        style: {
+                            padding: '12px'
+                        }
+                    },
+                    {
+                        props: { size: 'large' },
+                        style: {
+                            padding: '16px'
+                        }
+                    }
+                ]
             })
         }
     },

package/dist/lib/types.d.ts

@@ -115,3 +115,8 @@ declare module '@mui/material/styles' {
         border?: Partial<BorderPalette>;
     }
 }
+declare module '@mui/material/IconButton' {
+    interface IconButtonPropsSizeOverrides {
+        xsmall: true;
+    }
+}

package/dist/stories/Chip.stories.js

@@ -81,8 +81,8 @@ export const Screenshot = {
                                 React.createElement("div", null,
                                     React.createElement(Chip, { color: color, variant: variant, label: "Avatar Chip", avatar: React.createElement(Avatar, null, "M"), square: square, size: size })),
                                 React.createElement("div", null,
-                                    React.createElement(Chip, { color: color, variant: variant, label: "Action chip", avatar: React.createElement(Avatar, null, "M"), deleteIcon: React.createElement(IconButton, null,
-                                            React.createElement(Icon, { icon: Right })), endIcon: React.createElement(IconButton, { sx: {
+                                    React.createElement(Chip, { color: color, variant: variant, label: "Action chip", avatar: React.createElement(Avatar, null, "M"), deleteIcon: React.createElement(IconButton, { size: size === 'small' ? 'xsmall' : 'small' },
+                                            React.createElement(Icon, { icon: Right })), endIcon: React.createElement(IconButton, { size: size === 'small' ? 'xsmall' : 'small', sx: {
                                                 color: color === 'default'
                                                     ? `${color}.main`
                                                     : `inherit`

package/dist/stories/IconButton.stories.d.ts

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

package/dist/stories/IconButton.stories.js

@@ -0,0 +1,59 @@
+import { Cross, Icon, People, Restore, Stop, Trash } from '@linagora/twake-icons';
+import { Button, IconButton, Stack, Typography } from '@mui/material';
+import React from 'react';
+const meta = {
+    title: 'IconButton',
+    component: IconButton,
+    parameters: { layout: 'centered' },
+    tags: ['autodocs'],
+    argTypes: {
+        color: {
+            control: 'select',
+            options: ['default', 'inherit', 'primary', 'secondary', 'error']
+        },
+        size: {
+            control: 'select',
+            options: ['xsmall', 'small', 'medium', 'large']
+        },
+        disabled: { control: 'boolean' }
+    }
+};
+export default meta;
+export const Default = {
+    args: {
+        children: React.createElement(Icon, { icon: People })
+    }
+};
+const sizes = ['xsmall', 'small', 'medium', 'large'];
+const Row = ({ size, disabled }) => (React.createElement(Stack, { direction: "row", spacing: 1, sx: { alignItems: 'center' } },
+    React.createElement(IconButton, { size: size, disabled: disabled },
+        React.createElement(Icon, { icon: People })),
+    React.createElement(IconButton, { color: "primary", size: size, disabled: disabled },
+        React.createElement(Icon, { icon: Restore })),
+    React.createElement(IconButton, { color: "secondary", size: size, disabled: disabled },
+        React.createElement(Icon, { icon: Cross })),
+    React.createElement(IconButton, { color: "error", size: size, disabled: disabled },
+        React.createElement(Icon, { icon: Trash }))));
+export const Screenshot = {
+    tags: ['argos'],
+    render: () => (React.createElement(Stack, { spacing: 4, sx: { p: 4 } },
+        sizes.map(size => (React.createElement("section", { key: size },
+            React.createElement("h3", null, size),
+            React.createElement(Stack, { direction: "row", spacing: 4 },
+                React.createElement(Stack, { spacing: 1 },
+                    React.createElement(Typography, { variant: "caption" }, "default"),
+                    React.createElement(Row, { size: size })),
+                React.createElement(Stack, { spacing: 1 },
+                    React.createElement(Typography, { variant: "caption" }, "disabled"),
+                    React.createElement(Row, { size: size, disabled: true })))))),
+        React.createElement("section", null,
+            React.createElement("h3", null, "Embedded button"),
+            React.createElement(IconButton, { size: "small" },
+                React.createElement(Button, { component: "div", sx: {
+                        minWidth: 'auto',
+                        width: 16,
+                        height: 16,
+                        borderRadius: '50%'
+                    }, size: "small" },
+                    React.createElement(Icon, { icon: Stop, size: 12 }))))))
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",