admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: StyledMenuItemBase remove spacing when no icon (#9573)

Browse Source
This commit is contained in:
Jérémy M
2025-01-13 11:42:39 +01:00
committed by GitHub
parent 002cbd3b78
commit 61c5acb982
6 changed files with 6 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx
View File

@ -98,9 +98,7 @@ export const MenuItemCommand = ({
<LeftIcon size={theme.icon.size.sm} /> <LeftIcon size={theme.icon.size.sm} />
</StyledBigIconContainer> </StyledBigIconContainer>
)} )}
<StyledMenuItemLabelText hasLeftIcon={!!LeftIcon}> <StyledMenuItemLabelText>{text}</StyledMenuItemLabelText>
{text}
</StyledMenuItemLabelText>
</StyledMenuItemLeftContent> </StyledMenuItemLeftContent>
{!isMobile && ( {!isMobile && (
<MenuItemCommandHotKeys <MenuItemCommandHotKeys

2
packages/twenty-ui/src/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx
View File

@ -48,7 +48,7 @@ export const MenuItemMultiSelectAvatar = ({
<Checkbox checked={selected} /> <Checkbox checked={selected} />
<StyledMenuItemLeftContent> <StyledMenuItemLeftContent>
{avatar} {avatar}
<StyledMenuItemLabel hasLeftIcon={!!avatar}> <StyledMenuItemLabel>
<OverflowingTextWithTooltip text={text} /> <OverflowingTextWithTooltip text={text} />
</StyledMenuItemLabel> </StyledMenuItemLabel>
</StyledMenuItemLeftContent> </StyledMenuItemLeftContent>

2
packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectAvatar.tsx
View File

@ -46,7 +46,7 @@ export const MenuItemSelectAvatar = ({
> >
<StyledMenuItemLeftContent> <StyledMenuItemLeftContent>
{avatar} {avatar}
<StyledMenuItemLabel hasLeftIcon={!!avatar}> <StyledMenuItemLabel>
<OverflowingTextWithTooltip text={text} /> <OverflowingTextWithTooltip text={text} />
</StyledMenuItemLabel> </StyledMenuItemLabel>
</StyledMenuItemLeftContent> </StyledMenuItemLeftContent>

4
packages/twenty-ui/src/navigation/menu-item/components/MenuItemSelectColor.tsx
View File

@ -53,9 +53,7 @@ export const MenuItemSelectColor = ({
> >
<StyledMenuItemLeftContent> <StyledMenuItemLeftContent>
<ColorSample colorName={color} variant={variant} /> <ColorSample colorName={color} variant={variant} />
<StyledMenuItemLabel hasLeftIcon={true}> <StyledMenuItemLabel>{colorLabels[color]}</StyledMenuItemLabel>
{colorLabels[color]}
</StyledMenuItemLabel>
</StyledMenuItemLeftContent> </StyledMenuItemLeftContent>
{selected && <IconCheck size={theme.icon.size.md} />} {selected && <IconCheck size={theme.icon.size.md} />}
</StyledMenuItemSelect> </StyledMenuItemSelect>

2
packages/twenty-ui/src/navigation/menu-item/internals/components/MenuItemLeftContent.tsx
View File

@ -71,7 +71,7 @@ export const MenuItemLeftContent = ({
{LeftIcon && ( {LeftIcon && (
<LeftIcon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} /> <LeftIcon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
)} )}
<StyledMenuItemLabel hasLeftIcon={!!LeftIcon}> <StyledMenuItemLabel>
{isString(text) ? ( {isString(text) ? (
<StyledMainText> <StyledMainText>
<OverflowingTextWithTooltip text={text} /> <OverflowingTextWithTooltip text={text} />

4
packages/twenty-ui/src/navigation/menu-item/internals/components/StyledMenuItemBase.tsx
View File

@ -68,15 +68,13 @@ export const StyledMenuItemBase = styled.div<MenuItemBaseProps>`
width: calc(100% - 2 * var(--horizontal-padding)); width: calc(100% - 2 * var(--horizontal-padding));
`; `;
export const StyledMenuItemLabel = styled.div<{ hasLeftIcon: boolean }>` export const StyledMenuItemLabel = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-size: ${({ theme }) => theme.font.size.md}; font-size: ${({ theme }) => theme.font.size.md};
font-weight: ${({ theme }) => theme.font.weight.regular}; font-weight: ${({ theme }) => theme.font.weight.regular};
overflow: hidden; overflow: hidden;
padding-left: ${({ theme, hasLeftIcon }) =>
hasLeftIcon ? '' : theme.spacing(1)};
white-space: nowrap; white-space: nowrap;
`; `;