Added displayOnly prop to EuiFormRow

And updated the form layout page docs with some snippets

src-docs/src/views/form_layouts/described_form_group.js

@@ -4,7 +4,6 @@ import React, {
 } from 'react';
 
 import {
-  EuiButton,
   EuiCode,
   EuiFieldText,
   EuiForm,
@@ -178,10 +177,6 @@ export default class extends Component {
             <EuiFieldText name="second" fullWidth />
           </EuiFormRow>
         </EuiDescribedFormGroup>
-
-        <EuiButton type="submit" fill>
-          Save form
-        </EuiButton>
       </EuiForm>
     );
   }

src-docs/src/views/form_layouts/form_layouts_example.js

@@ -11,10 +11,6 @@ import {
   EuiForm,
   EuiFormRow,
   EuiDescribedFormGroup,
-  EuiFieldText,
-  EuiPopover,
-  EuiRange,
-  EuiSwitch,
 } from '../../../../src/components';
 
 import FormRows from './form_rows';
@@ -29,10 +25,6 @@ import FullWidth from './full_width';
 const fullWidthSource = require('!!raw-loader!./full_width');
 const fullWidthHtml = renderToHtml(FullWidth);
 
-import Popover from './popover';
-const popoverSource = require('!!raw-loader!./popover');
-const popoverHtml = renderToHtml(Popover);
-
 import Inline from './inline';
 const inlineSource = require('!!raw-loader!./inline');
 const inlineHtml = renderToHtml(Inline);
@@ -46,6 +38,7 @@ const inlinePopoverSource = require('!!raw-loader!./inline_popover');
 const inlinePopoverHtml = renderToHtml(InlinePopover);
 
 import FormCompressed from './form_compressed';
+import { Fragment } from 'react-is';
 const formCompressedSource = require('!!raw-loader!./form_compressed');
 const formCompressedHtml = renderToHtml(FormCompressed);
 
@@ -71,6 +64,12 @@ export const FormLayoutsExample = {
       EuiFormRow,
     },
     demo: <FormRows />,
