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

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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