Merge branch 'master' into FE-6884

Sage · Jan 31, 2025 · 154179c · 154179c
2 parents 7ecc1b2 + 0e9595d
commit 154179c
Show file tree

Hide file tree

Showing 100 changed files with 413 additions and 1,849 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,36 @@
+## [147.0.0](https://github.com/Sage/carbon/compare/v146.6.1...v147.0.0) (2025-01-29)
+
+
+### ⚠ BREAKING CHANGES
+
+* **classname prop:** - The `className` property has been removed from all components.
+- Accordion: scheme and buttonHeading
+- Box: tabIndex
+- ButtonToggle: grouped
+- Decimal: onKeyPress
+- Icon: 'extra-small' variant
+- Portrait: gravatar
+- SimpleColorPicker: isBlurBlocked
+- ListItem: variant (now inherits from parent List component)
+
+### Features
+
+* **classname prop:** remove className from public props ([1c4fad4](https://github.com/Sage/carbon/commit/1c4fad43ce7bb3ec520bfea146d92390e7473dc4))
+
+### [146.6.1](https://github.com/Sage/carbon/compare/v146.6.0...v146.6.1) (2025-01-28)
+
+
+### Bug Fixes
+
+* **form:** ensure that additional margin-bottom is not applied to NumeralDate component ([648cad7](https://github.com/Sage/carbon/commit/648cad70be79b31426364c3581974eff603a6145)), closes [#7171](https://github.com/Sage/carbon/issues/7171)
+
+## [146.6.0](https://github.com/Sage/carbon/compare/v146.5.3...v146.6.0) (2025-01-28)
+
+
+### Features
+
+* **date:** fix focus loss when using navbar with keyboard ([151a710](https://github.com/Sage/carbon/commit/151a710c23aaf09f4a30fb6eb89ad15ebb0ffe5b)), closes [#7158](https://github.com/Sage/carbon/issues/7158)
+
 ### [146.5.3](https://github.com/Sage/carbon/compare/v146.5.2...v146.5.3) (2025-01-27)
 
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "146.5.3",
+  "version": "147.0.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",

diff --git a/playwright/index.tsx b/playwright/index.tsx
@@ -25,10 +25,7 @@ const mountedTheme = (theme: string) => {
 
 // Setup required providers on mounted component before running test. See https://playwright.dev/docs/test-components#hooks
 beforeMount<HooksConfig>(async ({ App, hooksConfig }) => {
-  const {
-    theme = "sage",
-    validationRedesignOptIn,
-  } = hooksConfig || {};
+  const { theme = "sage", validationRedesignOptIn } = hooksConfig || {};
   return (
     <CarbonProvider
       theme={mountedTheme(theme)}

diff --git a/src/__internal__/label/label.component.tsx b/src/__internal__/label/label.component.tsx
@@ -34,7 +34,10 @@ export interface LabelProps
   useValidationIcon?: boolean;
   /** Id of the validation icon */
   validationIconId?: string;
-  /** Sets className for component */
+  /**
+   * @private
+   * @internal
+   * Sets className for component. INTERNAL USE ONLY. */
   className?: string;
   /** Sets aria-label for label element */
   "aria-label"?: string;

diff --git a/src/components/accordion/accordion-test.stories.tsx b/src/components/accordion/accordion-test.stories.tsx
@@ -44,12 +44,6 @@ export default {
         type: "select",
       },
     },
-    scheme: {
-      options: ["white", "transparent"],
-      control: {
-        type: "select",
-      },
-    },
     variant: {
       options: ["standard", "subtle"],
       control: {

diff --git a/src/components/accordion/accordion.component.tsx b/src/components/accordion/accordion.component.tsx
@@ -4,7 +4,6 @@ import { SpaceProps } from "styled-system";
 import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import Events from "../../__internal__/utils/helpers/events";
-import Logger from "../../__internal__/utils/logger";
 import {
   StyledAccordionContainer,
   StyledAccordionHeadingsContainer,
@@ -21,8 +20,6 @@ import ValidationIcon from "../../__internal__/validations";
 export interface AccordionProps
   extends StyledAccordionContainerProps,
     SpaceProps {
-  /** Width of the buttonHeading when it's set, defaults to 150px */
-  buttonWidth?: number | string;
   /** Content of the Accordion component */
   children?: React.ReactNode;
   /** Set the default state of expansion of the Accordion if component is meant to be used as uncontrolled */
@@ -69,9 +66,6 @@ export interface AccordionInternalProps {
   index?: number;
 }
 
-let deprecatedSchemeWarnTriggered = false;
-let deprecatedButtonHeadingWarnTriggered = false;
-
 export const Accordion = React.forwardRef<
   HTMLDivElement,
   AccordionProps & AccordionInternalProps
@@ -88,7 +82,6 @@ export const Accordion = React.forwardRef<
       index,
       iconType,
       iconAlign,
-      scheme = "white",
       size = "large",
       subTitle,
       title,
@@ -98,28 +91,12 @@ export const Accordion = React.forwardRef<
       error,
       warning,
       info,
-      buttonHeading,
-      buttonWidth = "150px",
       openTitle,
       variant = "standard",
       ...rest
     }: AccordionProps & AccordionInternalProps,
     ref,
   ) => {
-    if (!deprecatedSchemeWarnTriggered && scheme === "transparent") {
-      deprecatedSchemeWarnTriggered = true;
-      Logger.deprecate(
-        "The `scheme` prop for `Accordion` component is deprecated and will soon be removed.",
-      );
-    }
-
-    if (!deprecatedButtonHeadingWarnTriggered && buttonHeading) {
-      deprecatedButtonHeadingWarnTriggered = true;
-      Logger.deprecate(
-        "The `buttonHeading` prop for `Accordion` component is deprecated and will soon be removed. Please use `subtle` variant instead.",
-      );
-    }
-
     const isControlled = expanded !== undefined;
 
     const [isExpandedInternal, setIsExpandedInternal] = useState(
@@ -185,8 +162,6 @@ export const Accordion = React.forwardRef<
         data-role="accordion-container"
         width={width}
         borders={variant === "subtle" ? "none" : borders}
-        scheme={scheme}
-        buttonHeading={buttonHeading}
         variant={variant}
         {...rest}
       >
@@ -201,34 +176,24 @@ export const Accordion = React.forwardRef<
           iconAlign={iconAlign || (variant === "standard" ? "right" : "left")}
           ref={ref}
           size={size}
-          buttonHeading={buttonHeading}
           isExpanded={isExpanded}
           variant={variant}
-          buttonWidth={buttonWidth}
-          hasButtonProps={
-            buttonHeading && !(typeof headerSpacing === "undefined")
-          }
           role="button"
-          {...(buttonHeading && { p: 0 })}
           {...headerSpacing}
         >
           <StyledAccordionHeadingsContainer
             data-element="accordion-headings-container"
             hasValidationIcon={showValidationIcon}
-            buttonHeading={buttonHeading}
           >
-            {!buttonHeading && typeof title === "string" ? (
-              <StyledAccordionTitle
-                data-element="accordion-title"
-                size={size}
-                variant={variant}
-              >
-                {title}
-              </StyledAccordionTitle>
-            ) : (
-              getTitle()
-            )}
-            {!buttonHeading && variant !== "subtle" && (
+            <StyledAccordionTitle
+              data-element="accordion-title"
+              size={size}
+              variant={variant}
+            >
+              {getTitle()}
+            </StyledAccordionTitle>
+
+            {variant !== "subtle" && (
               <>
                 {showValidationIcon && (
                   <ValidationIcon

diff --git a/src/components/accordion/accordion.mdx b/src/components/accordion/accordion.mdx
@@ -76,20 +76,14 @@ const MyComponent = () => (
 
 The default version of `Accordion` has a white background and no side borders.
 
-<Canvas of={AccordionStories.AccordionDefault} />
+<Canvas of={AccordionStories.Default} />
 
 ### With disabled content padding
 
 The internal padding of the `Accordion` can be removed by setting the `disableContentPadding` prop to `true`.
 
 <Canvas of={AccordionStories.WithDisableContentPadding} />
 
-### Transparent
-
-The `Accordion` can be rendered with a transparent background by setting the scheme to `transparent`.
-
-<Canvas of={AccordionStories.Transparent} />
-
 ### Small
 
 To use a smaller `Accordion`, set the size prop to `small`. The small version has a smaller heading, less padding and a smaller icon. If this prop is not provided, or set to `large`, the default size will be used.
@@ -124,19 +118,19 @@ The icon showing the state of the `Accordion` can be left-aligned by setting the
 
 The default width of 100% can be overriden by setting the `width` prop to a custom value.
 
-<Canvas of={AccordionStories.DifferentWidth} />
+<Canvas of={AccordionStories.CustomWidth} />
 
 ### With custom padding and margins
 
 An `Accordion` can be rendered with different padding and margin by setting the `padding` and `margin` props.
 
-<Canvas of={AccordionStories.WithDifferentPaddingAndMargin} />
+<Canvas of={AccordionStories.WithCustomPaddingAndMargins} />
 
 ### With custom title padding and margins
 
 An `Accordion` title can be rendered with different padding and margin by passing the desired configuration object to the `headerSpacing` prop.
 
-<Canvas of={AccordionStories.WithDifferentPaddingAndMarginInAccordionTitle} />
+<Canvas of={AccordionStories.WithCustomTitlePaddingAndMargins} />
 
 ### Grouped
 
@@ -158,9 +152,9 @@ An `Accordion`  will automatically adjust its height to fit the content inside i
 
 ### Subtle variant
 
-Setting the `variant` prop to `subtle` will override the default styling of an Accordion. The `subTitle` and `scheme` props will have no effect when used alongside this variant, nor will the validation props (`error`, `warning`, and `info`).
+Setting the `variant` prop to `subtle` will override the default styling of an Accordion. The `subTitle` prop will have no effect when used alongside this variant, nor will the validation props (`error`, `warning`, and `info`).
 
-<Canvas of={AccordionStories.AccordionSubtle} />
+<Canvas of={AccordionStories.SubtleVariant} />
 
 ## Props
 

diff --git a/src/components/accordion/accordion.pw.tsx b/src/components/accordion/accordion.pw.tsx
@@ -31,7 +31,6 @@ import {
   DynamicContent,
   AccordionDefault,
   AccordionWithBoxAndDifferentPaddings,
-  AccordionOpeningButton,
   AccordionGroupDefault,
   AccordionGroupValidation,
   AccordionWithDefinitionList,
@@ -292,22 +291,6 @@ test.describe("should render Accordion component", () => {
     });
   });
 
-  (
-    [
-      ["white", "rgb(255, 255, 255)"],
-      ["transparent", "rgba(0, 0, 0, 0)"],
-    ] as const
-  ).forEach(([scheme, colour]) => {
-    test(`should check Accordion scheme is ${scheme}`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<AccordionComponent scheme={scheme} />);
-
-      await expect(accordion(page)).toHaveCSS("background-color", colour);
-    });
-  });
-
   ["700px", "900px", "1100px", "1300px"].forEach((width) => {
     test(`should check Accordion width is ${width}`, async ({
       mount,
@@ -368,27 +351,11 @@ test.describe("should render Accordion component", () => {
     await expect(accordionIcon(page).nth(0)).toHaveAttribute("type", "info");
   });
 
-  ["100px", "200px", "300px"].forEach((width) => {
-    test(`should check accordion heading is a button with width ${width}`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(
-        <AccordionComponent title="Button" buttonHeading buttonWidth={width} />,
-      );
-
-      const cssWidth = await getStyle(accordionTitleContainer(page), "width");
-      expect(cssWidth).toContain(width);
-    });
-  });
-
   test("should verify accordion title changes when accordion is opened", async ({
     mount,
     page,
   }) => {
-    await mount(
-      <AccordionComponent buttonHeading title="Closed" openTitle="Open" />,
-    );
+    await mount(<AccordionComponent title="Closed" openTitle="Open" />);
 
     await expect(accordionTitleContainer(page)).toContainText("Closed");
 
@@ -536,15 +503,6 @@ test.describe("Accessibility tests for Accordion", () => {
     await checkAccessibility(page);
   });
 
-  test("should pass accessibility tests for Accordion transparent", async ({
-    mount,
-    page,
-  }) => {
-    await mount(<AccordionDefault scheme="transparent" />);
-
-    await checkAccessibility(page);
-  });
-
   test("should pass accessibility tests for Accordion size small", async ({
     mount,
     page,
@@ -644,15 +602,6 @@ test.describe("Accessibility tests for Accordion", () => {
     await checkAccessibility(page);
   });
 
-  test("should pass accessibility tests for Accordion with opening buttons", async ({
-    mount,
-    page,
-  }) => {
-    await mount(<AccordionOpeningButton />);
-
-    await checkAccessibility(page);
-  });
-
   test("should pass accessibility tests for AccordionGroup", async ({
     mount,
     page,