fix: StyledMenuItemBase remove spacing when no icon (#9573)
This commit is contained in:
@ -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
|
||||
|
||||
@ -48,7 +48,7 @@ export const MenuItemMultiSelectAvatar = ({
|
||||
<Checkbox checked={selected} />
|
||||
<StyledMenuItemLeftContent>
|
||||
{avatar}
|
||||
<StyledMenuItemLabel hasLeftIcon={!!avatar}>
|
||||
<StyledMenuItemLabel>
|
||||
<OverflowingTextWithTooltip text={text} />
|
||||
</StyledMenuItemLabel>
|
||||
</StyledMenuItemLeftContent>
|
||||
|
||||
@ -46,7 +46,7 @@ export const MenuItemSelectAvatar = ({
|
||||
>
|
||||
<StyledMenuItemLeftContent>
|
||||
{avatar}
|
||||
<StyledMenuItemLabel hasLeftIcon={!!avatar}>
|
||||
<StyledMenuItemLabel>
|
||||
<OverflowingTextWithTooltip text={text} />
|
||||
</StyledMenuItemLabel>
|
||||
</StyledMenuItemLeftContent>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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} />
|
||||
|
||||
@ -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;
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user