1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-04 00:18:01 +01:00

refactor: prefer 'span' to 'div' in the badge element (#5981)

This changes the badge element to prefer spans instead of divs. The
primary difference between spans and divs is that spans are inline and
divs are block. Styling-wise, we override the display property anyway.
Semantically, most all of the badges are used inline instead of on
their own block level, so this change seems sensible. You can still
provide `div` as the `as` prop if you need to.
This commit is contained in:
Thomas Heartman 2024-01-22 14:44:26 +04:00 committed by GitHub
parent ec1439e171
commit 312a40ce1c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -35,7 +35,7 @@ interface IBadgeIconProps {
iconRight?: boolean;
}
const StyledBadge = styled('div')<IBadgeProps>(
const StyledBadge = styled('span')<IBadgeProps>(
({ theme, color = 'neutral', icon }) => ({
display: 'inline-flex',
alignItems: 'center',
@ -58,7 +58,7 @@ const StyledBadge = styled('div')<IBadgeProps>(
}),
);
const StyledBadgeIcon = styled('div')<IBadgeIconProps>(
const StyledBadgeIcon = styled('span')<IBadgeIconProps>(
({ theme, color = 'neutral', iconRight = false }) => ({
display: 'flex',
color:
@ -88,7 +88,7 @@ const BadgeIcon = (color: Color, icon: ReactElement, iconRight = false) => (
export const Badge: FC<IBadgeProps> = forwardRef(
(
{
as = 'div',
as = 'span',
color = 'neutral',
icon,
iconRight,