Skip to content

feat(ListItemBase): allow tooltip on component #780

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

Merged
cscheffauer merged 2 commits into from
Apr 11, 2025
Merged

feat(ListItemBase): allow tooltip on component #780

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8c2b71a
feat(ListItemBase): allow tooltip on component
jor-row Apr 9, 2025
9bc0fe7
fix(list-item-base): call function in usestate
jor-row Apr 10, 2025
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
6 changes: 6 additions & 0 deletions src/components/List/List.unit.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@ import Menu from '../Menu';
import { Item } from '@react-stately/collections';
import { ListRefObject } from './List.types';

jest.mock('uuid', () => {
return {
v4: () => '1',
};
});

describe('<List />', () => {
const commonProps = {
'aria-label': 'test',
Expand Down
10 changes: 10 additions & 0 deletions src/components/List/List.unit.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ exports[`<List /> snapshot should match snapshot 1`] = `
data-padded={false}
data-shape="rectangle"
data-size={40}
id="1"
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down Expand Up @@ -73,6 +74,7 @@ exports[`<List /> snapshot should match snapshot 1`] = `
data-padded={false}
data-shape="rectangle"
data-size={40}
id="1"
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down Expand Up @@ -132,6 +134,7 @@ exports[`<List /> snapshot should match snapshot with className 1`] = `
data-padded={false}
data-shape="rectangle"
data-size={40}
id="1"
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down Expand Up @@ -174,6 +177,7 @@ exports[`<List /> snapshot should match snapshot with className 1`] = `
data-padded={false}
data-shape="rectangle"
data-size={40}
id="1"
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down Expand Up @@ -234,6 +238,7 @@ exports[`<List /> snapshot should match snapshot with id 1`] = `
data-padded={false}
data-shape="rectangle"
data-size={40}
id="1"
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down Expand Up @@ -276,6 +281,7 @@ exports[`<List /> snapshot should match snapshot with id 1`] = `
data-padded={false}
data-shape="rectangle"
data-size={40}
id="1"
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down Expand Up @@ -336,6 +342,7 @@ exports[`<List /> snapshot should match snapshot with role 1`] = `
data-padded={false}
data-shape="rectangle"
data-size={40}
id="1"
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down Expand Up @@ -378,6 +385,7 @@ exports[`<List /> snapshot should match snapshot with role 1`] = `
data-padded={false}
data-shape="rectangle"
data-size={40}
id="1"
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down Expand Up @@ -446,6 +454,7 @@ exports[`<List /> snapshot should match snapshot with style 1`] = `
data-padded={false}
data-shape="rectangle"
data-size={40}
id="1"
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down Expand Up @@ -488,6 +497,7 @@ exports[`<List /> snapshot should match snapshot with style 1`] = `
data-padded={false}
data-shape="rectangle"
data-size={40}
id="1"
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down
6 changes: 6 additions & 0 deletions src/components/ListBoxItem/ListBoxItem.unit.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,12 @@ jest.mock('@react-aria/listbox', () => {
};
});

jest.mock('uuid', () => {
return {
v4: () => '1',
};
});

describe('ListBoxItem', () => {
let wrapper: any;
const { result } = renderHook(() =>
Expand Down
1 change: 1 addition & 0 deletions src/components/ListBoxItem/ListBoxItem.unit.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ exports[`ListBoxItem snapshot should match snapshot 1`] = `
data-padded={true}
data-shape="rectangle"
data-size={40}
id="1"
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down
6 changes: 6 additions & 0 deletions src/components/ListBoxSection/ListBoxSection.unit.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,12 @@ jest.mock('@react-aria/listbox', () => {
};
});

jest.mock('uuid', () => {
return {
v4: () => '1',
};
});

describe('ListBoxSection', () => {
let wrapper: any;
const { result } = renderHook(() =>
Expand Down
2 changes: 2 additions & 0 deletions src/components/ListBoxSection/ListBoxSection.unit.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ exports[`ListBoxSection snapshot should match snapshot 1`] = `
data-padded={true}
data-shape="rectangle"
data-size={40}
id="1"
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down Expand Up @@ -167,6 +168,7 @@ exports[`ListBoxSection snapshot should match snapshot 1`] = `
data-padded={true}
data-shape="rectangle"
data-size={40}
id="1"
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down
6 changes: 6 additions & 0 deletions src/components/ListHeader/ListHeader.unit.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@ import { mount } from 'enzyme';
import ListHeader, { LIST_HEADER_CONSTANTS as CONSTANTS } from './';
import { OUTLINE_COLOR, OUTLINE_POSITION } from './ListHeader.constants';

jest.mock('uuid', () => {
return {
v4: () => '1',
};
});

describe('<ListHeader />', () => {
describe('snapshot', () => {
it('should match snapshot', () => {
Expand Down
9 changes: 9 additions & 0 deletions src/components/ListHeader/ListHeader.unit.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ exports[`<ListHeader /> snapshot should match snapshot 1`] = `
data-padded={true}
data-shape="rectangle"
data-size={32}
id="1"
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down Expand Up @@ -92,6 +93,7 @@ exports[`<ListHeader /> snapshot should match snapshot with bold 1`] = `
data-padded={true}
data-shape="rectangle"
data-size={32}
id="1"
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down Expand Up @@ -155,6 +157,7 @@ exports[`<ListHeader /> snapshot should match snapshot with className 1`] = `
data-padded={true}
data-shape="rectangle"
data-size={32}
id="1"
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down Expand Up @@ -215,6 +218,7 @@ exports[`<ListHeader /> snapshot should match snapshot with id 1`] = `
data-padded={true}
data-shape="rectangle"
data-size={32}
id="1"
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down Expand Up @@ -274,6 +278,7 @@ exports[`<ListHeader /> snapshot should match snapshot with outline 1`] = `
data-padded={true}
data-shape="rectangle"
data-size={32}
id="1"
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down Expand Up @@ -338,6 +343,7 @@ exports[`<ListHeader /> snapshot should match snapshot with outlineColor 1`] = `
data-padded={true}
data-shape="rectangle"
data-size={32}
id="1"
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down Expand Up @@ -402,6 +408,7 @@ exports[`<ListHeader /> snapshot should match snapshot with outlinePosition 1`]
data-padded={true}
data-shape="rectangle"
data-size={32}
id="1"
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down Expand Up @@ -466,6 +473,7 @@ exports[`<ListHeader /> snapshot should match snapshot with outlinePosition 2`]
data-padded={true}
data-shape="rectangle"
data-size={32}
id="1"
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down Expand Up @@ -538,6 +546,7 @@ exports[`<ListHeader /> snapshot should match snapshot with style 1`] = `
data-padded={true}
data-shape="rectangle"
data-size={32}
id="1"
onBlur={[Function]}
onClick={[Function]}
onDragStart={[Function]}
Expand Down
23 changes: 22 additions & 1 deletion src/components/ListItemBase/ListItemBase.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -297,4 +297,25 @@ const ChangingContent = Template(ListItemWithChangingContent).bind({});

ChangingContent.argTypes = { ...argTypes };

export { Example, Sizes, Shapes, Common, ChangingContent };
const WithTooltip = Template<ListItemBaseProps>((args) => (
<>
{getComponentStates(
ListItemBase,
{
...args,
tooltipProps: { content: 'This is a tooltip' },
children: (
<>
<ListItemBaseSection position="fill">Hover over me!</ListItemBaseSection>
</>
),
onPress: action('onPress'),
},
{}
)}
</>
)).bind({});

WithTooltip.argTypes = { ...argTypes };

export { Example, Sizes, Shapes, Common, ChangingContent, WithTooltip };
47 changes: 47 additions & 0 deletions src/components/ListItemBase/ListItemBase.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,13 @@ import userEvent from '@testing-library/user-event';
import { fireEvent, render, screen } from '@testing-library/react';
import List from '../List/List';
import { ListContextValue } from '../List/List.types';
import { Tooltip as MdcTooltip } from '@momentum-design/components/dist/react';

jest.mock('uuid', () => {
return {
v4: () => '1',
};
});

describe('ListItemBase', () => {
let container;
Expand Down Expand Up @@ -162,6 +169,16 @@ describe('ListItemBase', () => {

expect(container).toMatchSnapshot();
});

it('should match snapshot with tooltipProps', () => {
expect.assertions(1);

container = mount(
<ListItemBase tooltipProps={{ content: 'This is a tooltip' }}>Test</ListItemBase>
);

expect(container).toMatchSnapshot();
});
});

describe('attributes', () => {
Expand Down Expand Up @@ -335,6 +352,36 @@ describe('ListItemBase', () => {
expect(element.getAttribute('data-allow-text-select')).toBe(`${allowTextSelection}`);
}
);

it('should have MdcTooltip when tooltipProps are provided with content', () => {
expect.assertions(2);

container = mount(
<ListItemBase tooltipProps={{ content: 'This is a tooltip' }}>Test</ListItemBase>
);

const element = container.find(ListItemBase);

expect(element.props().tooltipProps).toStrictEqual({ content: 'This is a tooltip' });
expect(container.find(ListItemBase).find(MdcTooltip).props()).toStrictEqual({
children: 'This is a tooltip',
content: 'This is a tooltip',
placement: 'top',
showArrow: true,
triggerID: expect.any(String),
});
});

it('should not have MdcTooltip when tooltipProps are provided without content', () => {
expect.assertions(2);

container = mount(<ListItemBase tooltipProps={{ content: undefined }}>Test</ListItemBase>);

const element = container.find(ListItemBase);

expect(element.props().tooltipProps).toStrictEqual({ content: undefined });
expect(container.find(ListItemBase).find(MdcTooltip).exists()).toBe(false);
});
});

describe('actions', () => {
Expand Down
Loading
Loading