Use SaltProviderNext

jpmorganchase · Jul 8, 2024 · fdaff9a · fdaff9a
1 parent 40a8418
commit fdaff9a
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 56 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -22,7 +22,7 @@ import { withResponsiveWrapper } from "docs/decorators/withResponsiveWrapper";
 import { WithTextSpacingWrapper } from "docs/decorators/withTextSpacingWrapper";
 import { withScaffold } from "docs/decorators/withScaffold";
 import { withDateMock } from "docs/decorators/withDateMock";
-import { SaltProvider, UNSTABLE_SaltProviderNext } from "@salt-ds/core";
+import { SaltProvider, SaltProviderNext } from "@salt-ds/core";
 import { DocsContainer } from "@storybook/addon-docs";
 import { initialize, mswLoader } from "msw-storybook-addon";
 
@@ -151,7 +151,7 @@ export const parameters: Parameters = {
       const ChosenProvider =
         /* @ts-ignore Waiting for https://github.com/storybookjs/storybook/issues/12982 */
         context.store.globals.globals?.themeNext === "enable"
-          ? UNSTABLE_SaltProviderNext
+          ? SaltProviderNext
           : SaltProvider;
       return (
         <DocsContainer context={context} {...rest}>

diff --git a/docs/components/QAContainer.tsx b/docs/components/QAContainer.tsx
@@ -2,7 +2,7 @@ import {
   makePrefixer,
   Mode,
   SaltProvider,
-  UNSTABLE_SaltProviderNext,
+  SaltProviderNext,
   useTheme,
 } from "@salt-ds/core";
 import { clsx } from "clsx";
@@ -60,9 +60,7 @@ const DensityBlock = ({
   mode: Mode;
 }) => {
   const { themeNext } = useTheme();
-  const ChosenSaltProvider = themeNext
-    ? UNSTABLE_SaltProviderNext
-    : SaltProvider;
+  const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider;
 
   return (
     <BackgroundBlock background={mode === "light" ? "white" : undefined}>
@@ -99,9 +97,7 @@ export const QAContainer = ({
   } as CSSProperties;
 
   const { themeNext } = useTheme();
-  const ChosenSaltProvider = themeNext
-    ? UNSTABLE_SaltProviderNext
-    : SaltProvider;
+  const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider;
 
   return (
     <div

diff --git a/docs/decorators/withTheme.tsx b/docs/decorators/withTheme.tsx
@@ -5,7 +5,7 @@ import {
   Panel,
   SaltProvider,
   useTheme,
-  UNSTABLE_SaltProviderNext,
+  SaltProviderNext,
 } from "@salt-ds/core";
 import { useEffect } from "react";
 
@@ -76,8 +76,7 @@ export const withTheme: Decorator = (StoryFn, context) => {
     actionFont,
   } = context.globals;
 
-  const Provider =
-    themeNext === "enable" ? UNSTABLE_SaltProviderNext : SaltProvider;
+  const Provider = themeNext === "enable" ? SaltProviderNext : SaltProvider;
 
   if (mode === "side-by-side" || mode === "stacked") {
     const isStacked = mode === "stacked";

diff --git a/packages/ag-grid-theme/src/examples/HDCompact.tsx b/packages/ag-grid-theme/src/examples/HDCompact.tsx
@@ -1,8 +1,4 @@
-import {
-  SaltProvider,
-  UNSTABLE_SaltProviderNext,
-  useTheme,
-} from "@salt-ds/core";
+import { SaltProvider, SaltProviderNext, useTheme } from "@salt-ds/core";
 import { AgGridReact, AgGridReactProps } from "ag-grid-react";
 import dataGridExampleColumns from "../dependencies/dataGridExampleColumns";
 import dataGridExampleData from "../dependencies/dataGridExampleData";
@@ -27,7 +23,7 @@ const HDCompact = (props: AgGridReactProps) => {
     density: "high",
   });
 
-  const Provider = themeNext ? UNSTABLE_SaltProviderNext : SaltProvider;
+  const Provider = themeNext ? SaltProviderNext : SaltProvider;
 
   return (
     <Provider density="high">

diff --git a/packages/core/src/__tests__/__e2e__/salt-provider/SaltProvider.cy.tsx b/packages/core/src/__tests__/__e2e__/salt-provider/SaltProvider.cy.tsx
@@ -4,7 +4,7 @@ import {
   useAriaAnnouncer,
   useDensity,
   useTheme,
-  UNSTABLE_SaltProviderNext,
+  SaltProviderNext,
 } from "@salt-ds/core";
 import { mount } from "cypress/react18";
 import { WindowProvider } from "@salt-ds/window";
@@ -322,9 +322,9 @@ describe("Given a SaltProviderNext", () => {
   describe("with no props set", () => {
     it("should apply default theme attributes to the html element", () => {
       mount(
-        <UNSTABLE_SaltProviderNext>
+        <SaltProviderNext>
           <TestComponent />
-        </UNSTABLE_SaltProviderNext>
+        </SaltProviderNext>
       );
 
       cy.get("div.salt-provider").should("have.length", 0);
@@ -342,9 +342,9 @@ describe("Given a SaltProviderNext", () => {
     });
     it("should read correct default values from provider and add an AriaAnnouncer", () => {
       mount(
-        <UNSTABLE_SaltProviderNext>
+        <SaltProviderNext>
           <TestComponent />
-        </UNSTABLE_SaltProviderNext>
+        </SaltProviderNext>
       );
       cy.get("#test-1")
         .should("exist")
@@ -403,7 +403,7 @@ describe("Given a SaltProviderNext", () => {
   describe("when nested", () => {
     it("should inherit values not passed as props", () => {
       mount(
-        <UNSTABLE_SaltProviderNext
+        <SaltProviderNext
           density="high"
           mode="dark"
           corner="rounded"
@@ -412,10 +412,10 @@ describe("Given a SaltProviderNext", () => {
           actionFont="Amplitude"
         >
           <TestComponent />
-          <UNSTABLE_SaltProviderNext density="medium">
+          <SaltProviderNext density="medium">
             <TestComponent id="test-2" />
-          </UNSTABLE_SaltProviderNext>
-        </UNSTABLE_SaltProviderNext>
+          </SaltProviderNext>
+        </SaltProviderNext>
       );
 
       cy.get("html.salt-theme-next").should("have.length", 1);
@@ -451,7 +451,7 @@ describe("Given a SaltProviderNext", () => {
     });
     it("should take different values set as props", () => {
       mount(
-        <UNSTABLE_SaltProviderNext
+        <SaltProviderNext
           density="high"
           mode="dark"
           corner="rounded"
@@ -460,16 +460,16 @@ describe("Given a SaltProviderNext", () => {
           actionFont="Amplitude"
         >
           <TestComponent />
-          <UNSTABLE_SaltProviderNext
+          <SaltProviderNext
             density="medium"
             corner="sharp"
             accent="blue"
             headingFont="Open Sans"
             actionFont="Open Sans"
           >
             <TestComponent id="test-2" />
-          </UNSTABLE_SaltProviderNext>
-        </UNSTABLE_SaltProviderNext>
+          </SaltProviderNext>
+        </SaltProviderNext>
       );
 
       cy.get("html.salt-theme-next").should("have.length", 1);

diff --git a/packages/core/src/__tests__/__e2e__/utils/useFloatingUI.cy.tsx b/packages/core/src/__tests__/__e2e__/utils/useFloatingUI.cy.tsx
@@ -2,7 +2,7 @@ import { mount } from "cypress/react18";
 import {
   useFloatingComponent,
   SaltProvider,
-  UNSTABLE_SaltProviderNext,
+  SaltProviderNext,
   useFloatingUI,
 } from "@salt-ds/core";
 
@@ -45,11 +45,11 @@ describe("Use useFloatingComponent", () => {
       cy.get("html.salt-theme").should("have.length", 1);
       cy.get("div.salt-provider.salt-theme").should("have.length", 1);
     });
-    it("should render a nested UNSTABLE_SaltProviderNext when used within another", () => {
+    it("should render a nested SaltProviderNext when used within another", () => {
       mount(
-        <UNSTABLE_SaltProviderNext>
+        <SaltProviderNext>
           <TestComponent focusManager={false} />
-        </UNSTABLE_SaltProviderNext>
+        </SaltProviderNext>
       );
 
       cy.get("html.salt-theme.salt-theme-next").should("have.length", 1);
@@ -70,11 +70,11 @@ describe("Use useFloatingComponent", () => {
       cy.get("html.salt-theme").should("have.length", 1);
       cy.get("div.salt-provider.salt-theme").should("have.length", 1);
     });
-    it("should render a nested UNSTABLE_SaltProviderNext when used within another", () => {
+    it("should render a nested SaltProviderNext when used within another", () => {
       mount(
-        <UNSTABLE_SaltProviderNext>
+        <SaltProviderNext>
           <TestComponent focusManager={true} />
-        </UNSTABLE_SaltProviderNext>
+        </SaltProviderNext>
       );
 
       cy.get("html.salt-theme.salt-theme-next").should("have.length", 1);

diff --git a/packages/core/src/salt-provider/SaltProvider.tsx b/packages/core/src/salt-provider/SaltProvider.tsx
@@ -36,7 +36,7 @@ import {
 export const DEFAULT_DENSITY = "medium";
 
 const DEFAULT_THEME_NAME = "salt-theme";
-const UNSTABLE_ADDITIONAL_THEME_NAME = "salt-theme-next";
+const DEFAULT_THEME_NAME_NEXT = "salt-theme-next";
 
 const DEFAULT_MODE = "light";
 const DEFAULT_CORNER: Corner = "sharp";
@@ -91,8 +91,8 @@ const getThemeNames = (
 ): ThemeName => {
   if (themeNext) {
     return themeName === DEFAULT_THEME_NAME
-      ? clsx(DEFAULT_THEME_NAME, UNSTABLE_ADDITIONAL_THEME_NAME)
-      : clsx(DEFAULT_THEME_NAME, UNSTABLE_ADDITIONAL_THEME_NAME, themeName);
+      ? clsx(DEFAULT_THEME_NAME, DEFAULT_THEME_NAME_NEXT)
+      : clsx(DEFAULT_THEME_NAME, DEFAULT_THEME_NAME_NEXT, themeName);
   } else {
     return themeName === DEFAULT_THEME_NAME
       ? themeName
@@ -246,7 +246,7 @@ function InternalSaltProvider({
   accent: accentProp,
   actionFont: actionFontProp,
 }: Omit<
-  SaltProviderProps & ThemeNextProps & UNSTABLE_SaltProviderNextProps,
+  SaltProviderProps & ThemeNextProps & SaltProviderNextProps,
   "enableStyleInjection"
 >) {
   const inheritedDensity = useContext(DensityContext);

diff --git a/packages/core/src/utils/useFloatingUI/useFloatingUI.tsx b/packages/core/src/utils/useFloatingUI/useFloatingUI.tsx
@@ -21,11 +21,7 @@ import {
   useContext,
   useMemo,
 } from "react";
-import {
-  SaltProvider,
-  UNSTABLE_SaltProviderNext,
-  useTheme,
-} from "../../salt-provider";
+import { SaltProvider, SaltProviderNext, useTheme } from "../../salt-provider";
 
 export interface FloatingComponentProps
   extends ComponentPropsWithoutRef<"div"> {
@@ -75,9 +71,7 @@ const DefaultFloatingComponent = forwardRef<
 
   const { themeNext } = useTheme();
 
-  const ChosenSaltProvider = themeNext
-    ? UNSTABLE_SaltProviderNext
-    : SaltProvider;
+  const ChosenSaltProvider = themeNext ? SaltProviderNext : SaltProvider;
 
   if (focusManagerProps && open) {
     return (

diff --git a/packages/core/stories/salt-provider/salt-provider-next.mdx b/packages/core/stories/salt-provider/salt-provider-next.mdx
@@ -24,11 +24,11 @@ density). Additional props will be made available to switch between different
 look.
 
 To use the new Salt Provider, you need to swap any existing `SaltProvider` to
-use the new `UNSTABLE_SaltProviderNext`, and also import a new theme CSS.
+use the new `SaltProviderNext`, and also import a new theme CSS.
 
 ```js static
 // Swap out existing SaltProvider
-import { UNSTABLE_SaltProviderNext } from "@salt-ds/core";
+import { SaltProviderNext } from "@salt-ds/core";
 ```
 
 ```js static
@@ -93,7 +93,7 @@ either blue or teal color palette, such as CTA button, checkbox, radio button,
 etc.
 
 ```tsx
-<UNSTABLE_SaltProviderNext accent="teal">
+<SaltProviderNext accent="teal">
 ```
 
 Under the hood, a new `data-accent` attribute is added alongside other style option
@@ -125,7 +125,7 @@ The `corner` prop can be used to toggle between `"sharp"` (default) and
 `"rounded"`.
 
 ```tsx
-<UNSTABLE_SaltProviderNext corner="rounded">
+<SaltProviderNext corner="rounded">
 ```
 
 ### Token Structure
@@ -200,7 +200,7 @@ A new `headingFont` prop is added to switch display and heading font family
 between Open Sans and Amplitude.
 
 ```
-<UNSTABLE_SaltProviderNext headingFont="Amplitude">
+<SaltProviderNext headingFont="Amplitude">
 ```
 
 When Amplitude is used, default heading font weight is set to medium (instead
@@ -231,7 +231,7 @@ A new `actionFont` prop is added to switch action font family between Open Sans
 and Amplitude, which impacts Button, Toggle Button and Segmented Button Group.
 
 ```
-<UNSTABLE_SaltProviderNext actionFont="Amplitude">
+<SaltProviderNext actionFont="Amplitude">
 ```
 
 Like `headingFont` option above, you'll need the same font declaration for Amplitude