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.

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

[EuiComboBox] add support for option tooltips #7700

Merged
Merged
Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
34153a7
feat(EuiToolTip): add controlled isOpen support
mgadewoll Apr 18, 2024
63721a9
feat(EuiComboBox): add EuiToolTip support on option
mgadewoll Apr 18, 2024
0734902
test(EuiComboBox): add tests for toolTipContent and toolTipProps
mgadewoll Apr 18, 2024
5813c35
fix(EuiComboBox): fix isLoading layout for mobile
mgadewoll Apr 18, 2024
c3e19f8
docs(storybook): add separate tooltip story for ComboBox
mgadewoll Apr 18, 2024
7615fa1
test(EuiComboBox): update input options placement
mgadewoll Apr 18, 2024
ad0a3c5
refactor(EuiComboBox): prevent tooltip props from being applied on input
mgadewoll Apr 18, 2024
3c66b43
docs(EuiComboBox): add EuiDocs example
mgadewoll Apr 18, 2024
7b5236c
chore: add changelog
mgadewoll Apr 18, 2024
664dc88
refactor: revert adding isOpen on EuiToolTip and use ref API for show…
mgadewoll May 2, 2024
ffc84a9
refactor: use remove tooltip wrapper in favor of using anchorProps fo…
mgadewoll May 2, 2024
90197c5
chore: add PR feedback
mgadewoll May 2, 2024
fee66ff
docs: update EuiComboBox tooltip docs example
mgadewoll May 2, 2024
67a9db7
chore: cleanup wrongly removed type check
mgadewoll May 2, 2024
b8ebf61
chore: add comment
mgadewoll May 2, 2024
7e48f0a
Fix Firefox behavior by checking for `scrollTarget.contains`
cee-chen May 2, 2024
aa016c1
Update/add Cypress tests
cee-chen May 2, 2024
dbd8866
test(VRT): add base snapshots for EuiComboBox
mgadewoll May 3, 2024
8c1b693
feat: Add `optionMatcher` prop to `EuiSelectable` and `EuiComboBox` c…
tkajtoch Apr 29, 2024
c50b604
docs(storybook): add separate tooltip story for ComboBox
mgadewoll Apr 18, 2024
9929c3e
chore: cleanup
mgadewoll May 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
Prev Previous commit
chore: cleanup
-use const as type

- revert newline changes
mgadewoll committed May 3, 2024
commit 9929c3e3d89ece2723a1b7a16046bfb6cb4a12d5
3 changes: 1 addition & 2 deletions src/components/combo_box/combo_box.stories.tsx
Original file line number Diff line number Diff line change
@@ -10,14 +10,13 @@ import React, { useCallback, useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import { ToolTipPositions } from '../tool_tip';
import { EuiComboBox, EuiComboBoxProps } from './combo_box';
import { EuiComboBoxOptionMatcher } from './types';
import { EuiCode } from '../code';

const toolTipProps = {
toolTipContent: 'This is a tooltip!',
toolTipProps: { position: 'left' as ToolTipPositions },
toolTipProps: { position: 'left' as const },
value: 4,
};

11 changes: 11 additions & 0 deletions src/components/combo_box/combo_box.test.tsx
Original file line number Diff line number Diff line change
@@ -525,21 +525,26 @@ describe('EuiComboBox', () => {
describe('tabbing off the search input', () => {
it("closes the options list if the user isn't navigating the options", async () => {
const keyDownBubbled = jest.fn();

const { getByTestSubject } = render(
<div onKeyDown={keyDownBubbled}>
<EuiComboBox options={options} selectedOptions={[options[2]]} />
</div>
);
await showEuiComboBoxOptions();

const mockEvent = { key: keys.TAB, shiftKey: true };
fireEvent.keyDown(getByTestSubject('comboBoxSearchInput'), mockEvent);

// If the TAB keydown bubbled up to the wrapper, then a browser DOM would shift the focus
expect(keyDownBubbled).toHaveBeenCalledWith(
expect.objectContaining(mockEvent)
);
});

it('calls onCreateOption', () => {
const onCreateOptionHandler = jest.fn();

const { getByTestSubject } = render(
<EuiComboBox
options={options}
@@ -548,23 +553,29 @@ describe('EuiComboBox', () => {
/>
);
const input = getByTestSubject('comboBoxSearchInput');

fireEvent.change(input, { target: { value: 'foo' } });
fireEvent.blur(input);

expect(onCreateOptionHandler).toHaveBeenCalledTimes(1);
expect(onCreateOptionHandler).toHaveBeenCalledWith('foo', options);
});

it('does nothing if the user is navigating the options', async () => {
const keyDownBubbled = jest.fn();

const { getByTestSubject } = render(
<div onKeyDown={keyDownBubbled}>
<EuiComboBox options={options} selectedOptions={[options[2]]} />
</div>
);
await showEuiComboBoxOptions();

// Navigate to an option then tab off
const input = getByTestSubject('comboBoxSearchInput');
fireEvent.keyDown(input, { key: keys.ARROW_DOWN });
fireEvent.keyDown(input, { key: keys.TAB });

// If the TAB keydown did not bubble to the wrapper, then the tab event was prevented
expect(keyDownBubbled).not.toHaveBeenCalled();
});