Merge branch 'master' into FE-6759-select-uncontrolled

CHANGELOG.md

@@ -1,3 +1,24 @@
+### [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)
+
+
+### Bug Fixes
+
+* **date:** add callback to be called when component blurs and picker is closed ([2a7e50e](https://github.com/Sage/carbon/commit/2a7e50e4551b0bff1848dd3fd7424d39eca6f196)), closes [#6788](https://github.com/Sage/carbon/issues/6788)
+
+### [142.13.1](https://github.com/Sage/carbon/compare/v142.13.0...v142.13.1) (2024-10-03)
+
+
+### Bug Fixes
+
+* **form:** allow form-footer content to be responsive ([c7d55e1](https://github.com/Sage/carbon/commit/c7d55e14a44245609a5bd94df8993eb5a6f4b2ba)), closes [#6658](https://github.com/Sage/carbon/issues/6658)
+
 ## [142.13.0](https://github.com/Sage/carbon/compare/v142.12.0...v142.13.0) (2024-10-02)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "142.13.0",
+  "version": "142.13.3",
   "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/date/__internal__/date-picker/date-picker.component.tsx

@@ -57,6 +57,8 @@ export interface DatePickerProps {
   setOpen: (isOpen: boolean) => void;
   /** Id passed to tab guard element */
   pickerTabGuardId?: string;
+  /** Callback triggered when the picker is closed */
+  onPickerClose?: () => void;
 }
 
 const popoverMiddleware = [
@@ -78,6 +80,7 @@ export const DatePicker = ({
   open,
   setOpen,
   pickerTabGuardId,
+  onPickerClose,
 }: DatePickerProps) => {
   const locale = useLocale();
   const { localize, options } = locale.date.dateFnsLocale();
@@ -156,6 +159,7 @@ export const DatePicker = ({
         name,
       } as HTMLInputElement;
       onDayClick?.(date, ev);
+      onPickerClose?.();
     }
   };
 
@@ -165,10 +169,11 @@ export const DatePicker = ({
       if (open && Events.isEscKey(ev)) {
         inputElement.current?.querySelector("input")?.focus();
         setOpen(false);
+        onPickerClose?.();
         ev.stopPropagation();
       }
     },
-    [inputElement, open, setOpen]
+    [inputElement, onPickerClose, open, setOpen]
   );
 
   const handleOnKeyDown = (ev: React.KeyboardEvent<HTMLDivElement>) => {
@@ -181,6 +186,7 @@ export const DatePicker = ({
     ) {
       ev.preventDefault();
       setOpen(false);
+      onPickerClose?.();
       inputElement.current?.querySelector("input")?.focus();
     }
   };
@@ -195,6 +201,7 @@ export const DatePicker = ({
     if (Events.isTabKey(ev) && !Events.isShiftKey(ev)) {
       ev.preventDefault();
       setOpen(false);
+      onPickerClose?.();
       const input = inputElement.current?.querySelector("input");
 
       /* istanbul ignore else */

src/components/date/date-test.stories.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { action } from "@storybook/addon-actions";
 
+import { StoryObj } from "@storybook/react";
 import DateInput, { DateChangeEvent } from "./date.component";
 import {
   CommonTextboxArgs,
@@ -9,6 +10,8 @@ import {
   getCommonTextboxArgsWithSpecialCaracters,
 } from "../textbox/textbox-test.stories";
 import CarbonProvider from "../carbon-provider/carbon-provider.component";
+import Box from "../box";
+import Confirm from "../confirm";
 
 export default {
   title: "Date Input/Test",
@@ -87,3 +90,61 @@ NewValidationStory.args = {
   mt: 0,
   ...getCommonTextboxArgs(),
 };
+
+export const MultipleDates: StoryObj<typeof DateInput> = () => {
+  const [date, setDate] = useState("01/01/24");
+  const [date2, setDate2] = useState("01/01/24");
+  const [showDialog, setShowDialog] = useState(false);
+  const [active, setActive] = useState<null | number>(null);
+
+  return (
+    <Box
+      padding="25px"
+      display="flex"
+      flexDirection="row"
+      gap="var(--spacing200)"
+      minWidth="320px"
+      maxWidth="1024px"
+      boxSizing="border-box"
+    >
+      <DateInput
+        disablePortal
+        label="Component A"
+        onChange={(e) => setDate(e.target.value.formattedValue)}
+        value={date}
+        onPickerOpen={() => {
+          setActive(1);
+        }}
+        onPickerClose={() => {
+          setShowDialog(true);
+        }}
+        disabled={active === 2}
+      />
+      <DateInput
+        disablePortal
+        label="Component B"
+        onChange={(e) => setDate2(e.target.value.formattedValue)}
+        value={date2}
+        onPickerOpen={() => {
+          setActive(2);
+        }}
+        onPickerClose={() => {
+          setShowDialog(true);
+        }}
+        disabled={active === 1}
+      />
+      <Confirm
+        open={showDialog}
+        onConfirm={() => {
+          setShowDialog(false);
+          setActive(null);
+        }}
+      >
+        content
+      </Confirm>
+    </Box>
+  );
+};
+MultipleDates.storyName =
+  "Multiple Dates with onPickerOpen and onPickerClose callbacks";
+MultipleDates.parameters = { chromatic: { disableSnapshot: true } };