cozy-ui 138.5.0 → 138.6.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/package.json +1 -1
- package/react/Chips/Readme.md +55 -0
- package/react/MuiCozyTheme/helpers.js +9 -18
- package/transpiled/react/MuiCozyTheme/helpers.d.ts +5 -8
- package/transpiled/react/MuiCozyTheme/helpers.js +6 -9
- package/transpiled/react/MuiCozyTheme/overrides/makeDarkOverrides.d.ts +25 -40
- package/transpiled/react/MuiCozyTheme/overrides/makeLightOverrides.d.ts +25 -40
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
# [138.6.0](https://github.com/cozy/cozy-ui/compare/v138.5.0...v138.6.0) (2026-04-14)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **Chip:** Adjust ghost style ([02758c2](https://github.com/cozy/cozy-ui/commit/02758c2))
|
|
7
|
+
|
|
1
8
|
# [138.5.0](https://github.com/cozy/cozy-ui/compare/v138.4.0...v138.5.0) (2026-04-10)
|
|
2
9
|
|
|
3
10
|
|
package/package.json
CHANGED
package/react/Chips/Readme.md
CHANGED
|
@@ -166,3 +166,58 @@ const initialVariants = [{ default: true, active: false, ghost: false }]
|
|
|
166
166
|
)}
|
|
167
167
|
</Variants>
|
|
168
168
|
```
|
|
169
|
+
|
|
170
|
+
### Small size
|
|
171
|
+
|
|
172
|
+
```jsx
|
|
173
|
+
import Grid from 'cozy-ui/transpiled/react/Grid'
|
|
174
|
+
import Chip from 'cozy-ui/transpiled/react/Chips'
|
|
175
|
+
import Stack from 'cozy-ui/transpiled/react/Stack'
|
|
176
|
+
import Typography from 'cozy-ui/transpiled/react/Typography'
|
|
177
|
+
import Icon from 'cozy-ui/transpiled/react/Icon'
|
|
178
|
+
import FileOutlineIcon from "cozy-ui/transpiled/react/Icons/FileOutline"
|
|
179
|
+
import RightIcon from "cozy-ui/transpiled/react/Icons/Right"
|
|
180
|
+
import OpenwithIcon from "cozy-ui/transpiled/react/Icons/Openwith"
|
|
181
|
+
import Divider from "cozy-ui/transpiled/react/Divider"
|
|
182
|
+
import Variants from 'cozy-ui/docs/components/Variants'
|
|
183
|
+
|
|
184
|
+
const colors = ['success', 'error', 'warning', 'info']
|
|
185
|
+
const initialVariants = [{ default: true, active: false, ghost: false }]
|
|
186
|
+
|
|
187
|
+
;
|
|
188
|
+
|
|
189
|
+
<Variants initialVariants={initialVariants} radio={true} screenshotAllVariants>
|
|
190
|
+
{variant => (
|
|
191
|
+
<Grid container>
|
|
192
|
+
{colors.map(color =>
|
|
193
|
+
<Grid item xs={12} sm={6} md={3} className="u-mb-1" key={JSON.stringify(color)}>
|
|
194
|
+
<Stack spacing="s">
|
|
195
|
+
<Typography>{color}</Typography>
|
|
196
|
+
<div>
|
|
197
|
+
<Chip
|
|
198
|
+
label="1 invoice"
|
|
199
|
+
onClick={() => alert('You clicked')}
|
|
200
|
+
clickable
|
|
201
|
+
color={color}
|
|
202
|
+
size="small"
|
|
203
|
+
variant={Object.keys(variant).find(key => variant[key])}
|
|
204
|
+
/>
|
|
205
|
+
</div>
|
|
206
|
+
<div>
|
|
207
|
+
<Chip
|
|
208
|
+
label="1 invoice"
|
|
209
|
+
onClick={() => alert('You clicked')}
|
|
210
|
+
clickable
|
|
211
|
+
color={color}
|
|
212
|
+
size="small"
|
|
213
|
+
disabled
|
|
214
|
+
variant={Object.keys(variant).find(key => variant[key])}
|
|
215
|
+
/>
|
|
216
|
+
</div>
|
|
217
|
+
</Stack>
|
|
218
|
+
</Grid>
|
|
219
|
+
)}
|
|
220
|
+
</Grid>
|
|
221
|
+
)}
|
|
222
|
+
</Variants>
|
|
223
|
+
```
|
|
@@ -111,28 +111,19 @@ export const makeChipStyleByColor = (theme, color) => ({
|
|
|
111
111
|
},
|
|
112
112
|
'&.ghost': {
|
|
113
113
|
borderWidth: '1px',
|
|
114
|
-
|
|
115
|
-
|
|
114
|
+
color: theme.palette[color].main,
|
|
115
|
+
borderColor: alpha(theme.palette[color].main, 0),
|
|
116
|
+
backgroundColor: alpha(
|
|
117
|
+
theme.palette[color].main,
|
|
118
|
+
theme.palette.action.ghostOpacity
|
|
119
|
+
),
|
|
120
|
+
'& $icon, & $deleteIcon': {
|
|
116
121
|
color: theme.palette[color].main,
|
|
117
|
-
|
|
118
|
-
theme.palette[color].main,
|
|
119
|
-
theme.palette.border.ghostOpacity
|
|
120
|
-
),
|
|
121
|
-
backgroundColor: alpha(
|
|
122
|
-
theme.palette[color].main,
|
|
123
|
-
theme.palette.action.ghostOpacity
|
|
124
|
-
),
|
|
125
|
-
'& $icon, & $deleteIcon': {
|
|
126
|
-
color: theme.palette[color].main,
|
|
127
|
-
fill: theme.palette[color].main
|
|
128
|
-
}
|
|
122
|
+
fill: theme.palette[color].main
|
|
129
123
|
},
|
|
130
124
|
'&$clickable, &$deletable': {
|
|
131
125
|
'&:hover, &:focus': {
|
|
132
|
-
borderColor: alpha(
|
|
133
|
-
theme.palette[color].main,
|
|
134
|
-
theme.palette.border.ghostOpacity
|
|
135
|
-
),
|
|
126
|
+
borderColor: alpha(theme.palette[color].main, 0),
|
|
136
127
|
backgroundColor: alpha(
|
|
137
128
|
theme.palette[color].main,
|
|
138
129
|
theme.palette.action.hoverGhostOpacity
|
|
@@ -78,15 +78,12 @@ export function makeChipStyleByColor(theme: any, color: any): {
|
|
|
78
78
|
};
|
|
79
79
|
'&.ghost': {
|
|
80
80
|
borderWidth: string;
|
|
81
|
-
|
|
82
|
-
|
|
81
|
+
color: any;
|
|
82
|
+
borderColor: string;
|
|
83
|
+
backgroundColor: string;
|
|
84
|
+
'& $icon, & $deleteIcon': {
|
|
83
85
|
color: any;
|
|
84
|
-
|
|
85
|
-
backgroundColor: string;
|
|
86
|
-
'& $icon, & $deleteIcon': {
|
|
87
|
-
color: any;
|
|
88
|
-
fill: any;
|
|
89
|
-
};
|
|
86
|
+
fill: any;
|
|
90
87
|
};
|
|
91
88
|
'&$clickable, &$deletable': {
|
|
92
89
|
'&:hover, &:focus': {
|
|
@@ -95,19 +95,16 @@ export var makeChipStyleByColor = function makeChipStyleByColor(theme, color) {
|
|
|
95
95
|
},
|
|
96
96
|
'&.ghost': {
|
|
97
97
|
borderWidth: '1px',
|
|
98
|
-
|
|
99
|
-
|
|
98
|
+
color: theme.palette[color].main,
|
|
99
|
+
borderColor: alpha(theme.palette[color].main, 0),
|
|
100
|
+
backgroundColor: alpha(theme.palette[color].main, theme.palette.action.ghostOpacity),
|
|
101
|
+
'& $icon, & $deleteIcon': {
|
|
100
102
|
color: theme.palette[color].main,
|
|
101
|
-
|
|
102
|
-
backgroundColor: alpha(theme.palette[color].main, theme.palette.action.ghostOpacity),
|
|
103
|
-
'& $icon, & $deleteIcon': {
|
|
104
|
-
color: theme.palette[color].main,
|
|
105
|
-
fill: theme.palette[color].main
|
|
106
|
-
}
|
|
103
|
+
fill: theme.palette[color].main
|
|
107
104
|
},
|
|
108
105
|
'&$clickable, &$deletable': {
|
|
109
106
|
'&:hover, &:focus': {
|
|
110
|
-
borderColor: alpha(theme.palette[color].main,
|
|
107
|
+
borderColor: alpha(theme.palette[color].main, 0),
|
|
111
108
|
backgroundColor: alpha(theme.palette[color].main, theme.palette.action.hoverGhostOpacity)
|
|
112
109
|
}
|
|
113
110
|
}
|
|
@@ -1200,15 +1200,12 @@ export function makeDarkOverrides(theme: any): {
|
|
|
1200
1200
|
};
|
|
1201
1201
|
'&.ghost': {
|
|
1202
1202
|
borderWidth: string;
|
|
1203
|
-
|
|
1204
|
-
|
|
1203
|
+
color: any;
|
|
1204
|
+
borderColor: string;
|
|
1205
|
+
backgroundColor: string;
|
|
1206
|
+
'& $icon, & $deleteIcon': {
|
|
1205
1207
|
color: any;
|
|
1206
|
-
|
|
1207
|
-
backgroundColor: string;
|
|
1208
|
-
'& $icon, & $deleteIcon': {
|
|
1209
|
-
color: any;
|
|
1210
|
-
fill: any;
|
|
1211
|
-
};
|
|
1208
|
+
fill: any;
|
|
1212
1209
|
};
|
|
1213
1210
|
'&$clickable, &$deletable': {
|
|
1214
1211
|
'&:hover, &:focus': {
|
|
@@ -1260,15 +1257,12 @@ export function makeDarkOverrides(theme: any): {
|
|
|
1260
1257
|
};
|
|
1261
1258
|
'&.ghost': {
|
|
1262
1259
|
borderWidth: string;
|
|
1263
|
-
|
|
1264
|
-
|
|
1260
|
+
color: any;
|
|
1261
|
+
borderColor: string;
|
|
1262
|
+
backgroundColor: string;
|
|
1263
|
+
'& $icon, & $deleteIcon': {
|
|
1265
1264
|
color: any;
|
|
1266
|
-
|
|
1267
|
-
backgroundColor: string;
|
|
1268
|
-
'& $icon, & $deleteIcon': {
|
|
1269
|
-
color: any;
|
|
1270
|
-
fill: any;
|
|
1271
|
-
};
|
|
1265
|
+
fill: any;
|
|
1272
1266
|
};
|
|
1273
1267
|
'&$clickable, &$deletable': {
|
|
1274
1268
|
'&:hover, &:focus': {
|
|
@@ -1320,15 +1314,12 @@ export function makeDarkOverrides(theme: any): {
|
|
|
1320
1314
|
};
|
|
1321
1315
|
'&.ghost': {
|
|
1322
1316
|
borderWidth: string;
|
|
1323
|
-
|
|
1324
|
-
|
|
1317
|
+
color: any;
|
|
1318
|
+
borderColor: string;
|
|
1319
|
+
backgroundColor: string;
|
|
1320
|
+
'& $icon, & $deleteIcon': {
|
|
1325
1321
|
color: any;
|
|
1326
|
-
|
|
1327
|
-
backgroundColor: string;
|
|
1328
|
-
'& $icon, & $deleteIcon': {
|
|
1329
|
-
color: any;
|
|
1330
|
-
fill: any;
|
|
1331
|
-
};
|
|
1322
|
+
fill: any;
|
|
1332
1323
|
};
|
|
1333
1324
|
'&$clickable, &$deletable': {
|
|
1334
1325
|
'&:hover, &:focus': {
|
|
@@ -1380,15 +1371,12 @@ export function makeDarkOverrides(theme: any): {
|
|
|
1380
1371
|
};
|
|
1381
1372
|
'&.ghost': {
|
|
1382
1373
|
borderWidth: string;
|
|
1383
|
-
|
|
1384
|
-
|
|
1374
|
+
color: any;
|
|
1375
|
+
borderColor: string;
|
|
1376
|
+
backgroundColor: string;
|
|
1377
|
+
'& $icon, & $deleteIcon': {
|
|
1385
1378
|
color: any;
|
|
1386
|
-
|
|
1387
|
-
backgroundColor: string;
|
|
1388
|
-
'& $icon, & $deleteIcon': {
|
|
1389
|
-
color: any;
|
|
1390
|
-
fill: any;
|
|
1391
|
-
};
|
|
1379
|
+
fill: any;
|
|
1392
1380
|
};
|
|
1393
1381
|
'&$clickable, &$deletable': {
|
|
1394
1382
|
'&:hover, &:focus': {
|
|
@@ -1440,15 +1428,12 @@ export function makeDarkOverrides(theme: any): {
|
|
|
1440
1428
|
};
|
|
1441
1429
|
'&.ghost': {
|
|
1442
1430
|
borderWidth: string;
|
|
1443
|
-
|
|
1444
|
-
|
|
1431
|
+
color: any;
|
|
1432
|
+
borderColor: string;
|
|
1433
|
+
backgroundColor: string;
|
|
1434
|
+
'& $icon, & $deleteIcon': {
|
|
1445
1435
|
color: any;
|
|
1446
|
-
|
|
1447
|
-
backgroundColor: string;
|
|
1448
|
-
'& $icon, & $deleteIcon': {
|
|
1449
|
-
color: any;
|
|
1450
|
-
fill: any;
|
|
1451
|
-
};
|
|
1436
|
+
fill: any;
|
|
1452
1437
|
};
|
|
1453
1438
|
'&$clickable, &$deletable': {
|
|
1454
1439
|
'&:hover, &:focus': {
|
|
@@ -1200,15 +1200,12 @@ export function makeLightOverrides(theme: any): {
|
|
|
1200
1200
|
};
|
|
1201
1201
|
'&.ghost': {
|
|
1202
1202
|
borderWidth: string;
|
|
1203
|
-
|
|
1204
|
-
|
|
1203
|
+
color: any;
|
|
1204
|
+
borderColor: string;
|
|
1205
|
+
backgroundColor: string;
|
|
1206
|
+
'& $icon, & $deleteIcon': {
|
|
1205
1207
|
color: any;
|
|
1206
|
-
|
|
1207
|
-
backgroundColor: string;
|
|
1208
|
-
'& $icon, & $deleteIcon': {
|
|
1209
|
-
color: any;
|
|
1210
|
-
fill: any;
|
|
1211
|
-
};
|
|
1208
|
+
fill: any;
|
|
1212
1209
|
};
|
|
1213
1210
|
'&$clickable, &$deletable': {
|
|
1214
1211
|
'&:hover, &:focus': {
|
|
@@ -1260,15 +1257,12 @@ export function makeLightOverrides(theme: any): {
|
|
|
1260
1257
|
};
|
|
1261
1258
|
'&.ghost': {
|
|
1262
1259
|
borderWidth: string;
|
|
1263
|
-
|
|
1264
|
-
|
|
1260
|
+
color: any;
|
|
1261
|
+
borderColor: string;
|
|
1262
|
+
backgroundColor: string;
|
|
1263
|
+
'& $icon, & $deleteIcon': {
|
|
1265
1264
|
color: any;
|
|
1266
|
-
|
|
1267
|
-
backgroundColor: string;
|
|
1268
|
-
'& $icon, & $deleteIcon': {
|
|
1269
|
-
color: any;
|
|
1270
|
-
fill: any;
|
|
1271
|
-
};
|
|
1265
|
+
fill: any;
|
|
1272
1266
|
};
|
|
1273
1267
|
'&$clickable, &$deletable': {
|
|
1274
1268
|
'&:hover, &:focus': {
|
|
@@ -1320,15 +1314,12 @@ export function makeLightOverrides(theme: any): {
|
|
|
1320
1314
|
};
|
|
1321
1315
|
'&.ghost': {
|
|
1322
1316
|
borderWidth: string;
|
|
1323
|
-
|
|
1324
|
-
|
|
1317
|
+
color: any;
|
|
1318
|
+
borderColor: string;
|
|
1319
|
+
backgroundColor: string;
|
|
1320
|
+
'& $icon, & $deleteIcon': {
|
|
1325
1321
|
color: any;
|
|
1326
|
-
|
|
1327
|
-
backgroundColor: string;
|
|
1328
|
-
'& $icon, & $deleteIcon': {
|
|
1329
|
-
color: any;
|
|
1330
|
-
fill: any;
|
|
1331
|
-
};
|
|
1322
|
+
fill: any;
|
|
1332
1323
|
};
|
|
1333
1324
|
'&$clickable, &$deletable': {
|
|
1334
1325
|
'&:hover, &:focus': {
|
|
@@ -1380,15 +1371,12 @@ export function makeLightOverrides(theme: any): {
|
|
|
1380
1371
|
};
|
|
1381
1372
|
'&.ghost': {
|
|
1382
1373
|
borderWidth: string;
|
|
1383
|
-
|
|
1384
|
-
|
|
1374
|
+
color: any;
|
|
1375
|
+
borderColor: string;
|
|
1376
|
+
backgroundColor: string;
|
|
1377
|
+
'& $icon, & $deleteIcon': {
|
|
1385
1378
|
color: any;
|
|
1386
|
-
|
|
1387
|
-
backgroundColor: string;
|
|
1388
|
-
'& $icon, & $deleteIcon': {
|
|
1389
|
-
color: any;
|
|
1390
|
-
fill: any;
|
|
1391
|
-
};
|
|
1379
|
+
fill: any;
|
|
1392
1380
|
};
|
|
1393
1381
|
'&$clickable, &$deletable': {
|
|
1394
1382
|
'&:hover, &:focus': {
|
|
@@ -1440,15 +1428,12 @@ export function makeLightOverrides(theme: any): {
|
|
|
1440
1428
|
};
|
|
1441
1429
|
'&.ghost': {
|
|
1442
1430
|
borderWidth: string;
|
|
1443
|
-
|
|
1444
|
-
|
|
1431
|
+
color: any;
|
|
1432
|
+
borderColor: string;
|
|
1433
|
+
backgroundColor: string;
|
|
1434
|
+
'& $icon, & $deleteIcon': {
|
|
1445
1435
|
color: any;
|
|
1446
|
-
|
|
1447
|
-
backgroundColor: string;
|
|
1448
|
-
'& $icon, & $deleteIcon': {
|
|
1449
|
-
color: any;
|
|
1450
|
-
fill: any;
|
|
1451
|
-
};
|
|
1436
|
+
fill: any;
|
|
1452
1437
|
};
|
|
1453
1438
|
'&$clickable, &$deletable': {
|
|
1454
1439
|
'&:hover, &:focus': {
|