From e6d3d8cce644cbb38b0eae175cf8f8b5c35ade8b Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 18 Jun 2018 16:42:42 -0400 Subject: [PATCH 01/20] Increased contrast of Range and added labels --- .../form_controls/form_controls_example.js | 23 +++++- src-docs/src/views/form_controls/range.js | 2 + .../range/__snapshots__/range.test.js.snap | 78 +++++++++++++++---- src/components/form/range/_index.scss | 6 +- src/components/form/range/_range.scss | 43 ++++++++-- src/components/form/range/range.js | 73 ++++++++++++++--- src/components/form/range/range.test.js | 18 +++++ 7 files changed, 202 insertions(+), 41 deletions(-) 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 24cc55803fe..02aa6e9e5a4 100644 --- a/src-docs/src/views/form_controls/form_controls_example.js +++ b/src-docs/src/views/form_controls/form_controls_example.js @@ -69,9 +69,9 @@ import RadioGroup from './radio_group'; const radioGroupSource = require('!!raw-loader!./radio_group'); const radioGroupHtml = renderToHtml(RadioGroup); -import Range from './range'; +import RangeExample from './range'; const rangeSource = require('!!raw-loader!./range'); -const rangeHtml = renderToHtml(Range); +const rangeHtml = renderToHtml(RangeExample); import Switch from './switch'; const switchSource = require('!!raw-loader!./switch'); @@ -238,6 +238,23 @@ export const FormControlsExample = { demo: , }, { title: 'Range', + text: ( + + +

+ The base slider should only be used + when the precise value is not considered important. If + the precise value does matter, use + the EuiFieldNumber instead. +

+ +
+

+ While currently considered optional, the showLabels property should + be added to explicitly state the range to the user. +

+ + ), source: [{ type: GuideSectionTypes.JS, code: rangeSource, @@ -248,7 +265,7 @@ export const FormControlsExample = { props: { EuiRange, }, - demo: , + demo: , }, { title: 'Switch', source: [{ diff --git a/src-docs/src/views/form_controls/range.js b/src-docs/src/views/form_controls/range.js index 89531edbdf3..776207b8c5c 100644 --- a/src-docs/src/views/form_controls/range.js +++ b/src-docs/src/views/form_controls/range.js @@ -35,6 +35,7 @@ export default class extends Component { value={this.state.value} onChange={this.onChange} aria-label="Use aria labels when no actual label is in use" + showLabels /> @@ -47,6 +48,7 @@ export default class extends Component { onChange={this.onChange} disabled aria-label="Use aria labels when no actual label is in use" + showLabels /> ); diff --git a/src/components/form/range/__snapshots__/range.test.js.snap b/src/components/form/range/__snapshots__/range.test.js.snap index 92524948419..a71ba3b582f 100644 --- a/src/components/form/range/__snapshots__/range.test.js.snap +++ b/src/components/form/range/__snapshots__/range.test.js.snap @@ -1,24 +1,68 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiRange is rendered 1`] = ` - +
+ +
+`; + +exports[`EuiRange props compressed should render 1`] = ` +
+ +
`; exports[`EuiRange props fullWidth should render 1`] = ` - +
+ +
+`; + +exports[`EuiRange props labels should render 1`] = ` +
+ + + +
`; diff --git a/src/components/form/range/_index.scss b/src/components/form/range/_index.scss index aac1bff53c5..15f78fcda89 100644 --- a/src/components/form/range/_index.scss +++ b/src/components/form/range/_index.scss @@ -1,13 +1,14 @@ -$euiRangeTrackColor: $euiColorLightShade; +$euiRangeTrackColor: $euiColorDarkShade; $euiRangeThumbRadius: 50%; $euiRangeThumbHeight: $euiSize; $euiRangeThumbWidth: $euiSize; +$euiRangeThumbBorderColor: $euiRangeTrackColor; $euiRangeTrackWidth: 100%; $euiRangeTrackHeight: 2px; $euiRangeTrackBorderWidth: 0; -$euiRangeTrackBorderColor: $euiColorLightShade; +$euiRangeTrackBorderColor: $euiRangeTrackColor; $euiRangeTrackRadius: $euiBorderRadius; @mixin track { @@ -20,6 +21,7 @@ $euiRangeTrackRadius: $euiBorderRadius; @mixin thumb { cursor: pointer; @include euiCustomControl($type: 'round'); + border-color: $euiRangeThumbBorderColor; padding: 0; height: $euiRangeThumbHeight; width: $euiRangeThumbWidth; diff --git a/src/components/form/range/_range.scss b/src/components/form/range/_range.scss index e4d0ff17318..114f5780a69 100644 --- a/src/components/form/range/_range.scss +++ b/src/components/form/range/_range.scss @@ -1,3 +1,26 @@ +.euiRange__wrapper { + @include euiFormControlSize(); + display: flex; + align-items: center; + + &--fullWidth { + max-width: 100%; + } + + &--disabled { + .euiRange__minLabel, + .euiRange__maxLabel { + color: $euiFormControlDisabledColor; + } + } +} + +.euiRange__minLabel, +.euiRange__maxLabel { + margin-bottom: 0; +} + + // The following code is inspired by... // Github: https://github.com/darlanrod/input-range-sass @@ -10,31 +33,31 @@ .euiRange { // Auto means the height isn't defined - @include euiFormControlSize(auto); - + height: auto; appearance: none; - margin: $euiRangeThumbHeight / 2 0; - - &.euiRange--fullWidth { - max-width: 100%; - } + margin: $euiRangeThumbHeight/2 $euiSizeS; + width: 100%; // ensures the slider expands to fill flex display &:disabled { - cursor: not-allowed; &::-webkit-slider-thumb { @include euiCustomControl--disabled; + cursor: not-allowed; } &::-moz-range-thumb { @include euiCustomControl--disabled; + cursor: not-allowed; } &::-ms-thumb { @include euiCustomControl--disabled; + cursor: not-allowed; } + &::-webkit-slider-runnable-track { background-color: $euiColorLightShade; + cursor: not-allowed; } } @@ -42,15 +65,19 @@ &::-webkit-slider-thumb { @include euiCustomControl--focused; + @include euiFocusRing; } &::-moz-range-thumb { @include euiCustomControl--focused; + @include euiFocusRing; } &::-ms-thumb { @include euiCustomControl--focused; + @include euiFocusRing; } + &::-webkit-slider-runnable-track { background-color: $euiColorPrimary; } diff --git a/src/components/form/range/range.js b/src/components/form/range/range.js index 394bdda9218..5235a6259a3 100644 --- a/src/components/form/range/range.js +++ b/src/components/form/range/range.js @@ -2,7 +2,21 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -export const EuiRange = ({ className, compressed, id, name, min, max, fullWidth, value, ...rest }) => { +import { EuiFormLabel } from '../form_label'; + +export const EuiRange = ({ + className, + compressed, + disabled, + fullWidth, + id, + max, + min, + name, + showLabels, + value, + ...rest +}) => { const classes = classNames( 'euiRange', { @@ -12,17 +26,49 @@ export const EuiRange = ({ className, compressed, id, name, min, max, fullWidth, className ); + const wrapperClasses = classNames( + 'euiRange__wrapper', + { + 'euiRange__wrapper--fullWidth': fullWidth, + 'euiRange__wrapper--compressed': compressed, + 'euiRange__wrapper--disabled': disabled, + }, + ); + + let minLabelNode; + let maxLabelNode; + if (showLabels) { + minLabelNode = ( + + {min} + + ); + + maxLabelNode = ( + + {max} + + ); + } + return ( - +
+ {minLabelNode} + + {maxLabelNode} +
); }; @@ -34,6 +80,10 @@ EuiRange.propTypes = { value: PropTypes.string, fullWidth: PropTypes.bool, compressed: PropTypes.bool, + /** + * Shows static min/max labels on the sides of the range slider + */ + showLabels: PropTypes.bool, }; EuiRange.defaultProps = { @@ -41,4 +91,5 @@ EuiRange.defaultProps = { max: 100, fullWidth: false, compressed: false, + showLabels: false, }; diff --git a/src/components/form/range/range.test.js b/src/components/form/range/range.test.js index 5b78e36497f..ee76bf3376a 100644 --- a/src/components/form/range/range.test.js +++ b/src/components/form/range/range.test.js @@ -31,5 +31,23 @@ describe('EuiRange', () => { expect(component) .toMatchSnapshot(); }); + + test('compressed should render', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); + + test('labels should render', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); }); }); From 55d5fac55748cf5f2abc65b1ed42232597c0db34 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 18 Jun 2018 17:15:14 -0400 Subject: [PATCH 02/20] Seperating into vars and mixin files, and name-scoping --- src/components/form/range/_index.scss | 31 ++--------------------- src/components/form/range/_mixins.scss | 22 ++++++++++++++++ src/components/form/range/_range.scss | 30 ++++++++-------------- src/components/form/range/_variables.scss | 12 +++++++++ 4 files changed, 46 insertions(+), 49 deletions(-) create mode 100644 src/components/form/range/_mixins.scss create mode 100644 src/components/form/range/_variables.scss diff --git a/src/components/form/range/_index.scss b/src/components/form/range/_index.scss index 15f78fcda89..7ef7e10548a 100644 --- a/src/components/form/range/_index.scss +++ b/src/components/form/range/_index.scss @@ -1,30 +1,3 @@ -$euiRangeTrackColor: $euiColorDarkShade; - -$euiRangeThumbRadius: 50%; -$euiRangeThumbHeight: $euiSize; -$euiRangeThumbWidth: $euiSize; -$euiRangeThumbBorderColor: $euiRangeTrackColor; - -$euiRangeTrackWidth: 100%; -$euiRangeTrackHeight: 2px; -$euiRangeTrackBorderWidth: 0; -$euiRangeTrackBorderColor: $euiRangeTrackColor; -$euiRangeTrackRadius: $euiBorderRadius; - -@mixin track { - cursor: pointer; - height: $euiRangeTrackHeight; - transition: all $euiAnimSpeedNormal ease-in; - width: $euiRangeTrackWidth; -} - -@mixin thumb { - cursor: pointer; - @include euiCustomControl($type: 'round'); - border-color: $euiRangeThumbBorderColor; - padding: 0; - height: $euiRangeThumbHeight; - width: $euiRangeThumbWidth; -} - +@import 'variables'; +@import 'mixins'; @import 'range'; diff --git a/src/components/form/range/_mixins.scss b/src/components/form/range/_mixins.scss new file mode 100644 index 00000000000..47c11eeeccf --- /dev/null +++ b/src/components/form/range/_mixins.scss @@ -0,0 +1,22 @@ +@mixin euiRange__track { + cursor: pointer; + height: $euiRangeTrackHeight; + transition: all $euiAnimSpeedNormal ease-in; + width: $euiRangeTrackWidth; +} + +@mixin euiRange__thumb { + cursor: pointer; + @include euiCustomControl($type: 'round'); + border-color: $euiRangeThumbBorderColor; + padding: 0; + height: $euiRangeThumbHeight; + width: $euiRangeThumbWidth; +} + +@mixin euiRange__thumb--disabled { + cursor: not-allowed; + border-color: $euiRangeThumbBorderColor; + background-color: $euiRangeThumbBorderColor; + box-shadow: none; +} diff --git a/src/components/form/range/_range.scss b/src/components/form/range/_range.scss index 114f5780a69..1b6ff49107c 100644 --- a/src/components/form/range/_range.scss +++ b/src/components/form/range/_range.scss @@ -8,10 +8,7 @@ } &--disabled { - .euiRange__minLabel, - .euiRange__maxLabel { - color: $euiFormControlDisabledColor; - } + opacity: .25; } } @@ -41,22 +38,18 @@ &:disabled { &::-webkit-slider-thumb { - @include euiCustomControl--disabled; - cursor: not-allowed; + @include euiRange__thumb--disabled; } &::-moz-range-thumb { - @include euiCustomControl--disabled; - cursor: not-allowed; + @include euiRange__thumb--disabled; } &::-ms-thumb { - @include euiCustomControl--disabled; - cursor: not-allowed; + @include euiRange__thumb--disabled; } &::-webkit-slider-runnable-track { - background-color: $euiColorLightShade; cursor: not-allowed; } } @@ -65,17 +58,14 @@ &::-webkit-slider-thumb { @include euiCustomControl--focused; - @include euiFocusRing; } &::-moz-range-thumb { @include euiCustomControl--focused; - @include euiFocusRing; } &::-ms-thumb { @include euiCustomControl--focused; - @include euiFocusRing; } &::-webkit-slider-runnable-track { @@ -85,31 +75,31 @@ } &::-webkit-slider-runnable-track { - @include track; + @include euiRange__track; background: $euiRangeTrackColor; border: $euiRangeTrackBorderWidth solid $euiRangeTrackBorderColor; border-radius: $euiRangeTrackRadius; } &::-webkit-slider-thumb { - @include thumb; + @include euiRange__thumb; -webkit-appearance: none; margin-top: ((-$euiRangeTrackBorderWidth * 2 + $euiRangeTrackHeight) / 2) - ($euiRangeThumbHeight / 2); } &::-moz-range-track { - @include track; + @include euiRange__track; background: $euiRangeTrackColor; border: $euiRangeTrackBorderWidth solid $euiRangeTrackBorderColor; border-radius: $euiRangeTrackRadius; } &::-moz-range-thumb { - @include thumb; + @include euiRange__thumb; } &::-ms-track { - @include track; + @include euiRange__track; background: transparent; border-color: transparent; border-width: ($euiRangeThumbHeight / 2) 0; @@ -129,7 +119,7 @@ } &::-ms-thumb { - @include thumb; + @include euiRange__thumb; margin-top: 0; } } diff --git a/src/components/form/range/_variables.scss b/src/components/form/range/_variables.scss new file mode 100644 index 00000000000..66637e12ea6 --- /dev/null +++ b/src/components/form/range/_variables.scss @@ -0,0 +1,12 @@ +$euiRangeTrackColor: $euiColorDarkShade; + +$euiRangeThumbRadius: 50%; +$euiRangeThumbHeight: $euiSize; +$euiRangeThumbWidth: $euiSize; +$euiRangeThumbBorderColor: $euiRangeTrackColor; + +$euiRangeTrackWidth: 100%; +$euiRangeTrackHeight: 2px; +$euiRangeTrackBorderWidth: 0; +$euiRangeTrackBorderColor: $euiRangeTrackColor; +$euiRangeTrackRadius: $euiBorderRadius; From 5a0e7df512474b4cf1109f756c0f35aef32d2ac0 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 18 Jun 2018 18:33:33 -0400 Subject: [PATCH 03/20] Added optional input --- .../form_controls/form_controls_example.js | 6 ++-- src-docs/src/views/form_controls/range.js | 28 ++++++++++++++++ .../range/__snapshots__/range.test.js.snap | 27 +++++++++++++-- src/components/form/range/_range.scss | 19 ++++++++++- src/components/form/range/range.js | 33 ++++++++++++++++--- src/components/form/range/range.test.js | 9 +++++ 6 files changed, 111 insertions(+), 11 deletions(-) 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 02aa6e9e5a4..79cc694b7b1 100644 --- a/src-docs/src/views/form_controls/form_controls_example.js +++ b/src-docs/src/views/form_controls/form_controls_example.js @@ -240,12 +240,12 @@ export const FormControlsExample = { title: 'Range', text: ( - +

The base slider should only be used when the precise value is not considered important. If - the precise value does matter, use - the EuiFieldNumber instead. + the precise value does matter, add the showInput prop or use + a EuiFieldNumber instead.


diff --git a/src-docs/src/views/form_controls/range.js b/src-docs/src/views/form_controls/range.js index 776207b8c5c..dd841f5de81 100644 --- a/src-docs/src/views/form_controls/range.js +++ b/src-docs/src/views/form_controls/range.js @@ -50,6 +50,34 @@ export default class extends Component { aria-label="Use aria labels when no actual label is in use" showLabels /> + + + + + + + + ); } diff --git a/src/components/form/range/__snapshots__/range.test.js.snap b/src/components/form/range/__snapshots__/range.test.js.snap index a71ba3b582f..9f7ccfaaaa0 100644 --- a/src/components/form/range/__snapshots__/range.test.js.snap +++ b/src/components/form/range/__snapshots__/range.test.js.snap @@ -31,6 +31,29 @@ exports[`EuiRange props compressed should render 1`] = ` `; +exports[`EuiRange props extra input should render 1`] = ` +
+ +
+ +
+
+`; + exports[`EuiRange props fullWidth should render 1`] = `
@@ -60,7 +83,7 @@ exports[`EuiRange props labels should render 1`] = ` type="range" /> diff --git a/src/components/form/range/_range.scss b/src/components/form/range/_range.scss index 1b6ff49107c..a9ffa5987ac 100644 --- a/src/components/form/range/_range.scss +++ b/src/components/form/range/_range.scss @@ -1,3 +1,9 @@ +/* + * 1. There's no way to target the layout of the extra input, so we must + * use the descendant selector to allow the width to shrink. + * 2. Align extra input slightly better with slider labels, in an IE compliant way. + */ + .euiRange__wrapper { @include euiFormControlSize(); display: flex; @@ -10,11 +16,22 @@ &--disabled { opacity: .25; } + + > .euiFormControlLayout { /* 1 */ + flex-basis: 0%; + } } .euiRange__minLabel, .euiRange__maxLabel { - margin-bottom: 0; + font-size: $euiFontSizeXS; +} + +.euiRange__extraInput { + width: auto; + margin-left: $euiSize; + position: relative; /* 2 */ + top: -2px; /* 2 */ } diff --git a/src/components/form/range/range.js b/src/components/form/range/range.js index 5235a6259a3..85833a44e67 100644 --- a/src/components/form/range/range.js +++ b/src/components/form/range/range.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { EuiFormLabel } from '../form_label'; +import { EuiFieldNumber } from '../field_number'; export const EuiRange = ({ className, @@ -14,6 +14,7 @@ export const EuiRange = ({ min, name, showLabels, + showInput, value, ...rest }) => { @@ -39,15 +40,31 @@ export const EuiRange = ({ let maxLabelNode; if (showLabels) { minLabelNode = ( - + + ); maxLabelNode = ( - + + + ); + } + + let extraInputNode; + if (showInput) { + extraInputNode = ( + ); } @@ -68,6 +85,7 @@ export const EuiRange = ({ {...rest} /> {maxLabelNode} + {extraInputNode}
); }; @@ -84,6 +102,10 @@ EuiRange.propTypes = { * Shows static min/max labels on the sides of the range slider */ showLabels: PropTypes.bool, + /** + * Displays an extra input control for direct manipulation + */ + showInput: PropTypes.bool, }; EuiRange.defaultProps = { @@ -92,4 +114,5 @@ EuiRange.defaultProps = { fullWidth: false, compressed: false, showLabels: false, + showInput: false, }; diff --git a/src/components/form/range/range.test.js b/src/components/form/range/range.test.js index ee76bf3376a..e97491a0e74 100644 --- a/src/components/form/range/range.test.js +++ b/src/components/form/range/range.test.js @@ -49,5 +49,14 @@ describe('EuiRange', () => { expect(component) .toMatchSnapshot(); }); + + test('extra input should render', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); }); }); From 21af927885cafb2625155c92c158fdb30de91109 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 18 Jun 2018 21:48:19 -0400 Subject: [PATCH 04/20] Blank stepped range --- .../form_controls/form_controls_example.js | 18 +++++++ .../src/views/form_controls/range_stepped.js | 54 +++++++++++++++++++ src/components/form/index.js | 5 +- .../range/__snapshots__/range.test.js.snap | 17 ++++-- .../__snapshots__/range_stepped.test.js.snap | 9 ++++ src/components/form/range/_index.scss | 2 + src/components/form/range/_range_stepped.scss | 3 ++ src/components/form/range/index.js | 1 + src/components/form/range/range.js | 2 +- src/components/form/range/range.test.js | 13 ++++- src/components/form/range/range_stepped.js | 19 +++++++ .../form/range/range_stepped.test.js | 16 ++++++ src/components/index.js | 1 + 13 files changed, 152 insertions(+), 8 deletions(-) create mode 100644 src-docs/src/views/form_controls/range_stepped.js create mode 100644 src/components/form/range/__snapshots__/range_stepped.test.js.snap create mode 100644 src/components/form/range/_range_stepped.scss create mode 100644 src/components/form/range/range_stepped.js create mode 100644 src/components/form/range/range_stepped.test.js 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 79cc694b7b1..bcd3a36d853 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 00000000000..40ff6ad4898 --- /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 f04fdc5605b..2d73edcfa09 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 9f7ccfaaaa0..5d4bb66daa6 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 00000000000..f7ca2d27558 --- /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 7ef7e10548a..709ce0184af 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 00000000000..9cc611e1a7e --- /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 3f3c671156c..51c95b5b78a 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 85833a44e67..3fbc74703bb 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 e97491a0e74..6e2a8fb9a6a 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 00000000000..a58612b3108 --- /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 00000000000..3e6b93c219a --- /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 2c41840fd58..a97f2728b00 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -128,6 +128,7 @@ export { EuiRadio, EuiRadioGroup, EuiRange, + EuiRangeStepped, EuiSelect, EuiSwitch, EuiTextArea, From eb54b39119e558c008ead9c627b73d64336d5c77 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 18 Jun 2018 23:25:50 -0400 Subject: [PATCH 05/20] Adding optional ticks --- src-docs/src/views/form_controls/range.js | 14 +++++ src/components/form/range/_range.scss | 62 +++++++++++++++++++++++ src/components/form/range/range.js | 52 +++++++++++++++++++ 3 files changed, 128 insertions(+) diff --git a/src-docs/src/views/form_controls/range.js b/src-docs/src/views/form_controls/range.js index dd841f5de81..bd79a4b6068 100644 --- a/src-docs/src/views/form_controls/range.js +++ b/src-docs/src/views/form_controls/range.js @@ -78,6 +78,20 @@ export default class extends Component { showInput compressed /> + + + + ); } diff --git a/src/components/form/range/_range.scss b/src/components/form/range/_range.scss index a9ffa5987ac..8522f172e48 100644 --- a/src/components/form/range/_range.scss +++ b/src/components/form/range/_range.scss @@ -8,6 +8,7 @@ @include euiFormControlSize(); display: flex; align-items: center; + position: relative; // for positioning ticks &--fullWidth { max-width: 100%; @@ -34,6 +35,43 @@ top: -2px; /* 2 */ } +.euiRange__ticks { + position: absolute; + left: $euiSizeS; + right: 0; + top: 18px; + display: flex; + justify-content: space-between; + z-index: $euiZLevel0; +} + +.euiRange__tick { + overflow-x: hidden; + text-overflow: ellipsis; + font-size: $euiFontSizeXS; + position: relative; + padding-top: 18px; + + &::before { + content: ""; + @include size($euiSizeXS); + background-color: $euiColorDarkShade; + border-radius: 100%; + position: absolute; + top: 0; + left: calc(50% - 2px); + } + + &:focus, + &:focus, + &--selected { + color: $euiColorPrimary; + } + + &--selected { + font-weight: $euiFontWeightMedium; + } +} // The following code is inspired by... @@ -49,8 +87,10 @@ // Auto means the height isn't defined height: auto; appearance: none; + background: transparent; /* Otherwise white in Chrome */ margin: $euiRangeThumbHeight/2 $euiSizeS; width: 100%; // ensures the slider expands to fill flex display + z-index: $euiZLevel1; // stay above tick marks &:disabled { @@ -140,3 +180,25 @@ margin-top: 0; } } + +.euiRange__wrapper--hasTicks .euiRange { + &::-webkit-slider-runnable-track { + background: transparentize($euiRangeTrackColor, .6); + border-color: transparentize($euiRangeTrackBorderColor, .6); + } + + &::-moz-range-track { + background: transparentize($euiRangeTrackColor, .6); + border-color: transparentize($euiRangeTrackBorderColor, .6); + } + + &::-ms-fill-lower { + background: transparentize($euiRangeTrackColor, .6); + border-color: transparentize($euiRangeTrackBorderColor, .6); + } + + &::-ms-fill-upper { + background: transparentize($euiRangeTrackColor, .6); + border-color: transparentize($euiRangeTrackBorderColor, .6); + } +} diff --git a/src/components/form/range/range.js b/src/components/form/range/range.js index 3fbc74703bb..44f350ad206 100644 --- a/src/components/form/range/range.js +++ b/src/components/form/range/range.js @@ -2,6 +2,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; +import { range } from 'lodash'; + import { EuiFieldNumber } from '../field_number'; export const EuiRange = ({ @@ -13,8 +15,12 @@ export const EuiRange = ({ max, min, name, + step, showLabels, showInput, + showTicks, + tickInterval, + onChange, value, ...rest }) => { @@ -33,6 +39,7 @@ export const EuiRange = ({ 'euiRange__wrapper--fullWidth': fullWidth, 'euiRange__wrapper--compressed': compressed, 'euiRange__wrapper--disabled': disabled, + 'euiRange__wrapper--hasTicks': showTicks, }, ); @@ -60,14 +67,45 @@ export const EuiRange = ({ className="euiRange__extraInput" min={min} max={max} + step={step} value={Number(value)} disabled={disabled} compressed={compressed} + onChange={onChange} {...rest} /> ); } + let tickMarksNode; + if (showTicks) { + // Set the interval for which to show the tick marks + const interval = tickInterval || step || 1; + // Loop from min to max, creating ticks at each interval + const sequence = range(min, max, interval); + tickMarksNode = ( +
+ {sequence.map((tickValue, index) => { + const tickClasses = classNames( + 'euiRange__tick', + { 'euiRange__tick--selected': value === tickValue, } + ); + return ( + + ); + })} +
+ ); + } + return (
{maxLabelNode} {extraInputNode} + {tickMarksNode}
); }; @@ -95,6 +136,7 @@ EuiRange.propTypes = { id: PropTypes.string, min: PropTypes.number.isRequired, max: PropTypes.number.isRequired, + step: PropTypes.number, value: PropTypes.string, fullWidth: PropTypes.bool, compressed: PropTypes.bool, @@ -106,6 +148,15 @@ EuiRange.propTypes = { * Displays an extra input control for direct manipulation */ showInput: PropTypes.bool, + /** + * Shows clickable tick marks and labels at the given interval (`step`/`tickInterval`) + */ + showTicks: PropTypes.bool, + /** + * Modifies the number of tick marks and at what interval + */ + tickInterval: PropTypes.number, + onChange: PropTypes.func, }; EuiRange.defaultProps = { @@ -115,4 +166,5 @@ EuiRange.defaultProps = { compressed: false, showLabels: false, showInput: false, + showTicks: false, }; From 72e61f51098e03581709dfbfcc4030cc257d8cb5 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 19 Jun 2018 01:08:53 -0400 Subject: [PATCH 06/20] Almost have it padding is off --- src-docs/src/views/form_controls/range.js | 28 +++++++++ src/components/form/range/_range.scss | 73 +++++++++++++++++------ src/components/form/range/range.js | 38 ++++++++++++ 3 files changed, 120 insertions(+), 19 deletions(-) diff --git a/src-docs/src/views/form_controls/range.js b/src-docs/src/views/form_controls/range.js index bd79a4b6068..68af2c6b6c3 100644 --- a/src-docs/src/views/form_controls/range.js +++ b/src-docs/src/views/form_controls/range.js @@ -14,6 +14,19 @@ export default class extends Component { constructor(props) { super(props); + this.levels = [ + { + min: 0, + max: 600, + color: 'danger' + }, + { + min: 600, + max: 2000, + color: 'success' + } + ]; + this.state = { value: '120', }; @@ -92,6 +105,21 @@ export default class extends Component { showTicks tickInterval={300} /> + + + + ); } diff --git a/src/components/form/range/_range.scss b/src/components/form/range/_range.scss index 8522f172e48..e90b0e901dd 100644 --- a/src/components/form/range/_range.scss +++ b/src/components/form/range/_range.scss @@ -37,12 +37,11 @@ .euiRange__ticks { position: absolute; - left: $euiSizeS; + left: 0; right: 0; top: 18px; display: flex; - justify-content: space-between; - z-index: $euiZLevel0; + z-index: $euiZLevel1; } .euiRange__tick { @@ -73,6 +72,31 @@ } } +.euiRange__levels { + position: absolute; + left: $euiSizeS; + right: $euiSizeS; + top: 24px; + display: flex; + justify-content: stretch; + z-index: $euiZLevel0; +} + +[class*="euiRange__level--"] { + display: block; + height: 6px; + border-radius: 6px; + margin: 2px; +} + +.euiRange__level--success { + background-color: transparentize($euiColorSuccess, .7); +} + +.euiRange__level--danger { + background-color: transparentize($euiColorDanger, .7); +} + // The following code is inspired by... // Github: https://github.com/darlanrod/input-range-sass @@ -90,7 +114,7 @@ background: transparent; /* Otherwise white in Chrome */ margin: $euiRangeThumbHeight/2 $euiSizeS; width: 100%; // ensures the slider expands to fill flex display - z-index: $euiZLevel1; // stay above tick marks + z-index: $euiZLevel2; // stay above tick marks &:disabled { @@ -181,24 +205,35 @@ } } -.euiRange__wrapper--hasTicks .euiRange { - &::-webkit-slider-runnable-track { - background: transparentize($euiRangeTrackColor, .6); - border-color: transparentize($euiRangeTrackBorderColor, .6); +.euiRange__wrapper--hasTicks { + .euiRange__levels { + padding-left: $euiRangeThumbWidth/2; + padding-right: $euiRangeThumbWidth/2; } - &::-moz-range-track { - background: transparentize($euiRangeTrackColor, .6); - border-color: transparentize($euiRangeTrackBorderColor, .6); - } + .euiRange { + width: calc(100% + #{$euiRangeThumbWidth}); + margin-left: $euiRangeThumbWidth/2 * -1; + margin-right: $euiRangeThumbWidth/2 * -1; - &::-ms-fill-lower { - background: transparentize($euiRangeTrackColor, .6); - border-color: transparentize($euiRangeTrackBorderColor, .6); - } + &::-webkit-slider-runnable-track { + background: transparentize($euiRangeTrackColor, .6); + border-color: transparentize($euiRangeTrackBorderColor, .6); + } - &::-ms-fill-upper { - background: transparentize($euiRangeTrackColor, .6); - border-color: transparentize($euiRangeTrackBorderColor, .6); + &::-moz-range-track { + background: transparentize($euiRangeTrackColor, .6); + border-color: transparentize($euiRangeTrackBorderColor, .6); + } + + &::-ms-fill-lower { + background: transparentize($euiRangeTrackColor, .6); + border-color: transparentize($euiRangeTrackBorderColor, .6); + } + + &::-ms-fill-upper { + background: transparentize($euiRangeTrackColor, .6); + border-color: transparentize($euiRangeTrackBorderColor, .6); + } } } diff --git a/src/components/form/range/range.js b/src/components/form/range/range.js index 44f350ad206..42868ba2662 100644 --- a/src/components/form/range/range.js +++ b/src/components/form/range/range.js @@ -20,6 +20,7 @@ export const EuiRange = ({ showInput, showTicks, tickInterval, + levels, onChange, value, ...rest @@ -43,6 +44,8 @@ export const EuiRange = ({ }, ); + const rangeTotal = (max - min); + let minLabelNode; let maxLabelNode; if (showLabels) { @@ -78,11 +81,21 @@ export const EuiRange = ({ } let tickMarksNode; + let wrapperStyle; if (showTicks) { // Set the interval for which to show the tick marks const interval = tickInterval || step || 1; // Loop from min to max, creating ticks at each interval const sequence = range(min, max, interval); + // Calculate the width of each tick mark + const width = (interval / (rangeTotal + interval)) * 100; + + // Align with item labels across the range + const sliderPadding = ( + (width) / 2 // applied to left and right + ); + wrapperStyle = { padding: `0 ${sliderPadding}%` }; + tickMarksNode = (
{sequence.map((tickValue, index) => { @@ -90,6 +103,7 @@ export const EuiRange = ({ 'euiRange__tick', { 'euiRange__tick--selected': value === tickValue, } ); + return ( @@ -106,9 +121,26 @@ export const EuiRange = ({ ); } + let levelsNode; + if (levels.length) { + levelsNode = ( +
+ {levels.map((level, index) => { + const range = level.max - level.min; + const width = (range / rangeTotal) * 100; + + return ( + + ); + })} +
+ ); + } + return (
{minLabelNode} ); }; @@ -157,6 +190,10 @@ EuiRange.propTypes = { */ tickInterval: PropTypes.number, onChange: PropTypes.func, + /** + * Create colored indicators for certain intervals + */ + levels: PropTypes.array, }; EuiRange.defaultProps = { @@ -167,4 +204,5 @@ EuiRange.defaultProps = { showLabels: false, showInput: false, showTicks: false, + levels: [], }; From c1a605b9fb74029b3f24b386c4b1e94060560f7a Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 19 Jun 2018 01:20:04 -0400 Subject: [PATCH 07/20] Adding padding to input instead --- src/components/form/range/range.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/form/range/range.js b/src/components/form/range/range.js index 42868ba2662..566fd8fa08b 100644 --- a/src/components/form/range/range.js +++ b/src/components/form/range/range.js @@ -23,6 +23,7 @@ export const EuiRange = ({ levels, onChange, value, + style, ...rest }) => { const classes = classNames( @@ -81,7 +82,6 @@ export const EuiRange = ({ } let tickMarksNode; - let wrapperStyle; if (showTicks) { // Set the interval for which to show the tick marks const interval = tickInterval || step || 1; @@ -90,11 +90,10 @@ export const EuiRange = ({ // Calculate the width of each tick mark const width = (interval / (rangeTotal + interval)) * 100; - // Align with item labels across the range - const sliderPadding = ( - (width) / 2 // applied to left and right - ); - wrapperStyle = { padding: `0 ${sliderPadding}%` }; + // Align with item labels across the range by adding + // left and right padding that is half of the tick marks + style = style || {}; + style.padding = `0 ${(width) / 2}%`; tickMarksNode = (
@@ -140,7 +139,6 @@ export const EuiRange = ({ return (
{minLabelNode} {maxLabelNode} From 3c2ffffffed6a612d98b63d75b8c1c12a1f00663 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 19 Jun 2018 01:48:48 -0400 Subject: [PATCH 08/20] Re-aligning --- src-docs/src/views/form_controls/range.js | 1 + .../range/__snapshots__/range.test.js.snap | 157 +++++++++++++----- src/components/form/range/_range.scss | 14 +- src/components/form/range/range.js | 41 ++--- src/components/form/range/range.test.js | 9 + 5 files changed, 161 insertions(+), 61 deletions(-) diff --git a/src-docs/src/views/form_controls/range.js b/src-docs/src/views/form_controls/range.js index 68af2c6b6c3..425c67fc675 100644 --- a/src-docs/src/views/form_controls/range.js +++ b/src-docs/src/views/form_controls/range.js @@ -117,6 +117,7 @@ export default class extends Component { onChange={this.onChange} aria-label="Use aria labels when no actual label is in use" showTicks + showInput tickInterval={300} levels={this.levels} /> diff --git a/src/components/form/range/__snapshots__/range.test.js.snap b/src/components/form/range/__snapshots__/range.test.js.snap index 5d4bb66daa6..a473edaa22c 100644 --- a/src/components/form/range/__snapshots__/range.test.js.snap +++ b/src/components/form/range/__snapshots__/range.test.js.snap @@ -4,17 +4,21 @@ exports[`EuiRange is rendered 1`] = `
- +
+ +
`; @@ -22,12 +26,16 @@ exports[`EuiRange props compressed should render 1`] = `
- +
+ +
`; @@ -35,17 +43,21 @@ exports[`EuiRange props extra input should render 1`] = `
- +
+ +
@@ -67,12 +79,16 @@ exports[`EuiRange props fullWidth should render 1`] = `
- +
+ +
`; @@ -85,12 +101,16 @@ exports[`EuiRange props labels should render 1`] = ` > 1 - +
+ +
`; + +exports[`EuiRange props ticks should render 1`] = ` +
+
+ +
+ + + + + +
+
+
+`; diff --git a/src/components/form/range/_range.scss b/src/components/form/range/_range.scss index e90b0e901dd..4ab89fbd506 100644 --- a/src/components/form/range/_range.scss +++ b/src/components/form/range/_range.scss @@ -8,7 +8,6 @@ @include euiFormControlSize(); display: flex; align-items: center; - position: relative; // for positioning ticks &--fullWidth { max-width: 100%; @@ -23,6 +22,12 @@ } } +.euiRange__inputWrapper { + @include euiFormControlSize(); + padding: ($euiSizeS - 1px) 0; // adjusts for border of input + position: relative; // for positioning ticks +} + .euiRange__minLabel, .euiRange__maxLabel { font-size: $euiFontSizeXS; @@ -113,7 +118,8 @@ appearance: none; background: transparent; /* Otherwise white in Chrome */ margin: $euiRangeThumbHeight/2 $euiSizeS; - width: 100%; // ensures the slider expands to fill flex display + width: calc(100% - #{$euiSizeS * 2}); // ensures the slider expands to fill flex display + position: relative; z-index: $euiZLevel2; // stay above tick marks &:disabled { @@ -211,6 +217,10 @@ padding-right: $euiRangeThumbWidth/2; } + .euiRange__extraInput { + margin-top: $euiSizeL; + } + .euiRange { width: calc(100% + #{$euiRangeThumbWidth}); margin-left: $euiRangeThumbWidth/2 * -1; diff --git a/src/components/form/range/range.js b/src/components/form/range/range.js index 566fd8fa08b..417210bba16 100644 --- a/src/components/form/range/range.js +++ b/src/components/form/range/range.js @@ -42,6 +42,7 @@ export const EuiRange = ({ 'euiRange__wrapper--compressed': compressed, 'euiRange__wrapper--disabled': disabled, 'euiRange__wrapper--hasTicks': showTicks, + 'euiRange__wrapper--hasLevels': levels.length, }, ); @@ -137,28 +138,30 @@ export const EuiRange = ({ } return ( -
+
{minLabelNode} - + +
+ + {tickMarksNode} + {levelsNode} +
+ {maxLabelNode} {extraInputNode} - {tickMarksNode} - {levelsNode}
); }; diff --git a/src/components/form/range/range.test.js b/src/components/form/range/range.test.js index 6e2a8fb9a6a..197994c0032 100644 --- a/src/components/form/range/range.test.js +++ b/src/components/form/range/range.test.js @@ -50,6 +50,15 @@ describe('EuiRange', () => { .toMatchSnapshot(); }); + test('ticks should render', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); + test('extra input should render', () => { const component = render( Date: Tue, 19 Jun 2018 01:56:55 -0400 Subject: [PATCH 09/20] Making sure max tick is displayed --- src-docs/src/views/form_controls/range.js | 2 +- src/components/form/range/range.js | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src-docs/src/views/form_controls/range.js b/src-docs/src/views/form_controls/range.js index 425c67fc675..fbb0784b582 100644 --- a/src-docs/src/views/form_controls/range.js +++ b/src-docs/src/views/form_controls/range.js @@ -118,7 +118,7 @@ export default class extends Component { aria-label="Use aria labels when no actual label is in use" showTicks showInput - tickInterval={300} + tickInterval={500} levels={this.levels} /> diff --git a/src/components/form/range/range.js b/src/components/form/range/range.js index 417210bba16..8b2cca9e126 100644 --- a/src/components/form/range/range.js +++ b/src/components/form/range/range.js @@ -86,8 +86,6 @@ export const EuiRange = ({ if (showTicks) { // Set the interval for which to show the tick marks const interval = tickInterval || step || 1; - // Loop from min to max, creating ticks at each interval - const sequence = range(min, max, interval); // Calculate the width of each tick mark const width = (interval / (rangeTotal + interval)) * 100; @@ -96,6 +94,10 @@ export const EuiRange = ({ style = style || {}; style.padding = `0 ${(width) / 2}%`; + // Loop from min to max, creating ticks at each interval + // * adds 1 to max to ensure that the max number is also included + const sequence = range(min, max + 1, interval); + tickMarksNode = (
{sequence.map((tickValue, index) => { From e6743ac09a3dcb104466e7780929f5e46b2271d6 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 19 Jun 2018 11:48:38 -0400 Subject: [PATCH 10/20] Cleaned up --- src-docs/src/views/form_controls/range.js | 5 + src/components/button/_button.scss | 2 +- .../range/__snapshots__/range.test.js.snap | 30 +++ src/components/form/range/_mixins.scss | 24 +- src/components/form/range/_range.scss | 210 ++++++++---------- src/components/form/range/range.js | 20 +- src/components/form/range/range.test.js | 22 ++ 7 files changed, 180 insertions(+), 133 deletions(-) diff --git a/src-docs/src/views/form_controls/range.js b/src-docs/src/views/form_controls/range.js index fbb0784b582..8078edf96b3 100644 --- a/src-docs/src/views/form_controls/range.js +++ b/src-docs/src/views/form_controls/range.js @@ -6,6 +6,7 @@ import React, { import { EuiRange, EuiSpacer, + EuiFormHelpText, } from '../../../../src/components'; import makeId from '../../../../src/components/form/form_row/make_id'; @@ -87,10 +88,13 @@ export default class extends Component { 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} /> + Recommended levels are 600 and above. @@ -116,6 +120,7 @@ export default class extends Component { value={this.state.value} onChange={this.onChange} aria-label="Use aria labels when no actual label is in use" + aria-describedBy="levelsHelp" showTicks showInput tickInterval={500} diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index 88d5b7f3be8..a75b3ffc179 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -77,7 +77,7 @@ $buttonTypes: ( text: $euiColorDarkShade, // Reserved for special use cases ); -// Create button modifiders based upon the map. +// Create button modifiers based upon the map. @each $name, $color in $buttonTypes { .euiButton--#{$name} { diff --git a/src/components/form/range/__snapshots__/range.test.js.snap b/src/components/form/range/__snapshots__/range.test.js.snap index a473edaa22c..d174d90422d 100644 --- a/src/components/form/range/__snapshots__/range.test.js.snap +++ b/src/components/form/range/__snapshots__/range.test.js.snap @@ -68,6 +68,7 @@ exports[`EuiRange props extra input should render 1`] = ` max="10" min="1" name="name" + style="max-width:4em" type="number" value="8" /> @@ -119,6 +120,35 @@ exports[`EuiRange props labels should render 1`] = `
`; +exports[`EuiRange props levels should render 1`] = ` +
+
+ +
+ + +
+
+
+`; + exports[`EuiRange props ticks should render 1`] = `
.euiFormControlLayout { /* 1 */ - flex-basis: 0%; + width: auto; } } .euiRange__inputWrapper { - @include euiFormControlSize(); - padding: ($euiSizeS - 1px) 0; // adjusts for border of input - position: relative; // for positioning ticks + flex-grow: 1; + position: relative; // for positioning ticks/levels + align-self: flex-start; /* 3 */ } .euiRange__minLabel, @@ -40,21 +41,12 @@ top: -2px; /* 2 */ } -.euiRange__ticks { - position: absolute; - left: 0; - right: 0; - top: 18px; - display: flex; - z-index: $euiZLevel1; -} - .euiRange__tick { overflow-x: hidden; text-overflow: ellipsis; font-size: $euiFontSizeXS; position: relative; - padding-top: 18px; + padding-top: $euiSize; &::before { content: ""; @@ -63,7 +55,7 @@ border-radius: 100%; position: absolute; top: 0; - left: calc(50% - 2px); + left: calc(50% - #{($euiSizeXS/2)}); } &:focus, @@ -78,10 +70,6 @@ } .euiRange__levels { - position: absolute; - left: $euiSizeS; - right: $euiSizeS; - top: 24px; display: flex; justify-content: stretch; z-index: $euiZLevel0; @@ -94,14 +82,68 @@ margin: 2px; } -.euiRange__level--success { - background-color: transparentize($euiColorSuccess, .7); +// Modifier naming and colors. +$euiRange__levelColors: ( + primary: $euiColorPrimary, + success: $euiColorSuccess, + warning: $euiColorWarning, + danger: $euiColorDanger, +); + +// Create level modifiers based upon the map. +@each $name, $color in $euiRange__levelColors { + .euiRange__level--#{$name} { + background-color: transparentize($color, .7); + } } -.euiRange__level--danger { - background-color: transparentize($euiColorDanger, .7); +/* + * Positioning + */ + +.euiRange__wrapper--hasLevels { + .euiRange__levels { + position: absolute; + left: $euiSizeS; + right: $euiSizeS; + top: ($euiFormControlHeight/2) + 2px; + } } +.euiRange__wrapper--hasTicks { + .euiRange, + .euiRange__levels { + width: calc(100% + #{$euiRangeThumbWidth}); + } + + .euiRange { + height: $euiFormControlHeight/2; /* 3 */ + margin: 0 $euiRangeThumbWidth/2 * -1; + } + + .euiRange__levels { + top: ($euiFormControlHeight/4) + 2px; + margin-left: $euiRangeThumbWidth * -1; + } + + .euiRange__extraInput { + margin-top: 0; + } + + .euiRange__ticks { + position: absolute; + left: 0; + right: 0; + top: $euiSizeS; + display: flex; + z-index: $euiZLevel1; + } +} + +/* + * Input Range Customization by browser + */ + // The following code is inspired by... // Github: https://github.com/darlanrod/input-range-sass @@ -114,136 +156,74 @@ .euiRange { // Auto means the height isn't defined - height: auto; + height: $euiFormControlHeight; appearance: none; - background: transparent; /* Otherwise white in Chrome */ - margin: $euiRangeThumbHeight/2 $euiSizeS; + background: transparent; // Otherwise white in Chrome + margin: 0 $euiSizeS; width: calc(100% - #{$euiSizeS * 2}); // ensures the slider expands to fill flex display position: relative; z-index: $euiZLevel2; // stay above tick marks + cursor: pointer; // Keep cursor to full range bounds &:disabled { - - &::-webkit-slider-thumb { - @include euiRange__thumb--disabled; - } - - &::-moz-range-thumb { - @include euiRange__thumb--disabled; - } - - &::-ms-thumb { - @include euiRange__thumb--disabled; - } - - &::-webkit-slider-runnable-track { + @include euiRange__thumb__perBrowser{ cursor: not-allowed; + border-color: $euiRangeThumbBorderColor; + background-color: $euiRangeThumbBorderColor; + box-shadow: none; } } &:focus { - - &::-webkit-slider-thumb { - @include euiCustomControl--focused; - } - - &::-moz-range-thumb { - @include euiCustomControl--focused; - } - - &::-ms-thumb { + @include euiRange__thumb__perBrowser{ @include euiCustomControl--focused; } - &::-webkit-slider-runnable-track { + @include euiRange__track__perBrowser{ background-color: $euiColorPrimary; + border-color: $euiColorPrimary; } + } + @include euiRange__thumb__perBrowser { + cursor: pointer; + @include euiCustomControl($type: 'round'); + border-color: $euiRangeThumbBorderColor; + padding: 0; + height: $euiRangeThumbHeight; + width: $euiRangeThumbWidth; } - &::-webkit-slider-runnable-track { - @include euiRange__track; + @include euiRange__track__perBrowser { + @include euiRange__trackSize; background: $euiRangeTrackColor; border: $euiRangeTrackBorderWidth solid $euiRangeTrackBorderColor; border-radius: $euiRangeTrackRadius; } + // Resets + &::-webkit-slider-thumb { - @include euiRange__thumb; -webkit-appearance: none; margin-top: ((-$euiRangeTrackBorderWidth * 2 + $euiRangeTrackHeight) / 2) - ($euiRangeThumbHeight / 2); } - &::-moz-range-track { - @include euiRange__track; - background: $euiRangeTrackColor; - border: $euiRangeTrackBorderWidth solid $euiRangeTrackBorderColor; - border-radius: $euiRangeTrackRadius; - } - - &::-moz-range-thumb { - @include euiRange__thumb; + &::-ms-thumb { + margin-top: 0; } &::-ms-track { - @include euiRange__track; + @include euiRange__trackSize; background: transparent; border-color: transparent; border-width: ($euiRangeThumbHeight / 2) 0; color: transparent; } - - &::-ms-fill-lower { - background: $euiRangeTrackColor; - border: $euiRangeTrackBorderWidth solid $euiRangeTrackBorderColor; - border-radius: $euiRangeTrackRadius * 2; - } - - &::-ms-fill-upper { - background: $euiRangeTrackColor; - border: $euiRangeTrackBorderWidth solid $euiRangeTrackBorderColor; - border-radius: $euiRangeTrackRadius * 2; - } - - &::-ms-thumb { - @include euiRange__thumb; - margin-top: 0; - } } -.euiRange__wrapper--hasTicks { - .euiRange__levels { - padding-left: $euiRangeThumbWidth/2; - padding-right: $euiRangeThumbWidth/2; - } - - .euiRange__extraInput { - margin-top: $euiSizeL; - } - - .euiRange { - width: calc(100% + #{$euiRangeThumbWidth}); - margin-left: $euiRangeThumbWidth/2 * -1; - margin-right: $euiRangeThumbWidth/2 * -1; - - &::-webkit-slider-runnable-track { - background: transparentize($euiRangeTrackColor, .6); - border-color: transparentize($euiRangeTrackBorderColor, .6); - } - - &::-moz-range-track { - background: transparentize($euiRangeTrackColor, .6); - border-color: transparentize($euiRangeTrackBorderColor, .6); - } - - &::-ms-fill-lower { - background: transparentize($euiRangeTrackColor, .6); - border-color: transparentize($euiRangeTrackBorderColor, .6); - } - - &::-ms-fill-upper { - background: transparentize($euiRangeTrackColor, .6); - border-color: transparentize($euiRangeTrackBorderColor, .6); - } +.euiRange__wrapper--hasTicks .euiRange { + @include euiRange__track__perBrowser { + background-color: transparentize($euiRangeTrackColor, .6); + border-color: transparentize($euiRangeTrackBorderColor, .6); } } diff --git a/src/components/form/range/range.js b/src/components/form/range/range.js index 8b2cca9e126..063660ba882 100644 --- a/src/components/form/range/range.js +++ b/src/components/form/range/range.js @@ -6,6 +6,8 @@ import { range } from 'lodash'; import { EuiFieldNumber } from '../field_number'; +export const LEVEL_COLORS = ['primary', 'success', 'warning', 'danger']; + export const EuiRange = ({ className, compressed, @@ -66,6 +68,11 @@ export const EuiRange = ({ let extraInputNode; if (showInput) { + // Chrom will properly size the input based on the max value, but FF & IE does not. + // Calculate the max-width of the input based on number of characters in max unit + // Add 2 to accomodate for input stepper + const maxWidthStyle = { maxWidth: `${String(max).length + 2}em` }; + extraInputNode = ( ); @@ -95,7 +103,7 @@ export const EuiRange = ({ style.padding = `0 ${(width) / 2}%`; // Loop from min to max, creating ticks at each interval - // * adds 1 to max to ensure that the max number is also included + // * adds 1 to max to ensure that the max tick is also included const sequence = range(min, max + 1, interval); tickMarksNode = ( @@ -126,7 +134,7 @@ export const EuiRange = ({ let levelsNode; if (levels.length) { levelsNode = ( -
+
{levels.map((level, index) => { const range = level.max - level.min; const width = (range / rangeTotal) * 100; @@ -197,7 +205,13 @@ EuiRange.propTypes = { /** * Create colored indicators for certain intervals */ - levels: PropTypes.array, + levels: PropTypes.arrayOf( + PropTypes.shape({ + min: PropTypes.number, + max: PropTypes.number, + color: PropTypes.oneOf(LEVEL_COLORS), + }), + ).isRequired, }; EuiRange.defaultProps = { diff --git a/src/components/form/range/range.test.js b/src/components/form/range/range.test.js index 197994c0032..bdca873478d 100644 --- a/src/components/form/range/range.test.js +++ b/src/components/form/range/range.test.js @@ -76,5 +76,27 @@ describe('EuiRange', () => { expect(component) .toMatchSnapshot(); }); + + test('levels should render', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); }); }); From 7cc4e67475b9d7828ef8a8d3de8ef4d848f601d2 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 19 Jun 2018 12:46:54 -0400 Subject: [PATCH 11/20] added `showRange` Something is a little funky in IE when refreshing --- src-docs/src/views/form_controls/range.js | 5 ++- .../range/__snapshots__/range.test.js.snap | 30 +++++++++++++ src/components/form/range/_range.scss | 43 ++++++++++++++++++- src/components/form/range/range.js | 25 ++++++++++- src/components/form/range/range.test.js | 9 ++++ 5 files changed, 106 insertions(+), 6 deletions(-) diff --git a/src-docs/src/views/form_controls/range.js b/src-docs/src/views/form_controls/range.js index 8078edf96b3..8dbf039db34 100644 --- a/src-docs/src/views/form_controls/range.js +++ b/src-docs/src/views/form_controls/range.js @@ -76,6 +76,7 @@ export default class extends Component { aria-label="Use aria labels when no actual label is in use" showLabels showInput + showRange /> @@ -88,7 +89,7 @@ export default class extends Component { value={this.state.value} onChange={this.onChange} aria-label="Use aria labels when no actual label is in use" - aria-describedBy="levelsHelp" + aria-describedby="levelsHelp" showLabels showInput compressed @@ -120,7 +121,7 @@ export default class extends Component { value={this.state.value} onChange={this.onChange} aria-label="Use aria labels when no actual label is in use" - aria-describedBy="levelsHelp" + aria-describedby="levelsHelp" showTicks showInput tickInterval={500} diff --git a/src/components/form/range/__snapshots__/range.test.js.snap b/src/components/form/range/__snapshots__/range.test.js.snap index d174d90422d..cf3950efbb7 100644 --- a/src/components/form/range/__snapshots__/range.test.js.snap +++ b/src/components/form/range/__snapshots__/range.test.js.snap @@ -149,6 +149,31 @@ exports[`EuiRange props levels should render 1`] = `
`; +exports[`EuiRange props range should render 1`] = ` +
+
+ +
+
+
+
+
+`; + exports[`EuiRange props ticks should render 1`] = `
1 @@ -176,6 +202,7 @@ exports[`EuiRange props ticks should render 1`] = `
`; + +exports[`EuiRange props value should render 1`] = ` +
+
+ + +
+
+`; diff --git a/src/components/form/range/_range.scss b/src/components/form/range/_range.scss index a707efbdd80..2612f825443 100644 --- a/src/components/form/range/_range.scss +++ b/src/components/form/range/_range.scss @@ -38,6 +38,14 @@ font-size: $euiFontSizeXS; } +.euiRange__minLabel { + margin-right: $euiSizeS; +} + +.euiRange__maxLabel { + margin-left: $euiSizeS; +} + .euiRange__extraInput { width: auto; margin-left: $euiSize; @@ -111,6 +119,78 @@ $euiRange__levelColors: ( background-color: $euiRangeTrackColor; } +.euiRange__value { + @include euiFontSizeS; + border: 1px solid transparentize($euiColorDarkestShade, .8); + position: absolute; + border-radius: $euiBorderRadius; + padding: $euiSizeXS $euiSizeS + 2px; + background-color: tintOrShade($euiColorFullShade, 25%, 90%); + color: $euiColorGhost; + max-width: 256px; + z-index: $euiZLevel4; + top: $euiFormControlHeight/2 - 1px; + transition: + box-shadow $euiAnimSpeedNormal $euiAnimSlightResistance, + transform $euiAnimSpeedNormal $euiAnimSlightResistance; + + // Custom sizing + $arrowSize: $euiSizeM; + $arrowMinusSize: (($arrowSize/2) - 1px) * -1; + + &::after, + &::before { + content: ""; + position: absolute; + bottom: -$arrowSize/2; + left: 50%; + transform-origin: center; + background-color: tintOrShade($euiColorFullShade, 25%, 90%); + width: $arrowSize; + height: $arrowSize; + border-radius: 2px; + } + + &::before { + background-color: transparentize($euiColorDarkestShade, .8); + } + + // Positions the arrow and animates in from the same side. + &.euiRange__value--right { + transform: translateX(0) translateY(-50%); + margin-left: $euiSizeL; + + &:before, + &:after { + bottom: 50%; + left: $arrowMinusSize; + transform: translateY(50%) rotateZ(45deg); + } + + &::before { + margin-left: -1px; + } + } + + &.euiRange__value--left { + transform: translateX(-100%) translateY(-50%); + margin-left: -$euiSizeL; + + &:before, + &:after { + bottom: 50%; + left: auto; + right: $arrowMinusSize; + transform: translateY(50%) rotateZ(45deg); + } + + &::before { + margin-right: -1px; + } + } +} + + /* * Positioning */ @@ -118,8 +198,8 @@ $euiRange__levelColors: ( .euiRange__wrapper--hasLevels { .euiRange__levels { position: absolute; - left: $euiSizeS; - right: $euiSizeS; + left: 0; + right: 0; top: ($euiFormControlHeight/2) + 2px; } } @@ -127,8 +207,8 @@ $euiRange__levelColors: ( .euiRange__wrapper--hasRange { .euiRange__range { position: absolute; - left: $euiSizeS; - right: $euiSizeS; + left: 0; + width: 100%; top: ($euiFormControlHeight/2) - 2px; z-index: $euiZLevel0; overflow: hidden; @@ -137,25 +217,27 @@ $euiRange__levelColors: ( .euiRange__wrapper--hasTicks { .euiRange, - .euiRange__levels { + .euiRange__levels, + .euiRange__range { width: calc(100% + #{$euiRangeThumbWidth}); + margin-left: $euiRangeThumbWidth/2 * -1; } .euiRange { height: $euiFormControlHeight/2; /* 3 */ - margin: 0 $euiRangeThumbWidth/2 * -1; } .euiRange__levels { top: ($euiFormControlHeight/4) + 2px; - margin-left: $euiRangeThumbWidth * -1; } .euiRange__range { top: ($euiFormControlHeight/4) - 2px; left: 0; - right: 0; - margin-left: $euiRangeThumbWidth/2 * -1; + } + + .euiRange__value { + top: ($euiFormControlHeight/4) - 1px; } .euiRange__extraInput { @@ -191,8 +273,8 @@ $euiRange__levelColors: ( height: $euiFormControlHeight; appearance: none; background: transparent; // Otherwise white in Chrome - margin: 0 $euiSizeS; - width: calc(100% - #{$euiSizeS * 2}); // ensures the slider expands to fill flex display + //margin: 0 $euiSizeS; + width: 100%; // ensures the slider expands to fill flex display position: relative; z-index: $euiZLevel2; // stay above tick marks cursor: pointer; // Keep cursor to full range bounds @@ -218,9 +300,21 @@ $euiRange__levelColors: ( border-color: $euiColorPrimary; } - + .euiRange__range .euiRange__range__progress { + ~ .euiRange__range .euiRange__range__progress { background-color: $euiColorPrimary; } + + ~ .euiRange__value { + @include euiBottomShadow; + + &.euiRange__value--right { + transform: translateX(0) translateY(-50%) scale(1.1); + } + + &.euiRange__value--left { + transform: translateX(-100%) translateY(-50%) scale(1.1); + } + } } @include euiRange__thumb__perBrowser { diff --git a/src/components/form/range/range.js b/src/components/form/range/range.js index f69807b53de..64228da5d54 100644 --- a/src/components/form/range/range.js +++ b/src/components/form/range/range.js @@ -24,6 +24,7 @@ export const EuiRange = ({ tickInterval, levels, showRange, + showValue, onChange, value, style, @@ -92,17 +93,19 @@ export const EuiRange = ({ ); } + let tickWidth; let tickMarksNode; if (showTicks) { // Set the interval for which to show the tick marks const interval = tickInterval || step || 1; // Calculate the width of each tick mark - const width = (interval / (rangeTotal + interval)) * 100; + tickWidth = (interval / (rangeTotal + interval)); + const tickWidthPercentage = tickWidth * 100; // Align with item labels across the range by adding // left and right padding that is half of the tick marks style = style || {}; - style.padding = `0 ${(width) / 2}%`; + style.padding = `0 ${(tickWidthPercentage) / 2}%`; // Loop from min to max, creating ticks at each interval // * adds 1 to max to ensure that the max tick is also included @@ -124,7 +127,7 @@ export const EuiRange = ({ disabled={disabled} value={tickValue} onClick={onChange} - style={{ width: `${width}%` }} + style={{ width: `${tickWidthPercentage}%` }} > {tickValue} @@ -163,6 +166,38 @@ export const EuiRange = ({ ); } + let valueNode; + if (showValue) { + // Calculate the left position based on value + // Must be between 0-100% + const decimal = (value - min) / rangeTotal; + let valuePosition = decimal <= 1 ? decimal : 1; + valuePosition = valuePosition >= 0 ? valuePosition : 0; + + let valuePositionSide; + if (valuePosition > .5) { + valuePositionSide = 'left'; + valuePosition = tickWidth ? valuePosition - (tickWidth / 4) : valuePosition; + } else { + valuePositionSide = 'right'; + valuePosition = tickWidth ? valuePosition + (tickWidth / 4) : valuePosition; + } + + const valuePositionStyle = { left: `${valuePosition * 100}%` }; + + // Change left/right position based on value (half way point) + const valueClasses = classNames( + 'euiRange__value', + `euiRange__value--${valuePositionSide}`, + ); + + valueNode = ( + + {value} + + ); + } + return (
{minLabelNode} @@ -182,6 +217,7 @@ export const EuiRange = ({ style={style} {...rest} /> + {valueNode} {rangeNode} {tickMarksNode} {levelsNode} @@ -233,6 +269,10 @@ EuiRange.propTypes = { * Shows a thick line from min to value */ showRange: PropTypes.bool, + /** + * Shows a tooltip styled value + */ + showValue: PropTypes.bool, }; EuiRange.defaultProps = { @@ -243,5 +283,6 @@ EuiRange.defaultProps = { showLabels: false, showInput: false, showTicks: false, + showValue: false, levels: [], }; diff --git a/src/components/form/range/range.test.js b/src/components/form/range/range.test.js index ac1b8d6bd8f..172835f791b 100644 --- a/src/components/form/range/range.test.js +++ b/src/components/form/range/range.test.js @@ -68,6 +68,15 @@ describe('EuiRange', () => { .toMatchSnapshot(); }); + test('value should render', () => { + const component = render( + + ); + + expect(component) + .toMatchSnapshot(); + }); + test('extra input should render', () => { const component = render( Date: Tue, 19 Jun 2018 17:16:00 -0400 Subject: [PATCH 13/20] doc --- src-docs/src/views/form_controls/range.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src-docs/src/views/form_controls/range.js b/src-docs/src/views/form_controls/range.js index 4726ada1aaa..d071610942a 100644 --- a/src-docs/src/views/form_controls/range.js +++ b/src-docs/src/views/form_controls/range.js @@ -54,7 +54,7 @@ export default class extends Component { name="firstRange" /> - + - + - + Recommended levels are 600 and above. - + - + Date: Tue, 19 Jun 2018 17:18:42 -0400 Subject: [PATCH 14/20] Revert "Blank stepped range" This reverts commit 2cfbb8a076c36426d1478384d822900d1e35cc26. # Conflicts: # src/components/form/range/__snapshots__/range.test.js.snap # src/components/form/range/range.js --- .../form_controls/form_controls_example.js | 18 ------- .../src/views/form_controls/range_stepped.js | 54 ------------------- src/components/form/index.js | 5 +- .../__snapshots__/range_stepped.test.js.snap | 9 ---- src/components/form/range/_index.scss | 2 - src/components/form/range/_range_stepped.scss | 3 -- src/components/form/range/index.js | 1 - src/components/form/range/range_stepped.js | 19 ------- .../form/range/range_stepped.test.js | 16 ------ src/components/index.js | 1 - 10 files changed, 1 insertion(+), 127 deletions(-) delete mode 100644 src-docs/src/views/form_controls/range_stepped.js delete mode 100644 src/components/form/range/__snapshots__/range_stepped.test.js.snap delete mode 100644 src/components/form/range/_range_stepped.scss delete mode 100644 src/components/form/range/range_stepped.js delete mode 100644 src/components/form/range/range_stepped.test.js 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 bcd3a36d853..79cc694b7b1 100644 --- a/src-docs/src/views/form_controls/form_controls_example.js +++ b/src-docs/src/views/form_controls/form_controls_example.js @@ -20,7 +20,6 @@ import { EuiLink, EuiRadio, EuiRange, - EuiRangeStepped, EuiSelect, EuiSwitch, EuiTextArea, @@ -74,10 +73,6 @@ 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); @@ -271,19 +266,6 @@ 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 deleted file mode 100644 index 40ff6ad4898..00000000000 --- a/src-docs/src/views/form_controls/range_stepped.js +++ /dev/null @@ -1,54 +0,0 @@ -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 2d73edcfa09..f04fdc5605b 100644 --- a/src/components/form/index.js +++ b/src/components/form/index.js @@ -18,10 +18,7 @@ export { EuiRadio, EuiRadioGroup, } from './radio'; -export { - EuiRange, - EuiRangeStepped, -} from './range'; +export { EuiRange } from './range'; export { EuiSelect } from './select'; export { EuiSwitch } from './switch'; export { EuiTextArea } from './text_area'; diff --git a/src/components/form/range/__snapshots__/range_stepped.test.js.snap b/src/components/form/range/__snapshots__/range_stepped.test.js.snap deleted file mode 100644 index f7ca2d27558..00000000000 --- a/src/components/form/range/__snapshots__/range_stepped.test.js.snap +++ /dev/null @@ -1,9 +0,0 @@ -// 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 709ce0184af..7ef7e10548a 100644 --- a/src/components/form/range/_index.scss +++ b/src/components/form/range/_index.scss @@ -1,5 +1,3 @@ @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 deleted file mode 100644 index 9cc611e1a7e..00000000000 --- a/src/components/form/range/_range_stepped.scss +++ /dev/null @@ -1,3 +0,0 @@ -.euiRangeStepped { - -} diff --git a/src/components/form/range/index.js b/src/components/form/range/index.js index 51c95b5b78a..3f3c671156c 100644 --- a/src/components/form/range/index.js +++ b/src/components/form/range/index.js @@ -1,2 +1 @@ export { EuiRange } from './range'; -export { EuiRangeStepped } from './range_stepped'; diff --git a/src/components/form/range/range_stepped.js b/src/components/form/range/range_stepped.js deleted file mode 100644 index a58612b3108..00000000000 --- a/src/components/form/range/range_stepped.js +++ /dev/null @@ -1,19 +0,0 @@ -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 deleted file mode 100644 index 3e6b93c219a..00000000000 --- a/src/components/form/range/range_stepped.test.js +++ /dev/null @@ -1,16 +0,0 @@ -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 a97f2728b00..2c41840fd58 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -128,7 +128,6 @@ export { EuiRadio, EuiRadioGroup, EuiRange, - EuiRangeStepped, EuiSelect, EuiSwitch, EuiTextArea, From fccd876520855e467cafdc96f96ddbb8786b2678 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 19 Jun 2018 17:19:48 -0400 Subject: [PATCH 15/20] added default to vars --- src/components/form/range/_variables.scss | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/form/range/_variables.scss b/src/components/form/range/_variables.scss index 66637e12ea6..8f66e5d2b27 100644 --- a/src/components/form/range/_variables.scss +++ b/src/components/form/range/_variables.scss @@ -1,12 +1,12 @@ -$euiRangeTrackColor: $euiColorDarkShade; +$euiRangeTrackColor: $euiColorDarkShade !default; -$euiRangeThumbRadius: 50%; -$euiRangeThumbHeight: $euiSize; -$euiRangeThumbWidth: $euiSize; -$euiRangeThumbBorderColor: $euiRangeTrackColor; +$euiRangeThumbRadius: 50% !default; +$euiRangeThumbHeight: $euiSize !default; +$euiRangeThumbWidth: $euiSize !default; +$euiRangeThumbBorderColor: $euiRangeTrackColor !default; -$euiRangeTrackWidth: 100%; -$euiRangeTrackHeight: 2px; -$euiRangeTrackBorderWidth: 0; -$euiRangeTrackBorderColor: $euiRangeTrackColor; -$euiRangeTrackRadius: $euiBorderRadius; +$euiRangeTrackWidth: 100% !default; +$euiRangeTrackHeight: 2px !default; +$euiRangeTrackBorderWidth: 0 !default; +$euiRangeTrackBorderColor: $euiRangeTrackColor !default; +$euiRangeTrackRadius: $euiBorderRadius !default; From 40a883f554b5abdce854a90e74d73cf94de841c8 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 19 Jun 2018 17:33:01 -0400 Subject: [PATCH 16/20] Handling some mixin deprecations --- src/components/form/range/_mixins.scss | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/components/form/range/_mixins.scss b/src/components/form/range/_mixins.scss index 47c2293fa10..7e4da6b9afa 100644 --- a/src/components/form/range/_mixins.scss +++ b/src/components/form/range/_mixins.scss @@ -16,3 +16,25 @@ &::-moz-range-thumb { @content; } &::-ms-thumb { @content; } } + +//** DEPRECATED **// +//** DEPRECATED **// +//** DEPRECATED **// +//** DEPRECATED **// + +@mixin track { + @warn "track() has been deprecated. Please use euiRange__trackSize() instead."; + cursor: pointer; + height: $euiRangeTrackHeight; + transition: all $euiAnimSpeedNormal ease-in; + width: $euiRangeTrackWidth; +} + +@mixin thumb { + @warn "thumb() has been deprecated and styles moved to directly within the range selector."; + cursor: pointer; + @include euiCustomControl($type: 'round'); + padding: 0; + height: $euiRangeThumbHeight; + width: $euiRangeThumbWidth; +} From b1cceb45ca6b631c3d449e841d8b14695573db78 Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 19 Jun 2018 20:12:42 -0400 Subject: [PATCH 17/20] Adjusting the widths of the stepped version so it takes up more of the full width and aligns better --- .../range/__snapshots__/range.test.js.snap | 2 +- src/components/form/range/_range.scss | 6 ++--- src/components/form/range/range.js | 25 +++++++++++++------ 3 files changed, 21 insertions(+), 12 deletions(-) diff --git a/src/components/form/range/__snapshots__/range.test.js.snap b/src/components/form/range/__snapshots__/range.test.js.snap index fb799af91ad..6964de2752a 100644 --- a/src/components/form/range/__snapshots__/range.test.js.snap +++ b/src/components/form/range/__snapshots__/range.test.js.snap @@ -185,11 +185,11 @@ exports[`EuiRange props ticks should render 1`] = ` class="euiRange" max="100" min="1" - style="padding:0 8.403361344537815%" type="range" />
@@ -152,39 +198,44 @@ export const EuiRange = ({ ); } - let levelsNode; - if (levels.length) { - levelsNode = ( -
- {levels.map((level, index) => { - const range = level.max - level.min; - const width = (range / rangeTotal) * 100; + renderRange = () => { + const { + showRange, + value, + max, + min, + } = this.props; - return ( - - ); - })} -
- ); - } + if (!showRange) { + return; + } - let rangeNode; - if (showRange) { // Calculate the width the range based on value - const rangeWidth = (value - min) / rangeTotal; + const rangeWidth = (value - min) / (max - min); const rangeWidthStyle = { width: `${rangeWidth * 100}%` }; - rangeNode = ( -
+ return ( +
); } - let valueNode; - if (showValue) { + renderValue = () => { + const { + showValue, + value, + max, + min, + name, + } = this.props; + + if (!showValue) { + return; + } + // Calculate the left position based on value - const decimal = (value - min) / rangeTotal; + const decimal = (value - min) / (max - min); // Must be between 0-100% let valuePosition = decimal <= 1 ? decimal : 1; valuePosition = valuePosition >= 0 ? valuePosition : 0; @@ -204,7 +255,7 @@ export const EuiRange = ({ `euiRange__value--${valuePositionSide}`, ); - valueNode = ( + return (
{value} @@ -213,38 +264,50 @@ export const EuiRange = ({ ); } - return ( -
- {minLabelNode} + renderLevels = () => { + const { + levels, + max, + min, + } = this.props; -
- + if (levels.length < 1) { + return; + } - {valueNode} - {rangeNode} - {tickMarksNode} - {levelsNode} + return ( +
+ {levels.map((level, index) => { + const range = level.max - level.min; + const width = (range / (max - min)) * 100; + return ( + + ); + })}
+ ); + } +} + +function calculateTicksObject(min, max, interval) { + // Calculate the width of each tick mark + const tickWidthDecimal = (interval / ((max - min) + interval)); + const tickWidthPercentage = tickWidthDecimal * 100; + + // Loop from min to max, creating ticks at each interval + // (adds a very small number to the max since `range` is not inclusive of the max value) + const toBeInclusive = .000000001; + const sequence = range(min, max + toBeInclusive, interval); - {maxLabelNode} - {extraInputNode} -
+ return ( + { + decimalWidth: tickWidthDecimal, + percentageWidth: tickWidthPercentage, + sequence: sequence, + } ); -}; +} EuiRange.propTypes = { name: PropTypes.string, From 88b006d47011293f4d049740d330b9795836e930 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 2 Jul 2018 13:41:00 -0400 Subject: [PATCH 20/20] Changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9164b6b6cf2..01c46c5e0f3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `1.0.1`. +- Added more (mainly style) options to `EuiRange` ([#932](https://github.com/elastic/eui/pull/932)) ## [`1.0.1`](https://github.com/elastic/eui/tree/v1.0.1)