From 38c70e86dc96150fbca6cd5c2bb68f945152146a Mon Sep 17 00:00:00 2001 From: ffknob Date: Thu, 9 Jan 2020 11:00:25 -0300 Subject: [PATCH] EuiDualRange: Add possibility to set input properties for min and max inputs (#2738) Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- CHANGELOG.md | 1 + src-docs/src/views/range/input.js | 2 + .../__snapshots__/dual_range.test.tsx.snap | 74 +++++++++++++++++++ src/components/form/range/dual_range.test.tsx | 20 +++++ src/components/form/range/dual_range.tsx | 28 +++++-- 5 files changed, 120 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 044def9a5ef..6dba3c5648c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Added `minInputProps` and `maxInputProps` to supply more props to the inputs of `EuiDualRange` ([#2738](https://github.com/elastic/eui/pull/2738)) - Changed `EuiBadge` to use EUI palette colors ([#2455](https://github.com/elastic/eui/pull/2455)) - Darkened a few `euiPaletteColorBlind` colors ([#2455](https://github.com/elastic/eui/pull/2455)) - Fixed bug in `EuiCard` where button text was not properly aligned ([#2741](https://github.com/elastic/eui/pull/2741)) diff --git a/src-docs/src/views/range/input.js b/src-docs/src/views/range/input.js index 1f1a2124cc2..b207000ca56 100644 --- a/src-docs/src/views/range/input.js +++ b/src-docs/src/views/range/input.js @@ -43,6 +43,8 @@ export default class extends Component { value={this.state.dualValue} onChange={this.onDualChange} showInput + minInputProps={{ 'aria-label': 'Min value' }} + maxInputProps={{ 'aria-label': 'Max value' }} /> ); diff --git a/src/components/form/range/__snapshots__/dual_range.test.tsx.snap b/src/components/form/range/__snapshots__/dual_range.test.tsx.snap index 1bd21581a2e..0c1a5db7de8 100644 --- a/src/components/form/range/__snapshots__/dual_range.test.tsx.snap +++ b/src/components/form/range/__snapshots__/dual_range.test.tsx.snap @@ -62,6 +62,80 @@ exports[`EuiDualRange allows value prop to accept numbers 1`] = ` `; +exports[`EuiDualRange input props can be applied to min and max inputs 1`] = ` +
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+`; + exports[`EuiDualRange is rendered 1`] = `
{ expect(component).toMatchSnapshot(); }); + + describe('input props', () => { + test('can be applied to min and max inputs', () => { + const component = render( + {}} + showInput + minInputProps={{ 'aria-label': 'Min value' }} + maxInputProps={{ 'aria-label': 'Max value' }} + /> + ); + + expect(component).toMatchSnapshot(); + }); + }); }); diff --git a/src/components/form/range/dual_range.tsx b/src/components/form/range/dual_range.tsx index 57d05e93dec..7edba3ac3b1 100644 --- a/src/components/form/range/dual_range.tsx +++ b/src/components/form/range/dual_range.tsx @@ -12,7 +12,7 @@ import makeId from '../form_row/make_id'; import { EuiRangeProps } from './range'; import { EuiRangeHighlight } from './range_highlight'; -import { EuiRangeInput } from './range_input'; +import { EuiRangeInput, EuiRangeInputProps } from './range_input'; import { EuiRangeLabel } from './range_label'; import { EuiRangeLevel } from './range_levels'; import { EuiRangeSlider, EuiRangeSliderProps } from './range_slider'; @@ -52,6 +52,16 @@ export interface EuiDualRangeProps ticks?: EuiRangeTick[]; append?: EuiFormControlLayoutProps['append']; prepend?: EuiFormControlLayoutProps['prepend']; + + /** + * Intended to be uses with aria attributes. Some attributes may be overwritten. + */ + minInputProps?: Partial; + + /** + * Intended to be uses with aria attributes. Some attributes may be overwritten. + */ + maxInputProps?: Partial; } export class EuiDualRange extends Component { @@ -395,6 +405,8 @@ export class EuiDualRange extends Component { isInvalid, append, prepend, + minInputProps, + maxInputProps, ...rest } = this.props; @@ -406,6 +418,11 @@ export class EuiDualRange extends Component { const minInput = !!showInput ? ( { onChange={this.handleLowerInputChange} onKeyDown={this.handleInputKeyDown} name={`${name}-minValue`} - aria-describedby={this.props['aria-describedby']} - aria-label={this.props['aria-label']} onFocus={canShowDropdown ? this.onInputFocus : onFocus} onBlur={canShowDropdown ? this.onInputBlur : onBlur} readOnly={readOnly} @@ -436,6 +451,11 @@ export class EuiDualRange extends Component { const maxInput = !!showInput ? ( { onChange={this.handleUpperInputChange} onKeyDown={this.handleInputKeyDown} name={`${name}-maxValue`} - aria-describedby={this.props['aria-describedby']} - aria-label={this.props['aria-label']} onFocus={canShowDropdown ? this.onInputFocus : onFocus} onBlur={canShowDropdown ? this.onInputBlur : onBlur} readOnly={readOnly}