Add inline variant to Field (#1278)

Add inline variant to Field
cozy · Nov 29, 2019 · eee16d5 · eee16d5
2 parents 65c59fb + 09e1862
commit eee16d5
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 20 deletions.
diff --git a/react/Field/Readme.md b/react/Field/Readme.md
@@ -19,6 +19,22 @@ import Field from 'cozy-ui/transpiled/react/Field';
 </form>
 ```
 
+##### Inline variant
+
+```
+import Field from 'cozy-ui/transpiled/react/Field';
+<form>
+  <Field
+    id="idField"
+    label="I'm a label"
+    type="text"
+    placeholder="Write something"
+    size="medium"
+    variant="inline"
+  />
+</form>
+```
+
 ##### Controlled input
 
 An input is controlled if `props.value` is passed, even if it is empty.

diff --git a/react/Field/index.jsx b/react/Field/index.jsx
@@ -85,6 +85,21 @@ InputPassword.defaultProps = {
   ...Input.defaultProps
 }
 
+const FieldContainer = props => {
+  const { className, variant, ...rest } = props
+
+  return (
+    <div
+      className={cx(
+        styles['o-field'],
+        { [styles['o-field--inline']]: variant === 'inline' },
+        className
+      )}
+      {...rest}
+    />
+  )
+}
+
 const Field = props => {
   const {
     autoComplete,
@@ -108,7 +123,8 @@ const Field = props => {
     secondaryLabels,
     secondaryComponent,
     side,
-    size
+    size,
+    variant
   } = props
   const controlledProps = {
     ...(value !== undefined ? { value } : {}),
@@ -204,7 +220,7 @@ const Field = props => {
   }
 
   return (
-    <div className={cx(styles['o-field'], className)}>
+    <FieldContainer className={className} variant={variant}>
       <Label htmlFor={id} {...labelProps}>
         {label}
       </Label>
@@ -218,7 +234,7 @@ const Field = props => {
         </div>
       )}
       {inputType(type)}
-    </div>
+    </FieldContainer>
   )
 }
 
@@ -290,3 +306,4 @@ Field.defaultProps = {
 }
 
 export default Field
+export { FieldContainer }
diff --git a/react/Field/styles.styl b/react/Field/styles.styl
@@ -3,6 +3,21 @@
 .o-field
     @extend $field
 
+.o-field--inline
+    @extend $field-inline
+    margin 0
+
+    label
+        flex-basis rem(128)
+        flex-shrink 0
+        flex-grow 0
+        padding 0.75rem 0
+
+        +small-screen()
+            flex-basis auto
+
+    > *
+        flex-grow 1
 
 .o-field-input
     position relative

diff --git a/react/Labs/CollectionField/Readme.md b/react/Labs/CollectionField/Readme.md
@@ -17,3 +17,24 @@ initialState = { contacts: [contacts[0]] };
   />
 </DemoProvider>
 ```
+
+```jsx
+import CollectionField from 'cozy-ui/transpiled/react/Labs/CollectionField';
+import ContactPicker from 'cozy-ui/transpiled/react/ContactPicker';
+import DemoProvider from '../../ContactsListModal/DemoProvider';
+import contacts from '../../ContactsList/data.json';
+initialState = { contacts: [contacts[0]] };
+
+<DemoProvider>
+  <CollectionField
+    values={state.contacts}
+    component={ContactPicker}
+    onChange={contacts => setState({ contacts })}
+    label="Contacts"
+    addButtonLabel="Add a contact"
+    removeButtonLabel="Remove this contact"
+    placeholder="Select a contact"
+    variant="inline"
+  />
+</DemoProvider>
+```
diff --git a/react/Labs/CollectionField/index.jsx b/react/Labs/CollectionField/index.jsx
@@ -1,11 +1,10 @@
 import React from 'react'
 import Button from '../../Button'
-import cx from 'classnames'
-import fieldStyles from '../../Field/styles.styl'
 import Label from '../../Label'
 import styles from './styles.styl'
 import Stack from '../../Stack'
 import Icon from '../../Icon'
+import { FieldContainer } from '../../Field'
 
 /**
  * Handles a collection of form fields.
@@ -21,7 +20,6 @@ const CollectionField = props => {
     addButtonLabel,
     removeButtonLabel,
     onChange,
-    className,
     ...rest
   } = props
 
@@ -43,7 +41,7 @@ const CollectionField = props => {
   }
 
   return (
-    <div className={cx(fieldStyles['o-field'], className)} {...rest}>
+    <FieldContainer {...rest}>
       <Label>{label}</Label>
       <Stack>
         <Stack spacing="s">
@@ -79,7 +77,7 @@ const CollectionField = props => {
           className={styles.CollectionField__addBtn}
         />
       </Stack>
-    </div>
+    </FieldContainer>
   )
 }
 

diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
@@ -1975,38 +1975,46 @@ exports[`Field should render examples: Field 1`] = `
 `;
 
 exports[`Field should render examples: Field 2`] = `
+"<div>
+  <form>
+    <div class=\\"styles__o-field___3n5HM styles__o-field--inline___7JWZ8\\"><label for=\\"idField\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I'm a label</label><input type=\\"text\\" id=\\"idField\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--medium___28jPV\\" placeholder=\\"Write something\\" value=\\"\\"></div>
+  </form>
+</div>"
+`;
+
+exports[`Field should render examples: Field 3`] = `
 "<div>
   <p>
     <div class=\\"styles__o-field___3n5HM\\"><label for=\\"controlled-field\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\"></label><input type=\\"text\\" id=\\"controlled-field\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"\\" value=\\"\\"></div>
   </p>
 </div>"
 `;
 
-exports[`Field should render examples: Field 3`] = `
+exports[`Field should render examples: Field 4`] = `
 "<div>
   <div>
     <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I can have focus</label><input type=\\"text\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"Focus please\\" value=\\"\\"></div><button type=\\"submit\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--center___16_Xh\\"><span><span>Focus!</span>Set Focus</span></button>
   </div>
 </div>"
 `;
 
-exports[`Field should render examples: Field 4`] = `
+exports[`Field should render examples: Field 5`] = `
 "<div>
   <form>
     <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I got a name</label><input type=\\"text\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"\\" name=\\"foo\\" value=\\"\\"></div>
   </form>
 </div>"
 `;
 
-exports[`Field should render examples: Field 5`] = `
+exports[`Field should render examples: Field 6`] = `
 "<div>
   <form>
     <div class=\\"styles__o-field___3n5HM\\"><label for=\\"idFieldError\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I'm an error label</label><input type=\\"text\\" id=\\"idFieldError\\" class=\\"styles__c-input-text___3TAv1 styles__is-error___3lsCJ styles__c-input-text--large___28EaR\\" placeholder=\\"I'm an error input[type=text]\\" value=\\"\\"></div>
   </form>
 </div>"
 `;
 
-exports[`Field should render examples: Field 6`] = `
+exports[`Field should render examples: Field 7`] = `
 "<div>
   <form>
     <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I'am a SelectBox</label>
@@ -2051,15 +2059,15 @@ exports[`Field should render examples: Field 6`] = `
 </div>"
 `;
 
-exports[`Field should render examples: Field 7`] = `
+exports[`Field should render examples: Field 8`] = `
 "<div>
   <form>
     <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">Contact</label><button type=\\"button\\" class=\\"styles__SelectControl___2OxoO\\">Select a contact</button></div>
   </form>
 </div>"
 `;
 
-exports[`Field should render examples: Field 8`] = `
+exports[`Field should render examples: Field 9`] = `
 "<div>
   <form>
     <div class=\\"styles__o-field___3n5HM\\"><label for=\\"idFieldPassword\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I'm a password label</label>
@@ -2071,7 +2079,7 @@ exports[`Field should render examples: Field 8`] = `
 </div>"
 `;
 
-exports[`Field should render examples: Field 9`] = `
+exports[`Field should render examples: Field 10`] = `
 "<div>
   <form>
     <div class=\\"styles__o-field___3n5HM\\"><label for=\\"idFieldPassword\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I'm a password label</label>
@@ -2083,7 +2091,7 @@ exports[`Field should render examples: Field 9`] = `
 </div>"
 `;
 
-exports[`Field should render examples: Field 10`] = `
+exports[`Field should render examples: Field 11`] = `
 "<div>
   <form>
     <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I'm a label</label>
@@ -2093,7 +2101,7 @@ exports[`Field should render examples: Field 10`] = `
 </div>"
 `;
 
-exports[`Field should render examples: Field 11`] = `
+exports[`Field should render examples: Field 12`] = `
 "<div>
   <form>
     <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">I'm a label</label>
@@ -2103,15 +2111,15 @@ exports[`Field should render examples: Field 11`] = `
 </div>"
 `;
 
-exports[`Field should render examples: Field 12`] = `
+exports[`Field should render examples: Field 13`] = `
 "<div>
   <form>
     <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\" style=\\"color: teal;\\">I'm a label</label><input type=\\"text\\" id=\\"\\" class=\\"styles__c-input-text___3TAv1 styles__c-input-text--large___28EaR\\" placeholder=\\"\\" style=\\"border-color: teal;\\" value=\\"\\"></div>
   </form>
 </div>"
 `;
 
-exports[`Field should render examples: Field 13`] = `
+exports[`Field should render examples: Field 14`] = `
 "<div>
   <form>
     <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\" style=\\"color: teal;\\">I'm a label</label>
@@ -2125,7 +2133,7 @@ exports[`Field should render examples: Field 13`] = `
 </div>"
 `;
 
-exports[`Field should render examples: Field 14`] = `
+exports[`Field should render examples: Field 15`] = `
 "<div>
   <form>
     <div class=\\"styles__o-field___3n5HM\\"><label for=\\"\\" class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\"></label>
@@ -5078,6 +5086,18 @@ exports[`Labs/CollectionField should render examples: Labs/CollectionField 1`] =
 </div>"
 `;
 
+exports[`Labs/CollectionField should render examples: Labs/CollectionField 2`] = `
+"<div>
+  <div class=\\"styles__o-field___3n5HM styles__o-field--inline___7JWZ8\\"><label class=\\"styles__c-label___o4ozG styles__c-label--block___2ZV_7\\">Contacts</label>
+    <div class=\\"styles__Stack--m___1tSpV\\">
+      <div class=\\"styles__Stack--s___22WMg\\">
+        <div class=\\"styles__CollectionField__row___Z7bbf\\"><button type=\\"button\\" class=\\"styles__SelectControl___2OxoO\\">Baramax</button><button type=\\"button\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--secondary___3Br_N styles__c-btn--center___16_Xh styles__c-btn--round___1Lkyl\\" title=\\"Remove this contact\\"><span><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"16\\" height=\\"16\\"><use xlink:href=\\"#cross-small\\"></use></svg><span class=\\"u-visuallyhidden\\">Remove this contact</span></span></button></div>
+      </div><button type=\\"button\\" class=\\"styles__c-btn___-2Vnj styles__c-btn--text___2Vp-2 styles__c-btn--center___16_Xh styles__CollectionField__addBtn___Z0FO-\\"><span><svg class=\\"styles__CollectionField__addBtnIcon___1hA5b styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><use xlink:href=\\"#plus\\"></use></svg><span>Add a contact</span></span></button>
+    </div>
+  </div>
+</div>"
+`;
+
 exports[`ListItemText should render examples: ListItemText 1`] = `
 "<div>
   <div class=\\"styles__c-list-text___3kc3E\\">