Update docs page by splitting up examples

- Also fixed prepend/append of value
elastic · Feb 20, 2019 · ebaa1c4 · ebaa1c4
1 parent 7f33024
commit ebaa1c4
Show file tree

Hide file tree

Showing 14 changed files with 655 additions and 220 deletions.
diff --git a/src-docs/src/views/range/dual_range.js b/src-docs/src/views/range/dual_range.js
@@ -6,7 +6,6 @@ import React, {
 import {
   EuiDualRange,
   EuiSpacer,
-  EuiFormHelpText,
 } from '../../../../src/components';
 
 import makeId from '../../../../src/components/form/form_row/make_id';
@@ -15,24 +14,8 @@ export default class extends Component {
   constructor(props) {
     super(props);
 
-    this.levels = [
-      {
-        min: 100,
-        max: 140,
-        color: 'danger'
-      },
-      {
-        min: 140,
-        max: 180,
-        color: 'success'
-      }
-    ];
-
     this.state = {
       value: ['', ''],
-      min: 100,
-      max: 200,
-      step: 10,
     };
   }
 
@@ -48,89 +31,24 @@ export default class extends Component {
 
         <EuiDualRange
           id={makeId()}
-          min={this.state.min}
-          max={this.state.max}
-          value={this.state.value}
-          onChange={this.onChange}
-          aria-label="Use aria labels when no actual label is in use"
-          showLabels
-          name="dualRange"
-        />
-
-        <EuiSpacer size="xl" />
-
-        <EuiDualRange
-          id={makeId()}
-          min={this.state.min}
-          max={this.state.max}
+          min={100}
+          max={200}
+          step={10}
           value={this.state.value}
           onChange={this.onChange}
-          disabled
-          aria-label="Use aria labels when no actual label is in use"
           showLabels
         />
 
         <EuiSpacer size="xl" />
 
         <EuiDualRange
           id={makeId()}
-          min={this.state.min}
-          max={this.state.max}
-          value={this.state.value}
-          onChange={this.onChange}
-          aria-label="Use aria labels when no actual label is in use"
-          showInput
-          showRange
-          showTicks
-          tickInterval={20}
-        />
-
-        <EuiSpacer size="xl" />
-
-        <EuiDualRange
-          id={makeId()}
-          min={this.state.min}
-          max={this.state.max}
-          step={this.state.step}
-          value={this.state.value}
-          onChange={this.onChange}
-          aria-label="Use aria labels when no actual label is in use"
-          aria-describedby="levelsHelp"
-          showLabels
-          showInput
-          compressed
-          levels={this.levels}
-        />
-        <EuiFormHelpText id="levelsHelp">Recommended levels are 120 and above.</EuiFormHelpText>
-
-        <EuiSpacer size="xl" />
-
-        <EuiDualRange
-          id={makeId()}
-          min={this.state.min}
-          max={this.state.max}
-          step={this.state.step}
-          value={this.state.value}
-          onChange={this.onChange}
-          aria-label="Use aria labels when no actual label is in use"
-          showTicks
-        />
-
-        <EuiSpacer size="xl" />
-
-        <EuiDualRange
-          id={makeId()}
-          min={this.state.min}
-          max={this.state.max}
-          step={this.state.step}
+          min={100}
+          max={200}
+          step={10}
           value={this.state.value}
           onChange={this.onChange}
-          aria-label="Use aria labels when no actual label is in use"
-          aria-describedby="levelsHelp"
-          showTicks
-          ticks={[{ value: this.state.min, label: this.state.min }, { value: this.state.max, label: this.state.max }]}
           showInput
-          levels={this.levels}
         />
       </Fragment>
     );

diff --git a/src-docs/src/views/range/input.js b/src-docs/src/views/range/input.js
@@ -0,0 +1,57 @@
+import React, {
+  Component,
+  Fragment,
+} from 'react';
+
+import {
+  EuiRange,
+  EuiSpacer,
+  EuiDualRange,
+} from '../../../../src/components';
+
+import makeId from '../../../../src/components/form/form_row/make_id';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      value: '20',
+      dualValue: [20, 100],
+    };
+  }
+
+  onChange = e => {
+    this.setState({
+      value: e.target.value,
+    });
+  };
+
+  onDualChange = (value) => {
+    this.setState({
+      dualValue: value
+    });
+  };
+
+  render() {
+    return (
+      <Fragment>
+        <EuiRange
+          id={makeId()}
+          value={this.state.value}
+          onChange={this.onChange}
+          showInput
+        />
+
+        <EuiSpacer size="xl" />
+
+        <EuiDualRange
+          id={makeId()}
+          value={this.state.dualValue}
+          onChange={this.onDualChange}
+          showInput
+        />
+      </Fragment>
+    );
+  }
+}
diff --git a/src-docs/src/views/range/levels.js b/src-docs/src/views/range/levels.js
@@ -0,0 +1,80 @@
+import React, {
+  Component,
+  Fragment,
+} from 'react';
+
+import {
+  EuiRange,
+  EuiSpacer,
+  EuiFormHelpText,
+  EuiDualRange,
+} from '../../../../src/components';
+
+import makeId from '../../../../src/components/form/form_row/make_id';
+
+export default class extends Component {
+  constructor(props) {
+    super(props);
+
+    this.levels = [
+      {
+        min: 0,
+        max: 20,
+        color: 'danger'
+      },
+      {
+        min: 20,
+        max: 100,
+        color: 'success'
+      }
+    ];
+
+    this.state = {
+      value: '20',
+      dualValue: [20, 100],
+    };
+  }
+
+  onChange = e => {
+    this.setState({
+      value: e.target.value,
+    });
+  };
+
+  onDualChange = (value) => {
+    this.setState({
+      dualValue: value
+    });
+  };
+
+  render() {
+    return (
+      <Fragment>
+        <EuiRange
+          id={makeId()}
+          value={this.state.value}
+          onChange={this.onChange}
+          showTicks
+          tickInterval={20}
+          levels={this.levels}
+          aria-describedby="levelsHelp2"
+        />
+        <EuiFormHelpText id="levelsHelp2">Recommended levels are {this.levels[1].min} and above.</EuiFormHelpText>
+
+        <EuiSpacer size="xl" />
+
+        <EuiDualRange
+          id={makeId()}
+          value={this.state.dualValue}
+          onChange={this.onDualChange}
+          showTicks
+          ticks={[{ label: '20kb', value: 20 }, { label: '100kb', value: 100 }]}
+          showInput
+          levels={this.levels}
+          aria-describedby="levelsHelp3"
+        />
+        <EuiFormHelpText id="levelsHelp3">Recommended size is {this.levels[1].min}kb and above.</EuiFormHelpText>
+      </Fragment>
+    );
+  }
+}
diff --git a/src-docs/src/views/range/range.js b/src-docs/src/views/range/range.js
@@ -6,7 +6,6 @@ import React, {
 import {
   EuiRange,
   EuiSpacer,
-  EuiFormHelpText,
 } from '../../../../src/components';
 
 import makeId from '../../../../src/components/form/form_row/make_id';
@@ -15,19 +14,6 @@ export default class extends Component {
   constructor(props) {
     super(props);
 
-    this.levels = [
-      {
-        min: 100,
-        max: 120,
-        color: 'danger'
-      },
-      {
-        min: 120,
-        max: 200,
-        color: 'success'
-      }
-    ];
-
     this.state = {
       value: '120'
     };
@@ -48,10 +34,7 @@ export default class extends Component {
           max={200}
           value={this.state.value}
           onChange={this.onChange}
-          aria-label="Use aria labels when no actual label is in use"
           showLabels
-          showValue
-          name="firstRange"
         />
 
         <EuiSpacer size="xl" />
@@ -62,9 +45,8 @@ export default class extends Component {
           max={200}
           value={this.state.value}
           onChange={this.onChange}
-          disabled
-          aria-label="Use aria labels when no actual label is in use"
           showLabels
+          showValue
         />
 
         <EuiSpacer size="xl" />
@@ -75,59 +57,10 @@ export default class extends Component {
           max={200}
           value={this.state.value}
           onChange={this.onChange}
-          aria-label="Use aria labels when no actual label is in use"
-          showInput
-          showRange
-          showTicks
-          tickInterval={20}
-        />
-
-        <EuiSpacer size="xl" />
-
-        <EuiRange
-          id={makeId()}
-          min={100}
-          max={200}
-          step={10}
-          value={this.state.value}
-          onChange={this.onChange}
-          aria-label="Use aria labels when no actual label is in use"
-          aria-describedby="levelsHelp"
           showLabels
-          showInput
-          compressed
-          levels={this.levels}
-        />
-        <EuiFormHelpText id="levelsHelp">Recommended levels are 600 and above.</EuiFormHelpText>
-
-        <EuiSpacer size="xl" />
-
-        <EuiRange
-          id={makeId()}
-          min={100}
-          max={200}
-          step={10}
-          value={this.state.value}
-          onChange={this.onChange}
-          aria-label="Use aria labels when no actual label is in use"
-          showTicks
           showRange
-        />
-
-        <EuiSpacer size="xl" />
-
-        <EuiRange
-          id={makeId()}
-          min={100}
-          max={200}
-          value={this.state.value}
-          onChange={this.onChange}
-          aria-label="Use aria labels when no actual label is in use"
-          aria-describedby="levelsHelp"
-          showTicks
-          ticks={[{ label: 100, value: 100 }, { label: 200, value: 200 }]}
-          showInput
-          levels={this.levels}
+          showValue
+          valuePrepend="100 - "
         />
       </Fragment>
     );