From 312a40ce1c2e04ab727ed5d37ccaf0c63af13887 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Mon, 22 Jan 2024 14:44:26 +0400 Subject: [PATCH] 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. --- frontend/src/component/common/Badge/Badge.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/component/common/Badge/Badge.tsx b/frontend/src/component/common/Badge/Badge.tsx index 066f8f6b46..b59a00dbed 100644 --- a/frontend/src/component/common/Badge/Badge.tsx +++ b/frontend/src/component/common/Badge/Badge.tsx @@ -35,7 +35,7 @@ interface IBadgeIconProps { iconRight?: boolean; } -const StyledBadge = styled('div')( +const StyledBadge = styled('span')( ({ theme, color = 'neutral', icon }) => ({ display: 'inline-flex', alignItems: 'center', @@ -58,7 +58,7 @@ const StyledBadge = styled('div')( }), ); -const StyledBadgeIcon = styled('div')( +const StyledBadgeIcon = styled('span')( ({ theme, color = 'neutral', iconRight = false }) => ({ display: 'flex', color: @@ -88,7 +88,7 @@ const BadgeIcon = (color: Color, icon: ReactElement, iconRight = false) => ( export const Badge: FC = forwardRef( ( { - as = 'div', + as = 'span', color = 'neutral', icon, iconRight,