From 95b30d6f65d6b7cee5a84d3b64b84f53891fc89c Mon Sep 17 00:00:00 2001 From: "tom.davies" Date: Mon, 11 Nov 2024 15:54:29 +0000 Subject: [PATCH] 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. --- .storybook/preview.ts | 13 ---- .storybook/withThemeProvider.js | 16 ++--- playwright/index.tsx | 3 - src/components/box/box.style.ts | 7 +-- .../button-minor/button-minor.pw.tsx | 13 +--- src/components/button/button.pw.tsx | 24 ++------ .../__internal__/new-validation.context.ts | 4 -- .../carbon-provider-test.stories.tsx | 3 - .../carbon-provider.component.tsx | 20 +----- .../carbon-provider/carbon-provider.test.tsx | 24 -------- src/components/loader/loader-square.style.ts | 11 +--- src/components/loader/loader.pw.tsx | 4 +- src/components/pill/pill.style.ts | 58 ++---------------- src/components/pill/pill.test.tsx | 61 ------------------- .../portrait/portrait.component.tsx | 11 ++-- src/components/portrait/portrait.test.tsx | 13 ---- src/components/preview/preview.pw.tsx | 26 ++------ .../progress-tracker.style.ts | 12 ++-- .../progress-tracker.test.tsx | 15 ----- .../__internal__/switch-slider.style.ts | 18 +----- .../__internal__/switch-slider.test.tsx | 27 -------- ...carbon-scoped-tokens-provider.component.ts | 8 +-- .../generate-css-variables.util.test.tsx | 36 ----------- .../generate-css-variables.util.ts | 16 +---- 24 files changed, 42 insertions(+), 401 deletions(-) diff --git a/.storybook/preview.ts b/.storybook/preview.ts index b2d3033f1c..c78d52d4c2 100644 --- 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 index 57e27df0aa..0298992151 100644 --- 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) => ( @@ -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", )} ))} @@ -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 index 1f170059ca..1b150762e8 100644 --- 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(async ({ App, hooksConfig }) => { const { - roundedCornersOptOut, focusRedesignOptOut, theme = "sage", localeName, @@ -52,7 +50,6 @@ beforeMount(async ({ App, hooksConfig }) => { return ( diff --git a/src/components/box/box.style.ts b/src/components/box/box.style.ts index 899a854b99..3ad1c14ff6 100644 --- a/src/components/box/box.style.ts +++ b/src/components/box/box.style.ts @@ -30,11 +30,8 @@ const StyledBox = styled.div` ${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 index 5070c215a7..6f08760868 100644 --- a/src/components/button-minor/button-minor.pw.tsx +++ b/src/components/button-minor/button-minor.pw.tsx @@ -91,7 +91,7 @@ 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, }) => { @@ -99,17 +99,6 @@ test.describe("check Focus Outline & Border Radius for Button Minor Component", await expect(buttonMinorComponent(page)).toHaveCSS("border-radius", "4px"); }); - - test("should have the expected styling when roundedCornersOptOut is true", async ({ - mount, - page, - }) => { - await mount(Foo, { - 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 index 05b1ff58ff..c5cb9007c0 100644 --- 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(); - await expect(buttonDataComponent(page)).toHaveCSS(`border-radius`, "32px"); - }); - - test("should have the expected styling when roundedCornersOptOut is true", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { roundedCornersOptOut: true }, - }); - await expect(buttonDataComponent(page)).toHaveCSS(`border-radius`, "0px"); - }); +test("should have the expected border radius styling", async ({ + mount, + page, +}) => { + await mount(); + 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 index dd308c74c6..bd454bbf27 100644 --- 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 index 1f72c9e9ab..6fc060dae2 100644 --- 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 = { 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 index 0df5a34d19..dc7ab40443 100644 --- 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; } -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,7 +44,6 @@ export const CarbonProvider = ({ @@ -66,7 +51,6 @@ export const CarbonProvider = ({ {children} diff --git a/src/components/carbon-provider/carbon-provider.test.tsx b/src/components/carbon-provider/carbon-provider.test.tsx index 7a9ad7ed36..d1cf7111ba 100644 --- 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( - <> - - Hello World! - - - Hello World! - - , - ); - - 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 index c909a7d9d3..8ca914dd5b 100644 --- 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` 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 index c3adafa9ce..1604cf4870 100644 --- 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: { roundedCornersOptOut: false }, - }); + await mount(); const borderRadius = await getStyle(loader(page, 0), "border-radius"); diff --git a/src/components/pill/pill.style.ts b/src/components/pill/pill.style.ts index 0e59dfeb04..e09f93a212 100644 --- a/src/components/pill/pill.style.ts +++ b/src/components/pill/pill.style.ts @@ -92,10 +92,7 @@ const StyledPill = styled.span` align-items: center; justify-content: center; border: 2px solid ${pillColor}; - ${!theme.roundedCornersOptOut && - css` - border-radius: var(--borderRadius025); - `} + border-radius: var(--borderRadius025); height: auto; ${!wrapText && @@ -129,11 +126,6 @@ const StyledPill = styled.span` line-height: 16px; font-size: 12px; padding: 0 8px; - - ${theme.roundedCornersOptOut && - css` - border-radius: 12px; - `} `} ${size === "M" && @@ -142,11 +134,6 @@ const StyledPill = styled.span` line-height: 20px; font-size: 14px; padding: 0 8px; - - ${theme.roundedCornersOptOut && - css` - border-radius: 12px; - `} `} ${size === "L" && @@ -155,11 +142,6 @@ const StyledPill = styled.span` line-height: 24px; font-size: 14px; padding: 0 8px; - - ${theme.roundedCornersOptOut && - css` - border-radius: 13px; - `} `} ${size === "XL" && @@ -168,21 +150,13 @@ const StyledPill = styled.span` line-height: 28px; font-size: 16px; padding: 0 12px; - - ${theme.roundedCornersOptOut && - css` - border-radius: 15px; - `} `} ${isDeletable && css` ${StyledIconButton} { -webkit-appearance: none; - ${!theme.roundedCornersOptOut && - css` - border-radius: var(--borderRadius000); - `} + border-radius: var(--borderRadius000); border: none; bottom: 0; font-size: 100%; @@ -202,12 +176,8 @@ const StyledPill = styled.span` `} background-color: ${buttonFocusColor}; - ${!theme.roundedCornersOptOut && - css` - border-radius: var(--borderRadius000) var(--borderRadius025) - var(--borderRadius025) var(--borderRadius000); - `} - + border-radius: var(--borderRadius000) var(--borderRadius025) + var(--borderRadius025) var(--borderRadius000); ::-moz-focus-inner { border: 0; } @@ -255,11 +225,6 @@ const StyledPill = styled.span` font-size: 16px; } } - - ${theme.roundedCornersOptOut && - css` - border-radius: 0 10px 10px 0; - `} } `} @@ -271,11 +236,6 @@ const StyledPill = styled.span` width: 24px; padding: 0; line-height: 15px; - - ${theme.roundedCornersOptOut && - css` - border-radius: 0 10px 10px 0; - `} } `} @@ -287,11 +247,6 @@ const StyledPill = styled.span` width: 28px; padding: 0; line-height: 16px; - - ${theme.roundedCornersOptOut && - css` - border-radius: 0 11px 11px 0; - `} } `} @@ -303,11 +258,6 @@ const StyledPill = styled.span` width: 32px; padding: 0; line-height: 18px; - - ${theme.roundedCornersOptOut && - css` - border-radius: 0 12px 12px 0; - `} } `} `} diff --git a/src/components/pill/pill.test.tsx b/src/components/pill/pill.test.tsx index d2d6dfe845..68da1e1c39 100644 --- a/src/components/pill/pill.test.tsx +++ b/src/components/pill/pill.test.tsx @@ -2,7 +2,6 @@ import React from "react"; import { render, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import Pill from "."; -import CarbonProvider from "../carbon-provider"; import { testStyledSystemMargin } from "../../__spec_helper__/__internal__/test-utils"; import { baseTheme } from "../../style/themes"; import { toColor } from "../../style/utils/color"; @@ -194,66 +193,6 @@ test("should render with expected styles when size is XL and onDelete is set", ( }); }); -test("should render with expected styles when size is S and roundedCornersOptOut is true", () => { - render( - - {}}> - Test Pill - - , - ); - - expect(screen.getByText("Test Pill")).toHaveStyle({ borderRadius: "12px" }); - expect(screen.getByRole("button")).toHaveStyle({ - borderRadius: "0 10px 10px 0", - }); -}); - -test("should render with expected styles when size is M and roundedCornersOptOut is true", () => { - render( - - {}}> - Test Pill - - , - ); - - expect(screen.getByText("Test Pill")).toHaveStyle({ borderRadius: "12px" }); - expect(screen.getByRole("button")).toHaveStyle({ - borderRadius: "0 10px 10px 0", - }); -}); - -test("should render with expected styles when size is L and roundedCornersOptOut is true", () => { - render( - - {}}> - Test Pill - - , - ); - - expect(screen.getByText("Test Pill")).toHaveStyle({ borderRadius: "13px" }); - expect(screen.getByRole("button")).toHaveStyle({ - borderRadius: "0 11px 11px 0", - }); -}); - -test("should render with expected styles when size is XL and roundedCornersOptOut is true", () => { - render( - - {}}> - Test Pill - - , - ); - - expect(screen.getByText("Test Pill")).toHaveStyle({ borderRadius: "15px" }); - expect(screen.getByRole("button")).toHaveStyle({ - borderRadius: "0 12px 12px 0", - }); -}); - test("should render with expected styles when colorVariant is neutral", async () => { const user = userEvent.setup(); render( diff --git a/src/components/portrait/portrait.component.tsx b/src/components/portrait/portrait.component.tsx index 74cdac77cf..0384c1889d 100644 --- a/src/components/portrait/portrait.component.tsx +++ b/src/components/portrait/portrait.component.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState, useContext } from "react"; +import React, { useEffect, useState } from "react"; import { MarginProps } from "styled-system"; import MD5 from "crypto-js/md5"; import invariant from "invariant"; @@ -16,7 +16,6 @@ import { StyledPortraitGravatar, } from "./portrait.style"; import { filterStyledSystemMarginProps } from "../../style/utils"; -import RoundedCornersOptOutContext from "../carbon-provider/__internal__/new-validation.context"; export type PortraitShapes = "circle" | "square"; @@ -70,7 +69,7 @@ const Portrait = ({ gravatar = "", iconType = "individual", initials, - shape, + shape = "circle", size = "M", src, onClick, @@ -85,8 +84,6 @@ const Portrait = ({ ...rest }: PortraitProps) => { const [externalError, setExternalError] = useState(false); - const { roundedCornersOptOut } = useContext(RoundedCornersOptOutContext); - const defaultShape = roundedCornersOptOut ? "square" : "circle"; invariant( !(src && gravatar), @@ -170,7 +167,7 @@ const Portrait = ({ {...tagProps} darkBackground={darkBackground} size={size} - shape={shape || defaultShape} + shape={shape} > {portrait} @@ -185,7 +182,7 @@ const Portrait = ({ {...tagProps} darkBackground={darkBackground} size={size} - shape={shape || defaultShape} + shape={shape} > {portrait} diff --git a/src/components/portrait/portrait.test.tsx b/src/components/portrait/portrait.test.tsx index 0fe3a59ec7..1017b28f9c 100644 --- a/src/components/portrait/portrait.test.tsx +++ b/src/components/portrait/portrait.test.tsx @@ -5,7 +5,6 @@ import MD5 from "crypto-js/md5"; import Logger from "../../__internal__/utils/logger"; import Portrait from "."; import { testStyledSystemMargin } from "../../__spec_helper__/__internal__/test-utils"; -import CarbonProvider from "../carbon-provider"; testStyledSystemMargin( (props) => , @@ -151,18 +150,6 @@ test("renders with a circle shape, if the `shape` prop is value is `circle`", () expect(portrait).toHaveStyle("border-radius: var(--borderRadiusCircle)"); }); -test("if a consumer opts out to rounded corners, the `Portrait` shape is a square", () => { - render( - - - , - ); - - const portrait = screen.getByTestId("portrait"); - expect(portrait).toHaveAttribute("shape", "square"); - expect(portrait).toHaveStyle("border-radius: 0px"); -}); - test("renders a tooltip, populated with a custom value that is passed to the 'tooltipMessage' prop", async () => { render(); diff --git a/src/components/preview/preview.pw.tsx b/src/components/preview/preview.pw.tsx index 8dcff66d11..fcc9a8d8e1 100644 --- a/src/components/preview/preview.pw.tsx +++ b/src/components/preview/preview.pw.tsx @@ -12,7 +12,6 @@ import { assertCssValueIsApproximately, checkAccessibility, } from "../../../playwright/support/helper"; -import { HooksConfig } from "../../../playwright"; const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS]; const pixelsData = [256, 275, 300]; @@ -99,26 +98,13 @@ test.describe("check Preview component properties", () => { }); }); -test.describe("Border radius", () => { - test("should have the expected styling when roundedCornersOptOut is false", async ({ - mount, - page, - }) => { - await mount(); - - await expect(lineComponent(page)).toHaveCSS("border-radius", "8px"); - }); +test("should have the expected border radius styling", async ({ + mount, + page, +}) => { + await mount(); - test("should have the expected styling when roundedCornersOptOut is true", async ({ - mount, - page, - }) => { - await mount(, { - hooksConfig: { roundedCornersOptOut: true }, - }); - - await expect(lineComponent(page)).toHaveCSS("border-radius", "0px"); - }); + await expect(lineComponent(page)).toHaveCSS("border-radius", "8px"); }); test.describe("Accessibility tests for Preview component", () => { diff --git a/src/components/progress-tracker/progress-tracker.style.ts b/src/components/progress-tracker/progress-tracker.style.ts index cd2a897564..a7f2d796d7 100644 --- a/src/components/progress-tracker/progress-tracker.style.ts +++ b/src/components/progress-tracker/progress-tracker.style.ts @@ -53,14 +53,12 @@ const StyledProgressTracker = styled.div< const StyledProgressBar = styled.span< Pick >` - ${({ progress, error, theme }) => css` + ${({ progress, error }) => css` display: flex; position: relative; background-color: var(--colorsSemanticNeutral200); border: 1px solid ${getBorderColour({ progress, error })}; - border-radius: ${ - theme.roundedCornersOptOut ? "25px" : "var(--borderRadius400)" - }; + border-radius: var(--borderRadius400); overflow-x: hidden; width: 100% min-height: fit-content; @@ -112,13 +110,11 @@ const StyledValuesLabel = styled.span< const InnerBar = styled.span< Required> >` - ${({ progress, size, error, theme }) => css` + ${({ progress, size, error }) => css` position: relative; left: 0; background-color: ${getBackgroundColour({ progress, error })}; - border-radius: ${theme.roundedCornersOptOut - ? "25px" - : "var(--borderRadius400)"}; + border-radius: var(--borderRadius400); width: ${progress}%; min-width: 2px; height: ${getHeight(size)}; diff --git a/src/components/progress-tracker/progress-tracker.test.tsx b/src/components/progress-tracker/progress-tracker.test.tsx index 58cdbbdf01..55e7501844 100644 --- a/src/components/progress-tracker/progress-tracker.test.tsx +++ b/src/components/progress-tracker/progress-tracker.test.tsx @@ -1,7 +1,6 @@ import React from "react"; import { render, screen } from "@testing-library/react"; import ProgressTracker from "./progress-tracker.component"; -import CarbonProvider from "../carbon-provider"; import { testStyledSystemMargin } from "../../__spec_helper__/__internal__/test-utils"; test("renders with default labels", () => { @@ -161,20 +160,6 @@ test("renders with correct colour when progress is '100%'", () => { ); }); -// coverage -test("renders with correct border-radius when `roundedCornersOptOut` is true", () => { - render( - - - , - ); - - expect(screen.getByTestId("progress-bar")).toHaveStyle({ - borderRadius: "25px", - }); - expect(screen.getByTestId("inner-bar")).toHaveStyle({ borderRadius: "25px" }); -}); - testStyledSystemMargin( (props) => , () => screen.getByTestId("progress"), diff --git a/src/components/switch/__internal__/switch-slider.style.ts b/src/components/switch/__internal__/switch-slider.style.ts index 4bdacaa81c..1b3a69c14d 100644 --- a/src/components/switch/__internal__/switch-slider.style.ts +++ b/src/components/switch/__internal__/switch-slider.style.ts @@ -1,7 +1,6 @@ import styled, { css } from "styled-components"; import StyledValidationIcon from "../../../__internal__/validations/validation-icon.style"; -import baseTheme, { ThemeObject } from "../../../style/themes/base"; import SwitchSliderPanel from "./switch-slider-panel.style"; import { SwitchSliderProps } from "./switch-slider.component"; @@ -12,7 +11,6 @@ interface StyledSwitchSliderProps "checked" | "disabled" | "size" | "error" | "warning" > { isLoading?: boolean; - theme?: Partial; isDarkBackground?: boolean; } @@ -24,7 +22,6 @@ const StyledSwitchSlider = styled.div` size, error, warning, - theme, isDarkBackground, }: StyledSwitchSliderProps) => css` display: flex; @@ -38,9 +35,7 @@ const StyledSwitchSlider = styled.div` top: 0; width: 100% z-index: 2; - border-radius: ${ - theme?.roundedCornersOptOut ? "90px" : "var(--borderRadius400)" - }; + border-radius: var(--borderRadius400); border-style: solid; border-color: ${ isDarkBackground @@ -119,13 +114,6 @@ const StyledSwitchSlider = styled.div` ` } - ${ - size === "large" && - css` - ${theme?.roundedCornersOptOut ? "border-radius: 30px;" : ""} - ` - } - ${ isLoading && css` @@ -169,9 +157,5 @@ const HiddenContent = styled.div` `} `; -StyledSwitchSlider.defaultProps = { - theme: baseTheme, -}; - export { StyledSwitchSlider, HiddenContent }; export default StyledSwitchSlider; diff --git a/src/components/switch/__internal__/switch-slider.test.tsx b/src/components/switch/__internal__/switch-slider.test.tsx index 03e245f83f..62567dacd2 100644 --- a/src/components/switch/__internal__/switch-slider.test.tsx +++ b/src/components/switch/__internal__/switch-slider.test.tsx @@ -1,6 +1,5 @@ import React from "react"; import { render, screen } from "@testing-library/react"; -import CarbonProvider from "components/carbon-provider"; import SwitchSlider from "./switch-slider.component"; test('renders the text "OFF" in the panel by default', () => { @@ -109,32 +108,6 @@ test("when `checked` true and `disabled` true, the correct styles are applied", ); }); -// test required for styling coverage -test("when the consumer has opted out of rounded corners styling, the correct border-radius styles are applied", async () => { - render( - - - , - ); - - const switchPanel = screen.getByTestId("slider"); - - expect(switchPanel).toHaveStyle("border-radius: 90px"); -}); - -// test required for styling coverage -test("when `size` is large and the consumer has opted out of rounded corners styling, the correct border-radius styles are applied", async () => { - render( - - - , - ); - - const switchPanel = screen.getByTestId("slider"); - - expect(switchPanel).toHaveStyle("border-radius: 30px"); -}); - // coverage test("renders with normal styles when `isDarkBackground` is false", () => { render(); diff --git a/src/style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component.ts b/src/style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component.ts index 8ed7f5efe2..572357f86e 100644 --- a/src/style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component.ts +++ b/src/style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component.ts @@ -2,7 +2,6 @@ import styled from "styled-components"; import { baseTheme } from "../../themes"; import { ThemeObject } from "../../themes/base"; import generateCssVariables from "../generate-css-variables.util"; -import { CarbonProviderProps } from "../../../components/carbon-provider"; /** * @@ -11,16 +10,13 @@ import { CarbonProviderProps } from "../../../components/carbon-provider"; * */ -const CarbonScopedTokensProvider = styled.div< - ThemeObject & Pick ->` +const CarbonScopedTokensProvider = styled.div` margin: 0; padding: 0; width: auto; display: inline; - ${({ theme }) => - generateCssVariables(theme.compatibility, theme.roundedCornersOptOut)} + ${({ theme }) => generateCssVariables(theme.compatibility)} `; CarbonScopedTokensProvider.defaultProps = { diff --git a/src/style/design-tokens/generate-css-variables.util.test.tsx b/src/style/design-tokens/generate-css-variables.util.test.tsx index 44043eb47e..b3dc211fa0 100644 --- a/src/style/design-tokens/generate-css-variables.util.test.tsx +++ b/src/style/design-tokens/generate-css-variables.util.test.tsx @@ -1,31 +1,10 @@ -import { ThemeObject } from "style/themes"; import generateCssVariables from "./generate-css-variables.util"; -const assertTokenValues = ( - tokens: ThemeObject | Record, - optOut: boolean | undefined, -) => { - const resultAsArray = generateCssVariables(tokens, optOut).split(/\r\n/); - - resultAsArray.forEach((result) => { - const [key, value] = result.split(":"); - const output = - optOut && key.startsWith("--borderRadius") ? "0px" : tokens[key.slice(2)]; - - expect(value.slice(1, value.length - 1)).toEqual(output); - }); -}; - const tokens = { colorsActionMajor500: "pink", colorsUtility500: "yellow", colorsAction700: "black", }; -const borderRadiusTokens = { - borderRadius050: "4px", - borderRadius150: "12px", - borderRadius250: "20px", -}; let output: string; beforeEach(() => { @@ -44,18 +23,3 @@ test("should generate css variables format for all tokens", () => { expect(Object.keys(tokens).length).toEqual(matches?.length); }); - -// eslint-disable-next-line jest/expect-expect -test("does not override the borderRadius values if the opt out flag is false", () => { - assertTokenValues(borderRadiusTokens, false); -}); - -// eslint-disable-next-line jest/expect-expect -test("overrides the borderRadius values if the opt out flag is true", () => { - assertTokenValues(borderRadiusTokens, true); -}); - -// eslint-disable-next-line jest/expect-expect -test("does not override the values of tokens without borderRadius in name if the opt out flag is true", () => { - assertTokenValues(tokens, true); -}); diff --git a/src/style/design-tokens/generate-css-variables.util.ts b/src/style/design-tokens/generate-css-variables.util.ts index dfe2a7c802..d5ab453182 100644 --- a/src/style/design-tokens/generate-css-variables.util.ts +++ b/src/style/design-tokens/generate-css-variables.util.ts @@ -9,19 +9,7 @@ import { ThemeObject } from "../themes/base"; * */ -export default ( - theme: ThemeObject | Record, - roundedCornersOptOut?: boolean, -): string => +export default (theme: ThemeObject | Record): string => Object.entries(theme) - .map(([key, value]) => { - if ( - roundedCornersOptOut && - key.startsWith("borderRadius") && - key !== "borderRadiusCircle" - ) { - return `--${key}: 0px;`; - } - return `--${key}: ${value};`; - }) + .map(([key, value]) => `--${key}: ${value};`) .join("\r\n");