feat(classname prop): remove className from public props

The following properties have been removed from the listed components. Ensure any components in the list below do not contain the associated properties. BREAKING CHANGE: - 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)
Sage · Jan 14, 2025 · 1810ccf · 1810ccf
1 parent cea1334
commit 1810ccf
Show file tree

Hide file tree

Showing 91 changed files with 216 additions and 1,715 deletions.
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 */
   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
@@ -41,12 +41,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
@@ -75,12 +75,6 @@ Accordion without padding inside of the content.
 
 <Canvas of={AccordionStories.WithDisableContentPadding} />
 
-### Transparent
-
-Transparent scheme has transparent background.
-
-<Canvas of={AccordionStories.Transparent} />
-
 ### Small
 
 Small version has a smaller heading, less padding and a smaller icon.
@@ -159,7 +153,6 @@ Accordion with a definiton list
 ### Subtle Variant
 
 Setting the `variant` prop to `subtle` will override the default styling of an Accordion.
-`subTitle` will not be rendered and the `scheme` prop will have no effect when used in combination with this variant.
 
 This is not currently designed to be used within a form using validation.
 

diff --git a/src/components/accordion/accordion.pw.tsx b/src/components/accordion/accordion.pw.tsx
@@ -292,22 +292,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 +352,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 +504,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,

diff --git a/src/components/accordion/accordion.stories.tsx b/src/components/accordion/accordion.stories.tsx
@@ -61,18 +61,6 @@ WithDisableContentPadding.parameters = {
   chromatic: { disableSnapshot: false },
 };
 
-export const Transparent: Story = () => {
-  return (
-    <Accordion scheme="transparent" title="Heading">
-      <Box mt={2}>Content</Box>
-      <Box>Content</Box>
-      <Box>Content</Box>
-    </Accordion>
-  );
-};
-Transparent.storyName = "Transparent";
-Transparent.parameters = { chromatic: { disableSnapshot: false } };
-
 export const Small: Story = () => {
   return (
     <Accordion size="small" title="Heading">
@@ -223,7 +211,7 @@ export const WithBoxComponentAndDifferentPaddings: Story = () => {
       <Accordion
         disableContentPadding
         headerSpacing={{ p: 3 }}
-        title="Accordion with a very long title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in ornare neque. Maecenas pellentesque et erat tincidunt mollis. 
+        title="Accordion with a very long title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in ornare neque. Maecenas pellentesque et erat tincidunt mollis.
                 Etiam diam nisi, elementum efficitur ipsum et, imperdiet iaculis ligula. "
       >
         <Box p={3} pr="29px">