Skip to content

Commit

Permalink
Renamed DropdownMenuItem to DropdownMenuItemButton
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dantemss
Dantemss committed Jan 17, 2024
1 parent ffa5cea commit 2b34376
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 45 deletions.
4 changes: 2 additions & 2 deletions src/components/DropdownMenu.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import renderer from 'react-test-renderer';
import { DropdownMenu, DropdownMenuItem, useDropdownMenu } from './DropdownMenu';
import { DropdownMenu, DropdownMenuItemButton, useDropdownMenu } from './DropdownMenu';

describe('DropdownMenu', () => {
const TestMenu = () => {
Expand All @@ -11,7 +11,7 @@ describe('DropdownMenu', () => {
text='Test Menu'
variant='light'
>
<DropdownMenuItem onClick={jest.fn()} state={state}>Test Menu Item</DropdownMenuItem>
<DropdownMenuItemButton onClick={jest.fn()} state={state}>Test Menu Item</DropdownMenuItemButton>
</DropdownMenu>;
};

Expand Down
74 changes: 37 additions & 37 deletions src/components/DropdownMenu.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { MouseEvent } from 'react';
import { DropdownMenu, DropdownMenuItem, useDropdownMenu } from './DropdownMenu';
import { DropdownMenu, DropdownMenuItemButton, useDropdownMenu } from './DropdownMenu';

const onClick = (e: MouseEvent<HTMLButtonElement>) => {
console.log(`Clicked on "${e.currentTarget.innerText}"`);
Expand All @@ -11,29 +11,29 @@ export const Primary = () => {

return <>
<DropdownMenu id='enabled-grades-menu' state={enabledState} text='Sync/Export Grades' variant='primary'>
<DropdownMenuItem onClick={onClick} state={enabledState}>
<DropdownMenuItemButton onClick={onClick} state={enabledState}>
Sync only completed grades to LMS
</DropdownMenuItem>
<DropdownMenuItem onClick={onClick} state={enabledState}>
</DropdownMenuItemButton>
<DropdownMenuItemButton onClick={onClick} state={enabledState}>
Sync all grades to LMS (including partial)
</DropdownMenuItem>
<DropdownMenuItem onClick={onClick} state={enabledState}>
</DropdownMenuItemButton>
<DropdownMenuItemButton onClick={onClick} state={enabledState}>
Export grades to .csv
</DropdownMenuItem>
</DropdownMenuItemButton>
</DropdownMenu>

<br/>

<DropdownMenu id='disabled-grades-menu' state={disabledState} text='Sync/Export Grades' variant='primary'>
<DropdownMenuItem onClick={onClick} state={disabledState}>
<DropdownMenuItemButton onClick={onClick} state={disabledState}>
Sync only completed grades to LMS
</DropdownMenuItem>
<DropdownMenuItem onClick={onClick} state={disabledState}>
</DropdownMenuItemButton>
<DropdownMenuItemButton onClick={onClick} state={disabledState}>
Sync all grades to LMS (including partial)
</DropdownMenuItem>
<DropdownMenuItem onClick={onClick} state={disabledState}>
</DropdownMenuItemButton>
<DropdownMenuItemButton onClick={onClick} state={disabledState}>
Export grades to .csv
</DropdownMenuItem>
</DropdownMenuItemButton>
</DropdownMenu>
</>;
};
Expand All @@ -44,29 +44,29 @@ export const Light = () => {

return <>
<DropdownMenu id='enabled-grades-menu' state={enabledState} text='Sync/Export Grades' variant='light'>
<DropdownMenuItem onClick={onClick} state={enabledState}>
<DropdownMenuItemButton onClick={onClick} state={enabledState}>
Sync only completed grades to LMS
</DropdownMenuItem>
<DropdownMenuItem onClick={onClick} state={enabledState}>
</DropdownMenuItemButton>
<DropdownMenuItemButton onClick={onClick} state={enabledState}>
Sync all grades to LMS (including partial)
</DropdownMenuItem>
<DropdownMenuItem onClick={onClick} state={enabledState}>
</DropdownMenuItemButton>
<DropdownMenuItemButton onClick={onClick} state={enabledState}>
Export grades to .csv
</DropdownMenuItem>
</DropdownMenuItemButton>
</DropdownMenu>

<br/>

<DropdownMenu id='disabled-grades-menu' state={disabledState} text='Sync/Export Grades' variant='light'>
<DropdownMenuItem onClick={onClick} state={disabledState}>
<DropdownMenuItemButton onClick={onClick} state={disabledState}>
Sync only completed grades to LMS
</DropdownMenuItem>
<DropdownMenuItem onClick={onClick} state={disabledState}>
</DropdownMenuItemButton>
<DropdownMenuItemButton onClick={onClick} state={disabledState}>
Sync all grades to LMS (including partial)
</DropdownMenuItem>
<DropdownMenuItem onClick={onClick} state={disabledState}>
</DropdownMenuItemButton>
<DropdownMenuItemButton onClick={onClick} state={disabledState}>
Export grades to .csv
</DropdownMenuItem>
</DropdownMenuItemButton>
</DropdownMenu>
</>;
};
Expand All @@ -77,29 +77,29 @@ export const Secondary = () => {

return <>
<DropdownMenu id='enabled-grades-menu' state={enabledState} text='Sync/Export Grades' variant='secondary'>
<DropdownMenuItem onClick={onClick} state={enabledState}>
<DropdownMenuItemButton onClick={onClick} state={enabledState}>
Sync only completed grades to LMS
</DropdownMenuItem>
<DropdownMenuItem onClick={onClick} state={enabledState}>
</DropdownMenuItemButton>
<DropdownMenuItemButton onClick={onClick} state={enabledState}>
Sync all grades to LMS (including partial)
</DropdownMenuItem>
<DropdownMenuItem onClick={onClick} state={enabledState}>
</DropdownMenuItemButton>
<DropdownMenuItemButton onClick={onClick} state={enabledState}>
Export grades to .csv
</DropdownMenuItem>
</DropdownMenuItemButton>
</DropdownMenu>

<br/>

<DropdownMenu id='disabled-grades-menu' state={disabledState} text='Sync/Export Grades' variant='secondary'>
<DropdownMenuItem onClick={onClick} state={disabledState}>
<DropdownMenuItemButton onClick={onClick} state={disabledState}>
Sync only completed grades to LMS
</DropdownMenuItem>
<DropdownMenuItem onClick={onClick} state={disabledState}>
</DropdownMenuItemButton>
<DropdownMenuItemButton onClick={onClick} state={disabledState}>
Sync all grades to LMS (including partial)
</DropdownMenuItem>
<DropdownMenuItem onClick={onClick} state={disabledState}>
</DropdownMenuItemButton>
<DropdownMenuItemButton onClick={onClick} state={disabledState}>
Export grades to .csv
</DropdownMenuItem>
</DropdownMenuItemButton>
</DropdownMenu>
</>;
};
12 changes: 6 additions & 6 deletions src/components/DropdownMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const StyledDropdownMenuItemContainer = styled.div`
z-index: 10;
`;

const StyledDropdownMenuItem = styled.button`
const StyledDropdownMenuItemButton = styled.button`
align-items: center;
background-color: ${palette.white};
border: 0;
Expand Down Expand Up @@ -196,16 +196,16 @@ export const DropdownMenu = ({
</StyledDropdownMenu>;
};

export type DropdownMenuItemProps = React.PropsWithChildren<React.HTMLAttributes<HTMLButtonElement>> & {
export type DropdownMenuItemButtonProps = React.PropsWithChildren<React.HTMLAttributes<HTMLButtonElement>> & {
state: DropdownMenuState;
};

export const DropdownMenuItem = ({
export const DropdownMenuItemButton = ({
children,
onClick,
state,
...buttonProps
}: DropdownMenuItemProps) => {
}: DropdownMenuItemButtonProps) => {
const { closeMenu } = state;

const handleClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
Expand All @@ -214,7 +214,7 @@ export const DropdownMenuItem = ({
closeMenu();
}, [closeMenu, onClick]);

return <StyledDropdownMenuItem role='menuitem' onClick={handleClick} {...buttonProps}>
return <StyledDropdownMenuItemButton role='menuitem' onClick={handleClick} {...buttonProps}>
{children}
</StyledDropdownMenuItem>;
</StyledDropdownMenuItemButton>;
};

0 comments on commit 2b34376

Please sign in to comment.