add euiformrow to some examples

thompsongl · Sep 10, 2019 · f93ef4e · f93ef4e
1 parent 667e427
commit f93ef4e
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 43 deletions.
diff --git a/src-docs/src/views/range/dual_range.js b/src-docs/src/views/range/dual_range.js
@@ -1,6 +1,10 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 
-import { EuiDualRange } from '../../../../src/components';
+import {
+  EuiDualRange,
+  EuiFormRow,
+  EuiSpacer,
+} from '../../../../src/components';
 
 import makeId from '../../../../src/components/form/form_row/make_id';
 
@@ -10,6 +14,7 @@ export default class extends Component {
 
     this.state = {
       value: ['', ''],
+      value2: ['20', '150'],
     };
   }
 
@@ -19,17 +24,39 @@ export default class extends Component {
     });
   };
 
+  onChange2 = value => {
+    this.setState({
+      value2: value,
+    });
+  };
+
   render() {
     return (
-      <EuiDualRange
-        id={makeId()}
-        min={-100}
-        max={200}
-        step={10}
-        value={this.state.value}
-        onChange={this.onChange}
-        showLabels
-      />
+      <Fragment>
+        <EuiFormRow label="Dual range">
+          <EuiDualRange
+            id={makeId()}
+            min={-100}
+            max={200}
+            step={10}
+            value={this.state.value}
+            onChange={this.onChange}
+            showLabels
+          />
+        </EuiFormRow>
+
+        <EuiSpacer size="xl" />
+
+        <EuiDualRange
+          id={makeId()}
+          min={-100}
+          max={200}
+          step={10}
+          value={this.state.value2}
+          onChange={this.onChange2}
+          showLabels
+        />
+      </Fragment>
     );
   }
 }
diff --git a/src-docs/src/views/range/input.js b/src-docs/src/views/range/input.js
@@ -1,6 +1,11 @@
 import React, { Component, Fragment } from 'react';
 
-import { EuiRange, EuiSpacer, EuiDualRange } from '../../../../src/components';
+import {
+  EuiRange,
+  EuiSpacer,
+  EuiDualRange,
+  EuiFormRow,
+} from '../../../../src/components';
 
 import makeId from '../../../../src/components/form/form_row/make_id';
 
@@ -29,21 +34,25 @@ export default class extends Component {
   render() {
     return (
       <Fragment>
-        <EuiRange
-          id={makeId()}
-          value={this.state.value}
-          onChange={this.onChange}
-          showInput
-        />
+        <EuiFormRow label="Single">
+          <EuiRange
+            id={makeId()}
+            value={this.state.value}
+            onChange={this.onChange}
+            showInput
+          />
+        </EuiFormRow>
 
         <EuiSpacer size="xl" />
 
-        <EuiDualRange
-          id={makeId()}
-          value={this.state.dualValue}
-          onChange={this.onDualChange}
-          showInput
-        />
+        <EuiFormRow label="Dual">
+          <EuiDualRange
+            id={makeId()}
+            value={this.state.dualValue}
+            onChange={this.onDualChange}
+            showInput
+          />
+        </EuiFormRow>
       </Fragment>
     );
   }

diff --git a/src-docs/src/views/range/input_only.js b/src-docs/src/views/range/input_only.js
@@ -1,6 +1,11 @@
 import React, { Component, Fragment } from 'react';
 
-import { EuiRange, EuiSpacer, EuiDualRange } from '../../../../src/components';
+import {
+  EuiRange,
+  EuiSpacer,
+  EuiDualRange,
+  EuiFormRow,
+} from '../../../../src/components';
 
 import makeId from '../../../../src/components/form/form_row/make_id';
 
@@ -63,14 +68,16 @@ export default class extends Component {
 
         <EuiSpacer size="xl" />
 
-        <EuiRange
-          id={makeId()}
-          value={this.state.value}
-          onChange={this.onChange}
-          compressed
-          showInput="inputWithPopover"
-          showLabels
-        />
+        <EuiFormRow label="With label">
+          <EuiRange
+            id={makeId()}
+            value={this.state.value}
+            onChange={this.onChange}
+            compressed
+            showInput="inputWithPopover"
+            showLabels
+          />
+        </EuiFormRow>
 
         <EuiSpacer size="xl" />
 

diff --git a/src-docs/src/views/range/range.js b/src-docs/src/views/range/range.js
@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 
-import { EuiRange, EuiSpacer } from '../../../../src/components';
+import { EuiRange, EuiSpacer, EuiFormRow } from '../../../../src/components';
 
 import makeId from '../../../../src/components/form/form_row/make_id';
 
@@ -22,15 +22,17 @@ export default class extends Component {
   render() {
     return (
       <Fragment>
-        <EuiRange
-          id={makeId()}
-          min={100}
-          max={200}
-          step={0.05}
-          value={this.state.value}
-          onChange={this.onChange}
-          showLabels
-        />
+        <EuiFormRow label="Single range">
+          <EuiRange
+            id={makeId()}
+            min={100}
+            max={200}
+            step={0.05}
+            value={this.state.value}
+            onChange={this.onChange}
+            showLabels
+          />
+        </EuiFormRow>
 
         <EuiSpacer size="xl" />