Allowing label to be passed from EuiFormGroup

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>
     );
   }

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}>

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]}
                 />

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, {

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(

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(

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, {

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;
 

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]}
   />

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
     });
 

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}>

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;
 

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(

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"

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"

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>

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(