cozy-ui-plus 5.3.1 → 6.1.0

package/src/ContactsListModal/MobileHeader.jsx

@@ -7,36 +7,32 @@ import PreviousIcon from 'cozy-ui/transpiled/react/Icons/Previous'
 import Input from 'cozy-ui/transpiled/react/Input'
 import Paper from 'cozy-ui/transpiled/react/Paper'
 
-import CozyTheme from '../providers/CozyTheme'
-
 const barStyle = {
   height: 48
 }
 
 const MobileHeader = ({ filter, placeholder, onChange, onDismiss }) => {
   return (
-    <CozyTheme variant="inverted">
-      <Paper
-        square
-        elevation={0}
-        className="u-flex u-flex-items-center u-pr-3 u-pl-half"
-        style={barStyle}
-      >
-        <IconButton className="u-mr-half" onClick={onDismiss} size="medium">
-          <Icon icon={PreviousIcon} />
-        </IconButton>
-        <Input
-          type="text"
-          placeholder={placeholder}
-          id={placeholder}
-          value={filter}
-          onChange={onChange}
-          autoFocus
-          fullWidth
-          disableUnderline
-        />
-      </Paper>
-    </CozyTheme>
+    <Paper
+      square
+      elevation={0}
+      className="u-flex u-flex-items-center u-pr-3 u-pl-half"
+      style={barStyle}
+    >
+      <IconButton className="u-mr-half" onClick={onDismiss} size="medium">
+        <Icon icon={PreviousIcon} />
+      </IconButton>
+      <Input
+        type="text"
+        placeholder={placeholder}
+        id={placeholder}
+        value={filter}
+        onChange={onChange}
+        autoFocus
+        fullWidth
+        disableUnderline
+      />
+    </Paper>
   )
 }
 

package/src/Field/index.jsx

@@ -4,9 +4,9 @@ import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 
 import labelStyles from 'cozy-ui/react/Label/styles.styl'
-import Label from 'cozy-ui/transpiled/react/Label'
+import InputLabel from 'cozy-ui/transpiled/react/InputLabel'
 import SelectBox from 'cozy-ui/transpiled/react/SelectBox'
-import Textarea from 'cozy-ui/transpiled/react/Textarea'
+import TextField from 'cozy-ui/transpiled/react/TextField'
 import Input from 'cozy-ui/transpiled/react/legacy/Input'
 
 import styles from './styles.styl'
@@ -141,7 +141,8 @@ const Field = props => {
         )
       case 'textarea':
         return (
-          <Textarea
+          <TextField
+            multiline
             autoCapitalize={autoCapitalize}
             disabled={disabled}
             id={id}
@@ -151,7 +152,7 @@ const Field = props => {
             onKeyUp={onKeyUp}
             onFocus={onFocus}
             onBlur={onBlur}
-            readOnly={readOnly}
+            inputProps={{ readOnly }}
             {...controlledProps}
           />
         )
@@ -224,9 +225,9 @@ const Field = props => {
 
   return (
     <FieldContainer className={className} variant={variant}>
-      <Label htmlFor={id} {...labelProps}>
+      <InputLabel htmlFor={id} {...labelProps}>
         {label}
-      </Label>
+      </InputLabel>
       {side && (
         <div
           className={cx(styles['o-side'], labelStyles['c-label'], {

package/src/ListItem/ListItemFile/ItemIcon.jsx

@@ -7,7 +7,6 @@ import Icon from 'cozy-ui/transpiled/react/Icon'
 import FiletypeNoteIcon from 'cozy-ui/transpiled/react/Icons/FileTypeNote'
 import FiletypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText'
 import Skeleton from 'cozy-ui/transpiled/react/Skeleton'
-import Thumbnail from 'cozy-ui/transpiled/react/Thumbnail'
 
 import FileImageLoader from '../../FileImageLoader'
 
@@ -23,19 +22,28 @@ const ItemIcon = ({ icon, file }) => {
       linkType="tiny"
       render={src => {
         return (
-          <Thumbnail>
+          <div className="u-flex u-w-2 u-h-2 u-flex-items-center u-flex-justify-center">
             {src ? (
-              <img src={src} alt="" />
+              <img
+                className="u-w-2 u-h-2"
+                style={{ objectFit: 'contain' }}
+                src={src}
+                alt=""
+              />
             ) : (
-              <Skeleton variant="rect" animation="wave" />
+              <Skeleton
+                className="u-w-100 u-h-100"
+                variant="rect"
+                animation="wave"
+              />
             )}
-          </Thumbnail>
+          </div>
         )
       }}
       renderFallback={() => (
-        <Thumbnail>
+        <div className="u-flex u-w-2 u-h-2 u-flex-items-center u-flex-justify-center">
           <Icon icon={isNote(file) ? FiletypeNoteIcon : FiletypeTextIcon} />
-        </Thumbnail>
+        </div>
       )}
     />
   )

package/src/Qualification/QualificationItem/index.jsx

@@ -3,7 +3,6 @@ import React from 'react'
 
 import ButtonBase from 'cozy-ui/transpiled/react/ButtonBase'
 import Icon, { iconPropType } from 'cozy-ui/transpiled/react/Icon'
-import IconStack from 'cozy-ui/transpiled/react/IconStack'
 import FileDuotoneIcon from 'cozy-ui/transpiled/react/Icons/FileDuotone'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { makeStyles } from 'cozy-ui/transpiled/react/styles'
@@ -27,19 +26,15 @@ const QualificationItem = ({ icon, label, isSelected, onClick, ...props }) => {
 
   return (
     <ButtonBase {...props} className={styles.item} onClick={onClick}>
-      <IconStack
-        className="u-mb-half"
-        foreground={
-          icon && (
-            <Icon
-              icon={icon}
-              color={
-                isSelected ? 'var(--primaryColor)' : 'var(--secondaryTextColor)'
-              }
-            />
-          )
-        }
-        background={
+      <div className="u-mb-half">
+        {icon ? (
+          <Icon
+            icon={icon}
+            color={
+              isSelected ? 'var(--primaryColor)' : 'var(--secondaryTextColor)'
+            }
+          />
+        ) : (
           <Icon
             icon={FileDuotoneIcon}
             size="32"
@@ -47,8 +42,8 @@ const QualificationItem = ({ icon, label, isSelected, onClick, ...props }) => {
               isSelected ? 'var(--primaryColor)' : 'var(--secondaryTextColor)'
             }
           />
-        }
-      />
+        )}
+      </div>
       <Typography variant="caption">{label}</Typography>
     </ButtonBase>
   )

package/src/ShortcutTile/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
+import { nameToColor } from 'cozy-ui/transpiled/react/Avatar/helpers'
 import { TileIcon } from 'cozy-ui/transpiled/react/Tile'
 import Typography from 'cozy-ui/transpiled/react/Typography'
-import { nameToColor } from 'cozy-ui/transpiled/react/legacy/Avatar/helpers'
 import { makeStyles } from 'cozy-ui/transpiled/react/styles'
 
 import styles from '../AppTile/styles.styl'