feat: remove roundedCornersOptOut feature flag

This update removes the `roundedCornersOptOut` feature flag, consumers can no longer opt out of the rounded corners styling BREAKING CHANGE: The `roundedCornersOptOut` feature flag has been removed completely. If passed to the `CarbonProvider` it will need to be removed, if consumers are also relying on previous non-rounded corners styling this will also no longer be available.
Sage · Nov 14, 2024 · 95b30d6 · 95b30d6
1 parent c810d5c
commit 95b30d6
Show file tree

Hide file tree

Showing 24 changed files with 42 additions and 401 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -58,19 +58,6 @@ const globalTypes = {
       ],
     },
   },
-  roundedCorners: {
-    name: "Rounded Corners",
-    description: "Toggle rounded corner opt out",
-    defaultValue: "on",
-    toolbar: {
-      icon: "circlehollow",
-      title: "Rounded corners",
-      items: [
-        { value: "on", title: "On" },
-        { value: "off", title: "Off" },
-      ],
-    },
-  },
   focusRedesign: {
     name: "Double focus style",
     description: "Toggle the focus styling redesign",

diff --git a/.storybook/withThemeProvider.js b/.storybook/withThemeProvider.js
@@ -16,15 +16,9 @@ if (process.env.STORYBOOK_DEBUG_THEME === "true") {
   themes["sage-debug"] = sageDebugTheme;
 }
 
-const render = (
-  Story,
-  themeName,
-  roundedCornersOptOut,
-  focusRedesignOptOut
-) => (
+const render = (Story, themeName, focusRedesignOptOut) => (
   <CarbonProvider
     theme={themes[themeName]}
-    roundedCornersOptOut={roundedCornersOptOut}
     focusRedesignOptOut={focusRedesignOptOut}
   >
     <Story themeName={themeName} />
@@ -50,7 +44,7 @@ const withThemeProvider = makeDecorator({
           fourColumnLayout: false,
         },
       },
-    }
+    },
   ) => {
     const { theme: chromaticTheme, fourColumnLayout } = parameters.chromatic;
     const isChromaticBuild = isChromatic();
@@ -68,8 +62,7 @@ const withThemeProvider = makeDecorator({
               {render(
                 Story,
                 themeName,
-                context.globals.roundedCorners === "off",
-                context.globals.focusRedesign === "off"
+                context.globals.focusRedesign === "off",
               )}
             </div>
           ))}
@@ -82,8 +75,7 @@ const withThemeProvider = makeDecorator({
       isChromaticBuild && chromaticTheme
         ? chromaticTheme
         : context.globals.theme,
-      context.globals.roundedCorners === "off",
-      context.globals.focusRedesign === "off"
+      context.globals.focusRedesign === "off",
     );
   },
 });

