-
Notifications
You must be signed in to change notification settings - Fork 844
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
EuiRange and EuiDualRange fixes (#1580)
* EuiRange bug fixing - Give the inputs a min-width in case of single digits. And remove shifting of inputs because they then don’t line up with other form rows - Custom tick values now properly account for minimum value - Fix styling of track color when not showing the range - Top level `className` should be applied to the top level wrapper - Better error handling of invalid steps/ticks * Fixed validations * Update docs page by splitting up examples - Also fixed prepend/append of value * Working commit: Not worrying about what handle was clicked… * Handle invalid alternative * Bug fix: Dual range inputs account for both min and max for sizing * range tooltip no shrink * Fixed color of selected & disabled dual range handles * remove console.log * Only auto-move invalid handles * Revert icon snaps * Created more jest tests * cl * handle keyboard value changes when values are intially empty * Remove unneeded check * Using var for snippet replacement props
- Loading branch information
Showing
27 changed files
with
1,589 additions
and
439 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import React, { | ||
| Component, | ||
| Fragment, | ||
| } from 'react'; | ||
|
|
||
| import { | ||
| EuiRange, | ||
| EuiSpacer, | ||
| EuiDualRange, | ||
| } from '../../../../src/components'; | ||
|
|
||
| import makeId from '../../../../src/components/form/form_row/make_id'; | ||
|
|
||
| export default class extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this.state = { | ||
| value: '20', | ||
| dualValue: [20, 100], | ||
| }; | ||
| } | ||
|
|
||
| onChange = e => { | ||
| this.setState({ | ||
| value: e.target.value, | ||
| }); | ||
| }; | ||
|
|
||
| onDualChange = (value) => { | ||
| this.setState({ | ||
| dualValue: value | ||
| }); | ||
| }; | ||
|
|
||
| render() { | ||
| return ( | ||
| <Fragment> | ||
| <EuiRange | ||
| id={makeId()} | ||
| value={this.state.value} | ||
| onChange={this.onChange} | ||
| showInput | ||
| /> | ||
|
|
||
| <EuiSpacer size="xl" /> | ||
|
|
||
| <EuiDualRange | ||
| id={makeId()} | ||
| value={this.state.dualValue} | ||
| onChange={this.onDualChange} | ||
| showInput | ||
| /> | ||
| </Fragment> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import React, { | ||
| Component, | ||
| Fragment, | ||
| } from 'react'; | ||
|
|
||
| import { | ||
| EuiRange, | ||
| EuiSpacer, | ||
| EuiFormHelpText, | ||
| EuiDualRange, | ||
| } from '../../../../src/components'; | ||
|
|
||
| import makeId from '../../../../src/components/form/form_row/make_id'; | ||
|
|
||
| export default class extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this.levels = [ | ||
| { | ||
| min: 0, | ||
| max: 20, | ||
| color: 'danger' | ||
| }, | ||
| { | ||
| min: 20, | ||
| max: 100, | ||
| color: 'success' | ||
| } | ||
| ]; | ||
|
|
||
| this.state = { | ||
| value: '20', | ||
| dualValue: [20, 100], | ||
| }; | ||
| } | ||
|
|
||
| onChange = e => { | ||
| this.setState({ | ||
| value: e.target.value, | ||
| }); | ||
| }; | ||
|
|
||
| onDualChange = (value) => { | ||
| this.setState({ | ||
| dualValue: value | ||
| }); | ||
| }; | ||
|
|
||
| render() { | ||
| return ( | ||
| <Fragment> | ||
| <EuiRange | ||
| id={makeId()} | ||
| value={this.state.value} | ||
| onChange={this.onChange} | ||
| showTicks | ||
| tickInterval={20} | ||
| levels={this.levels} | ||
| aria-describedby="levelsHelp2" | ||
| /> | ||
| <EuiFormHelpText id="levelsHelp2">Recommended levels are {this.levels[1].min} and above.</EuiFormHelpText> | ||
|
|
||
| <EuiSpacer size="xl" /> | ||
|
|
||
| <EuiDualRange | ||
| id={makeId()} | ||
| value={this.state.dualValue} | ||
| onChange={this.onDualChange} | ||
| showTicks | ||
| ticks={[{ label: '20kb', value: 20 }, { label: '100kb', value: 100 }]} | ||
| showInput | ||
| levels={this.levels} | ||
| aria-describedby="levelsHelp3" | ||
| /> | ||
| <EuiFormHelpText id="levelsHelp3">Recommended size is {this.levels[1].min}kb and above.</EuiFormHelpText> | ||
| </Fragment> | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.