Skip to content

Commit

Permalink
[EuiRange][EuiDualRange] Respond to resizing/layout changes (#7442)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cee-chen
cee-chen authored Jan 3, 2024
1 parent 9400504 commit 971fea2
Show file tree
Hide file tree
Showing 7 changed files with 347 additions and 233 deletions.
3 changes: 3 additions & 0 deletions changelogs/upcoming/7442.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**Bug fixes**

- `EuiRange`/`EuiDualRange`'s track ticks & highlights now update their positions on resize
50 changes: 25 additions & 25 deletions src/components/form/range/__snapshots__/dual_range.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ exports[`EuiDualRange props isDraggable renders draggable track when isDraggable
aria-valuetext="1, 8"
class="euiRangeDraggable emotion-euiRangeDraggable"
role="slider"
style="inset-inline-start: -Infinity%; inset-inline-end: calc(100% - -Infinity% - 16px);"
style="inset-inline-start: 0; inset-inline-end: calc(100% - 0 - 16px);"
tabindex="0"
>
<div
Expand All @@ -41,7 +41,7 @@ exports[`EuiDualRange props isDraggable renders draggable track when isDraggable
aria-valuenow="1"
class="euiRangeThumb emotion-euiRangeThumb"
role="slider"
style="inset-inline-start: -Infinity%;"
style="inset-inline-start: 0;"
tabindex="0"
/>
<div
Expand All @@ -51,7 +51,7 @@ exports[`EuiDualRange props isDraggable renders draggable track when isDraggable
aria-valuenow="8"
class="euiRangeThumb emotion-euiRangeThumb"
role="slider"
style="inset-inline-start: -Infinity%;"
style="inset-inline-start: 0;"
tabindex="0"
/>
<div
Expand Down Expand Up @@ -105,7 +105,7 @@ exports[`EuiDualRange props levels renders levels when levels prop is set 1`] =
aria-valuenow="1"
class="euiRangeThumb emotion-euiRangeThumb"
role="slider"
style="inset-inline-start: -Infinity%; background-color: rgb(189, 39, 30);"
style="inset-inline-start: 0; background-color: rgb(189, 39, 30);"
tabindex="0"
/>
<div
Expand All @@ -115,7 +115,7 @@ exports[`EuiDualRange props levels renders levels when levels prop is set 1`] =
aria-valuenow="8"
class="euiRangeThumb emotion-euiRangeThumb"
role="slider"
style="inset-inline-start: -Infinity%; background-color: rgb(189, 39, 30);"
style="inset-inline-start: 0; background-color: rgb(189, 39, 30);"
tabindex="0"
/>
<div
Expand Down Expand Up @@ -191,7 +191,7 @@ exports[`EuiDualRange props maxInputProps allows overriding default props 1`] =
aria-valuenow="1"
class="euiRangeThumb emotion-euiRangeThumb"
role="slider"
style="inset-inline-start: -Infinity%;"
style="inset-inline-start: 0;"
tabindex="-1"
/>
<div
Expand All @@ -201,7 +201,7 @@ exports[`EuiDualRange props maxInputProps allows overriding default props 1`] =
aria-valuenow="8"
class="euiRangeThumb emotion-euiRangeThumb"
role="slider"
style="inset-inline-start: -Infinity%;"
style="inset-inline-start: 0;"
tabindex="-1"
/>
<div
Expand Down Expand Up @@ -294,7 +294,7 @@ exports[`EuiDualRange props maxInputProps applies passed props to max input 1`]
aria-valuenow="1"
class="euiRangeThumb emotion-euiRangeThumb"
role="slider"
style="inset-inline-start: -Infinity%;"
style="inset-inline-start: 0;"
tabindex="-1"
/>
<div
Expand All @@ -304,7 +304,7 @@ exports[`EuiDualRange props maxInputProps applies passed props to max input 1`]
aria-valuenow="8"
class="euiRangeThumb emotion-euiRangeThumb"
role="slider"
style="inset-inline-start: -Infinity%;"
style="inset-inline-start: 0;"
tabindex="-1"
/>
<div
Expand Down Expand Up @@ -407,7 +407,7 @@ exports[`EuiDualRange props minInputProps allows overriding default props 1`] =
aria-valuenow="1"
class="euiRangeThumb emotion-euiRangeThumb"
role="slider"
style="inset-inline-start: -Infinity%;"
style="inset-inline-start: 0;"
tabindex="-1"
/>
<div
Expand All @@ -417,7 +417,7 @@ exports[`EuiDualRange props minInputProps allows overriding default props 1`] =
aria-valuenow="8"
class="euiRangeThumb emotion-euiRangeThumb"
role="slider"
style="inset-inline-start: -Infinity%;"
style="inset-inline-start: 0;"
tabindex="-1"
/>
<div
Expand Down Expand Up @@ -511,7 +511,7 @@ exports[`EuiDualRange props minInputProps applies passed props to min input 1`]
aria-valuenow="1"
class="euiRangeThumb emotion-euiRangeThumb"
role="slider"
style="inset-inline-start: -Infinity%;"
style="inset-inline-start: 0;"
tabindex="-1"
/>
<div
Expand All @@ -521,7 +521,7 @@ exports[`EuiDualRange props minInputProps applies passed props to min input 1`]
aria-valuenow="8"
class="euiRangeThumb emotion-euiRangeThumb"
role="slider"
style="inset-inline-start: -Infinity%;"
style="inset-inline-start: 0;"
tabindex="-1"
/>
<div
Expand Down Expand Up @@ -598,7 +598,7 @@ exports[`EuiDualRange props showLabels renders labels when showLabels=true 1`] =
aria-valuenow="1"
class="euiRangeThumb emotion-euiRangeThumb"
role="slider"
style="inset-inline-start: -Infinity%;"
style="inset-inline-start: 0;"
tabindex="0"
/>
<div
Expand All @@ -608,7 +608,7 @@ exports[`EuiDualRange props showLabels renders labels when showLabels=true 1`] =
aria-valuenow="8"
class="euiRangeThumb emotion-euiRangeThumb"
role="slider"
style="inset-inline-start: -Infinity%;"
style="inset-inline-start: 0;"
tabindex="0"
/>
<div
Expand Down Expand Up @@ -655,7 +655,7 @@ exports[`EuiDualRange props showRange hides range when showRange=false 1`] = `
aria-valuenow="1"
class="euiRangeThumb emotion-euiRangeThumb"
role="slider"
style="inset-inline-start: -Infinity%;"
style="inset-inline-start: 0;"
tabindex="0"
/>
<div
Expand All @@ -665,7 +665,7 @@ exports[`EuiDualRange props showRange hides range when showRange=false 1`] = `
aria-valuenow="8"
class="euiRangeThumb emotion-euiRangeThumb"
role="slider"
style="inset-inline-start: -Infinity%;"
style="inset-inline-start: 0;"
tabindex="0"
/>
</div>
Expand Down Expand Up @@ -698,7 +698,7 @@ exports[`EuiDualRange props showRange renders range when showRange=true 1`] = `
aria-valuenow="1"
class="euiRangeThumb emotion-euiRangeThumb"
role="slider"
style="inset-inline-start: -Infinity%;"
style="inset-inline-start: 0;"
tabindex="0"
/>
<div
Expand All @@ -708,7 +708,7 @@ exports[`EuiDualRange props showRange renders range when showRange=true 1`] = `
aria-valuenow="8"
class="euiRangeThumb emotion-euiRangeThumb"
role="slider"
style="inset-inline-start: -Infinity%;"
style="inset-inline-start: 0;"
tabindex="0"
/>
<div
Expand Down Expand Up @@ -750,7 +750,7 @@ exports[`EuiDualRange props value accepts empty strings 1`] = `
aria-valuenow="0"
class="euiRangeThumb emotion-euiRangeThumb"
role="slider"
style="inset-inline-start: NaN%;"
style="inset-inline-start: 0;"
tabindex="0"
/>
<div
Expand All @@ -760,7 +760,7 @@ exports[`EuiDualRange props value accepts empty strings 1`] = `
aria-valuenow="0"
class="euiRangeThumb emotion-euiRangeThumb"
role="slider"
style="inset-inline-start: -Infinity%;"
style="inset-inline-start: 0;"
tabindex="0"
/>
</div>
Expand Down Expand Up @@ -793,7 +793,7 @@ exports[`EuiDualRange props value accepts numbers 1`] = `
aria-valuenow="1"
class="euiRangeThumb emotion-euiRangeThumb"
role="slider"
style="inset-inline-start: -Infinity%;"
style="inset-inline-start: 0;"
tabindex="0"
/>
<div
Expand All @@ -803,7 +803,7 @@ exports[`EuiDualRange props value accepts numbers 1`] = `
aria-valuenow="8"
class="euiRangeThumb emotion-euiRangeThumb"
role="slider"
style="inset-inline-start: -Infinity%;"
style="inset-inline-start: 0;"
tabindex="0"
/>
<div
Expand Down Expand Up @@ -849,7 +849,7 @@ exports[`EuiDualRange renders 1`] = `
aria-valuenow="1"
class="euiRangeThumb emotion-euiRangeThumb"
role="slider"
style="inset-inline-start: -Infinity%;"
style="inset-inline-start: 0;"
tabindex="0"
/>
<div
Expand All @@ -860,7 +860,7 @@ exports[`EuiDualRange renders 1`] = `
aria-valuenow="8"
class="euiRangeThumb emotion-euiRangeThumb"
role="slider"
style="inset-inline-start: -Infinity%;"
style="inset-inline-start: 0;"
tabindex="0"
/>
<div
Expand Down
31 changes: 2 additions & 29 deletions src/components/form/range/dual_range.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@
* Side Public License, v 1.
*/

import React, { useEffect, useRef } from 'react';
import React from 'react';
import { fireEvent } from '@testing-library/react';
import { requiredProps } from '../../../test';
import { shouldRenderCustomStyles } from '../../../test/internal';
import { render, screen } from '../../../test/rtl';

import { EuiForm } from '../form';
import type { EuiDualRangeProps } from './types';
import { EuiDualRange, EuiDualRangeClass } from './dual_range';
import { EuiDualRange } from './dual_range';

const props = {
min: 0,
Expand Down Expand Up @@ -329,31 +329,4 @@ describe('EuiDualRange', () => {
});
});
});

describe('ref methods', () => {
// Whether we like it or not, at least 2 Kibana instances are using EuiDualRange
// `ref`s to access the `onResize` instance method (search for `rangeRef.current?.onResize`)
// If we switch EuiDualRange to a function component, we'll need to use `useImperativeHandle`
// to allow Kibana to continue calling `onResize`
it('allows calling the internal onResize method', () => {
// This super annoying type is now required to pass both the `ref` typing and account for instance methods
type EuiDualRangeRef = React.ComponentProps<typeof EuiDualRange> &
EuiDualRangeClass;

const ConsumerDualRange = () => {
const rangeRef = useRef<EuiDualRangeRef>(null);

useEffect(() => {
rangeRef.current?.onResize(500);
}, []);

return <EuiDualRange {...props} ref={rangeRef} />;
};

render(<ConsumerDualRange />);

// There isn't anything we can assert on here that isn't a huge headache,
// but the test should fail if `ref.current.onResize` is no longer available
});
});
});
Loading

0 comments on commit 971fea2

Please sign in to comment.