+    snippet: `<EuiFormRow
+  label="Text field"
+  helpText="I am some friendly help text."
+>
+  <EuiFieldText />
+</EuiFormRow>`
   }, {
     title: 'Full-width',
     source: [{
@@ -83,15 +82,22 @@ export const FormLayoutsExample = {
     text: (
       <p>
         Form elements will automatically flex to a max-width of <EuiCode>400px</EuiCode>.
-        You can optionally pass the <EuiCode>fullWidth</EuiCode> prop to both individual field
-        and row components to expand to their container. This should be done rarely and usually
+        You can optionally pass the <EuiCode>fullWidth</EuiCode> prop to the row and form control to
+        expand to their container. This should be done rarely and usually
         you will only need it for isolated controls like search bars and sliders.
       </p>
     ),
     props: {
       EuiFormRow,
     },
     demo: <FullWidth />,
+    snippet: `<EuiFormRow
+  fullWidth
+  label="Works on form rows too"
+  helpText="Note that the fullWidth prop is not passed to the form row's child"
+>
+  <EuiRange fullWidth />
+</EuiFormRow>`,
   }, {
     title: 'Compressed',
     source: [{
@@ -112,6 +118,12 @@ export const FormLayoutsExample = {
       EuiFormRow,
     },
     demo: <FormCompressed />,
+    snippet: `<EuiFormRow
+  label="Text field"
+  compressed
+>
+  <EuiFieldText />
+</EuiFormRow>`,
   }, {
     title: 'Described form groups',
     source: [{
@@ -132,30 +144,22 @@ export const FormLayoutsExample = {
       EuiDescribedFormGroup,
     },
     demo: <DescribedFormGroup />,
-  }, {
-    title: 'In popover',
-    text: (
-      <p>
-        Forms can be placed within <EuiCode>EuiPopover</EuiCode> and
-        should scale accordingly.
-      </p>
-    ),
-    source: [{
-      type: GuideSectionTypes.JS,
-      code: popoverSource,
-    }, {
-      type: GuideSectionTypes.HTML,
-      code: popoverHtml,
-    }],
-    props: {
-      EuiPopover,
-      EuiForm,
-      EuiRange,
-      EuiFormRow,
-      EuiSwitch,
-      EuiFieldText,
-    },
-    demo: <Popover />,
+    snippet: `<EuiDescribedFormGroup
+  idAria="id"
+  title={<h3>Set heading level based on context</h3>}
+  description={
+    <Fragment>
+      Will be wrapped in a small, subdued EuiText block.
+    </Fragment>
+  }
+>
+  <EuiFormRow
+    label="Text field"
+    describedByIds={['id']}
+  >
+    <EuiFieldText />
+  </EuiFormRow>
+</EuiDescribedFormGroup>`,
   }, {
     title: 'Inline',
     text: (
@@ -173,17 +177,9 @@ export const FormLayoutsExample = {
       type: GuideSectionTypes.HTML,
       code: inlineHtml,
     }],
-    props: {
-      EuiPopover,
-      EuiForm,
-      EuiRange,
-      EuiFormRow,
-      EuiSwitch,
-      EuiFieldText,
-    },
     demo: <Inline />,
   }, {
-    title: 'Apply width to FlexItem to size individual controls',
+    title: 'Sizing inline form rows',
     source: [{
       type: GuideSectionTypes.JS,
       code: inlineSizingSource,
@@ -192,14 +188,22 @@ export const FormLayoutsExample = {
       code: inlineSizingHtml,
     }],
     text: (
-      <p>
-        When you need to make a field smaller, always apply the width to the
-        FlexItem, not the input. The input inside will resize as needed.
-      </p>
+      <Fragment>
+        <p>
+          Apply a width to the wrapping FlexItem to size individual controls.
+          When you need to make a field smaller, always apply the width to the
+          FlexItem, not the input. The input inside will resize as needed.
+        </p>
+        <p>
+          When supplying children to an EuiFormRow that is <strong>not</strong> a
+          form control, and you need to the content to vertically center with the other
+          form controls, add the prop <EuiCode>displayOnly</EuiCode>.
+        </p>
+      </Fragment>
     ),
     demo: <InlineSizing />,
   }, {
-    title: 'Inline forms can live in popovers, or any container',
+    title: 'In a popover',
     source: [{
       type: GuideSectionTypes.JS,
       code: inlinePopoverSource,

src-docs/src/views/form_layouts/full_width.js

@@ -27,20 +27,19 @@ export default () => (
     <EuiFormRow
       label="Works on form rows too"
       fullWidth
-      helpText="Note that fullWidth prop is passed to both the row and the child in this example"
+      helpText="Note that the fullWidth prop is not passed to the form row's child"
     >
       <EuiRange
+        fullWidth
         min={0}
         max={100}
         name="range"
-        fullWidth
       />
     </EuiFormRow>
 
     <EuiFormRow
       label="Often useful for text areas"
       fullWidth
-      helpText="Again, passed to both the row and the textarea."
     >
       <EuiTextArea
         fullWidth

src-docs/src/views/form_layouts/inline_popover.js

@@ -11,16 +11,21 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiFieldNumber,
-
+  EuiRange,
+  EuiSwitch,
 } from '../../../../src/components';
 
+import makeId from '../../../../src/components/form/form_row/make_id';
+
 export default class extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
       isPopoverOpen: false,
       isSwitchChecked: true,
+      isPopover2Open: false,
+      isSwitch2Checked: true,
     };
   }
 
@@ -42,6 +47,24 @@ export default class extends Component {
     });
   }
 
+  onSwitch2Change = () => {
+    this.setState({
+      isSwitch2Checked: !this.state.isSwitch2Checked,
+    });
+  }
+
+  onButton2Click = () => {
+    this.setState({
+      isPopover2Open: !this.state.isPopover2Open,
+    });
+  }
+
+  closePopover2 = () => {
+    this.setState({
+      isPopover2Open: false,
+    });
+  }
+
   render() {
     const button = (
       <EuiButton
@@ -50,7 +73,7 @@ export default class extends Component {
         iconType="arrowDown"
         onClick={this.onButtonClick}
       >
-        Form in a popover
+        Inline form in a popover
       </EuiButton>
     );
 
@@ -76,18 +99,76 @@ export default class extends Component {
       </EuiForm>
     );
 
-    return (
-      <EuiPopover
-        id="inlineFormPopover"
-        ownFocus
-        button={button}
-        isOpen={this.state.isPopoverOpen}
-        closePopover={this.closePopover.bind(this)}
+    const button2 = (
+      <EuiButton
+        iconSide="right"
+        fill
+        iconType="arrowDown"
+        onClick={this.onButton2Click}
       >
-        <div style={{ width: 500 }}>
-          {formSample}
-        </div>
-      </EuiPopover>
+        Vertical form in a popover
+      </EuiButton>
+    );
+
+    const formSample2 = (
+      <EuiForm>
+        <EuiFormRow>
+          <EuiSwitch
+            id={makeId()}
+            name="popswitch"
+            label="Isn't this popover form cool?"
+            checked={this.state.isSwitch2Checked}
+            onChange={this.onSwitch2Change}
+          />
+        </EuiFormRow>
+
+        <EuiFormRow
+          label="A text field"
+        >
+          <EuiFieldText name="popfirst" />
+        </EuiFormRow>
+
+        <EuiFormRow
+          label="Range"
+          helpText="Some help text for the range"
+        >
+          <EuiRange
+            min={0}
+            max={100}
+            name="poprange"
+          />
+        </EuiFormRow>
+      </EuiForm>
+    );
+
+    return (
+      <div>
+        <EuiPopover
+          id="inlineFormPopover"
+          ownFocus
+          button={button}
+          isOpen={this.state.isPopoverOpen}
+          closePopover={this.closePopover.bind(this)}
+        >
+          <div style={{ width: 500 }}>
+            {formSample}
+          </div>
+        </EuiPopover>
+
+        &emsp;
+
+        <EuiPopover
+          id="formPopover"
+          ownFocus
+          button={button2}
+          isOpen={this.state.isPopover2Open}
+          closePopover={this.closePopover2.bind(this)}
+        >
+          <div style={{ width: '300px' }}>
+            {formSample2}
+          </div>
+        </EuiPopover>
+      </div>
     );
   }
 }

src-docs/src/views/form_layouts/inline_sizing.js

@@ -7,6 +7,7 @@ import {
   EuiButton,
   EuiFieldText,
   EuiFieldNumber,
+  EuiAvatar,
 } from '../../../../src/components/';
 
 export default () => (
@@ -21,6 +22,11 @@ export default () => (
         <EuiFieldText icon="user" placeholder="John Doe" />
       </EuiFormRow>
     </EuiFlexItem>
+    <EuiFlexItem grow={false}>
+      <EuiFormRow label="Avatar" displayOnly>
+        <EuiAvatar name="John Doe" size="s"  />
+      </EuiFormRow>
+    </EuiFlexItem>
     <EuiFlexItem grow={false}>
       <EuiFormRow hasEmptyLabelSpace>
         <EuiButton>Save</EuiButton>