@linagora/twake-mui 9.15.0 → 9.16.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# @linagora/twake-mui [9.16.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.15.0...@linagora/twake-mui@9.16.0) (2026-10-01)
+
+
+### Bug Fixes
+
+* **twake-mui:** Clean old Accordion override ([def3b03](https://github.com/linagora/twake-ui/commit/def3b03479b193a3246e716ae4adc89c4d85cbd2))
+* **twake-mui:** Use theme shadow for Accordion ([97cb9b7](https://github.com/linagora/twake-ui/commit/97cb9b7ce81a61963cf9b3e5aaac615b3da4ae63))
+
+
+### Features
+
+* **twake-mui:** Migrate Accordion from cozy-ui ([4033f8d](https://github.com/linagora/twake-ui/commit/4033f8dc03f550eed64263a77f9953e63f2572ec))
+
 # @linagora/twake-mui [9.15.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@9.14.1...@linagora/twake-mui@9.15.0) (2026-09-30)
 
 

package/dist/lib/overrides.js

@@ -1,4 +1,5 @@
 import { Bottom, CheckCircle, CheckSquare, Icon, Info, RadioChecked, RadioUnchecked, Spinner, Warning, WarningCircle } from '@linagora/twake-icons';
+import { accordionSummaryClasses } from '@mui/material/AccordionSummary';
 import { alertClasses } from '@mui/material/Alert';
 import { buttonClasses } from '@mui/material/Button';
 import { checkboxClasses } from '@mui/material/Checkbox';
@@ -924,53 +925,53 @@ export const overrides = {
     },
     MuiAccordion: {
         styleOverrides: {
-            root: {
-                '&::before': {
-                    display: 'none'
-                }
-            }
+            root: ({ theme }) => ({
+                boxShadow: theme.vars.shadows[1],
+                border: `1px solid ${theme.vars.palette.border.main}`,
+                overflow: 'hidden',
+                marginBottom: 16,
+                '&::before': { display: 'none' }
+            }),
+            rounded: ({ theme }) => ({ borderRadius: theme.shape.borderRadius })
         }
     },
     MuiAccordionSummary: {
         defaultProps: { expandIcon: React.createElement(AccordionExpandIcon, null) },
         styleOverrides: {
             root: ({ theme }) => ({
-                backgroundColor: theme.palette.grey[100],
+                backgroundColor: theme.vars.palette.background.default,
                 textTransform: 'uppercase',
                 fontWeight: 'bold',
-                fontSize: '0.875rem',
-                minHeight: '3.5rem',
+                fontSize: theme.typography.pxToRem(14),
+                minHeight: 56,
                 padding: 0,
-                color: theme.palette.text.primary,
-                '&.Mui-expanded': {
-                    minHeight: '3.5rem'
-                }
+                [`&.${accordionSummaryClasses.expanded}`]: { minHeight: 56 }
             }),
-            expandIconWrapper: {
-                order: 0,
-                '&&': {
-                    marginLeft: '0.3125rem'
-                },
+            expandIconWrapper: ({ theme }) => ({
+                color: theme.vars.palette.text.secondary,
+                padding: 12,
+                marginLeft: 5,
+                marginRight: -12,
                 transform: 'rotate(-90deg)',
-                '&.Mui-expanded': {
-                    marginLeft: '0.3125rem',
-                    transform: 'rotate(0deg)'
-                }
-            },
+                [`&.${accordionSummaryClasses.expanded}`]: { transform: 'rotate(0deg)' }
+            }),
             content: {
-                margin: '0.75rem 0',
-                paddingLeft: '0.5rem',
-                paddingRight: '0.25rem',
+                paddingLeft: 8,
+                paddingRight: 4,
                 order: 1,
-                '& > :last-child': {
-                    paddingRight: 0
-                },
-                '&.Mui-expanded': {
-                    margin: '0.75rem 0'
-                }
+                '& > :last-child': { paddingRight: 0 },
+                [`&.${accordionSummaryClasses.expanded}`]: { margin: '12px 0' }
             }
         }
     },
+    MuiAccordionDetails: {
+        styleOverrides: {
+            root: ({ theme }) => ({
+                padding: 0,
+                borderTop: `1px solid ${theme.vars.palette.border.main}`
+            })
+        }
+    },
     MuiFab: {
         defaultProps: { size: 'medium' },
         styleOverrides: {

package/dist/stories/Accordion.stories.d.ts

@@ -3,5 +3,5 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 declare const meta: Meta<typeof Accordion>;
 export default meta;
 type Story = StoryObj<typeof Accordion>;
-export declare const Docs: Story;
+export declare const Default: Story;
 export declare const Screenshot: Story;

package/dist/stories/Accordion.stories.js

@@ -4,26 +4,42 @@ const meta = {
     title: 'Accordion',
     component: Accordion,
     parameters: { layout: 'centered' },
-    tags: ['autodocs']
+    tags: ['autodocs'],
+    argTypes: {
+        defaultExpanded: { control: 'boolean' },
+        disabled: { control: 'boolean' },
+        disableGutters: { control: 'boolean' },
+        square: { control: 'boolean' }
+    }
 };
 export default meta;
-const AccordionGroup = () => (React.createElement(Stack, { spacing: 2, sx: { width: 400 } },
-    React.createElement(Accordion, null,
-        React.createElement(AccordionSummary, null, "Click to expand/collapse the first item"),
-        React.createElement(AccordionDetails, null,
-            React.createElement(Typography, null, "Lorem ipsum dolor sit amet consectetur"))),
-    React.createElement(Accordion, null,
-        React.createElement(AccordionSummary, null, "Click to expand/collapse the second item"),
-        React.createElement(AccordionDetails, null,
-            React.createElement(Typography, null, "Lorem ipsum dolor sit amet consectetur"))),
-    React.createElement(Accordion, null,
-        React.createElement(AccordionSummary, null, "Click to expand/collapse the third item"),
-        React.createElement(AccordionDetails, null,
-            React.createElement(Typography, null, "Lorem ipsum dolor sit amet consectetur")))));
-export const Docs = {
-    render: () => React.createElement(AccordionGroup, null)
+const Item = ({ label, ...props }) => (React.createElement(Accordion, { ...props },
+    React.createElement(AccordionSummary, null,
+        "Click to expand/collapse the ",
+        label,
+        " item"),
+    React.createElement(AccordionDetails, null,
+        React.createElement(Typography, { sx: { m: 2 } }, "Lorem ipsum dolor sit amet consectetur"))));
+export const Default = {
+    render: args => (React.createElement("div", { style: { width: 400, maxWidth: '100%' } },
+        React.createElement(Item, { ...args, label: "first" }),
+        React.createElement(Item, { ...args, label: "second" }),
+        React.createElement(Item, { ...args, label: "third" })))
 };
+const Section = ({ title, children }) => (React.createElement("section", null,
+    React.createElement("h3", { style: { marginBottom: '12px' } }, title),
+    children));
+// Visual Regression - Combined view for Argos testing
 export const Screenshot = {
     tags: ['argos'],
-    render: () => React.createElement(AccordionGroup, null)
+    render: () => (React.createElement(Stack, { spacing: 4, sx: { width: 400, maxWidth: '100%' } },
+        React.createElement(Section, { title: "Default" },
+            React.createElement(Item, { label: "first" }),
+            React.createElement(Item, { label: "second" }),
+            React.createElement(Item, { label: "third" })),
+        React.createElement(Section, { title: "Expanded" },
+            React.createElement(Item, { label: "first", defaultExpanded: true }),
+            React.createElement(Item, { label: "second" })),
+        React.createElement(Section, { title: "Disabled" },
+            React.createElement(Item, { label: "first", disabled: true }))))
 };

package/package.json

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