-
Notifications
You must be signed in to change notification settings - Fork 2.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(ui): use expand button in sidebar and tables [EE-6844]
fix [EE-6844] changes in: - any ui table - sidebar expandable items
- Loading branch information
Chaim Lev-Ari
committed
Apr 17, 2024
1 parent
48bc7d0
commit 7352aa0
Showing
4 changed files
with
152 additions
and
43 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,68 @@ | ||
import { render, screen } from '@testing-library/react'; | ||
import userEvent from '@testing-library/user-event'; | ||
|
||
import { CollapseExpandButton } from './CollapseExpandButton'; | ||
|
||
it('should render the button with the correct icon and title', () => { | ||
renderCollapseExpandButton(); | ||
const button = screen.getByRole('button'); | ||
|
||
expect(button).toBeInTheDocument(); | ||
expect(button).toHaveAttribute('title', 'Expand'); | ||
expect(button).toHaveAttribute('aria-label', 'Expand'); | ||
expect(button).toHaveAttribute('aria-expanded', 'false'); | ||
expect(button.querySelector('svg')).toBeInTheDocument(); | ||
}); | ||
|
||
it('should call the onClick handler when the button is clicked', async () => { | ||
const onClick = vi.fn(); | ||
const { user } = renderCollapseExpandButton({ onClick }); | ||
const button = screen.getByRole('button'); | ||
|
||
await user.click(button); | ||
|
||
expect(onClick).toHaveBeenCalledTimes(1); | ||
}); | ||
|
||
it.only('should prevent default and stop propagation when the button is clicked', async () => { | ||
const user = userEvent.setup(); | ||
const onClick = vi.fn(); | ||
const onOuterClick = vi.fn(); | ||
|
||
render( | ||
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions | ||
<div onClick={onOuterClick}> | ||
<CollapseExpandButton | ||
onClick={onClick} | ||
isExpanded={false} | ||
data-cy="nothing" | ||
/> | ||
</div> | ||
); | ||
|
||
const button = screen.getByLabelText('Expand'); | ||
|
||
await user.click(button); | ||
|
||
expect(onOuterClick).not.toHaveBeenCalled(); | ||
expect(onClick).toHaveBeenCalled(); | ||
}); | ||
|
||
function renderCollapseExpandButton({ | ||
isExpanded = false, | ||
onClick = vi.fn(), | ||
}: { | ||
isExpanded?: boolean; | ||
onClick?(): void; | ||
} = {}) { | ||
const user = userEvent.setup(); | ||
|
||
render( | ||
<CollapseExpandButton | ||
isExpanded={isExpanded} | ||
data-cy="random" | ||
onClick={onClick} | ||
/> | ||
); | ||
return { user }; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
import { ChevronDown } from 'lucide-react'; | ||
import { ComponentProps } from 'react'; | ||
import clsx from 'clsx'; | ||
|
||
import { Button } from '@@/buttons'; | ||
|
||
import { Icon } from './Icon'; | ||
|
||
export function CollapseExpandButton({ | ||
onClick, | ||
isExpanded, | ||
className, | ||
...props | ||
}: { isExpanded: boolean } & ComponentProps<typeof Button>) { | ||
return ( | ||
<button | ||
onClick={(e) => { | ||
e.preventDefault(); | ||
e.stopPropagation(); | ||
|
||
onClick?.(e); | ||
}} | ||
color="none" | ||
title={isExpanded ? 'Collapse' : 'Expand'} | ||
aria-label={isExpanded ? 'Collapse' : 'Expand'} | ||
aria-expanded={isExpanded} | ||
type="button" | ||
className={clsx( | ||
'flex-none border-none bg-transparent flex items-center p-0 px-3 group', | ||
className | ||
)} | ||
// eslint-disable-next-line react/jsx-props-no-spreading | ||
{...props} | ||
> | ||
<div className="flex items-center group-hover:bg-blue-5 be:group-hover:bg-gray-5 group-hover:th-dark:bg-gray-true-7 group-hover:bg-opacity-10 be:group-hover:bg-opacity-10 rounded-full p-[3px] transition ease-in-out"> | ||
<Icon | ||
icon={ChevronDown} | ||
size="md" | ||
className={clsx('transition ease-in-out', { | ||
'rotate-180': isExpanded, | ||
'rotate-0': !isExpanded, | ||
})} | ||
/> | ||
</div> | ||
</button> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters