@linagora/twake-mui 12.0.0 → 12.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/dist/components/ContactPopover/ContactPopover.stories.js +1 -1
- package/dist/components/SearchBar/SearchBarButtonBase.d.ts +1 -1
- package/dist/lib/overrides.js +21 -0
- package/dist/stories/AppBar.stories.d.ts +7 -0
- package/dist/stories/AppBar.stories.js +42 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
# @linagora/twake-mui [12.1.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@12.0.0...@linagora/twake-mui@12.1.0) (2026-10-12)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **twake-mui:** Migrate AppBar from cozy-ui ([4a7280f](https://github.com/linagora/twake-ui/commit/4a7280f0f4a75687d5de823fd5b544ccd63035cb))
|
|
7
|
+
|
|
1
8
|
# @linagora/twake-mui [12.0.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@11.4.0...@linagora/twake-mui@12.0.0) (2026-10-08)
|
|
2
9
|
|
|
3
10
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const SearchBarButtonBase: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonBaseOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, keyof import("@mui/material").ButtonBaseOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "disabled" | "style" | "className" | "type" | "tabIndex" | "children" | "classes" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "
|
|
1
|
+
export declare const SearchBarButtonBase: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonBaseOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, keyof import("@mui/material").ButtonBaseOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "disabled" | "style" | "className" | "type" | "tabIndex" | "children" | "classes" | "sx" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
|
package/dist/lib/overrides.js
CHANGED
|
@@ -134,6 +134,27 @@ const listItemRoot = {
|
|
|
134
134
|
]
|
|
135
135
|
};
|
|
136
136
|
export const overrides = {
|
|
137
|
+
MuiAppBar: {
|
|
138
|
+
// MUI otherwise paints every app bar with the paper colour in dark mode
|
|
139
|
+
defaultProps: { color: 'default', enableColorOnDark: true },
|
|
140
|
+
styleOverrides: {
|
|
141
|
+
root: ({ theme }) => ({
|
|
142
|
+
variants: [
|
|
143
|
+
{
|
|
144
|
+
props: { color: 'default' },
|
|
145
|
+
style: {
|
|
146
|
+
'--AppBar-background': theme.vars.palette.grey.A400,
|
|
147
|
+
'--AppBar-color': theme.vars.palette.primary.contrastText,
|
|
148
|
+
...theme.applyStyles('dark', {
|
|
149
|
+
'--AppBar-background': theme.vars.palette.primary.main,
|
|
150
|
+
'--AppBar-color': theme.vars.palette.primary.contrastText
|
|
151
|
+
})
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
]
|
|
155
|
+
})
|
|
156
|
+
}
|
|
157
|
+
},
|
|
137
158
|
MuiButton: {
|
|
138
159
|
defaultProps: {
|
|
139
160
|
variant: 'contained',
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { AppBar } from '@mui/material';
|
|
2
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
3
|
+
declare const meta: Meta<typeof AppBar>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Screenshot: Story;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { Cross, Icon } from '@linagora/twake-icons';
|
|
2
|
+
import { AppBar, IconButton, Stack, Toolbar, Typography } from '@mui/material';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
const colors = [
|
|
5
|
+
'default',
|
|
6
|
+
'inherit',
|
|
7
|
+
'primary',
|
|
8
|
+
'secondary',
|
|
9
|
+
'transparent',
|
|
10
|
+
'error',
|
|
11
|
+
'warning',
|
|
12
|
+
'info',
|
|
13
|
+
'success'
|
|
14
|
+
];
|
|
15
|
+
const meta = {
|
|
16
|
+
title: 'AppBar',
|
|
17
|
+
component: AppBar,
|
|
18
|
+
tags: ['autodocs'],
|
|
19
|
+
args: { position: 'static' },
|
|
20
|
+
argTypes: {
|
|
21
|
+
color: { control: 'select', options: colors },
|
|
22
|
+
position: {
|
|
23
|
+
control: 'select',
|
|
24
|
+
options: ['fixed', 'absolute', 'sticky', 'static', 'relative']
|
|
25
|
+
},
|
|
26
|
+
elevation: { control: 'number' },
|
|
27
|
+
enableColorOnDark: { control: 'boolean' }
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
export default meta;
|
|
31
|
+
const Bar = props => (React.createElement(AppBar, { ...props },
|
|
32
|
+
React.createElement(Toolbar, null,
|
|
33
|
+
React.createElement(IconButton, { "aria-label": "close", color: "inherit", edge: "start" },
|
|
34
|
+
React.createElement(Icon, { icon: Cross })),
|
|
35
|
+
React.createElement(Typography, { variant: "h6", color: "inherit" }, props.color ?? 'default'))));
|
|
36
|
+
export const Default = {
|
|
37
|
+
render: args => React.createElement(Bar, { ...args })
|
|
38
|
+
};
|
|
39
|
+
export const Screenshot = {
|
|
40
|
+
tags: ['argos'],
|
|
41
|
+
render: () => (React.createElement(Stack, { spacing: 2, sx: { p: 4 } }, colors.map(color => (React.createElement(Bar, { key: color, position: "static", color: color })))))
|
|
42
|
+
};
|