diff --git a/src/components/badge/badge.component.tsx b/src/components/badge/badge.component.tsx
index 2ed3c6b8d6..f05acc7221 100644
--- a/src/components/badge/badge.component.tsx
+++ b/src/components/badge/badge.component.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
import {
StyledBadgeWrapper,
StyledCrossIcon,
@@ -28,6 +28,8 @@ export const Badge = ({
}: BadgeProps) => {
const shouldDisplayCounter = +counter > 0;
const counterToDisplay = +counter > 99 ? 99 : counter;
+ const [isFocused, setIsFocused] = useState(false);
+ const [isHovered, setIsHovered] = useState(false);
const renderCorrectBadge = () => {
const props = onClick
@@ -46,6 +48,20 @@ export const Badge = ({
data-component="badge"
color={color}
{...props}
+ onFocus={() => {
+ setIsFocused(true);
+ }}
+ onBlur={() => {
+ setIsFocused(false);
+ }}
+ onMouseEnter={() => {
+ setIsHovered(true);
+ }}
+ onMouseLeave={() => {
+ setIsHovered(false);
+ }}
+ isFocused={isFocused}
+ isHovered={isHovered}
>
{onClick && (
diff --git a/src/components/badge/badge.style.ts b/src/components/badge/badge.style.ts
index 6d0f2b33bb..069b3e20a2 100644
--- a/src/components/badge/badge.style.ts
+++ b/src/components/badge/badge.style.ts
@@ -29,6 +29,8 @@ const StyledCounter = styled.div`
interface StyledBadgeProps {
color: string;
+ isFocused?: boolean;
+ isHovered?: boolean;
}
const StyledBadge = styled.span.attrs(({ onClick }) => ({
@@ -52,7 +54,7 @@ const StyledBadge = styled.span.attrs(({ onClick }) => ({
border: none;
}
- ${({ onClick, color, theme }) => css`
+ ${({ onClick, color, theme, isFocused, isHovered }) => css`
${onClick &&
`
${commonStyles}
@@ -65,27 +67,32 @@ const StyledBadge = styled.span.attrs(({ onClick }) => ({
}
border-color: ${toColor(theme, color)};
- color: ${toColor(theme, color)};
-
- &:hover,
- &:focus {
- background: ${toColor(theme, color)};
- border: none;
- ${StyledCounter} {
- display: none;
- }
+ color: ${toColor(theme, color)};
+
+ ${
+ (isFocused || isHovered) &&
+ `
+ && {
+ background: ${toColor(theme, color)};
+ border: none;
+ ${StyledCounter} {
+ display: none;
+ }
- ${StyledIcon} {
- display: block;
- width: auto;
- height: auto;
- margin-right: 0;
+ ${StyledIcon} {
+ display: block;
+ width: auto;
+ height: auto;
+ margin-right: 0;
- :before {
- font-size: 20px;
- color: var(--colorsActionMajorYang100);
+ :before {
+ font-size: 20px;
+ color: var(--colorsActionMajorYang100);
+ }
}
}
+ `
+ }
}
`}
`}
diff --git a/src/components/badge/badge.test.tsx b/src/components/badge/badge.test.tsx
index d0c3a4ed5f..c0d4f0da44 100644
--- a/src/components/badge/badge.test.tsx
+++ b/src/components/badge/badge.test.tsx
@@ -1,5 +1,6 @@
import React from "react";
import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
import Badge from "./badge.component";
const renderComponent = (props = {}) => render(Foo);
@@ -32,11 +33,42 @@ describe("Badge", () => {
it("should render as a button element when onClick is set", () => {
renderComponent({ counter: 9, onClick: () => {} });
- // FIXME: FE-6575 investigate why toBeVisible() fails to find "9"
- expect(screen.getByText("9")).toBeInTheDocument();
+ expect(screen.getByText("9")).toBeVisible();
expect(screen.getByRole("button")).toBeVisible();
});
+ it("should hide the counter text when the badge is focused and it shows it when it is not focused", () => {
+ renderComponent({ counter: 9, onClick: () => {} });
+
+ const badgeButton = screen.getByRole("button");
+ const badgeText = screen.getByText("9");
+
+ badgeButton.focus();
+
+ expect(badgeText).not.toBeVisible();
+
+ badgeButton.blur();
+
+ expect(badgeText).toBeVisible();
+ });
+
+ it("should hide the counter text when the badge is hovered and it shows it when it is unhovered", async () => {
+ const user = userEvent.setup();
+
+ renderComponent({ counter: 9, onClick: () => {} });
+
+ const badgeButton = screen.getByRole("button");
+ const badgeText = screen.getByText("9");
+
+ await user.hover(badgeButton);
+
+ expect(badgeText).not.toBeVisible();
+
+ await user.unhover(badgeButton);
+
+ expect(badgeText).toBeVisible();
+ });
+
it("should not render as a button if onClick is not set", () => {
renderComponent({ counter: 9 });