cozy-ui 83.3.0 → 83.4.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+# [83.4.0](https://github.com/cozy/cozy-ui/compare/v83.3.0...v83.4.0) (2023-04-25)
+
+
+### Features
+
+* **ContactsList:** Adjust style after modification on ListItem ([6049a7b](https://github.com/cozy/cozy-ui/commit/6049a7b))
+* **FilePicker:** Adjust style after ListItem modifications ([fa3b646](https://github.com/cozy/cozy-ui/commit/fa3b646))
+* **List:** Update List, ListItem, ListItemText, ListSubheader, ListItemIcon ([3e64e8e](https://github.com/cozy/cozy-ui/commit/3e64e8e))
+* **NestedSelect:** Adjust style after ListItem modifications ([b951426](https://github.com/cozy/cozy-ui/commit/b951426))
+
 # [83.3.0](https://github.com/cozy/cozy-ui/compare/v83.2.0...v83.3.0) (2023-04-21)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "83.3.0",
+  "version": "83.4.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/ContactsList/ContactRow.jsx

@@ -18,12 +18,14 @@ const ContactRow = ({ className, contact, onClick, divider, ...rest }) => {
   const phone = getPrimaryPhone(contact) || undefined
   const email = getPrimaryEmail(contact) || undefined
   const cozyUrl = getPrimaryCozy(contact) || undefined
+  const { isDesktop } = useBreakpoints()
 
   return (
     <ListItem
       data-testid="contact-listItem"
       className={cx({ 'u-c-pointer': onClick }, className)}
       divider={divider}
+      gutters={isDesktop ? 'double' : 'default'}
       onClick={() => onClick(contact)}
       {...rest}
     >

package/react/ContactsList/ContactsList.jsx

@@ -6,16 +6,25 @@ import List from '../MuiCozyTheme/List'
 import ListSubheader from '../MuiCozyTheme/ListSubheader'
 import { sortContacts, categorizeContacts, sortHeaders } from './helpers'
 import ContactRow from './ContactRow'
+import useBreakpoints from '../hooks/useBreakpoints'
 
 const ContactsList = ({ contacts, onItemClick, ...rest }) => {
   const sortedContacts = sortContacts(contacts)
   const categorizedContacts = categorizeContacts(sortedContacts)
   const sortedHeaders = sortHeaders(categorizedContacts)
+  const { isDesktop } = useBreakpoints()
 
   return (
     <Table {...rest}>
       {sortedHeaders.map(header => (
-        <List key={header} subheader={<ListSubheader>{header}</ListSubheader>}>
+        <List
+          key={header}
+          subheader={
+            <ListSubheader gutters={isDesktop ? 'double' : 'default'}>
+              {header}
+            </ListSubheader>
+          }
+        >
           {categorizedContacts[header].map((contact, index) => (
             <ContactRow
               key={contact._id}

package/react/ContactsList/Readme.md

@@ -1,9 +1,11 @@
 ### Raw list
 
 ```jsx
-import ContactsList from 'cozy-ui/transpiled/react/ContactsList';
-import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints';
-import contacts from './_mockContacts.json';
+import ContactsList from 'cozy-ui/transpiled/react/ContactsList'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import contacts from './_mockContacts.json'
+
+;
 
 <BreakpointsProvider>
   <div style={{ height: 500, overflowY: 'scroll' }}>
@@ -15,18 +17,21 @@ import contacts from './_mockContacts.json';
 ### Clickable items
 
 ```jsx
-import ContactsList from 'cozy-ui/transpiled/react/ContactsList';
-import contacts from './_mockContacts.json';
-import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints';
-
-initialState = { contact: null };
-
-<BreakpointsProvider><p>
-  {state.contact ? (
-      `Clicked on contact ${state.contact._id}`
-    ) : (
-      'No contact clicked'
-  )}
+import ContactsList from 'cozy-ui/transpiled/react/ContactsList'
+import contacts from './_mockContacts.json'
+import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+
+initialState = { contact: null }
+
+;
+
+<BreakpointsProvider>
+  <p>
+    {state.contact ? (
+        `Clicked on contact ${state.contact._id}`
+      ) : (
+        'No contact clicked'
+    )}
   </p>
   <div style={{ height: 500, overflowY: 'scroll' }}>
     <ContactsList

package/react/ContactsList/__snapshots__/ContactRow.spec.js.snap

@@ -2,10 +2,12 @@
 
 exports[`ContactRow should match the contact snapshot 1`] = `
 <li
-  className="MuiListItem-root MuiListItem-gutters"
+  className="MuiListItem-root medium MuiListItem-gutters makeStyles-gutters-1 makeStyles-gutters-11"
   data-testid="contact-listItem"
   disabled={false}
+  gutters="double"
   onClick={[Function]}
+  size="medium"
 >
   <div
     className="styles__TableCell___yJCq7 styles__contact-identity___mL3IJ u-flex u-flex-items-center u-ellipsis"

package/react/ContactsList/styles.styl

@@ -11,12 +11,15 @@
 
 .contact-phone
     flex 0 0 12rem
+    padding 0
 
 .contact-cozyurl
     flex 0 0 12rem
+    padding 0
 
 .contact-email
     flex-basis 30%
+    padding 0
 
 .contact-myself
     color var(--secondaryTextColor)
@@ -24,6 +27,7 @@
 
 .contact-identity
     flex-basis 30%
+    padding 0
 
     +small-screen()
         flex 1 1 auto

package/react/FilePicker/FilePickerBodyItem.jsx

@@ -32,9 +32,6 @@ const useStyles = makeStyles(() => ({
     alignSelf: 'auto',
     alignItems: 'center',
     marginLeft: '0.5rem'
-  },
-  listItemIcon: {
-    marginLeft: '1rem'
   }
 }))
 
@@ -65,8 +62,8 @@ const FilePickerBodyItem = ({
     <>
       <ListItem
         disabled={!hasChoice && isFile(item)}
+        size="small"
         button
-        className="u-p-0"
         data-testid="list-item"
       >
         <div
@@ -74,7 +71,7 @@ const FilePickerBodyItem = ({
           className={styles['filePickerBreadcrumb-wrapper']}
           onClick={handleListItemClick(item)}
         >
-          <ListItemIcon className={classes.listItemIcon}>
+          <ListItemIcon>
             <Icon
               icon={isDirectory(item) ? FileTypeFolder : FileTypeText}
               width="32"
@@ -95,7 +92,7 @@ const FilePickerBodyItem = ({
         )}
         <div
           data-testid="choice-onclick"
-          className="u-ph-1 u-pv-half u-h-2 u-flex u-flex-items-center"
+          className="u-pv-half u-h-2 u-flex u-flex-items-center"
           onClick={hasChoice ? handleChoiceClick(item) : undefined}
         >
           <Input

package/react/MuiCozyTheme/List/Readme.md

@@ -43,6 +43,8 @@ import Divider from 'cozy-ui/transpiled/react/MuiCozyTheme/Divider'
 import FileTypeFolderIcon from 'cozy-ui/transpiled/react/Icons/FileTypeFolder'
 import FiletypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText'
 import DotsIcon from "cozy-ui/transpiled/react/Icons/Dots"
+import PenIcon from "cozy-ui/transpiled/react/Icons/Pen"
+import TrashIcon from "cozy-ui/transpiled/react/Icons/Trash"
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import { BreakpointsProvider } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
 import FileIcon from 'cozy-ui/transpiled/react/Icons/File'
@@ -55,180 +57,173 @@ import PieChartIcon from 'cozy-ui/transpiled/react/Icons/PieChart'
 import CommentIcon from 'cozy-ui/transpiled/react/Icons/Comment'
 import MagicTrickIcon from 'cozy-ui/transpiled/react/Icons/MagicTrick'
 import Radio from 'cozy-ui/transpiled/react/Radios'
+import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
 import Variants from 'cozy-ui/docs/components/Variants'
 
 initialState = { showMenu: false }
 
 const anchorRef = React.useRef()
 const hideMenu = () => setState({ showMenu: false })
-const toggleMenu = () => {setState(state => ({ showMenu: !state.showMenu }))}
+const toggleMenu = () => setState(state => ({ showMenu: !state.showMenu }))
 
-const initialVariants = [{ dense: false, }]
+const initialVariants = [{ dense: false, disabledGutters: false, doubleGutters: false, small: false, large: false }]
 
 ;
 
 <BreakpointsProvider>
   <Variants initialVariants={initialVariants} screenshotAllVariants>
-    {variant => (
-      <>
-        <List dense={variant.dense} subheader={<ListSubheader>Section 1</ListSubheader>}>
-          <ListItem button divider={variant.divider}>
-            <ListItemIcon>
-              <Icon icon={FileTypeFolderIcon} size={32} />
-            </ListItemIcon>
-            <ListItemText primary="I'm a primary text"/>
-            <ListItemText secondary="Metadata"/>
-            <ListItemText secondary="Metadata"/>
-          </ListItem>
-
-          <Divider component="li" variant="inset" />
-
-          <ListItem button>
-            <ListItemIcon>
-              <Icon icon={FiletypeTextIcon} size={32} />
-            </ListItemIcon>
-            <ListItemText primary="I'm a primary text" secondary="I'm a secondary text"/>
-          </ListItem>
-
-          <Divider component="li" variant="inset" />
-
-          <ListItem button>
-            <ListItemIcon>
-              <Icon icon={FiletypeTextIcon} size={32} />
-            </ListItemIcon>
-            <ListItemText
-              primary={
-                <Typography variant="caption">I'm a primary text</Typography>
-              }
-              secondary={
-                <Typography variant="body1">I'm a secondary text</Typography>
-              }
-            />
-          </ListItem>
-        </List>
-
-        <List
-          dense={variant.dense}
-          subheader={<ListSubheader style={{ textIndent: '1rem' }}>Mobile alignment even on desktop</ListSubheader>}
-        >
-          <ListItem style={{ paddingLeft: '1rem' }} button>
-            <ListItemIcon>
-              <Icon icon={FileTypeFolderIcon} size={32} />
-            </ListItemIcon>
-            <ListItemText primary="I'm a primary text"/>
-          </ListItem>
-
-          <Divider component="li" variant="inset" />
-
-          <ListItem style={{ paddingLeft: '1rem' }} button>
-            <ListItemIcon>
-              <Icon icon={FileTypeFolderIcon} size={32} />
-            </ListItemIcon>
-            <ListItemText primary="I'm a primary text"/>
-          </ListItem>
-        </List>
-
-        <List dense={variant.dense} subheader={<ListSubheader>Section 2</ListSubheader>}>
-          <ListItem button>
-            <ListItemIcon>
-              <Icon icon={CommentIcon} />
-            </ListItemIcon>
-            <ListItemText primary="Support" />
-            <ListItemSecondaryAction>
-              <IconButton ref={anchorRef} onClick={toggleMenu}>
-                <Icon icon={DotsIcon} />
-              </IconButton>
-            </ListItemSecondaryAction>
-          </ListItem>
-          {state.showMenu && (
-            <ActionMenu
-              anchorElRef={anchorRef}
-              autoclose
-              onClose={hideMenu}
-            >
-              <ActionMenuItem left={<Icon icon={FileIcon} />}>
-                <Typography variant="body1" gutterBottom>
-                  Item 1
-                </Typography>
-                <Typography variant="caption" color="textSecondary">
-                  Descriptive text to elaborate on what item 3 does.
-                </Typography>
-              </ActionMenuItem>
-              <ActionMenuItem left={<Icon icon={FileIcon} />}>
-                <Typography variant="body1" gutterBottom>
-                  Item 2
-                </Typography>
-              </ActionMenuItem>
-            </ActionMenu>
-          )}
-          <Divider component="li" variant="inset" />
-
-          <ListItem button>
-            <ListItemIcon>
-              <Icon icon={MagicTrickIcon} />
-            </ListItemIcon>
-            <ListItemText primary="Double actions" />
-            <ListItemSecondaryAction>
-              <IconButton>
+    {variant => {
+      const gutters = variant.disabledGutters ? 'disabled' : variant.doubleGutters ? 'double' : 'default'
+      const size = variant.small ? 'small' : variant.large ? 'large' : 'medium'
+
+      const listItemProps = { gutters, size }
+
+      return (
+        <>
+          <List dense={variant.dense} subheader={<ListSubheader>Section 1</ListSubheader>}>
+            <ListItem {...listItemProps} button divider={variant.divider}>
+              <ListItemIcon>
+                <Icon icon={FileTypeFolderIcon} size={32} />
+              </ListItemIcon>
+              <ListItemText primary="I'm a primary text"/>
+              <ListItemText secondary="Metadata"/>
+              <ListItemText secondary="Metadata"/>
+            </ListItem>
+
+            <Divider component="li" variant="inset" />
+
+            <ListItem {...listItemProps} button>
+              <ListItemIcon>
+                <Icon icon={FiletypeTextIcon} size={32} />
+              </ListItemIcon>
+              <ListItemText primary="I'm a primary text" secondary="I'm a secondary text"/>
+            </ListItem>
+
+            <Divider component="li" variant="inset" />
+
+            <ListItem {...listItemProps} button>
+              <ListItemIcon>
+                <Icon icon={FiletypeTextIcon} size={32} />
+              </ListItemIcon>
+              <ListItemText
+                primary="I'm a primary text"
+                secondary="I'm a secondary text"
+                primaryTypographyProps={{ variant: 'caption' }}
+                secondaryTypographyProps={{ color: 'initial', variant: variant.dense ? 'body2' : 'body1' }}
+              />
+            </ListItem>
+          </List>
+
+          <List dense={variant.dense} subheader={<ListSubheader>Section 2</ListSubheader>}>
+            <ListItem {...listItemProps} button>
+              <ListItemIcon>
+                <Icon icon={CommentIcon} />
+              </ListItemIcon>
+              <ListItemText primary="Support" />
+              <ListItemSecondaryAction>
+                <IconButton ref={anchorRef} onClick={toggleMenu}>
+                  <Icon icon={DotsIcon} />
+                </IconButton>
+              </ListItemSecondaryAction>
+            </ListItem>
+            {state.showMenu && (
+              <ActionMenu
+                anchorElRef={anchorRef}
+                autoclose
+                onClose={hideMenu}
+              >
+                <ActionMenuItem left={<Icon icon={FileIcon} />}>
+                  <Typography variant="body1" gutterBottom>
+                    Item 1
+                  </Typography>
+                  <Typography variant="caption" color="textSecondary">
+                    Descriptive text to elaborate on what item 3 does.
+                  </Typography>
+                </ActionMenuItem>
+                <ActionMenuItem left={<Icon icon={FileIcon} />}>
+                  <Typography variant="body1" gutterBottom>
+                    Item 2
+                  </Typography>
+                </ActionMenuItem>
+              </ActionMenu>
+            )}
+            <Divider component="li" variant="inset" />
+
+            <ListItem {...listItemProps} button>
+              <ListItemIcon>
+                <Icon icon={MagicTrickIcon} />
+              </ListItemIcon>
+              <ListItemText primary="Double actions" />
+              <ListItemSecondaryAction>
+                <IconButton>
+                  <Icon icon={RightIcon} />
+                </IconButton>
+                <IconButton>
+                  <Icon icon={DotsIcon} />
+                </IconButton>
+              </ListItemSecondaryAction>
+            </ListItem>
+          </List>
+
+          <Divider />
+
+          <List dense={variant.dense}>
+            <ListItem {...listItemProps} button>
+              <ListItemIcon>
+                <Icon icon={PeopleIcon} />
+              </ListItemIcon>
+              <ListItemText primary="Profil" />
+              <ListItemIcon>
                 <Icon icon={RightIcon} />
-              </IconButton>
-              <IconButton>
-                <Icon icon={DotsIcon} />
-              </IconButton>
-            </ListItemSecondaryAction>
-          </ListItem>
-        </List>
-
-        <Divider />
-
-        <List dense={variant.dense}>
-          <ListItem button>
-            <ListItemIcon>
-              <Icon icon={PeopleIcon} />
-            </ListItemIcon>
-            <ListItemText primary="Profil" />
-            <Icon icon={RightIcon} />
-          </ListItem>
-
-          <Divider component="li" variant="inset" />
-
-          <ListItem button>
-            <ListItemIcon>
-              <Icon icon={PeopleIcon} />
-            </ListItemIcon>
-            <ListItemText primary={content.ada.short} secondary={content.ada.short} />
-            <Radio edge="end" />
-          </ListItem>
-
-          <Divider component="li" variant="inset" />
-
-          <ListItem button>
-            <ListItemIcon>
-              <Icon icon={HelpIcon} />
-            </ListItemIcon>
-            <ListItemText primary="Help" />
-            <Icon icon={LinkOutIcon} />
-          </ListItem>
-
-          <Divider component="li" variant="inset" />
-
-          <ListItem button>
-            <ListItemIcon>
-              <Icon icon={PieChartIcon} />
-            </ListItemIcon>
-            <ListItemText primary="Storage" />
-            <Typography
-              style={{ color: "var(--secondaryTextColor)" }}
-              className="u-mr-half"
-              variant="body2"
-            >
-              82% used
-            </Typography>
-            <Icon icon={RightIcon} />
-          </ListItem>
-        </List>
-      </>
-    )}
+              </ListItemIcon>
+            </ListItem>
+
+            <Divider component="li" variant="inset" />
+
+            <ListItem {...listItemProps} button>
+              <ListItemIcon>
+                <Icon icon={PeopleIcon} />
+              </ListItemIcon>
+              <ListItemText primary={content.ada.short} secondary={content.ada.short} />
+              <ListItemIcon>
+                <Radio />
+              </ListItemIcon>
+            </ListItem>
+
+            <Divider component="li" variant="inset" />
+
+            <ListItem {...listItemProps} button>
+              <ListItemIcon>
+                <Icon icon={HelpIcon} />
+              </ListItemIcon>
+              <ListItemText primary="Help" />
+              <ListItemIcon>
+                <Icon icon={LinkOutIcon} />
+              </ListItemIcon>
+            </ListItem>
+
+            <Divider component="li" variant="inset" />
+
+            <ListItem {...listItemProps} button>
+              <ListItemIcon>
+                <Icon icon={PieChartIcon} />
+              </ListItemIcon>
+              <ListItemText primary="Storage" />
+              <Typography
+                style={{ color: "var(--secondaryTextColor)" }}
+                className="u-mr-half"
+                variant="body2"
+              >
+                82% used
+              </Typography>
+              <ListItemIcon>
+                <Icon icon={RightIcon} />
+              </ListItemIcon>
+            </ListItem>
+          </List>
+        </>
+      )
+    }}
   </Variants>
 </BreakpointsProvider>
 ```

package/react/MuiCozyTheme/ListItem/Readme.md

@@ -0,0 +1,99 @@
+
+
+```jsx
+import Variants from 'cozy-ui/docs/components/Variants'
+import List from 'cozy-ui/transpiled/react/MuiCozyTheme/List'
+import ListSubheader from 'cozy-ui/transpiled/react/MuiCozyTheme/ListSubheader'
+import ListItem from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItem'
+import ListItemIcon from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+import ListItemSecondaryAction from 'cozy-ui/transpiled/react/MuiCozyTheme/ListItemSecondaryAction'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import IconButton from 'cozy-ui/transpiled/react/IconButton'
+import CommentIcon from 'cozy-ui/transpiled/react/Icons/Comment'
+import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
+import RightIcon from 'cozy-ui/transpiled/react/Icons/Right'
+import DotsIcon from "cozy-ui/transpiled/react/Icons/Dots"
+import PenIcon from "cozy-ui/transpiled/react/Icons/Pen"
+import TrashIcon from "cozy-ui/transpiled/react/Icons/Trash"
+import Radio from 'cozy-ui/transpiled/react/Radios'
+import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
+
+const initialVariants = [{
+  dense: false,
+  longText: false,
+  disabledGutters: false,
+  doubleGutters: false,
+  small: false,
+  large: false,
+  bigIcons: false,
+  smallIcons: false,
+  multipleLeftIcons: false,
+  multipleRightIcons: false,
+  withActions: false
+}]
+
+;
+
+<Variants initialVariants={initialVariants} screenshotAllVariants>
+  {variant => {
+    const gutters = variant.disabledGutters ? 'disabled' : variant.doubleGutters ? 'double' : 'default'
+    const size = variant.small ? 'small' : variant.large ? 'large' : 'medium'
+    const props = { gutters, size }
+    const iconSize = variant.smallIcons ? 8 : variant.bigIcons ? 32 : 16
+    const text = variant.longText ? content.ada.short : "I'm a primary text"
+
+    return (
+      <>
+        <List dense={variant.dense} subheader={<ListSubheader>Section 1</ListSubheader>}>
+          <ListItem {...props} button>
+            <ListItemIcon>
+              <Icon icon={CommentIcon} size={iconSize} />
+            </ListItemIcon>
+            {variant.multipleLeftIcons && (
+              <>
+                <ListItemIcon>
+                  <Icon icon={PeopleIcon} size={iconSize} />
+                </ListItemIcon>
+                <ListItemIcon>
+                  <Radio />
+                </ListItemIcon>
+                <ListItemIcon>
+                  <Checkbox />
+                </ListItemIcon>
+              </>
+            )}
+            <ListItemText primary={text} />
+            {variant.multipleRightIcons && (
+              <>
+                <ListItemIcon>
+                  <Icon icon={RightIcon} size={iconSize} />
+                </ListItemIcon>
+                <ListItemIcon>
+                  <Radio />
+                </ListItemIcon>
+                <ListItemIcon>
+                  <Checkbox />
+                </ListItemIcon>
+              </>
+            )}
+            {variant.withActions && (
+              <ListItemSecondaryAction>
+                <IconButton>
+                  <Icon icon={PenIcon} />
+                </IconButton>
+                <IconButton>
+                  <Icon icon={TrashIcon} />
+                </IconButton>
+                <IconButton>
+                  <Icon icon={DotsIcon} />
+                </IconButton>
+              </ListItemSecondaryAction>
+            )}
+          </ListItem>
+        </List>
+      </>
+    )
+  }}
+</Variants>
+```