diff --git a/src-docs/src/views/form_controls/form_controls_example.js b/src-docs/src/views/form_controls/form_controls_example.js index 79cc694b7b11..bcd3a36d8534 100644 --- a/src-docs/src/views/form_controls/form_controls_example.js +++ b/src-docs/src/views/form_controls/form_controls_example.js @@ -20,6 +20,7 @@ import { EuiLink, EuiRadio, EuiRange, + EuiRangeStepped, EuiSelect, EuiSwitch, EuiTextArea, @@ -73,6 +74,10 @@ import RangeExample from './range'; const rangeSource = require('!!raw-loader!./range'); const rangeHtml = renderToHtml(RangeExample); +import RangeStepped from './range_stepped'; +const rangeSteppedSource = require('!!raw-loader!./range_stepped'); +const rangeSteppedHtml = renderToHtml(RangeStepped); + import Switch from './switch'; const switchSource = require('!!raw-loader!./switch'); const switchHtml = renderToHtml(Switch); @@ -266,6 +271,19 @@ export const FormControlsExample = { EuiRange, }, demo: , + }, { + title: 'Stepped range', + source: [{ + type: GuideSectionTypes.JS, + code: rangeSteppedSource, + }, { + type: GuideSectionTypes.HTML, + code: rangeSteppedHtml, + }], + props: { + EuiRangeStepped, + }, + demo: , }, { title: 'Switch', source: [{ diff --git a/src-docs/src/views/form_controls/range_stepped.js b/src-docs/src/views/form_controls/range_stepped.js new file mode 100644 index 000000000000..40ff6ad4898d --- /dev/null +++ b/src-docs/src/views/form_controls/range_stepped.js @@ -0,0 +1,54 @@ +import React, { Component, Fragment } from 'react'; + +import { + EuiRangeStepped, +} from '../../../../src/components'; + +import makeId from '../../../../src/components/form/form_row/make_id'; + + +export default class extends Component { + constructor(props) { + super(props); + + const idPrefix = makeId(); + + this.options = [{ + id: `${idPrefix}0`, + value: 0, + label: 'Option one', + }, { + id: `${idPrefix}1`, + value: 1, + label: 'Option two is checked by default', + }, { + id: `${idPrefix}2`, + value: 2, + label: 'Option three', + }]; + + this.state = { + value: this.options[1].value, + }; + } + + onChange = e => { + this.setState({ + value: e.currentTarget.value, + }); + }; + + render() { + return ( + + + + {this.state.value} + + ); + } +} diff --git a/src/components/form/index.js b/src/components/form/index.js index f04fdc5605b8..2d73edcfa092 100644 --- a/src/components/form/index.js +++ b/src/components/form/index.js @@ -18,7 +18,10 @@ export { EuiRadio, EuiRadioGroup, } from './radio'; -export { EuiRange } from './range'; +export { + EuiRange, + EuiRangeStepped, +} from './range'; export { EuiSelect } from './select'; export { EuiSwitch } from './switch'; export { EuiTextArea } from './text_area'; diff --git a/src/components/form/range/__snapshots__/range.test.js.snap b/src/components/form/range/__snapshots__/range.test.js.snap index 9f7ccfaaaa0e..5d4bb66daa60 100644 --- a/src/components/form/range/__snapshots__/range.test.js.snap +++ b/src/components/form/range/__snapshots__/range.test.js.snap @@ -13,7 +13,7 @@ exports[`EuiRange is rendered 1`] = ` min="1" name="name" type="range" - value="value" + value="8" /> `; @@ -36,19 +36,28 @@ exports[`EuiRange props extra input should render 1`] = ` class="euiRange__wrapper" >
diff --git a/src/components/form/range/__snapshots__/range_stepped.test.js.snap b/src/components/form/range/__snapshots__/range_stepped.test.js.snap new file mode 100644 index 000000000000..f7ca2d27558a --- /dev/null +++ b/src/components/form/range/__snapshots__/range_stepped.test.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiRangeStepped is rendered 1`] = ` +
+`; diff --git a/src/components/form/range/_index.scss b/src/components/form/range/_index.scss index 7ef7e10548ac..709ce0184af2 100644 --- a/src/components/form/range/_index.scss +++ b/src/components/form/range/_index.scss @@ -1,3 +1,5 @@ @import 'variables'; @import 'mixins'; + @import 'range'; +@import 'range_stepped'; diff --git a/src/components/form/range/_range_stepped.scss b/src/components/form/range/_range_stepped.scss new file mode 100644 index 000000000000..9cc611e1a7ea --- /dev/null +++ b/src/components/form/range/_range_stepped.scss @@ -0,0 +1,3 @@ +.euiRangeStepped { + +} diff --git a/src/components/form/range/index.js b/src/components/form/range/index.js index 3f3c671156cc..51c95b5b78ad 100644 --- a/src/components/form/range/index.js +++ b/src/components/form/range/index.js @@ -1 +1,2 @@ export { EuiRange } from './range'; +export { EuiRangeStepped } from './range_stepped'; diff --git a/src/components/form/range/range.js b/src/components/form/range/range.js index 85833a44e674..3fbc74703bb1 100644 --- a/src/components/form/range/range.js +++ b/src/components/form/range/range.js @@ -60,7 +60,7 @@ export const EuiRange = ({ className="euiRange__extraInput" min={min} max={max} - value={value} + value={Number(value)} disabled={disabled} compressed={compressed} {...rest} diff --git a/src/components/form/range/range.test.js b/src/components/form/range/range.test.js index e97491a0e744..6e2a8fb9a6a8 100644 --- a/src/components/form/range/range.test.js +++ b/src/components/form/range/range.test.js @@ -12,7 +12,7 @@ describe('EuiRange', () => { id="id" min={1} max={10} - value="value" + value="8" onChange={() => {}} {...requiredProps} /> @@ -52,7 +52,16 @@ describe('EuiRange', () => { test('extra input should render', () => { const component = render( - + {}} + showInput + {...requiredProps} + /> ); expect(component) diff --git a/src/components/form/range/range_stepped.js b/src/components/form/range/range_stepped.js new file mode 100644 index 000000000000..a58612b31086 --- /dev/null +++ b/src/components/form/range/range_stepped.js @@ -0,0 +1,19 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +export const EuiRangeStepped = ({ + className, + children, + ...rest +}) => ( +
+ {children} +
+); + +EuiRangeStepped.propTypes = { + children: PropTypes.node, +}; + +EuiRangeStepped.defaultProps = { +}; diff --git a/src/components/form/range/range_stepped.test.js b/src/components/form/range/range_stepped.test.js new file mode 100644 index 000000000000..3e6b93c219ae --- /dev/null +++ b/src/components/form/range/range_stepped.test.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../../test'; + +import { EuiRangeStepped } from './range_stepped'; + +describe('EuiRangeStepped', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); +}); diff --git a/src/components/index.js b/src/components/index.js index 2c41840fd582..a97f2728b000 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -128,6 +128,7 @@ export { EuiRadio, EuiRadioGroup, EuiRange, + EuiRangeStepped, EuiSelect, EuiSwitch, EuiTextArea,