From e8c3fa0837aab07954fba48acbe2b1723a363fdf Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Fri, 10 Aug 2018 13:44:40 -0400
Subject: [PATCH] Allowing `label` to be passed from `EuiFormGroup`

---
 .../src/views/super_select/super_select.js    | 11 ++++++++++
 .../form/checkbox/checkbox_group.js           |  1 +
 .../described_form_group.test.js.snap         |  1 +
 .../form/field_number/field_number.js         |  1 +
 .../form/field_password/field_password.js     |  1 +
 .../form/field_search/field_search.js         |  1 +
 src/components/form/field_text/field_text.js  |  1 +
 .../form/file_picker/file_picker.js           |  1 +
 .../__snapshots__/form_row.test.js.snap       | 22 +++++++++++++++++++
 src/components/form/form_row/form_row.js      |  1 +
 src/components/form/radio/radio_group.js      |  1 +
 src/components/form/range/range.js            |  1 +
 src/components/form/select/select.js          |  1 +
 .../__snapshots__/super_select.test.js.snap   |  8 +++----
 .../super_select_control.test.js.snap         | 14 ++++++------
 .../form/super_select/super_select_control.js |  2 ++
 src/components/form/text_area/text_area.js    |  1 +
 17 files changed, 58 insertions(+), 11 deletions(-)

