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

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

Browse Source 
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
1 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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