Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

EuiDualRange component #1485

Merged
merged 34 commits into from
Feb 6, 2019
Merged
Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
6146f3d
WIP: range component break down; dualRange inital
thompsongl Jan 24, 2019
b781aee
WIP: dual range docs examples
thompsongl Jan 25, 2019
b5fabbc
WIP: propTypes; type def updates; baseline keyboard nav
thompsongl Jan 25, 2019
9cbe793
WIP: hasFocus for range highlight
thompsongl Jan 25, 2019
6b6acbd
WIP: better rangeSlider ref access
thompsongl Jan 25, 2019
e859174
WIP: sass refactor using component boundaries
thompsongl Jan 26, 2019
1fbd0b5
update euiRange tests; create euiDualRange tests
thompsongl Jan 28, 2019
a6eb6e7
move range examples out of formControl; clean up
thompsongl Jan 28, 2019
90ff293
remove thumb focus when disabled
thompsongl Jan 28, 2019
e3672ea
update docs to share intro
thompsongl Jan 28, 2019
e7ade55
default showRange to true for EuiDualRange; prop clean up
thompsongl Jan 28, 2019
0f162bb
class-based focus style when input is not focusable
thompsongl Jan 29, 2019
b4e3dc2
size input based on max number of characters via digits prop
thompsongl Jan 29, 2019
2c1954a
pass aria attrs through to focusable, changeable elements
thompsongl Jan 29, 2019
a404ee7
number service: isWithinRange
thompsongl Jan 30, 2019
a742311
account for invalid states; pass isValid to parent via onChange
thompsongl Jan 30, 2019
a3dbc93
number service tests, scss whitespace clean up, onChange fn signature…
thompsongl Jan 30, 2019
ee6116c
allow for empty string input value to prevent constant 0
thompsongl Jan 30, 2019
3e1fc05
Merge branch 'master' into 496-dual-range
thompsongl Jan 30, 2019
a03e156
#1485 euiDualRange changelog update
thompsongl Jan 30, 2019
e94f1b2
logic to always enable a valid state during thumb interactions
thompsongl Jan 31, 2019
1e2db88
comments for thumb positioning logic
thompsongl Jan 31, 2019
4a73521
Merge branch 'master' into 496-dual-range
thompsongl Feb 1, 2019
2db20b4
handle keyboard value stepping better; remove pseudo value from dual …
thompsongl Feb 1, 2019
774935e
better thumb swap logic; docs notice about value retrieval
thompsongl Feb 1, 2019
5dc15bf
Merge branch 'master' into 496-dual-range
thompsongl Feb 1, 2019
0a17e9f
Merge branch 'master' into 496-dual-range
thompsongl Feb 4, 2019
79b84d1
Merge branch 'master' into 496-dual-range
thompsongl Feb 5, 2019
b9817a0
ts fixes; isWithinRange simplification
thompsongl Feb 5, 2019
3051f73
min and max 0-length check
thompsongl Feb 5, 2019
5d3cd63
Merge branch 'master' into 496-dual-range
thompsongl Feb 6, 2019
4156dc3
rangeClasses -> sliderClasses
cchaos Feb 6, 2019
6712617
move all components to individual files
thompsongl Feb 6, 2019
1d8e323
Merge branch 'master' into 496-dual-range
thompsongl Feb 6, 2019
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src-docs/src/routes.js
Original file line number Diff line number Diff line change
Expand Up @@ -201,6 +201,9 @@ import { PortalExample }
import { ProgressExample }
from './views/progress/progress_example';

import { RangeControlExample }
from './views/range/range_example';

import { ResponsiveExample }
from './views/responsive/responsive_example';

