Merge branch 'master' into FE-7015

CHANGELOG.md

@@ -1,3 +1,60 @@
+## [144.18.0](https://github.com/Sage/carbon/compare/v144.17.1...v144.18.0) (2024-12-10)
+
+
+### Features
+
+* **multi-select:** add onListScrollBottom ([daeb37a](https://github.com/Sage/carbon/commit/daeb37a4fa5a7c9adcaacc004f165d551c104a1c)), closes [#6752](https://github.com/Sage/carbon/issues/6752)
+
+### [144.17.1](https://github.com/Sage/carbon/compare/v144.17.0...v144.17.1) (2024-12-10)
+
+
+### Bug Fixes
+
+* **vertical-menu-full-screen:** register Fullscreen subcomponent as a Carbon modal ([ed49a9e](https://github.com/Sage/carbon/commit/ed49a9eaa50fb53e2075e750bf70b1cdecc587f9)), closes [#7073](https://github.com/Sage/carbon/issues/7073)
+
+## [144.17.0](https://github.com/Sage/carbon/compare/v144.16.0...v144.17.0) (2024-12-10)
+
+
+### Features
+
+* **menu-fullscreen:** fix colours when menuitem used as child of menusegmenttitle ([7b6ae46](https://github.com/Sage/carbon/commit/7b6ae46056ebc919eb60d8895f5d6cb461379dc8))
+
+## [144.16.0](https://github.com/Sage/carbon/compare/v144.15.0...v144.16.0) (2024-12-09)
+
+
+### Features
+
+* **classname prop:** add deprecation warning to indicate impending removal of className prop ([d838a08](https://github.com/Sage/carbon/commit/d838a082859c5431490127376bcda8baec73576f))
+* **tests:** add deprecation message test coverage ([0fc4090](https://github.com/Sage/carbon/commit/0fc4090298e2dbdf93538b8fc9ce95eb23e9ed21))
+
+## [144.15.0](https://github.com/Sage/carbon/compare/v144.14.0...v144.15.0) (2024-12-06)
+
+
+### Features
+
+* **decimal:** add a deprecation warning for onKeyPress prop ([8e297e6](https://github.com/Sage/carbon/commit/8e297e6311b908b33a952108386be2976d4bd11e))
+
+## [144.14.0](https://github.com/Sage/carbon/compare/v144.13.0...v144.14.0) (2024-12-06)
+
+
+### Features
+
+* **step-sequence:** reinstate component ([7809b0a](https://github.com/Sage/carbon/commit/7809b0a39420e9539910cd6a90428f75c9ed516f))
+
+## [144.13.0](https://github.com/Sage/carbon/compare/v144.12.1...v144.13.0) (2024-12-06)
+
+
+### Features
+
+* **date-input, date-range:** upgrade react-day-picker to v9 ([e217e21](https://github.com/Sage/carbon/commit/e217e2185a45a33d8bb1af0a156339a870f51159))
+
+### [144.12.1](https://github.com/Sage/carbon/compare/v144.12.0...v144.12.1) (2024-12-05)
+
+
+### Bug Fixes
+
+* **popover-container:** ensure that tab sequence is not lost when container has radio buttons ([a843fe8](https://github.com/Sage/carbon/commit/a843fe8be5df9ad728f6ee235c3e2c848808711c)), closes [#7067](https://github.com/Sage/carbon/issues/7067)
+
 ## [144.12.0](https://github.com/Sage/carbon/compare/v144.11.0...v144.12.0) (2024-12-04)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "144.12.0",
+  "version": "144.18.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -194,7 +194,7 @@
     "lodash": "^4.17.21",
     "polished": "^4.2.2",
     "prop-types": "^15.8.1",
-    "react-day-picker": "~7.4.10",
+    "react-day-picker": "^9.3.2",
     "react-dnd": "^15.1.2",
     "react-dnd-html5-backend": "^15.1.3",
     "react-is": "^17.0.2",

playwright/components/date-input/index.ts

@@ -1,9 +1,10 @@
 import type { Page } from "@playwright/test";
+
 import { DAY_PICKER_WRAPPER, DAY_PICKER_HEADING } from "./locators";
 
 // component preview locators
 
 export const dayPickerWrapper = (page: Page) =>
   page.locator(DAY_PICKER_WRAPPER);
 export const dayPickerHeading = (page: Page) =>
-  page.locator(DAY_PICKER_HEADING).locator("div");
+  page.locator(DAY_PICKER_HEADING);

playwright/components/date-input/locators.ts

@@ -1,3 +1,3 @@
 // component preview locators
-export const DAY_PICKER_WRAPPER = 'div[class="DayPicker-wrapper"]';
-export const DAY_PICKER_HEADING = ".DayPicker-Caption";
+export const DAY_PICKER_WRAPPER = 'div[class="rdp-root"]';
+export const DAY_PICKER_HEADING = 'span[class="rdp-caption_label"]';

playwright/components/step-sequence/index.ts

@@ -0,0 +1,16 @@
+import { Page } from "@playwright/test";
+import {
+  STEP_SEQUENCE_ITEM_INDICATOR,
+  STEP_SEQUENCE_DATA_COMPONENT,
+  STEP_SEQUENCE_DATA_COMPONENT_ITEM,
+} from "./locators";
+
+// component preview locators
+export const stepSequenceItemIndicator = (page: Page) =>
+  page.locator(STEP_SEQUENCE_ITEM_INDICATOR).first();
+
+export const stepSequenceDataComponentItem = (page: Page) =>
+  page.locator(STEP_SEQUENCE_DATA_COMPONENT_ITEM);
+
+export const stepSequenceDataComponent = (page: Page) =>
+  page.locator(STEP_SEQUENCE_DATA_COMPONENT);

playwright/components/step-sequence/locators.ts

@@ -0,0 +1,5 @@
+// component preview locators
+export const STEP_SEQUENCE_DATA_COMPONENT_ITEM =
+  '[data-component="step-sequence-item"]';
+export const STEP_SEQUENCE_ITEM_INDICATOR = `${STEP_SEQUENCE_DATA_COMPONENT_ITEM} > span > span`;
+export const STEP_SEQUENCE_DATA_COMPONENT = '[data-component="step-sequence"]';

playwright/support/helper.ts

@@ -193,6 +193,17 @@ export const containsClass = async (
   await expect(locatorFunc).toHaveClass(classNameRegEx);
 };
 
+/**
+ * Uses the .toHaveFocus() assertion with a waitFor before to
+ * ensure the locator is available, and enough time has passed for the focus to be set.
+ * @param locatorFunc the locator you'd like to use
+ * @example await toBeFocusedDelayed(exampleLocator(page));
+ */
+export const toBeFocusedDelayed = async (locatorFunc: Locator) => {
+  await locatorFunc.waitFor({ timeout: 10000 });
+  await expect(locatorFunc).toBeFocused();
+};
+
 const positions = {
   first: 0,
   second: 1,

src/__internal__/focus-trap/focus-trap.component.tsx

@@ -279,7 +279,7 @@ const FocusTrap = ({
     onFocus: updateCurrentFocusedElement,
   });
 
-  // passes focusProps, sets tabIndex and onBlur if no tabIndex has been expicitly set on child
+  // passes focusProps, sets tabIndex and onBlur if no tabIndex has been explicitly set on child
   const clonedChildren = React.Children.map(children, (child) => {
     const focusableChild = child as React.ReactElement;
     return React.cloneElement(

src/__internal__/utils/logger/logger.test.ts

@@ -1,6 +1,6 @@
 import Logger from ".";
 
-test("should not output a warning to the console when logging is disabled", () => {
+test("should not output a warning to the console when logging is disabled and a deprecation message is fired", () => {
   Logger.setEnabledState(false);
   const consoleWarnSpy = jest
     .spyOn(console, "warn")

src/components/button-toggle/button-toggle-group/button-toggle-group.component.tsx

@@ -15,6 +15,7 @@ import { InputGroupBehaviour } from "../../../__internal__/input-behaviour";
 import Events from "../../../__internal__/utils/helpers/events";
 import NewValidationContext from "../../carbon-provider/__internal__/new-validation.context";
 import ButtonToggleGroupContext from "./__internal__/button-toggle-group.context";
+import Logger from "../../../__internal__/utils/logger";
 
 export interface ButtonToggleGroupProps extends MarginProps, TagProps {
   /** Unique id for the root element of the component */
@@ -61,6 +62,7 @@ export interface ButtonToggleGroupProps extends MarginProps, TagProps {
 }
 
 const BUTTON_TOGGLE_SELECTOR = '[data-element="button-toggle-button"]';
+let deprecatedClassNameWarningShown = false;
 
 const ButtonToggleGroup = ({
   children,
@@ -87,6 +89,13 @@ const ButtonToggleGroup = ({
   className,
   ...props
 }: ButtonToggleGroupProps) => {
+  if (!deprecatedClassNameWarningShown && className) {
+    Logger.deprecate(
+      "The 'className' prop has been deprecated and will soon be removed from the 'ButtonToggleGroup' component.",
+    );
+    deprecatedClassNameWarningShown = true;
+  }
+
   const hasCorrectItemStructure = useMemo(() => {
     const incorrectChild = React.Children.toArray(children).find(
       (child: React.ReactNode) => {

src/components/button-toggle/button-toggle-group/button-toggle-group.test.tsx

@@ -4,6 +4,7 @@ import userEvent from "@testing-library/user-event";
 import { ButtonToggle, ButtonToggleGroup } from "..";
 import CarbonProvider from "../../carbon-provider/carbon-provider.component";
 import { testStyledSystemMargin } from "../../../__spec_helper__/__internal__/test-utils";
+import Logger from "../../../__internal__/utils/logger";
 
 test("should render with provided children", () => {
   render(
@@ -372,3 +373,28 @@ testStyledSystemMargin(
   undefined,
   { modifier: "&&&" },
 );
+
+test("throws a deprecation warning if the 'className' prop is set", () => {
+  const loggerSpy = jest
+    .spyOn(Logger, "deprecate")
+    .mockImplementation(() => {});
+  render(
+    <ButtonToggleGroup
+      id="button-toggle-group-id"
+      onChange={() => {}}
+      value="bar"
+      className="foo"
+    >
+      <ButtonToggle value="foo">Foo</ButtonToggle>
+      <ButtonToggle value="bar">Bar</ButtonToggle>
+      <ButtonToggle value="baz">Baz</ButtonToggle>
+    </ButtonToggleGroup>,
+  );
+
+  expect(loggerSpy).toHaveBeenCalledWith(
+    "The 'className' prop has been deprecated and will soon be removed from the 'ButtonToggleGroup' component.",
+  );
+  expect(loggerSpy).toHaveBeenCalledTimes(1);
+
+  loggerSpy.mockRestore();
+});

src/components/button/button.component.tsx

@@ -15,6 +15,7 @@ import { TooltipPositions } from "../tooltip/tooltip.config";
 import ButtonBarContext from "../button-bar/__internal__/button-bar.context";
 import SplitButtonContext from "../split-button/__internal__/split-button.context";
 import BatchSelectionContext from "../batch-selection/__internal__/batch-selection.context";
+import Logger from "../../__internal__/utils/logger";
 
 export type ButtonTypes =
   | "primary"
@@ -93,6 +94,8 @@ export interface ButtonProps extends SpaceProps, TagProps {
   className?: string;
 }
 
+let deprecatedClassNameWarningShown = false;
+
 interface RenderChildrenProps
   extends Pick<
     ButtonProps,
@@ -214,6 +217,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     }: ButtonProps,
     ref,
   ) => {
+    if (!deprecatedClassNameWarningShown && rest.className) {
+      Logger.deprecate(
+        "The 'className' prop has been deprecated and will soon be removed from the 'Button' component.",
+      );
+      deprecatedClassNameWarningShown = true;
+    }
+
     const {
       buttonType: buttonTypeContext,
       size: sizeContext,