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.

Sign up for GitHub

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

Jump to bottom

[EuiRange][EuiDualRange] Respond to resizing/layout changes #7442

Merged
merged 6 commits into from
Jan 3, 2024
Merged

[EuiRange][EuiDualRange] Respond to resizing/layout changes #7442

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7206b15
[REVERT ME] issue repro
cee-chen Jan 2, 2024
700a618
Add built in resize observer to internal range slider component
cee-chen Jan 2, 2024
8488c13
[EuiDualRange] remove now-unnecessary resize/width logic
cee-chen Jan 2, 2024
67360ae
Add regression test for expected positioning
cee-chen Jan 3, 2024
ecb814a
changelog
cee-chen Jan 3, 2024
4672131
Revert "[REVERT ME] issue repro"
cee-chen Jan 3, 2024
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
3 changes: 3 additions & 0 deletions changelogs/upcoming/7442.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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`
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I double checked this usage in Kibana, and there's just 1 left, and it should be completely removable now that we've added our own resize observer

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
Loading