Skip to content

Commit 9ff2a54

Browse files
zatteodoubleface
zatteo
authored and
doubleface
committed
feat: Update cozy-ui 138
1 parent 548f0bc commit 9ff2a54

14 files changed

Lines changed: 1139 additions & 208 deletions

File tree

‎package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -73,27 +73,27 @@
7373
"dependencies": {
7474
"@sentry/react": "7.119.0",
7575
"classnames": "2.3.1",
76-
"cozy-bar": "^30.0.0",
76+
"cozy-bar": "^33.1.3",
7777
"cozy-client": "^60.23.1",
7878
"cozy-dataproxy-lib": "^4.13.0",
7979
"cozy-device-helper": "^4.0.1",
8080
"cozy-devtools": "^1.2.1",
8181
"cozy-doctypes": "1.85.4",
8282
"cozy-flags": "^4.6.1",
83-
"cozy-harvest-lib": "^36.0.4",
83+
"cozy-harvest-lib": "^37.0.6",
8484
"cozy-intent": "^2.30.1",
85-
"cozy-interapp": "^0.15.1",
85+
"cozy-interapp": "^0.17.1",
8686
"cozy-keys-lib": "^7.0.0",
8787
"cozy-logger": "^1.17.0",
8888
"cozy-minilog": "3.9.1",
8989
"cozy-pouch-link": "^60.19.0",
9090
"cozy-realtime": "^5.8.0",
91-
"cozy-search": "^0.14.1",
92-
"cozy-sharing": "^30.1.0",
91+
"cozy-search": "^0.25.3",
92+
"cozy-sharing": "^30.1.1",
9393
"cozy-stack-client": "^60.23.0",
94-
"cozy-ui": "^137.0.0",
95-
"cozy-ui-plus": "^4.4.1",
96-
"cozy-viewer": "^26.6.4",
94+
"cozy-ui": "^138.3.0",
95+
"cozy-ui-plus": "^7.0.0",
96+
"cozy-viewer": "^28.0.7",
9797
"date-fns": "2.30.0",
9898
"diacritics": "1.3.0",
9999
"filesize": "10.1.6",

‎src/components/ColorPicker/ColorPicker.jsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import PropTypes from 'prop-types'
22
import React from 'react'
33

4-
import Circle from 'cozy-ui/transpiled/react/Circle'
4+
import Avatar from 'cozy-ui/transpiled/react/Avatar'
55
import GridList from 'cozy-ui/transpiled/react/GridList'
66
import GridListTile from 'cozy-ui/transpiled/react/GridListTile'
77
import Icon from 'cozy-ui/transpiled/react/Icon'
@@ -39,7 +39,9 @@ export const ColorPicker = ({ selectedColor, onColorSelect }) => {
3939
cellHeight={isMobile ? CELL_HEIGHT_MOBILE : CELL_HEIGHT_DESKTOP}
4040
>
4141
<GridListTile className="u-ta-center">
42-
<Circle
42+
<Avatar
43+
color="var(--dodgerBlue)"
44+
textColor="var(--white)"
4345
size={isMobile ? CIRCLE_SIZE_MOBILE : CIRCLE_SIZE_DESKTOP}
4446
backgroundColor="var(--papeBackgroundColor)"
4547
className={styles.noneIconFrame}
@@ -51,11 +53,13 @@ export const ColorPicker = ({ selectedColor, onColorSelect }) => {
5153
color="textSecondary"
5254
/>
5355
</IconButton>
54-
</Circle>
56+
</Avatar>
5557
</GridListTile>
5658
{COLORS.map(color => (
5759
<GridListTile key={color} className="u-ta-center">
58-
<Circle
60+
<Avatar
61+
color="var(--dodgerBlue)"
62+
textColor="var(--white)"
5963
size={isMobile ? CIRCLE_SIZE_MOBILE : CIRCLE_SIZE_DESKTOP}
6064
backgroundColor={color}
6165
>
@@ -68,7 +72,7 @@ export const ColorPicker = ({ selectedColor, onColorSelect }) => {
6872
/>
6973
)}
7074
</IconButton>
71-
</Circle>
75+
</Avatar>
7276
</GridListTile>
7377
))}
7478
</GridList>

‎src/components/FolderPicker/FolderPickerHeader.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react'
22

3-
import Card from 'cozy-ui/transpiled/react/Card'
3+
import Box from 'cozy-ui/transpiled/react/Box'
44
import Typography from 'cozy-ui/transpiled/react/Typography'
55
import { useI18n } from 'twake-i18n'
66

@@ -36,7 +36,15 @@ const FolderPickerHeader: React.FC<FolderPickerHeaderProps> = ({
3636
const subTitleToUse = subTitle ? subTitle : t('Move.to')
3737

3838
return (
39-
<Card inset style={specificCardStyle}>
39+
<Box
40+
display="block"
41+
border={1}
42+
borderColor="var(--dividerColor)"
43+
borderRadius={8}
44+
padding={2}
45+
className="u-m-half-s u-mv-1 u-mh-2"
46+
style={specificCardStyle}
47+
>
4048
<FolderPickerHeaderIllustration entries={entries} />
4149
<div className="u-ellipsis">
4250
<Typography variant="h6" noWrap>
@@ -46,7 +54,7 @@ const FolderPickerHeader: React.FC<FolderPickerHeaderProps> = ({
4654
{subTitleToUse}
4755
</Typography>
4856
</div>
49-
</Card>
57+
</Box>
5058
)
5159
}
5260

‎src/components/FolderPicker/FolderPickerHeaderIllustration.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react'
22

3-
import Circle from 'cozy-ui/transpiled/react/Circle'
4-
import Counter from 'cozy-ui/transpiled/react/Counter'
3+
import Avatar from 'cozy-ui/transpiled/react/Avatar'
54
import Icon from 'cozy-ui/transpiled/react/Icon'
65
import DriveIcon from 'cozy-ui/transpiled/react/Icons/FileTypeFolder'
76

@@ -44,9 +43,9 @@ const FolderPickerHeaderIllustration: React.FC<
4443
}
4544
if (entries.length > 1) {
4645
return (
47-
<Circle>
48-
<Counter count={entries.length} />
49-
</Circle>
46+
<Avatar color="var(--dodgerBlue)" textColor="var(--white)">
47+
<span>{entries.length > 99 ? '99+' : entries.length}</span>
48+
</Avatar>
5049
)
5150
}
5251
return null

‎src/components/PushBanner/QuotaBanner.jsx‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
import { isFlagshipApp } from 'cozy-device-helper'
99
import flag from 'cozy-flags'
1010
import { useWebviewIntent } from 'cozy-intent'
11-
import Banner from 'cozy-ui/transpiled/react/Banner'
11+
import Alert from 'cozy-ui/transpiled/react/Alert'
1212
import Button from 'cozy-ui/transpiled/react/Buttons'
1313
import Icon from 'cozy-ui/transpiled/react/Icon'
1414
import CloudSyncIcon from 'cozy-ui/transpiled/react/Icons/CloudSync'
@@ -53,28 +53,29 @@ const QuotaBanner = () => {
5353

5454
return (
5555
<div className="u-pos-relative">
56-
<Banner
57-
inline
56+
<Alert
5857
icon={<Icon icon={CloudSyncIcon} />}
59-
bgcolor="var(--defaultBackgroundColor)"
60-
text={t('PushBanner.quota.text')}
61-
buttonOne={
62-
<Button
63-
label={t('PushBanner.quota.actions.first')}
64-
variant="text"
65-
onClick={onDismiss}
66-
/>
67-
}
68-
buttonTwo={
69-
canOpenPremiumLink ? (
58+
color="var(--defaultBackgroundColor)"
59+
actions={
60+
<>
7061
<Button
71-
label={t('PushBanner.quota.actions.second')}
62+
label={t('PushBanner.quota.actions.first')}
7263
variant="text"
73-
onClick={onAction}
64+
onClick={onDismiss}
7465
/>
75-
) : null
66+
67+
{canOpenPremiumLink ? (
68+
<Button
69+
label={t('PushBanner.quota.actions.second')}
70+
variant="text"
71+
onClick={onAction}
72+
/>
73+
) : null}
74+
</>
7675
}
77-
/>
76+
>
77+
{t('PushBanner.quota.text')}
78+
</Alert>
7879
</div>
7980
)
8081
}

‎src/components/pushClient/Banner.jsx‎

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import flow from 'lodash/flow'
66
import React, { Component } from 'react'
77

88
import { withClient } from 'cozy-client'
9-
import Banner from 'cozy-ui/transpiled/react/Banner'
9+
import Alert from 'cozy-ui/transpiled/react/Alert'
1010
import Button from 'cozy-ui/transpiled/react/Buttons'
1111
import Icon from 'cozy-ui/transpiled/react/Icon'
1212
import DesktopDownloadIcon from 'cozy-ui/transpiled/react/Icons/DesktopDownload'
@@ -66,9 +66,8 @@ class BannerClient extends Component {
6666

6767
return (
6868
<div className="u-pos-relative">
69-
<Banner
70-
inline
71-
disableIconStyles
69+
<Alert
70+
square
7271
icon={
7372
<Icon
7473
className="u-mt-1 u-ml-1"
@@ -77,32 +76,32 @@ class BannerClient extends Component {
7776
size={isMobile ? 24 : 20}
7877
/>
7978
}
80-
text={t(text, {
79+
color="var(--defaultBackgroundColor)"
80+
action={
81+
<>
82+
<Button
83+
component="a"
84+
variant="text"
85+
label={t('Nav.banner-btn-client')}
86+
size="small"
87+
onClick={() => this.markAsSeen('banner')}
88+
startIcon={<Icon icon={DownloadIcon} />}
89+
target="_blank"
90+
href={link}
91+
/>
92+
<Button
93+
variant="text"
94+
label={t('SelectionBar.close')}
95+
size="small"
96+
onClick={() => this.markAsSeen('close')}
97+
/>
98+
</>
99+
}
100+
>
101+
{t(text, {
81102
name: 'Twake Drive'
82103
})}
83-
bgcolor="var(--defaultBackgroundColor)"
84-
buttonOne={
85-
<Button
86-
component="a"
87-
variant="text"
88-
label={t('Nav.banner-btn-client')}
89-
size="small"
90-
onClick={() => this.markAsSeen('banner')}
91-
startIcon={<Icon icon={DownloadIcon} />}
92-
target="_blank"
93-
href={link}
94-
/>
95-
}
96-
buttonTwo={
97-
<Button
98-
variant="text"
99-
label={t('SelectionBar.close')}
100-
size="small"
101-
onClick={() => this.markAsSeen('close')}
102-
/>
103-
}
104-
noDivider
105-
/>
104+
</Alert>
106105
</div>
107106
)
108107
}

‎src/modules/filelist/File.jsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import React, { useState, useRef } from 'react'
66
import { useSelector } from 'react-redux'
77

88
import { isDirectory } from 'cozy-client/dist/models/file'
9-
import Card from 'cozy-ui/transpiled/react/Card'
9+
import Box from 'cozy-ui/transpiled/react/Box'
1010
import { TableRow, TableCell } from 'cozy-ui/transpiled/react/deprecated/Table'
1111
import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
1212
import { useI18n } from 'twake-i18n'
@@ -42,9 +42,17 @@ const FileWrapper = ({ children, viewType, className, onContextMenu }) =>
4242
{children}
4343
</TableRow>
4444
) : (
45-
<Card className={className} onContextMenu={onContextMenu}>
45+
<Box
46+
display="block"
47+
border={1}
48+
borderColor="var(--dividerColor)"
49+
borderRadius={8}
50+
padding={2}
51+
className={className}
52+
onContextMenu={onContextMenu}
53+
>
4654
{children}
47-
</Card>
55+
</Box>
4856
)
4957

5058
const ThumbnailWrapper = ({ children, viewType, className }) =>

‎src/modules/filelist/cells/SharingShortcutBadge.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
33
import React from 'react'
44

55
import { isSharingShortcutNew } from 'cozy-client/dist/models/file'
6-
import Circle from 'cozy-ui/transpiled/react/Circle'
6+
import Avatar from 'cozy-ui/transpiled/react/Avatar'
77
import { TableCell } from 'cozy-ui/transpiled/react/deprecated/Table'
88
import { useI18n } from 'twake-i18n'
99

@@ -20,14 +20,14 @@ const SharingShortcutBadge = ({ file }) => {
2020
)}
2121
>
2222
{isSharingShortcutNew(file) ? (
23-
<Circle size="xsmall" backgroundColor="var(--errorColor)">
23+
<Avatar color="var(--errorColor)" textColor="var(--white)" size="xs">
2424
<span
2525
style={{ fontSize: '11px', lineHeight: '1rem' }}
2626
aria-label={t('table.row_sharing_shortcut_aria_label')}
2727
>
2828
1
2929
</span>
30-
</Circle>
30+
</Avatar>
3131
) : null}
3232
</TableCell>
3333
)

‎src/modules/filelist/icons/FileThumbnail.tsx‎

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,10 @@ import { isDirectory } from 'cozy-client/dist/models/file'
55
import { SharedBadge, SharingOwnerAvatar } from 'cozy-sharing'
66
import Badge from 'cozy-ui/transpiled/react/Badge'
77
import Box from 'cozy-ui/transpiled/react/Box'
8-
import GhostFileBadge from 'cozy-ui/transpiled/react/GhostFileBadge'
98
import Icon from 'cozy-ui/transpiled/react/Icon'
109
import FileTypeServerIcon from 'cozy-ui/transpiled/react/Icons/FileTypeServer'
1110
import LinkIcon from 'cozy-ui/transpiled/react/Icons/Link'
1211
import TrashDuotoneIcon from 'cozy-ui/transpiled/react/Icons/TrashDuotone'
13-
import InfosBadge from 'cozy-ui/transpiled/react/InfosBadge'
1412
import Spinner from 'cozy-ui/transpiled/react/Spinner'
1513

1614
import styles from '@/styles/filelist.styl'
@@ -169,20 +167,48 @@ const FileThumbnail: React.FC<FileThumbnailProps> = ({
169167
{isRegularShortcut && (
170168
<>
171169
{viewType !== 'grid' ? (
172-
<InfosBadge badgeContent={<Icon icon={LinkIcon} size={10} />}>
170+
<Badge
171+
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
172+
badgeContent={
173+
<div
174+
className="u-h-1-half u-miw-1-half u-bdrs-circle u-flex u-flex-items-center u-flex-justify-center"
175+
style={{
176+
backgroundColor: 'var(--paperBackgroundColor)',
177+
color: 'var(--iconTextColor)',
178+
boxShadow: 'var(--shadow3)'
179+
}}
180+
>
181+
<Icon icon={LinkIcon} size="10" />
182+
</div>
183+
}
184+
>
173185
{fileIcon}
174-
</InfosBadge>
186+
</Badge>
175187
) : (
176188
fileIcon
177189
)}
178190
</>
179191
)}
180192
{isSharingShortcut && (
181-
<GhostFileBadge
182-
badgeContent={<SharingShortcutIcon file={file} size={16} />}
193+
<Badge
194+
badgeContent={
195+
<div
196+
className="u-h-auto u-miw-auto"
197+
style={{
198+
padding: '3px',
199+
backgroundColor: 'white',
200+
color: 'var(--coolGrey)',
201+
border: '1px solid var(--silver)',
202+
borderRadius: '6px'
203+
}}
204+
>
205+
<SharingShortcutIcon file={file} size={16} />
206+
</div>
207+
}
208+
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
183209
>
184210
<SharingOwnerAvatar docId={file._id} size="small" />
185-
</GhostFileBadge>
211+
</Badge>
186212
)}
187213
{isInSyncFromSharing && (
188214
<span data-testid="fil-file-thumbnail--spinner">

0 commit comments

Comments
 (0)