diff --git a/src/components/carbon-provider/__internal__/new-validation.context.ts b/src/components/carbon-provider/__internal__/new-validation.context.ts index 0bd3d0f336..dd308c74c6 100644 --- a/src/components/carbon-provider/__internal__/new-validation.context.ts +++ b/src/components/carbon-provider/__internal__/new-validation.context.ts @@ -5,10 +5,13 @@ export interface NewValidationContextProps { * * NOTE - Will eventually be set to `true` by default in the future. */ validationRedesignOptIn?: boolean; - /** Feature flag for opting out of styling components to have rounded corners. + /** (Deprecated) Feature flag for opting out of styling components to have rounded corners. * - * NOTE - Will eventually be set to `false` by default in the future. */ + * 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. */ focusRedesignOptOut?: boolean; } diff --git a/src/components/carbon-provider/carbon-provider.component.tsx b/src/components/carbon-provider/carbon-provider.component.tsx index 3b851af07a..0df5a34d19 100644 --- a/src/components/carbon-provider/carbon-provider.component.tsx +++ b/src/components/carbon-provider/carbon-provider.component.tsx @@ -9,6 +9,7 @@ import NewValidationContext, { NewValidationContextProps, } from "./__internal__/new-validation.context"; import TopModalProvider from "./__internal__/top-modal-provider.component"; +import Logger from "../../__internal__/utils/logger"; export interface CarbonProviderProps extends NewValidationContextProps { /* Content for the provider to wrap */ @@ -17,6 +18,9 @@ export interface CarbonProviderProps extends NewValidationContextProps { theme?: Partial; } +let deprecatedRoundedCornersOptOut = false; +let deprecatedFocusRedesignOptOut = false; + export const CarbonProvider = ({ children, theme = sageTheme, @@ -33,6 +37,23 @@ export const CarbonProvider = ({ 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( + "The `focusRedesignOptOut` feature flag has been deprecated and will soon be removed. " + + "Along with this feature flag, the legacy focus styling will also be removed. ", + ); + } + return ( { + 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") + .mockImplementation(() => {}); + + render( + <> + + Hello World! + + + Hello World! + + , + ); + + expect(loggerSpy).toHaveBeenCalledWith( + "The `focusRedesignOptOut` feature flag has been deprecated and will soon be removed. " + + "Along with this feature flag, the legacy focus styling will also be removed. ", + ); + expect(loggerSpy).toHaveBeenCalledTimes(1); + loggerSpy.mockRestore(); +});