mirror of
https://github.com/twentyhq/twenty.git
synced 2024-11-27 11:03:40 +03:00
feat: improve menuitem btn design (#3152)
feat: add LightIconButtonGroup Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
parent
8483cf0b4b
commit
f36fa9aa14
@ -0,0 +1,41 @@
|
||||
import { MouseEvent } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
|
||||
import { LightIconButton, LightIconButtonProps } from './LightIconButton';
|
||||
|
||||
const StyledLightIconButtonGroupContainer = styled.div`
|
||||
display: inline-flex;
|
||||
gap: 2px;
|
||||
padding: 2px;
|
||||
`;
|
||||
|
||||
export type LightIconButtonGroupProps = Pick<
|
||||
LightIconButtonProps,
|
||||
'className' | 'size'
|
||||
> & {
|
||||
iconButtons: {
|
||||
Icon: IconComponent;
|
||||
onClick?: (event: MouseEvent<any>) => void;
|
||||
}[];
|
||||
};
|
||||
|
||||
export const LightIconButtonGroup = ({
|
||||
iconButtons,
|
||||
size,
|
||||
className,
|
||||
}: LightIconButtonGroupProps) => (
|
||||
<StyledLightIconButtonGroupContainer className={className}>
|
||||
{iconButtons.map(({ Icon, onClick }, index) => {
|
||||
return (
|
||||
<LightIconButton
|
||||
key={`light-icon-button-${index}`}
|
||||
Icon={Icon}
|
||||
onClick={onClick}
|
||||
size={size}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</StyledLightIconButtonGroupContainer>
|
||||
);
|
@ -1,7 +1,7 @@
|
||||
import { MouseEvent } from 'react';
|
||||
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
import { FloatingIconButtonGroup } from '@/ui/input/button/components/FloatingIconButtonGroup';
|
||||
import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';
|
||||
|
||||
import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
|
||||
import {
|
||||
@ -59,7 +59,7 @@ export const MenuItem = ({
|
||||
</StyledMenuItemLeftContent>
|
||||
<div className="hoverable-buttons">
|
||||
{showIconButtons && (
|
||||
<FloatingIconButtonGroup iconButtons={iconButtons} size="small" />
|
||||
<LightIconButtonGroup iconButtons={iconButtons} size="small" />
|
||||
)}
|
||||
</div>
|
||||
</StyledHoverableMenuItemBase>
|
||||
|
@ -1,5 +1,5 @@
|
||||
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
|
||||
import { FloatingIconButtonGroup } from '@/ui/input/button/components/FloatingIconButtonGroup';
|
||||
import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup';
|
||||
|
||||
import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent';
|
||||
import { StyledHoverableMenuItemBase } from '../internals/components/StyledMenuItemBase';
|
||||
@ -42,7 +42,7 @@ export const MenuItemDraggable = ({
|
||||
showGrip={!isDragDisabled}
|
||||
/>
|
||||
{showIconButtons && (
|
||||
<FloatingIconButtonGroup
|
||||
<LightIconButtonGroup
|
||||
className="hoverable-buttons"
|
||||
iconButtons={iconButtons}
|
||||
/>
|
||||
|
@ -91,6 +91,10 @@ export const StyledMenuItemLeftContent = styled.div`
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
|
||||
& > svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledMenuItemRightContent = styled.div`
|
||||
@ -114,6 +118,7 @@ export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{
|
||||
& .hoverable-buttons {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
Loading…
Reference in New Issue
Block a user