Fixes on contact picker (#1285)

Fixes on contact picker
cozy · Dec 2, 2019 · 81ce2cf · 81ce2cf
2 parents 0581b59 + 85ce48c
commit 81ce2cf
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 29 deletions.
diff --git a/react/ContactPicker/Readme.md b/react/ContactPicker/Readme.md
@@ -6,6 +6,7 @@ initialState = { selectedContact: null };
 <DemoProvider>
   <ContactPicker
     placeholder="Select a contact"
+    listPlaceholder="Search a contact"
     onChange={selectedContact => setState({ selectedContact })}
     value={state.selectedContact}
   />

diff --git a/react/ContactPicker/index.jsx b/react/ContactPicker/index.jsx
@@ -19,7 +19,7 @@ const SelectControl = props => {
 }
 
 const ContactPicker = props => {
-  const { placeholder, onChange, value, ...rest } = props
+  const { placeholder, listPlaceholder, onChange, value, ...rest } = props
   const [showContactsList, setShowContactsList] = useState(false)
 
   const handleChange = contact => {
@@ -35,6 +35,7 @@ const ContactPicker = props => {
         <ContactsListModal
           dismissAction={() => setShowContactsList(false)}
           onItemClick={handleChange}
+          placeholder={listPlaceholder}
         />
       )}
     </>

diff --git a/react/ContactsListModal/index.jsx b/react/ContactsListModal/index.jsx
@@ -1,12 +1,13 @@
 import React, { useState } from 'react'
 import { Query, fetchPolicies } from 'cozy-client'
 import ContactsList from '../ContactsList'
-import Modal, { ModalHeader, ModalDescription, ModalBackButton } from '../Modal'
+import Modal, { ModalHeader, ModalDescription } from '../Modal'
 import Spinner from '../Spinner'
 import styles from './styles.styl'
 import Input from '../Input'
 import PropTypes from 'prop-types'
 import withBreakpoints from '../helpers/withBreakpoints'
+import Button from '../Button'
 import { Contact } from 'cozy-doctypes'
 
 const thirtySeconds = 30000
@@ -60,9 +61,12 @@ const ContactsListModal = props => {
     <Modal size="xxlarge" mobileFullscreen {...rest} closable={!isMobile}>
       <ModalHeader className={styles.ContactsListModal__header}>
         {isMobile && (
-          <ModalBackButton
+          <Button
             onClick={rest.dismissAction}
-            style={{ color: 'var(--white)' }}
+            extension="narrow"
+            iconOnly
+            icon="previous"
+            theme="primary"
           />
         )}
         <Input

diff --git a/react/ContactsListModal/styles.styl b/react/ContactsListModal/styles.styl
@@ -1,6 +1,6 @@
 @require 'settings/breakpoints'
 
-.ContactsListModal__header
+.ContactsListModal__header.ContactsListModal__header
     +small-screen()
         background-color var(--primaryColor)
         padding rem(12) 0
@@ -21,5 +21,5 @@
             &::placeholder
                 color inherit
 
-.ContactsListModal__description
+.ContactsListModal__description.ContactsListModal__description
     padding 0
diff --git a/react/Field/styles.styl b/react/Field/styles.styl
@@ -1,4 +1,5 @@
 @require '../../stylus/components/forms'
+@require 'settings/spaces.styl'
 
 .o-field
     @extend $field
@@ -11,7 +12,7 @@
         flex-basis rem(128)
         flex-shrink 0
         flex-grow 0
-        padding 0.75rem 0
+        padding spacing_values.m 0
 
         +small-screen()
             flex-basis auto

diff --git a/react/Labs/CollectionField/index.jsx b/react/Labs/CollectionField/index.jsx
@@ -44,28 +44,30 @@ const CollectionField = props => {
     <FieldContainer {...rest}>
       <Label>{label}</Label>
       <Stack>
-        <Stack spacing="s">
-          {values.map((value, index) => {
-            return (
-              <div key={index} className={styles.CollectionField__row}>
-                <Component
-                  value={value}
-                  onChange={handleChange(index)}
-                  placeholder={placeholder}
-                />
-                <Button
-                  type="button"
-                  theme="secondary"
-                  label={removeButtonLabel}
-                  iconOnly
-                  round
-                  icon={<Icon icon="cross-small" color="var(--slateGrey)" />}
-                  onClick={() => handleRemove(index)}
-                />
-              </div>
-            )
-          })}
-        </Stack>
+        {values.length > 0 ? (
+          <Stack spacing="s">
+            {values.map((value, index) => {
+              return (
+                <div key={index} className={styles.CollectionField__row}>
+                  <Component
+                    value={value}
+                    onChange={handleChange(index)}
+                    placeholder={placeholder}
+                  />
+                  <Button
+                    type="button"
+                    theme="secondary"
+                    label={removeButtonLabel}
+                    iconOnly
+                    round
+                    icon={<Icon icon="cross-small" color="var(--slateGrey)" />}
+                    onClick={() => handleRemove(index)}
+                  />
+                </div>
+              )
+            })}
+          </Stack>
+        ) : null}
         <Button
           label={addButtonLabel}
           type="button"