Merge branch 'master' into FE-6211

CHANGELOG.md

@@ -1,3 +1,17 @@
+### [142.13.4](https://github.com/Sage/carbon/compare/v142.13.3...v142.13.4) (2024-10-07)
+
+
+### Bug Fixes
+
+* **select:** prevent deprecation warning about uncontrolled textbox from being fired ([6de179c](https://github.com/Sage/carbon/commit/6de179cbae24f36ef8d7a7b122b7ccb8d13ec634)), closes [#6883](https://github.com/Sage/carbon/issues/6883)
+
+### [142.13.3](https://github.com/Sage/carbon/compare/v142.13.2...v142.13.3) (2024-10-04)
+
+
+### Bug Fixes
+
+* **badge:** investigate failing RTL test ([5e1d7d6](https://github.com/Sage/carbon/commit/5e1d7d6f6482b533c6fa9afe88f927293e3576c0))
+
 ### [142.13.2](https://github.com/Sage/carbon/compare/v142.13.1...v142.13.2) (2024-10-04)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "142.13.2",
+  "version": "142.13.4",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",

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 && (
             <StyledCrossIcon data-element="badge-cross-icon" type="cross" />

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);
+            }
           }
         }
+      `
+      }
       }
     `}
   `}

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(<Badge {...props}>Foo</Badge>);
@@ -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 });
 

src/components/select/__internal__/select-textbox/select-textbox.component.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 
-import { CustomSelectChangeEvent } from "../../simple-select/simple-select.component";
 import { SelectTextboxContext } from "./select-textbox.context";
 import {
   StyledSelectText,
@@ -40,10 +39,6 @@ export interface FormInputPropTypes
   name?: string;
   /** Specify a callback triggered on blur */
   onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-  /** Specify a callback triggered on change */
-  onChange?: (
-    ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>
-  ) => void;
   /** Specify a callback triggered on click */
   onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
   /** Specify a callback triggered on focus */
@@ -114,7 +109,6 @@ const SelectTextbox = React.forwardRef(
       onClick,
       onFocus,
       onBlur,
-      onChange,
       formattedValue = "",
       selectedValue,
       required,
@@ -182,7 +176,8 @@ const SelectTextbox = React.forwardRef(
           inputIcon="dropdown"
           autoComplete="off"
           size={size}
-          onChange={onChange}
+          // prevent uncontrolled warning being fired
+          onChange={() => {}}
           formattedValue={formattedValue}
           value={
             hasStringValue ? (selectedValue as string | string[]) : undefined