diff --git a/playwright/index.tsx b/playwright/index.tsx
@@ -9,7 +9,6 @@ import "../src/style/fonts.css";
 import * as dateLocales from "./support/date-fns-locales";
 
 export type HooksConfig = {
-  roundedCornersOptOut?: boolean;
   focusRedesignOptOut?: boolean;
   validationRedesignOptIn?: boolean;
   theme?: string;
@@ -43,7 +42,6 @@ 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 {
-    roundedCornersOptOut,
     focusRedesignOptOut,
     theme = "sage",
     localeName,
@@ -52,7 +50,6 @@ beforeMount<HooksConfig>(async ({ App, hooksConfig }) => {
   return (
     <CarbonProvider
       theme={mountedTheme(theme)}
-      roundedCornersOptOut={roundedCornersOptOut}
       focusRedesignOptOut={focusRedesignOptOut}
       validationRedesignOptIn={validationRedesignOptIn}
     >

diff --git a/src/components/box/box.style.ts b/src/components/box/box.style.ts
@@ -30,11 +30,8 @@ const StyledBox = styled.div<BoxProps>`
   ${grid}
   ${calculatePosition}
 
-  ${({ theme, borderRadius = "borderRadius000" }) =>
-    !theme.roundedCornersOptOut &&
-    css`
-      border-radius: var(--${borderRadius});
-    `}
+  ${({ borderRadius = "borderRadius000" }) =>
+    `border-radius: var(--${borderRadius});`}
 
   ${({ color, bg, backgroundColor, ...rest }) =>
     styledColor({ color, bg, backgroundColor, ...rest })}

diff --git a/src/components/button-minor/button-minor.pw.tsx b/src/components/button-minor/button-minor.pw.tsx
@@ -91,25 +91,14 @@ test.describe("check Focus Outline & Border Radius for Button Minor Component",
     await expect(outlined).toHaveCSS("outline", "rgb(255, 188, 25) solid 3px");
   });
 
-  test("should have the expected styling when roundedCornersOptOut is false", async ({
+  test("should have the expected border radius styling", async ({
     mount,
     page,
   }) => {
     await mount(<ButtonMinor>Foo</ButtonMinor>);
 
     await expect(buttonMinorComponent(page)).toHaveCSS("border-radius", "4px");
   });
-
-  test("should have the expected styling when roundedCornersOptOut is true", async ({
-    mount,
-    page,
-  }) => {
-    await mount<HooksConfig>(<ButtonMinor>Foo</ButtonMinor>, {
-      hooksConfig: { roundedCornersOptOut: true },
-    });
-
-    await expect(buttonMinorComponent(page)).toHaveCSS(`border-radius`, "0px");
-  });
 });
 
 test.describe("Check props for Button Minor component", () => {

diff --git a/src/components/button/button.pw.tsx b/src/components/button/button.pw.tsx
@@ -294,24 +294,12 @@ test.describe("When focused", () => {
   });
 });
 
-test.describe("Border radius", () => {
-  test("should have the expected styling when roundedCornersOptOut is false", async ({
-    mount,
-    page,
-  }) => {
-    await mount(<Button>Foo</Button>);
-    await expect(buttonDataComponent(page)).toHaveCSS(`border-radius`, "32px");
-  });
-
-  test("should have the expected styling when roundedCornersOptOut is true", async ({
-    mount,
-    page,
-  }) => {
-    await mount<HooksConfig>(<Button>Foo</Button>, {
-      hooksConfig: { roundedCornersOptOut: true },
-    });
-    await expect(buttonDataComponent(page)).toHaveCSS(`border-radius`, "0px");
-  });
+test("should have the expected border radius styling", async ({
+  mount,
+  page,
+}) => {
+  await mount(<Button>Foo</Button>);
+  await expect(buttonDataComponent(page)).toHaveCSS(`border-radius`, "32px");
 });
 
 test.describe("Accessibility tests for Button", () => {

diff --git a/src/components/carbon-provider/__internal__/new-validation.context.ts b/src/components/carbon-provider/__internal__/new-validation.context.ts
@@ -5,10 +5,6 @@ export interface NewValidationContextProps {
    *
    * NOTE - Will eventually be set to `true` by default in the future. */
   validationRedesignOptIn?: boolean;
-  /** (Deprecated) Feature flag for opting out of styling components to have rounded corners.
-   *
-   * NOTE - This feature flag will soon be removed, along with the legacy styling. */
-  roundedCornersOptOut?: boolean;
   /** (Deprecated) Feature flag for opting out of the focus redesign.
    *
    * NOTE -  This feature flag will soon be removed, along with the legacy styling. */

diff --git a/src/components/carbon-provider/carbon-provider-test.stories.tsx b/src/components/carbon-provider/carbon-provider-test.stories.tsx
@@ -15,9 +15,6 @@ const meta: Meta<typeof CarbonProvider> = {
     validationRedesignOptIn: {
       control: false,
     },
-    roundedCornersOptOut: {
-      control: false,
-    },
   },
   parameters: {
     themeProvider: { chromatic: { theme: "sage" } },

diff --git a/src/components/carbon-provider/carbon-provider.component.tsx b/src/components/carbon-provider/carbon-provider.component.tsx
@@ -18,34 +18,20 @@ export interface CarbonProviderProps extends NewValidationContextProps {
   theme?: Partial<ThemeObject>;
 }
 
-let deprecatedRoundedCornersOptOut = false;
 let deprecatedFocusRedesignOptOut = false;
 
 export const CarbonProvider = ({
   children,
   theme = sageTheme,
   validationRedesignOptIn = false,
-  roundedCornersOptOut = false,
   focusRedesignOptOut = false,
 }: CarbonProviderProps) => {
-  const {
-    roundedCornersOptOut: existingRoundedCornersOptOut,
-    focusRedesignOptOut: existingFocusRedesignOptOut,
-  } = useContext(NewValidationContext);
+  const { focusRedesignOptOut: existingFocusRedesignOptOut } =
+    useContext(NewValidationContext);
 
-  const roundedCornersOptOutValue =
-    existingRoundedCornersOptOut || roundedCornersOptOut;
   const focusRedesignOptOutValue =
     existingFocusRedesignOptOut || focusRedesignOptOut;
 
-  if (!deprecatedRoundedCornersOptOut && roundedCornersOptOutValue) {
-    deprecatedRoundedCornersOptOut = true;
-    Logger.deprecate(
-      "The `roundedCornersOptOut` feature flag has been deprecated and will soon be removed. " +
-        "Along with this feature flag, the legacy pre-rounded corners styling will also be removed. ",
-    );
-  }
-
   if (!deprecatedFocusRedesignOptOut && focusRedesignOptOutValue) {
     deprecatedFocusRedesignOptOut = true;
     Logger.deprecate(
@@ -58,15 +44,13 @@ export const CarbonProvider = ({
     <ThemeProvider
       theme={{
         ...theme,
-        roundedCornersOptOut: roundedCornersOptOutValue,
         focusRedesignOptOut: focusRedesignOptOutValue,
       }}
     >
       <CarbonScopedTokensProvider>
         <NewValidationContext.Provider
           value={{
             validationRedesignOptIn,
-            roundedCornersOptOut: roundedCornersOptOutValue,
           }}
         >
           <TopModalProvider>{children}</TopModalProvider>

diff --git a/src/components/carbon-provider/carbon-provider.test.tsx b/src/components/carbon-provider/carbon-provider.test.tsx
@@ -3,30 +3,6 @@ import { render } from "@testing-library/react";
 import CarbonProvider from ".";
 import Logger from "../../__internal__/utils/logger";
 
-test("logs a deprecation warning once when the `roundedCornersOptOut` feature flag is `true`", () => {
-  const loggerSpy = jest
-    .spyOn(Logger, "deprecate")
-    .mockImplementation(() => {});
-
-  render(
-    <>
-      <CarbonProvider roundedCornersOptOut>
-        <CarbonProvider>Hello World!</CarbonProvider>
-      </CarbonProvider>
-      <CarbonProvider roundedCornersOptOut>
-        <CarbonProvider>Hello World!</CarbonProvider>
-      </CarbonProvider>
-    </>,
-  );
-
-  expect(loggerSpy).toHaveBeenCalledWith(
-    "The `roundedCornersOptOut` feature flag has been deprecated and will soon be removed. " +
-      "Along with this feature flag, the legacy pre-rounded corners styling will also be removed. ",
-  );
-  expect(loggerSpy).toHaveBeenCalledTimes(1);
-  loggerSpy.mockRestore();
-});
-
 test("logs a deprecation warning once when the `focusRedesignOptOut` feature flag is `true`", () => {
   const loggerSpy = jest
     .spyOn(Logger, "deprecate")

diff --git a/src/components/loader/loader-square.style.ts b/src/components/loader/loader-square.style.ts
@@ -23,12 +23,7 @@ const loaderAnimation = keyframes`
   }
 `;
 
-type RoundedCornersOptOut = boolean;
-
-const getDimentions = (
-  size: StyledLoaderSquareProps["size"],
-  roundedCornersOptOut: RoundedCornersOptOut,
-) => {
+const getDimentions = (size: StyledLoaderSquareProps["size"]) => {
   let width;
   let marginRight;
 
@@ -50,7 +45,6 @@ const getDimentions = (
     width: ${width};
     height: ${width};
     margin-right: ${marginRight};
-    ${!roundedCornersOptOut && "border-radius: var(--borderRadiusCircle);"}
   `;
 };
 
@@ -59,7 +53,8 @@ const StyledLoaderSquare = styled.div<StyledLoaderSquareProps>`
     animation: ${loaderAnimation} 1s infinite ease-in-out both;
     background-color: ${backgroundColor};
     display: inline-block;
-    ${getDimentions(size, theme.roundedCornersOptOut)}
+    ${getDimentions(size)}
+    border-radius: var(--borderRadiusCircle);
 
     ${isInsideButton &&
     css`

diff --git a/src/components/loader/loader.pw.tsx b/src/components/loader/loader.pw.tsx
@@ -142,9 +142,7 @@ test.describe("check props for Loader component test", () => {
     mount,
     page,
   }) => {
-    await mount<HooksConfig>(<Loader />, {
-      hooksConfig: { roundedCornersOptOut: false },
-    });
+    await mount(<Loader />);
 
     const borderRadius = await getStyle(loader(page, 0), "border-radius");