feat(Field): Add inline variant

cozy · Nov 29, 2019 · b3b5e7f · b3b5e7f
1 parent 65c59fb
commit b3b5e7f
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 14 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
@@ -108,7 +108,8 @@ const Field = props => {
     secondaryLabels,
     secondaryComponent,
     side,
-    size
+    size,
+    variant
   } = props
   const controlledProps = {
     ...(value !== undefined ? { value } : {}),
@@ -204,7 +205,13 @@ const Field = props => {
   }
 
   return (
-    <div className={cx(styles['o-field'], className)}>
+    <div
+      className={cx(
+        styles['o-field'],
+        { [styles['o-field--inline']]: variant === 'inline' },
+        className
+      )}
+    >
       <Label htmlFor={id} {...labelProps}>
         {label}
       </Label>

diff --git a/react/Field/styles.styl b/react/Field/styles.styl
@@ -3,6 +3,18 @@
 .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
 
 .o-field-input
     position relative

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>