[DRAFT] Allowing EuiFormRow props on EuiFieldText

src-docs/src/services/playground/knobs.js

@@ -55,7 +55,7 @@ export const markup = (text) => {
       }
       return token;
     });
-    return [...values, <br key="lineBreak" />];
+    return [...values, ' '];
   });
 };
 

src-docs/src/views/accordion/accordion_form.js

@@ -21,9 +21,7 @@ const repeatableForm = (
   <EuiForm component="form">
     <EuiFlexGroup>
       <EuiFlexItem>
-        <EuiFormRow label="Username">
-          <EuiFieldText icon="user" placeholder="John" />
-        </EuiFormRow>
+        <EuiFieldText label="Username" icon="user" placeholder="John" />
       </EuiFlexItem>
 
       <EuiFlexItem>

src-docs/src/views/copy/copy.js

@@ -5,7 +5,6 @@ import {
   EuiButton,
   EuiFieldText,
   EuiSpacer,
-  EuiFormRow,
 } from '../../../../src/components/';
 
 export default () => {
@@ -17,9 +16,11 @@ export default () => {
 
   return (
     <div>
-      <EuiFormRow label="Enter text that will be copied to clipboard">
-        <EuiFieldText value={copyText} onChange={onChange} />
-      </EuiFormRow>
+      <EuiFieldText
+        label="Enter text that will be copied to clipboard"
+        value={copyText}
+        onChange={onChange}
+      />
 
       <EuiSpacer size="m" />
 

src-docs/src/views/flyout/flyout_max_width.js

@@ -70,12 +70,11 @@ export default () => {
           <EuiSpacer />
 
           <EuiForm component="form">
-            <EuiFormRow
+            <EuiFieldText
               label="Text field"
               helpText="I am some friendly help text."
-            >
-              <EuiFieldText name="first" />
-            </EuiFormRow>
+              name="first"
+            />
 
             <EuiFormRow label="Select (with no initial selection)">
               <EuiSelect

src-docs/src/views/form_compressed/complex_example.js

@@ -121,9 +121,12 @@ export default () => {
 
   return (
     <EuiPanel style={{ maxWidth: 432 }}>
-      <EuiFormRow label="Name" display="columnCompressed">
-        <EuiFieldText prepend="Label" placeholder="Input" compressed />
-      </EuiFormRow>
+      <EuiFieldText
+        prepend="Label"
+        placeholder="Input"
+        label="Name"
+        display="columnCompressed"
+      />
 
       <EuiFormRow label="Visibility" display="columnCompressed">
         <EuiDualRange

src-docs/src/views/form_compressed/form_compressed.js

@@ -60,13 +60,13 @@ export default () => {
   };
   return (
     <EuiPanel style={{ maxWidth: 300 }}>
-      <EuiFormRow
+      <EuiFieldText
+        name="first"
+        isLoading
         label="Text field"
         helpText="I am some friendly help text."
-        display="rowCompressed"
-      >
-        <EuiFieldText name="first" isLoading compressed />
-      </EuiFormRow>
+        compressed
+      />
 
       <EuiFormRow label="Select" display="rowCompressed">
         <EuiSelect

src-docs/src/views/form_compressed/form_compressed_popover.js

@@ -61,9 +61,12 @@ export default () => {
             isFullWidth
           />
         </EuiFormRow>
-        <EuiFormRow label="Text field" display="columnCompressed">
-          <EuiFieldText name="first" compressed />
-        </EuiFormRow>
+
+        <EuiFieldText
+          name="first"
+          label="Text field"
+          display="columnCompressed"
+        />
 
         <EuiFormRow label={'Select'} display="columnCompressed">
           <EuiSelect

src-docs/src/views/form_compressed/form_horizontal.js

@@ -26,13 +26,14 @@ export default () => {
 
   return (
     <EuiPanel style={{ maxWidth: 300 }}>
-      <EuiFormRow
+      <EuiFieldText
         label="Text field"
         helpText="I am some friendly help text."
         display="columnCompressed"
-      >
-        <EuiFieldText name="first" isLoading compressed />
-      </EuiFormRow>
+        name="first"
+        isLoading
+        compressed
+      />
 
       <EuiFormRow label="Select" display="columnCompressed">
         <EuiSelect

src-docs/src/views/form_compressed/form_horizontal_help.js

@@ -11,13 +11,12 @@ import { EuiToolTip } from '../../../../src/components/tool_tip';
 
 export default () => (
   <EuiPanel style={{ maxWidth: 300 }}>
-    <EuiFormRow
+    <EuiFieldText
+      name="first"
       label="Text field"
       helpText="Show validation help text only."
       display="columnCompressed"
-    >
-      <EuiFieldText name="first" compressed />
-    </EuiFormRow>
+    />
 
     <EuiFormRow
       label={

src-docs/src/views/form_controls/field_text.js

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 
 import { EuiFieldText } from '../../../../src/components';
-import { DisplayToggles } from './display_toggles';
 
 export default function () {
   const [value, setValue] = useState('');
@@ -11,14 +10,11 @@ export default function () {
   };
 
   return (
-    /* DisplayToggles wrapper for Docs only */
-    <DisplayToggles canPrepend canAppend>
-      <EuiFieldText
-        placeholder="Placeholder text"
-        value={value}
-        onChange={(e) => onChange(e)}
-        aria-label="Use aria labels when no actual label is in use"
-      />
-    </DisplayToggles>
+    <EuiFieldText
+      placeholder="Placeholder text"
+      value={value}
+      onChange={(e) => onChange(e)}
+      label="This text field has its own label prop"
+    />
   );
 }