EuiDualRange: Add possibility to set input properties for min and max…

… inputs (#2738) Co-authored-by: Caroline Horn <[email protected]>
elastic · Jan 9, 2020 · 38c70e8 · 38c70e8
1 parent fc3d292
commit 38c70e8
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 5 deletions.
diff --git 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
@@ -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' }}
         />
       </Fragment>
     );

diff --git 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`] = `
 </div>
 `;
 
+exports[`EuiDualRange input props can be applied to min and max inputs 1`] = `
+<div
+  class="euiRangeWrapper euiDualRange"
+>
+  <div
+    class="euiFormControlLayout"
+  >
+    <div
+      class="euiFormControlLayout__childrenWrapper"
+    >
+      <input
+        aria-label="Min value"
+        class="euiFieldNumber euiRangeInput euiRangeInput--min"
+        max="8"
+        min="1"
+        name="name-minValue"
+        step="1"
+        style="width:3.6em"
+        type="number"
+        value="1"
+      />
+    </div>
+  </div>
+  <div
+    class="euiRange__horizontalSpacer"
+  />
+  <div
+    class="euiRangeTrack"
+  >
+    <div
+      class="euiRangeHighlight"
+    >
+      <div
+        class="euiRangeHighlight__progress"
+        style="margin-left:0%;width:77.77777777777779%"
+      />
+    </div>
+    <input
+      aria-hidden="true"
+      class="euiRangeSlider euiRangeSlider--hasRange euiDualRange__slider"
+      id="id"
+      max="10"
+      min="1"
+      name="name"
+      step="1"
+      tabindex="-1"
+      type="range"
+    />
+  </div>
+  <div
+    class="euiRange__horizontalSpacer"
+  />
+  <div
+    class="euiFormControlLayout"
+  >
+    <div
+      class="euiFormControlLayout__childrenWrapper"
+    >
+      <input
+        aria-label="Max value"
+        class="euiFieldNumber euiRangeInput euiRangeInput--max"
+        max="10"
+        min="1"
+        name="name-maxValue"
+        step="1"
+        style="width:3.6em"
+        type="number"
+        value="8"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EuiDualRange is rendered 1`] = `
 <div
   class="euiRangeWrapper euiDualRange testClass1 testClass2"

diff --git a/src/components/form/range/dual_range.test.tsx b/src/components/form/range/dual_range.test.tsx
@@ -157,4 +157,24 @@ describe('EuiDualRange', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  describe('input props', () => {
+    test('can be applied to min and max inputs', () => {
+      const component = render(
+        <EuiDualRange
+          name="name"
+          id="id"
+          min={1}
+          max={10}
+          value={['1', '8']}
+          onChange={() => {}}
+          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
@@ -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<EuiRangeInputProps>;
+
+  /**
+   *  Intended to be uses with aria attributes. Some attributes may be overwritten.
+   */
+  maxInputProps?: Partial<EuiRangeInputProps>;
 }
 
 export class EuiDualRange extends Component<EuiDualRangeProps> {
@@ -395,6 +405,8 @@ export class EuiDualRange extends Component<EuiDualRangeProps> {
       isInvalid,
       append,
       prepend,
+      minInputProps,
+      maxInputProps,
       ...rest
     } = this.props;
 
@@ -406,6 +418,11 @@ export class EuiDualRange extends Component<EuiDualRangeProps> {
 
     const minInput = !!showInput ? (
       <EuiRangeInput
+        // Overridable props
+        aria-describedby={this.props['aria-describedby']}
+        aria-label={this.props['aria-label']}
+        {...minInputProps}
+        // Non-overridable props
         digitTolerance={digitTolerance}
         side="min"
         min={min}
@@ -417,8 +434,6 @@ export class EuiDualRange extends Component<EuiDualRangeProps> {
         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<EuiDualRangeProps> {
 
     const maxInput = !!showInput ? (
       <EuiRangeInput
+        // Overridable props
+        aria-describedby={this.props['aria-describedby']}
+        aria-label={this.props['aria-label']}
+        {...maxInputProps}
+        // Non-overridable props
         digitTolerance={digitTolerance}
         side="max"
         min={Number(this.lowerValue)}
@@ -447,8 +467,6 @@ export class EuiDualRange extends Component<EuiDualRangeProps> {
         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}