fix: table dropdown button element and alignment

This commit is contained in:
Matthew Russell
2023-07-27 13:11:43 +01:00
parent b325628acc
commit 7581b51e0d
2 changed files with 27 additions and 15 deletions
@@ -11,7 +11,9 @@ export const ActionsDropdownTrigger = () => {
className='hover:bg-vega-light-200 dark:hover:bg-vega-dark-200 [&[aria-expanded="true"]]:bg-vega-light-200 dark:[&[aria-expanded="true"]]:bg-vega-dark-200 p-0.5 rounded-full'
data-testid="dropdown-menu"
>
<VegaIcon name={VegaIconNames.KEBAB} />
<button>
<VegaIcon name={VegaIconNames.KEBAB} />
</button>
</TradingDropdownTrigger>
);
};
@@ -22,7 +24,11 @@ type ActionMenuContentProps = React.ComponentProps<
export const ActionsDropdown = (props: ActionMenuContentProps) => {
return (
<TradingDropdown trigger={<ActionsDropdownTrigger />}>
<TradingDropdownContent {...props}></TradingDropdownContent>
<TradingDropdownContent
{...props}
side="bottom"
align="end"
></TradingDropdownContent>
</TradingDropdown>
);
};
@@ -67,19 +67,25 @@ export const TradingDropdownRadioGroup = DropdownMenuPrimitive.RadioGroup;
export const TradingDropdownContent = forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
React.ComponentProps<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 10, ...contentProps }, forwardedRef) => (
<DropdownMenuPrimitive.Content
ref={forwardedRef}
className={classNames(
'min-w-[290px] bg-vega-clight-700 dark:bg-vega-cdark-700',
'border border-vega-clight-500 dark:border-vega-cdark-500',
'p-2 rounded z-20 text-default'
)}
align="start"
sideOffset={sideOffset}
{...contentProps}
/>
));
>(
(
{ className, align = 'start', side, sideOffset = 10, ...contentProps },
forwardedRef
) => (
<DropdownMenuPrimitive.Content
ref={forwardedRef}
className={classNames(
'min-w-[290px] bg-vega-clight-700 dark:bg-vega-cdark-700',
'border border-vega-clight-500 dark:border-vega-cdark-500',
'p-2 rounded z-20 text-default'
)}
align={align}
sideOffset={sideOffset}
side={side}
{...contentProps}
/>
)
);
TradingDropdownContent.displayName = 'DropdownMenuContent';
/**