diff --git a/src-docs/src/views/super_select/super_select.js b/src-docs/src/views/super_select/super_select.js
index 3a9b37ea576..c3ca1e77116 100644
--- a/src-docs/src/views/super_select/super_select.js
+++ b/src-docs/src/views/super_select/super_select.js
@@ -6,6 +6,7 @@ import React, {
 import {
   EuiSuperSelect,
   EuiSpacer,
+  EuiFormRow,
 } from '../../../../src/components';
 
 export default class extends Component {
@@ -83,6 +84,16 @@ export default class extends Component {
           onChange={this.onChange}
           compressed
         />
+
+        <EuiSpacer size="m" />
+
+        <EuiFormRow label="With label">
+          <EuiSuperSelect
+            options={this.options}
+            valueOfSelected={this.state.value}
+            onChange={this.onChange}
+          />
+        </EuiFormRow>
       </Fragment>
     );
   }
diff --git a/src/components/form/checkbox/checkbox_group.js b/src/components/form/checkbox/checkbox_group.js
index 7ce03282390..5a6b37199bf 100644
--- a/src/components/form/checkbox/checkbox_group.js
+++ b/src/components/form/checkbox/checkbox_group.js
@@ -10,6 +10,7 @@ export const EuiCheckboxGroup = ({
   className,
   disabled,
   compressed,
+  label, // eslint-disable-line no-unused-vars
   ...rest
 }) => (
   <div className={className} {...rest}>
diff --git a/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap b/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap
index de5e412314b..ac24f113669 100644
--- a/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap
+++ b/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap
@@ -359,6 +359,7 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
                 <input
                   aria-describedby="test-id generated-id-help generated-id-error-0 generated-id-error-1"
                   id="generated-id"
+                  label="Label"
                   onBlur={[Function]}
                   onFocus={[Function]}
                 />
diff --git a/src/components/form/field_number/field_number.js b/src/components/form/field_number/field_number.js
index 352ec8bd026..16653b10a19 100644
--- a/src/components/form/field_number/field_number.js
+++ b/src/components/form/field_number/field_number.js
@@ -25,6 +25,7 @@ export const EuiFieldNumber = ({
   compressed,
   prepend,
   append,
+  label, // eslint-disable-line no-unused-vars
   ...rest
 }) => {
   const classes = classNames('euiFieldNumber', className, {
diff --git a/src/components/form/field_password/field_password.js b/src/components/form/field_password/field_password.js
index 948203aff4c..a6ff20ae8f8 100644
--- a/src/components/form/field_password/field_password.js
+++ b/src/components/form/field_password/field_password.js
@@ -21,6 +21,7 @@ export const EuiFieldPassword = ({
   isLoading,
   compressed,
   inputRef,
+  label, // eslint-disable-line no-unused-vars
   ...rest
 }) => {
   const classes = classNames(
diff --git a/src/components/form/field_search/field_search.js b/src/components/form/field_search/field_search.js
index 0006d974e51..c50084f034a 100644
--- a/src/components/form/field_search/field_search.js
+++ b/src/components/form/field_search/field_search.js
@@ -100,6 +100,7 @@ export class EuiFieldSearch extends Component {
       incremental,
       compressed,
       onSearch,
+      label, // eslint-disable-line no-unused-vars
       ...rest } = this.props;
 
     const classes = classNames(
diff --git a/src/components/form/field_text/field_text.js b/src/components/form/field_text/field_text.js
index e66d49a9286..04651c9bf1e 100644
--- a/src/components/form/field_text/field_text.js
+++ b/src/components/form/field_text/field_text.js
@@ -24,6 +24,7 @@ export const EuiFieldText = ({
   compressed,
   prepend,
   append,
+  label, // eslint-disable-line no-unused-vars
   ...rest
 }) => {
   const classes = classNames('euiFieldText', className, {
diff --git a/src/components/form/file_picker/file_picker.js b/src/components/form/file_picker/file_picker.js
index 50c3f2f45df..4632be95fd2 100644
--- a/src/components/form/file_picker/file_picker.js
+++ b/src/components/form/file_picker/file_picker.js
@@ -81,6 +81,7 @@ export class EuiFilePicker extends Component {
       disabled,
       compressed,
       onChange, // eslint-disable-line no-unused-vars
+      label, // eslint-disable-line no-unused-vars
       ...rest
     } = this.props;
 
diff --git a/src/components/form/form_row/__snapshots__/form_row.test.js.snap b/src/components/form/form_row/__snapshots__/form_row.test.js.snap
index 0b0418fd754..cd1d3f7fa19 100644
--- a/src/components/form/form_row/__snapshots__/form_row.test.js.snap
+++ b/src/components/form/form_row/__snapshots__/form_row.test.js.snap
@@ -30,6 +30,11 @@ exports[`EuiFormRow behavior onBlur is called in child 1`] = `
     </EuiFormLabel>
     <input
       id="generated-id"
+      label={
+        <span>
+          Label
+        </span>
+      }
       onBlur={[Function]}
       onFocus={[Function]}
     />
@@ -67,6 +72,11 @@ exports[`EuiFormRow behavior onBlur works in parent even if not in child 1`] = `
     </EuiFormLabel>
     <input
       id="generated-id"
+      label={
+        <span>
+          Label
+        </span>
+      }
       onBlur={[Function]}
       onFocus={[Function]}
     />
@@ -104,6 +114,11 @@ exports[`EuiFormRow behavior onFocus is called in child 1`] = `
     </EuiFormLabel>
     <input
       id="generated-id"
+      label={
+        <span>
+          Label
+        </span>
+      }
       onBlur={[Function]}
       onFocus={[Function]}
     />
@@ -141,6 +156,11 @@ exports[`EuiFormRow behavior onFocus works in parent even if not in child 1`] =
     </EuiFormLabel>
     <input
       id="generated-id"
+      label={
+        <span>
+          Label
+        </span>
+      }
       onBlur={[Function]}
       onFocus={[Function]}
     />
@@ -298,6 +318,7 @@ exports[`EuiFormRow props isInvalid is rendered 1`] = `
   </label>
   <input
     id="generated-id"
+    label="label"
   />
 </div>
 `;
@@ -315,6 +336,7 @@ exports[`EuiFormRow props label is rendered 1`] = `
   </EuiFormLabel>
   <input
     id="generated-id"
+    label="label"
     onBlur={[Function]}
     onFocus={[Function]}
   />
diff --git a/src/components/form/form_row/form_row.js b/src/components/form/form_row/form_row.js
index 86e8c13357c..beb3928ebbb 100644
--- a/src/components/form/form_row/form_row.js
+++ b/src/components/form/form_row/form_row.js
@@ -132,6 +132,7 @@ export class EuiFormRow extends Component {
       onFocus: this.onFocus,
       onBlur: this.onBlur,
       compressed: compressed,
+      label: label,
       ...optionalProps
     });
 
diff --git a/src/components/form/radio/radio_group.js b/src/components/form/radio/radio_group.js
index e3bbecba490..53902afab5e 100644
--- a/src/components/form/radio/radio_group.js
+++ b/src/components/form/radio/radio_group.js
@@ -11,6 +11,7 @@ export const EuiRadioGroup = ({
   className,
   disabled,
   compressed,
+  label, // eslint-disable-line no-unused-vars
   ...rest
 }) => (
   <div className={className} {...rest}>
diff --git a/src/components/form/range/range.js b/src/components/form/range/range.js
index df4181013f6..398cba13338 100644
--- a/src/components/form/range/range.js
+++ b/src/components/form/range/range.js
@@ -34,6 +34,7 @@ export class EuiRange extends Component {
       onChange,
       value,
       style,
+      label, // eslint-disable-line no-unused-vars
       ...rest
     } = this.props;
 
diff --git a/src/components/form/select/select.js b/src/components/form/select/select.js
index 032c2be7d54..6fc06d5e5ca 100644
--- a/src/components/form/select/select.js
+++ b/src/components/form/select/select.js
@@ -25,6 +25,7 @@ export const EuiSelect = ({
   value,
   prepend,
   append,
+  label, // eslint-disable-line no-unused-vars
   ...rest
 }) => {
   const classes = classNames(
diff --git a/src/components/form/super_select/__snapshots__/super_select.test.js.snap b/src/components/form/super_select/__snapshots__/super_select.test.js.snap
index a5b861db853..54a2f0b82e1 100644
--- a/src/components/form/super_select/__snapshots__/super_select.test.js.snap
+++ b/src/components/form/super_select/__snapshots__/super_select.test.js.snap
@@ -23,7 +23,7 @@ exports[`EuiSuperSelect is rendered 1`] = `
           class="euiScreenReaderOnly"
           id="generated-id"
         >
-          Select an option: , is selected
+           Select an option: , is selected
         </span>
         <button
           aria-haspopup="true"
@@ -97,7 +97,7 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
           class="euiScreenReaderOnly"
           id="generated-id"
         >
-          Select an option: , is selected
+           Select an option: , is selected
         </span>
         <button
           aria-haspopup="true"
@@ -169,7 +169,7 @@ exports[`EuiSuperSelect props options are rendered 1`] = `
           class="euiScreenReaderOnly"
           id="generated-id"
         >
-          Select an option: , is selected
+           Select an option: , is selected
         </span>
         <button
           aria-haspopup="true"
@@ -242,7 +242,7 @@ exports[`EuiSuperSelect props valueSelected is rendered 1`] = `
           class="euiScreenReaderOnly"
           id="generated-id"
         >
-          Select an option: Option #1, is selected
+           Select an option: Option #1, is selected
         </span>
         <button
           aria-haspopup="true"
diff --git a/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap b/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap
index 4c0b7db9e97..7a1655b1eff 100644
--- a/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap
+++ b/src/components/form/super_select/__snapshots__/super_select_control.test.js.snap
@@ -18,7 +18,7 @@ Array [
         class="euiScreenReaderOnly"
         id="generated-id"
       >
-        Select an option: , is selected
+         Select an option: , is selected
       </span>
       <button
         aria-haspopup="true"
@@ -79,7 +79,7 @@ Array [
         class="euiScreenReaderOnly"
         id="generated-id"
       >
-        Select an option: , is selected
+         Select an option: , is selected
       </span>
       <button
         aria-haspopup="true"
@@ -145,7 +145,7 @@ Array [
         class="euiScreenReaderOnly"
         id="generated-id"
       >
-        Select an option: , is selected
+         Select an option: , is selected
       </span>
       <button
         aria-haspopup="true"
@@ -204,7 +204,7 @@ Array [
         class="euiScreenReaderOnly"
         id="generated-id"
       >
-        Select an option: , is selected
+         Select an option: , is selected
       </span>
       <button
         aria-haspopup="true"
@@ -263,7 +263,7 @@ Array [
         class="euiScreenReaderOnly"
         id="generated-id"
       >
-        Select an option: , is selected
+         Select an option: , is selected
       </span>
       <button
         aria-haspopup="true"
@@ -332,7 +332,7 @@ Array [
         class="euiScreenReaderOnly"
         id="generated-id"
       >
-        Select an option: , is selected
+         Select an option: , is selected
       </span>
       <button
         aria-haspopup="true"
@@ -399,7 +399,7 @@ Array [
         class="euiScreenReaderOnly"
         id="generated-id"
       >
-        Select an option: Option #1, is selected
+         Select an option: Option #1, is selected
       </span>
       <button
         aria-haspopup="true"
diff --git a/src/components/form/super_select/super_select_control.js b/src/components/form/super_select/super_select_control.js
index e1dc812f44e..9104c8b1f07 100644
--- a/src/components/form/super_select/super_select_control.js
+++ b/src/components/form/super_select/super_select_control.js
@@ -20,6 +20,7 @@ export const EuiSuperSelectControl = ({
   defaultValue,
   compressed,
   value,
+  label,
   ...rest
 }) => {
   const classes = classNames(
@@ -94,6 +95,7 @@ export const EuiSuperSelectControl = ({
         */}
         <EuiScreenReaderOnly>
           <span id={screenReaderId}>
+            {label ? `${label}, ` : null}{' '}
             Select an option: {selectedValue}, is selected
           </span>
         </EuiScreenReaderOnly>
diff --git a/src/components/form/text_area/text_area.js b/src/components/form/text_area/text_area.js
index 9e0dedfe475..2e13c804186 100644
--- a/src/components/form/text_area/text_area.js
+++ b/src/components/form/text_area/text_area.js
@@ -27,6 +27,7 @@ export const EuiTextArea = ({
   placeholder,
   resize,
   rows,
+  label, // eslint-disable-line no-unused-vars
   ...rest
 }) => {
   const classes = classNames(