Make SaltProviderNext stable (#3714)

jpmorganchase · Jul 9, 2024 · 9abf267 · 9abf267
1 parent 5408d88
commit 9abf267
Show file tree

Hide file tree

Showing 35 changed files with 410 additions and 146 deletions.
diff --git a/.changeset/ten-spoons-drive.md b/.changeset/ten-spoons-drive.md
@@ -0,0 +1,7 @@
+---
+"@salt-ds/core": minor
+---
+
+Marked `SaltProviderNext` being stable.
+
+If you're using existing type or variable with `UNSTABLE_` prefix, they are now deprecated but will still work.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,22 +1,22 @@
-import type { ArgTypes, GlobalTypes, Parameters } from "@storybook/types";
-import "@salt-ds/theme/index.css";
-import "@salt-ds/theme/css/theme-next.css";
-import "@fontsource/open-sans/300.css";
 import "@fontsource/open-sans/300-italic.css";
-import "@fontsource/open-sans/400.css";
+import "@fontsource/open-sans/300.css";
 import "@fontsource/open-sans/400-italic.css";
-import "@fontsource/open-sans/500.css";
+import "@fontsource/open-sans/400.css";
 import "@fontsource/open-sans/500-italic.css";
-import "@fontsource/open-sans/600.css";
+import "@fontsource/open-sans/500.css";
 import "@fontsource/open-sans/600-italic.css";
-import "@fontsource/open-sans/700.css";
+import "@fontsource/open-sans/600.css";
 import "@fontsource/open-sans/700-italic.css";
-import "@fontsource/open-sans/800.css";
+import "@fontsource/open-sans/700.css";
 import "@fontsource/open-sans/800-italic.css";
+import "@fontsource/open-sans/800.css";
 import "@fontsource/pt-mono";
+import "@salt-ds/theme/css/theme-next.css";
+import "@salt-ds/theme/index.css";
+import type { ArgTypes, GlobalTypes, Parameters } from "@storybook/types";
 import "./styles.css";
 
-import { SaltProvider, UNSTABLE_SaltProviderNext } from "@salt-ds/core";
+import { SaltProvider, SaltProviderNext } from "@salt-ds/core";
 import { DocsContainer } from "@storybook/addon-docs";
 import { withDateMock } from "docs/decorators/withDateMock";
 import { withResponsiveWrapper } from "docs/decorators/withResponsiveWrapper";
@@ -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
@@ -1,7 +1,7 @@
 import {
   type Mode,
   SaltProvider,
-  UNSTABLE_SaltProviderNext,
+  SaltProviderNext,
   makePrefixer,
   useTheme,
 } from "@salt-ds/core";
@@ -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
@@ -2,7 +2,7 @@ import {
   ModeValues,
   Panel,
   SaltProvider,
-  UNSTABLE_SaltProviderNext,
+  SaltProviderNext,
   getCharacteristicValue,
   useTheme,
 } from "@salt-ds/core";
@@ -77,8 +77,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, type 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
@@ -1,6 +1,6 @@
 import {
   SaltProvider,
-  UNSTABLE_SaltProviderNext,
+  SaltProviderNext,
   ownerWindow,
   useAriaAnnouncer,
   useDensity,
@@ -22,9 +22,14 @@ const TestComponent = ({
   const {
     theme,
     mode,
+    themeNext,
+    corner,
+    accent,
+    actionFont,
+    headingFont,
+    // Test backwards compatibilty using `UNSTABLE_` variables
     UNSTABLE_corner,
     UNSTABLE_accent,
-    themeNext,
     UNSTABLE_actionFont,
     UNSTABLE_headingFont,
   } = useTheme();
@@ -39,11 +44,16 @@ const TestComponent = ({
       data-theme={theme}
       data-mode={mode}
       data-announcer={announcerPresent}
-      data-corner={UNSTABLE_corner}
-      data-accent={UNSTABLE_accent}
-      data-heading-font={UNSTABLE_headingFont}
-      data-action-font={UNSTABLE_actionFont}
+      data-corner={corner}
+      data-accent={accent}
+      data-heading-font={headingFont}
+      data-action-font={actionFont}
       data-themeNext={themeNext}
+      // Test backwards compatibilty using `UNSTABLE_` variables
+      data-unstable-corner={UNSTABLE_corner}
+      data-unstable-accent={UNSTABLE_accent}
+      data-unstable-heading-font={UNSTABLE_headingFont}
+      data-unstable-action-font={UNSTABLE_actionFont}
     />
   );
 };
@@ -312,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);
@@ -332,36 +342,40 @@ 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")
         .and("have.attr", "data-density", "medium")
         .and("have.attr", "data-mode", "light")
         .and("have.attr", "data-announcer", "true")
+        .and("have.attr", "data-themeNext", "true")
         .and("have.attr", "data-corner", "sharp")
         .and("have.attr", "data-accent", "blue")
         .and("have.attr", "data-heading-font", "Open Sans")
         .and("have.attr", "data-action-font", "Open Sans")
-        .and("have.attr", "data-themeNext", "true");
+        .and("have.attr", "data-unstable-corner", "sharp")
+        .and("have.attr", "data-unstable-accent", "blue")
+        .and("have.attr", "data-unstable-heading-font", "Open Sans")
+        .and("have.attr", "data-unstable-action-font", "Open Sans");
       cy.get("[aria-live]").should("exist");
     });
   });
 
   describe("with props set", () => {
     it("should allow pass in multiple theme names", () => {
       mount(
-        <UNSTABLE_SaltProviderNext
+        <SaltProviderNext
           density="high"
           mode="dark"
           corner="rounded"
           accent="teal"
           theme="custom-theme-1 custom-theme-2"
         >
           <TestComponent />
-        </UNSTABLE_SaltProviderNext>,
+        </SaltProviderNext>,
       );
 
       cy.get("html")
@@ -389,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"
@@ -398,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);
@@ -415,6 +429,10 @@ describe("Given a SaltProviderNext", () => {
         .and("have.attr", "data-accent", "teal")
         .and("have.attr", "data-heading-font", "Amplitude")
         .and("have.attr", "data-action-font", "Amplitude")
+        .and("have.attr", "data-unstable-corner", "rounded")
+        .and("have.attr", "data-unstable-accent", "teal")
+        .and("have.attr", "data-unstable-heading-font", "Amplitude")
+        .and("have.attr", "data-unstable-action-font", "Amplitude")
         .and("have.attr", "data-announcer", "true");
 
       cy.get("#test-2")
@@ -425,11 +443,15 @@ describe("Given a SaltProviderNext", () => {
         .and("have.attr", "data-accent", "teal")
         .and("have.attr", "data-heading-font", "Amplitude")
         .and("have.attr", "data-action-font", "Amplitude")
+        .and("have.attr", "data-unstable-corner", "rounded")
+        .and("have.attr", "data-unstable-accent", "teal")
+        .and("have.attr", "data-unstable-heading-font", "Amplitude")
+        .and("have.attr", "data-unstable-action-font", "Amplitude")
         .and("have.attr", "data-announcer", "true");
     });
     it("should take different values set as props", () => {
       mount(
-        <UNSTABLE_SaltProviderNext
+        <SaltProviderNext
           density="high"
           mode="dark"
           corner="rounded"
@@ -438,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);
@@ -461,6 +483,10 @@ describe("Given a SaltProviderNext", () => {
         .and("have.attr", "data-accent", "teal")
         .and("have.attr", "data-heading-font", "Amplitude")
         .and("have.attr", "data-action-font", "Amplitude")
+        .and("have.attr", "data-unstable-corner", "rounded")
+        .and("have.attr", "data-unstable-accent", "teal")
+        .and("have.attr", "data-unstable-heading-font", "Amplitude")
+        .and("have.attr", "data-unstable-action-font", "Amplitude")
         .and("have.attr", "data-announcer", "true");
 
       cy.get("#test-2")
@@ -471,6 +497,10 @@ describe("Given a SaltProviderNext", () => {
         .and("have.attr", "data-accent", "blue")
         .and("have.attr", "data-heading-font", "Open Sans")
         .and("have.attr", "data-action-font", "Open Sans")
+        .and("have.attr", "data-unstable-corner", "sharp")
+        .and("have.attr", "data-unstable-accent", "blue")
+        .and("have.attr", "data-unstable-heading-font", "Open Sans")
+        .and("have.attr", "data-unstable-action-font", "Open Sans")
         .and("have.attr", "data-announcer", "true");
     });
   });

diff --git a/packages/core/src/__tests__/__e2e__/utils/useFloatingUI.cy.tsx b/packages/core/src/__tests__/__e2e__/utils/useFloatingUI.cy.tsx
@@ -1,6 +1,6 @@
 import {
   SaltProvider,
-  UNSTABLE_SaltProviderNext,
+  SaltProviderNext,
   useFloatingComponent,
   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);