Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-23 00:22:19 +01:00
Code Issues Projects Releases Wiki Activity

refactor: badge icon spacing (#6962)

Browse Source 
Simplified after previous modifications
This commit is contained in:
Tymoteusz Czech 2024-04-30 14:14:04 +02:00 committed by GitHub
parent 4fea198d6c
commit 0bacd60caf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/component/common/Badge/Badge.tsx
View File

@ -40,6 +40,7 @@ const StyledBadge = styled('span')<IBadgeProps>(
({ theme, color = 'neutral', icon }) => ({ ({ theme, color = 'neutral', icon }) => ({
display: 'inline-flex', display: 'inline-flex',
alignItems: 'center', alignItems: 'center',
gap: theme.spacing(0.5),
padding: theme.spacing(icon ? 0.375 : 0.625, 1), padding: theme.spacing(icon ? 0.375 : 0.625, 1),
borderRadius: theme.shape.borderRadius, borderRadius: theme.shape.borderRadius,
fontSize: theme.fontSizes.smallerBody, fontSize: theme.fontSizes.smallerBody,
@ -61,28 +62,16 @@ const StyledBadge = styled('span')<IBadgeProps>(
const StyledBadgeIcon = styled('span')< const StyledBadgeIcon = styled('span')<
IBadgeIconProps & { hasChildren?: boolean } IBadgeIconProps & { hasChildren?: boolean }
>(({ theme, color = 'neutral', iconRight = false, hasChildren }) => ({ >(({ theme, color = 'neutral' }) => ({
display: 'flex', display: 'flex',
color: color:
color === 'disabled' color === 'disabled'
? theme.palette.action.disabled ? theme.palette.action.disabled
: theme.palette[color].main, : theme.palette[color].main,
margin: iconRight
? theme.spacing(0, 0, 0, hasChildren ? 0.5 : 0)
: theme.spacing(0, hasChildren ? 0.5 : 0, 0, 0),
})); }));
const BadgeIcon = ( const BadgeIcon = (color: Color, icon: ReactElement) => (
color: Color, <StyledBadgeIcon color={color}>
icon: ReactElement,
iconRight = false,
hasChildren = false,
) => (
<StyledBadgeIcon
color={color}
iconRight={iconRight}
hasChildren={hasChildren}
>
<ConditionallyRender <ConditionallyRender
condition={Boolean(icon?.props.sx)} condition={Boolean(icon?.props.sx)}
show={icon} show={icon}
@ -121,12 +110,15 @@ export const Badge: FC<IBadgeProps> = forwardRef(
> >
<ConditionallyRender <ConditionallyRender
condition={Boolean(icon) && !iconRight} condition={Boolean(icon) && !iconRight}
show={BadgeIcon(color, icon!, false, Boolean(children))} show={BadgeIcon(color, icon!)}
/>
<ConditionallyRender
condition={Boolean(children)}
show={<div>{children}</div>}
/> />
{children}
<ConditionallyRender <ConditionallyRender
condition={Boolean(icon) && Boolean(iconRight)} condition={Boolean(icon) && Boolean(iconRight)}
show={BadgeIcon(color, icon!, true, Boolean(children))} show={BadgeIcon(color, icon!)}
/> />
</StyledBadge> </StyledBadge>
), ),