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:
parent
ec1439e171
commit
312a40ce1c
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user