refactor(carbon-provider): move contexts into an internal directory

Moves `TopModalContext` and `NewValidationContext` into an `__internal__` directory within `CarbonProvider` directory. BREAKING CHANGE: contexts have been moved to an internal directory
Sage · Jun 27, 2024 · 725f8fe · 725f8fe
1 parent 21a2f3b
commit 725f8fe
Show file tree

Hide file tree

Showing 23 changed files with 55 additions and 64 deletions.
diff --git a/src/__internal__/fieldset/fieldset.component.tsx b/src/__internal__/fieldset/fieldset.component.tsx
@@ -7,7 +7,7 @@ import {
   StyledLegendContent,
 } from "./fieldset.style";
 import ValidationIcon from "../validations/validation-icon.component";
-import { NewValidationContext } from "../../components/carbon-provider/carbon-provider.component";
+import NewValidationContext from "../../components/carbon-provider/__internal__/new-validation.context";
 import { InputGroupBehaviour, InputGroupContext } from "../input-behaviour";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 

diff --git a/src/__internal__/focus-trap/focus-trap.component.tsx b/src/__internal__/focus-trap/focus-trap.component.tsx
@@ -17,7 +17,7 @@ import ModalContext, {
   ModalContextProps,
 } from "../../components/modal/__internal__/modal.context";
 import usePrevious from "../../hooks/__internal__/usePrevious";
-import TopModalContext from "../../components/carbon-provider/top-modal-context";
+import TopModalContext from "../../components/carbon-provider/__internal__/top-modal.context";
 
 export const TAB_GUARD_TOP = "tab-guard-top";
 export const TAB_GUARD_BOTTOM = "tab-guard-bottom";

diff --git a/src/__internal__/focus-trap/focus-trap.test.tsx b/src/__internal__/focus-trap/focus-trap.test.tsx
@@ -13,7 +13,7 @@ import { act } from "react-dom/test-utils";
 import FocusTrap, { FocusTrapProps } from "./focus-trap.component";
 import { RadioButton, RadioButtonGroup } from "../../components/radio-button";
 import ModalContext from "../../components/modal/__internal__/modal.context";
-import TopModalContext from "../../components/carbon-provider/top-modal-context";
+import TopModalContext from "../../components/carbon-provider/__internal__/top-modal.context";
 import { Option, Select } from "../../components/select";
 import { Checkbox } from "../../components/checkbox";
 

diff --git a/src/__internal__/input/input-presentation.component.tsx b/src/__internal__/input/input-presentation.component.tsx
@@ -4,7 +4,7 @@ import InputPresentationStyle, {
   StyledInputPresentationContainer,
 } from "./input-presentation.style";
 import { InputContext, InputGroupContext } from "../input-behaviour";
-import { NewValidationContext } from "../../components/carbon-provider/carbon-provider.component";
+import NewValidationContext from "../../components/carbon-provider/__internal__/new-validation.context";
 import { ValidationProps } from "../validations";
 
 export type Sizes = "small" | "medium" | "large";

diff --git a/src/__internal__/input/input-presentation.spec.tsx b/src/__internal__/input/input-presentation.spec.tsx
@@ -11,7 +11,7 @@ import StyledInput from "./input.style";
 import sizes from "./input-sizes.style";
 import { assertStyleMatch } from "../../__spec_helper__/__internal__/test-utils";
 import { InputContext, InputGroupContext } from "../input-behaviour";