Expand Down Expand Up @@ -400,6 +403,7 @@ const navigation = [{
DatePickerExample,
ExpressionExample,
FilterGroupExample,
RangeControlExample,
SearchBarExample,
].map(example => createExample(example)),
},
Expand Down
35 changes: 0 additions & 35 deletions src-docs/src/views/form_controls/form_controls_example.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ import {
EuiLink,
EuiRadio,
EuiRadioGroup,
EuiRange,
EuiSelect,
EuiSwitch,
EuiTextArea,
Expand Down Expand Up @@ -75,10 +74,6 @@ import RadioGroup from './radio_group';
const radioGroupSource = require('!!raw-loader!./radio_group');
const radioGroupHtml = renderToHtml(RadioGroup);

import RangeExample from './range';
const rangeSource = require('!!raw-loader!./range');
const rangeHtml = renderToHtml(RangeExample);

import Switch from './switch';
const switchSource = require('!!raw-loader!./switch');
const switchHtml = renderToHtml(Switch);
Expand Down Expand Up @@ -250,36 +245,6 @@ export const FormControlsExample = {
EuiRadioGroup,
},
demo: <RadioGroup />,
}, {
title: 'Range',
text: (
<Fragment>
<EuiCallOut color="warning" title="Understanding precision">
<p>
The base slider should only be used
when <strong>the precise value is not considered important</strong>. If
the precise value does matter, add the <code>showInput</code> prop or use
a <code>EuiFieldNumber</code> instead.
</p>
</EuiCallOut>
<br/>
<p>
While currently considered optional, the <code>showLabels</code> property should
be added to explicitly state the range to the user.
</p>
</Fragment>
),
source: [{
type: GuideSectionTypes.JS,
code: rangeSource,
}, {
type: GuideSectionTypes.HTML,
code: rangeHtml,
}],
props: {
EuiRange,
},
demo: <RangeExample />,
}, {
title: 'Switch',
source: [{
Expand Down
136 changes: 136 additions & 0 deletions src-docs/src/views/range/dual_range.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
import React, {
Component,
Fragment,
} from 'react';

import {
EuiDualRange,
EuiSpacer,
EuiFormHelpText,
} 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: 600,
color: 'danger'
},
{
min: 600,
max: 2000,
color: 'success'
}
];

this.state = {
value: [120, 480]
};
}

onChange = (value) => {
this.setState({
value
});
};

render() {
return (
<Fragment>

<EuiDualRange
id={makeId()}
min={0}
max={2000}
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={0}
max={2000}
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={0}
max={2000}
value={this.state.value}
onChange={this.onChange}
aria-label="Use aria labels when no actual label is in use"
showLabels
showInput
showRange
/>

<EuiSpacer size="xl" />

<EuiDualRange
id={makeId()}
min={0}
max={2000}
step={50}
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" />

<EuiDualRange
id={makeId()}
min={0}
max={2000}
step={50}
value={this.state.value}
onChange={this.onChange}
aria-label="Use aria labels when no actual label is in use"
showTicks
showRange
tickInterval={300}
/>

<EuiSpacer size="xl" />

<EuiDualRange
id={makeId()}
min={0}
max={2000}
step={50}
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}
levels={this.levels}
/>
</Fragment>
);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default class extends Component {
];

this.state = {
value: '120',
value: '120'
};
}

Expand Down
73 changes: 73 additions & 0 deletions src-docs/src/views/range/range_example.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import React, { Fragment } from 'react';

import { renderToHtml } from '../../services';

import {
GuideSectionTypes,
} from '../../components';

import {
EuiCallOut,
EuiDualRange,
EuiRange,
EuiSpacer
} from '../../../../src/components';

import DualRangeExample from './dual_range';
const dualRangeSource = require('!!raw-loader!./dual_range');
const dualRangeHtml = renderToHtml(DualRangeExample);

import RangeExample from './range';
const rangeSource = require('!!raw-loader!./range');
const rangeHtml = renderToHtml(RangeExample);

export const RangeControlExample = {
title: 'Range',
intro: (
<Fragment>
<EuiCallOut color="warning" title="Understanding precision">
<p>
Range sliders should only be used
when <strong>the precise value is not considered important</strong>. If
the precise value does matter, add the <code>showInput</code> prop or use
a <code>EuiFieldNumber</code> instead.
</p>
<p>
While currently considered optional, the <code>showLabels</code> property should
be added to explicitly state the range to the user.
</p>
</EuiCallOut>
<EuiSpacer size="l" />
</Fragment>
),
sections: [
{
title: 'Range',
source: [{
type: GuideSectionTypes.JS,
code: rangeSource,
}, {
type: GuideSectionTypes.HTML,
code: rangeHtml,
}],
props: {
EuiRange,
},
demo: <RangeExample />,
},
{
title: 'DualRange',
source: [{
type: GuideSectionTypes.JS,
code: dualRangeSource,
}, {
type: GuideSectionTypes.HTML,
code: dualRangeHtml,
}],
props: {
EuiDualRange,
},
demo: <DualRangeExample />,
}
]
};
2 changes: 1 addition & 1 deletion src/components/form/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export {
EuiRadio,
EuiRadioGroup,
} from './radio';
export { EuiRange } from './range';
export { EuiDualRange, EuiRange } from './range';
export { EuiSelect } from './select';
export {
EuiSuperSelect,
Expand Down
Loading