-import { NewValidationContext } from "../../components/carbon-provider/carbon-provider.component";
+import NewValidationContext from "../../components/carbon-provider/__internal__/new-validation.context";
 
 function render(props: InputPresentationProps) {
   return mount(<InputPresentation {...props} />);

diff --git a/src/components/button-toggle/button-toggle-group/button-toggle-group.component.tsx b/src/components/button-toggle/button-toggle-group/button-toggle-group.component.tsx
@@ -13,7 +13,7 @@ import { filterStyledSystemMarginProps } from "../../../style/utils";
 import { TooltipProvider } from "../../../__internal__/tooltip-provider";
 import { InputGroupBehaviour } from "../../../__internal__/input-behaviour";
 import Events from "../../../__internal__/utils/helpers/events";
-import { NewValidationContext } from "../../carbon-provider/carbon-provider.component";
+import NewValidationContext from "../../carbon-provider/__internal__/new-validation.context";
 import ButtonToggleGroupContext from "./__internal__/button-toggle-group.context";
 
 export interface ButtonToggleGroupProps extends MarginProps, TagProps {

diff --git a/src/components/carbon-provider/__internal__/new-validation.context.ts b/src/components/carbon-provider/__internal__/new-validation.context.ts
@@ -0,0 +1,15 @@
+import React from "react";
+
+export interface NewValidationContextProps {
+  /** Feature flag for opting in to the latest validation designs for components that support it.
+   *
+   * 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.
+   *
+   * NOTE - Will eventually be set to `false` by default in the future. */
+  roundedCornersOptOut?: boolean;
+  focusRedesignOptOut?: boolean;
+}
+
+export default React.createContext<NewValidationContextProps>({});
diff --git a/...nts/carbon-provider/top-modal-context.tsx → ...ternal__/top-modal-provider.component.tsx b/...nts/carbon-provider/top-modal-context.tsx → ...ternal__/top-modal-provider.component.tsx
@@ -1,24 +1,7 @@
-import React, {
-  createContext,
-  useState,
-  useEffect,
-  useRef,
-  ReactNode,
-} from "react";
-
-type TopModalContextProps = {
-  topModal: HTMLElement | null;
-};
-
-const TopModalContext = createContext<TopModalContextProps>({
-  topModal: null,
-});
+import React, { useState, useEffect, useRef, ReactNode } from "react";
+import TopModalContext from "./top-modal.context";
 
-export const TopModalContextProvider = ({
-  children,
-}: {
-  children: ReactNode;
-}) => {
+export const TopModalProvider = ({ children }: { children: ReactNode }) => {
   const [topModal, setTopModal] = useState<HTMLElement | null>(null);
 
   // can't add the setter to the global list inside useEffect because that doesn't run until
@@ -50,4 +33,4 @@ export const TopModalContextProvider = ({
   );
 };
 
-export default TopModalContext;
+export default TopModalProvider;
diff --git a/src/components/carbon-provider/__internal__/top-modal.context.ts b/src/components/carbon-provider/__internal__/top-modal.context.ts
@@ -0,0 +1,9 @@
+import React from "react";
+
+type TopModalContextProps = {
+  topModal: HTMLElement | null;
+};
+
+export default React.createContext<TopModalContextProps>({
+  topModal: null,
+});
diff --git a/...arbon-provider/top-modal-context.test.tsx → ...-provider/__internal__/top-modal.test.tsx b/...arbon-provider/top-modal-context.test.tsx → ...-provider/__internal__/top-modal.test.tsx
@@ -1,13 +1,9 @@
 import React from "react";
 import { render } from "@testing-library/react";
-import { TopModalContextProvider } from "./top-modal-context";
+import TopModalProvider from "./top-modal-provider.component";
 
 const MockComponent = ({ providerOpen }: { providerOpen: boolean }) => (
-  <>
-    {providerOpen && (
-      <TopModalContextProvider>some children</TopModalContextProvider>
-    )}
-  </>
+  <>{providerOpen && <TopModalProvider>some children</TopModalProvider>}</>
 );
 
 describe("TopModalContextProvider", () => {

diff --git a/src/components/carbon-provider/carbon-provider.component.tsx b/src/components/carbon-provider/carbon-provider.component.tsx
@@ -1,34 +1,22 @@
-import React, { createContext, useContext } from "react";
+import React, { useContext } from "react";
 import { ThemeProvider } from "styled-components";
 
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider";
 
 import { sageTheme } from "../../style/themes";
 import type { ThemeObject } from "../../style/themes";
+import NewValidationContext, {
+  NewValidationContextProps,
+} from "./__internal__/new-validation.context";
+import TopModalProvider from "./__internal__/top-modal-provider.component";
 
-import { TopModalContextProvider } from "./top-modal-context";
-
-export interface CarbonProviderProps {
+export interface CarbonProviderProps extends NewValidationContextProps {
   /* Content for the provider to wrap */
   children: React.ReactNode;
   /** Theme which specifies styles to apply to all child components. Set to `sageTheme` by default. */
   theme?: Partial<ThemeObject>;
-  /** Feature flag for opting in to the new validation redesign for components that support it.
-   *
-   * 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. */
-  roundedCornersOptOut?: boolean;
-  focusRedesignOptOut?: boolean;
 }
 
-export const NewValidationContext = createContext<
-  Pick<
-    CarbonProviderProps,
-    "validationRedesignOptIn" | "roundedCornersOptOut" | "focusRedesignOptOut"
-  >
->({});
-
 export const CarbonProvider = ({
   children,
   theme = sageTheme,
@@ -60,7 +48,7 @@ export const CarbonProvider = ({
             roundedCornersOptOut: roundedCornersOptOutValue,
           }}
         >
-          <TopModalContextProvider>{children}</TopModalContextProvider>
+          <TopModalProvider>{children}</TopModalProvider>
         </NewValidationContext.Provider>
       </CarbonScopedTokensProvider>
     </ThemeProvider>

diff --git a/src/components/checkbox/checkbox-group/checkbox-group.component.tsx b/src/components/checkbox/checkbox-group/checkbox-group.component.tsx
@@ -7,7 +7,7 @@ import { filterStyledSystemMarginProps } from "../../../style/utils";
 import { TooltipProvider } from "../../../__internal__/tooltip-provider";
 import { ValidationProps } from "../../../__internal__/validations";
 import FormSpacingProvider from "../../../__internal__/form-spacing-provider";
-import { NewValidationContext } from "../../carbon-provider/carbon-provider.component";
+import NewValidationContext from "../../carbon-provider/__internal__/new-validation.context";
 import ValidationMessage from "../../../__internal__/validation-message/validation-message.component";
 import Box from "../../box";
 import { ErrorBorder } from "../../textbox/textbox.style";

diff --git a/src/components/checkbox/checkbox.component.tsx b/src/components/checkbox/checkbox.component.tsx
@@ -11,7 +11,7 @@ import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import CheckboxGroupContext from "./checkbox-group/__internal__/checkbox-group.context";
 import Logger from "../../__internal__/utils/logger";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
-import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
+import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
 
 export interface CheckboxProps extends CommonCheckableInputProps, MarginProps {
   /** Breakpoint for adaptive spacing (left margin changes to 0). Enables the adaptive behaviour when set */

diff --git a/src/components/fieldset/fieldset.component.tsx b/src/components/fieldset/fieldset.component.tsx
@@ -3,7 +3,7 @@ import { MarginProps } from "styled-system";
 
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { FieldsetStyle, StyledLegend } from "./fieldset.style";
-import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
+import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
 import FormSpacingProvider from "../../__internal__/form-spacing-provider";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 

diff --git a/src/components/numeral-date/numeral-date.component.tsx b/src/components/numeral-date/numeral-date.component.tsx
@@ -16,7 +16,7 @@ import useLocale from "../../hooks/__internal__/useLocale";
 import FormField from "../../__internal__/form-field";
 import { InputGroupBehaviour } from "../../__internal__/input-behaviour";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
-import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
+import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
 import NumeralDateContext from "./__internal__/numeral-date.context";
 import FormSpacingProvider from "../../__internal__/form-spacing-provider";
 import Logger from "../../__internal__/utils/logger";

diff --git a/src/components/portrait/portrait.component.tsx b/src/components/portrait/portrait.component.tsx
@@ -15,7 +15,7 @@ import {
   StyledPortraitGravatar,
 } from "./portrait.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
-import { NewValidationContext as RoundedCornersOptOutContext } from "../carbon-provider/carbon-provider.component";
+import RoundedCornersOptOutContext from "../carbon-provider/__internal__/new-validation.context";
 
 export type PortraitShapes = "circle" | "square";
 

diff --git a/src/components/radio-button/radio-button-group/radio-button-group.component.tsx b/src/components/radio-button/radio-button-group/radio-button-group.component.tsx
@@ -11,7 +11,7 @@ import { filterStyledSystemMarginProps } from "../../../style/utils";
 import { TooltipProvider } from "../../../__internal__/tooltip-provider";
 import { ValidationProps } from "../../../__internal__/validations";
 import Logger from "../../../__internal__/utils/logger";
-import { NewValidationContext } from "../../carbon-provider/carbon-provider.component";
+import NewValidationContext from "../../carbon-provider/__internal__/new-validation.context";
 import ValidationMessage from "../../../__internal__/validation-message/validation-message.component";
 import Box from "../../box";
 import { ErrorBorder } from "../../textbox/textbox.style";

diff --git a/src/components/radio-button/radio-button.component.tsx b/src/components/radio-button/radio-button.component.tsx
@@ -7,7 +7,7 @@ import CheckableInput from "../../__internal__/checkable-input/checkable-input.c
 import RadioButtonSvg from "./radio-button-svg.component";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
-import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
+import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
 
 interface InternalRadioButtonProps {
   inline?: boolean;

diff --git a/src/components/switch/switch.component.tsx b/src/components/switch/switch.component.tsx
@@ -10,7 +10,7 @@ import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint"
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import Logger from "../../__internal__/utils/logger";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
-import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
+import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
 import ValidationMessage from "../../__internal__/validation-message/validation-message.component";
 import Box from "../box";
 import Label from "../../__internal__/label";

diff --git a/src/components/text-editor/text-editor.component.tsx b/src/components/text-editor/text-editor.component.tsx
@@ -50,7 +50,7 @@ import {
   BlockType,
 } from "./types";
 import { LinkPreviewProps } from "../link-preview";
-import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
+import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
 import { ErrorBorder, StyledHintText } from "../textbox/textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";

diff --git a/src/components/textarea/textarea.component.tsx b/src/components/textarea/textarea.component.tsx
@@ -14,7 +14,7 @@ import guid from "../../__internal__/utils/helpers/guid";
 import StyledTextarea, { MIN_HEIGHT } from "./textarea.style";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
-import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
+import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
 import { ErrorBorder, StyledHintText } from "../textbox/textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
 import Box from "../box";

diff --git a/src/components/textbox/textbox.component.tsx b/src/components/textbox/textbox.component.tsx
@@ -19,7 +19,7 @@ import useCharacterCount from "../../hooks/__internal__/useCharacterCount";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
 import { ErrorBorder, StyledHintText } from "./textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
-import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
+import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
 import NumeralDateContext from "../numeral-date/__internal__/numeral-date.context";
 import Box from "../box";
 import Logger from "../../__internal__/utils/logger";

diff --git a/src/hooks/__internal__/useModalAria/useModalAria.tsx b/src/hooks/__internal__/useModalAria/useModalAria.tsx
@@ -1,5 +1,5 @@
 import { useContext, useEffect } from "react";
-import TopModalContext from "../../../components/carbon-provider/top-modal-context";
+import TopModalContext from "../../../components/carbon-provider/__internal__/top-modal.context";
 
 export default function useModalAria(
   containerRef: React.RefObject<HTMLDivElement>